@extends('layouts.app')

@section('title', 'Liste des Membres')

@section('content')
<div class="container-fluid py-3">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0 fw-bold">LISTE DES MEMBRES</h4>
        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addMembreModal">
            <i class="bi bi-plus-lg me-1"></i>Ajouter
        </button>
    </div>

    <!-- Stats Cards -->
    <div class="row g-2 mb-3">
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-3 d-flex justify-content-between align-items-center">
                    <div>
                        <small class="text-muted d-block mb-1">Total Commandes</small>
                        <h5 class="mb-0">{{ $stats['total_commandes'] ?? 0 }}</h5>
                    </div>
                    <div class="bg-primary rounded p-2">
                        <i class="bi bi-box-seam text-white" style="font-size: 18px;"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-3 d-flex justify-content-between align-items-center">
                    <div>
                        <small class="text-muted d-block mb-1">Confirmées</small>
                        <h5 class="mb-0">{{ $stats['confirmees'] ?? 0 }}</h5>
                    </div>
                    <div class="bg-success rounded p-2">
                        <i class="bi bi-check-circle text-white" style="font-size: 18px;"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-3 d-flex justify-content-between align-items-center">
                    <div>
                        <small class="text-muted d-block mb-1">Livrées</small>
                        <h5 class="mb-0">{{ $stats['livrees'] ?? 0 }}</h5>
                    </div>
                    <div class="bg-info rounded p-2">
                        <i class="bi bi-truck text-white" style="font-size: 18px;"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-3 d-flex justify-content-between align-items-center">
                    <div>
                        <small class="text-muted d-block mb-1">Actifs</small>
                        <h5 class="mb-0">{{ $stats['activites'] ?? 0 }}</h5>
                    </div>
                    <div class="bg-warning rounded p-2">
                        <i class="bi bi-people-fill text-white" style="font-size: 18px;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card border-0 shadow-sm mb-3">
        <div class="card-body p-3">
            <form id="filterForm" method="GET">
                <div class="row g-2">
                    <div class="col-md-3">
                        <label class="form-label small">Rechercher</label>
                        <input type="text" class="form-control form-control-sm" name="search" 
                               placeholder="Nom, email..." value="{{ request('search') }}">
                    </div>

                    <div class="col-md-2">
                        <label class="form-label small">Magasin</label>
                        <select class="form-select form-select-sm" name="magasin">
                            <option value="Tous">Tous</option>
                            @foreach($magasins ?? [] as $magasin)
                                <option value="{{ $magasin }}" {{ request('magasin') == $magasin ? 'selected' : '' }}>
                                    {{ $magasin }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label class="form-label small">Service</label>
                        <select class="form-select form-select-sm" name="service">
                            <option value="Tous">Tous</option>
                            @foreach($services ?? [] as $service)
                                <option value="{{ $service }}" {{ request('service') == $service ? 'selected' : '' }}>
                                    {{ $service }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label class="form-label small">Statut</label>
                        <select class="form-select form-select-sm" name="status">
                            <option value="Tous">Tous</option>
                            <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>En ligne</option>
                            <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Hors ligne</option>
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label class="form-label small">Type Paiement</label>
                        <select class="form-select form-select-sm" name="type_paiement">
                            <option value="Tous">Tous</option>
                            <option value="Commission" {{ request('type_paiement') == 'Commission' ? 'selected' : '' }}>Commission</option>
                            <option value="Salaire" {{ request('type_paiement') == 'Salaire' ? 'selected' : '' }}>Salaire</option>
                        </select>
                    </div>

                    <div class="col-md-1 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary btn-sm w-100">
                            <i class="bi bi-funnel"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Members Table -->
    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
            @if(isset($equipes) && $equipes->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead style="background: #f8f9fa;">
                            <tr>
                                <th class="border-0 small">MEMBRE</th>
                                <th class="border-0 text-center small">TYPE</th>
                                <th class="border-0 text-center small">ASSIGNATIONS</th>
                                <th class="border-0 text-center small">PERFORMANCE</th>
                                <th class="border-0 text-center small">PERMISSIONS</th>
                                <th class="border-0 text-center small">STATUT</th>
                                <th class="border-0 text-center small">ACTIONS</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($equipes as $membre)
                            <tr>
                                <!-- Membre Info -->
                                <td class="small">
                                    <div class="d-flex align-items-center">
                                        <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-2" 
                                             style="width: 32px; height: 32px; font-size: 12px; font-weight: bold;">
                                            {{ strtoupper(substr($membre->name, 0, 1)) }}
                                        </div>
                                        <div>
                                            <div class="fw-500" style="font-size: 12px;">{{ $membre->name }}</div>
                                            @if($membre->email)
                                                <small class="text-muted" style="font-size: 10px;">{{ $membre->email }}</small>
                                            @endif
                                            @if($membre->phone)
                                                <br><small class="text-muted" style="font-size: 10px;"><i class="bi bi-phone"></i> {{ $membre->phone }}</small>
                                            @endif
                                        </div>
                                    </div>
                                </td>

                                <!-- Type Paiement -->
                                <td class="text-center">
                                    @if($membre->type_paiement === 'Commission')
                                        <span class="badge bg-info" style="font-size: 10px;">
                                            {{ $membre->commission_rate }}%
                                        </span>
                                    @else
                                        <span class="badge bg-success" style="font-size: 10px;">
                                            {{ number_format($membre->monthly_salary, 0) }} MAD
                                        </span>
                                    @endif
                                </td>

                                <!-- Assignations -->
                                <td class="text-center small">
                                    <div style="font-size: 11px;">
                                        @if($membre->magasin)
                                            <small><i class="bi bi-shop"></i> {{ $membre->magasin }}</small>
                                        @endif
                                        @if($membre->service)
                                            <br><small><i class="bi bi-briefcase"></i> {{ $membre->service }}</small>
                                        @endif
                                        @if(!$membre->magasin && !$membre->service)
                                            <small class="text-muted">-</small>
                                        @endif
                                    </div>
                                </td>

                                <!-- Performance -->
                                <td class="text-center">
                                    <div class="d-flex justify-content-center gap-1 flex-wrap">
                                        <span class="badge bg-secondary" style="font-size: 10px;">
                                            {{ $membre->total_commandes ?? 0 }}
                                        </span>
                                        <span class="badge bg-success" style="font-size: 10px;">
                                            {{ $membre->confirmees ?? 0 }}
                                        </span>
                                        <span class="badge bg-info" style="font-size: 10px;">
                                            {{ $membre->livrees ?? 0 }}
                                        </span>
                                    </div>
                                </td>

                                <!-- Permissions -->
                                <td class="text-center">
                                    @php
                                        $permissions = json_decode($membre->permissions ?? '[]', true);
                                        $permCount = count($permissions);
                                    @endphp
                                    
                                    @if($permCount > 0)
                                        <button class="btn btn-xs btn-outline-primary" 
                                                onclick="showPermissions({{ $membre->id }}, {{ json_encode($permissions) }})"
                                                style="font-size: 10px; padding: 4px 6px;">
                                            {{ $permCount }} perm
                                        </button>
                                    @else
                                        <span class="badge bg-warning" style="font-size: 10px;">0</span>
                                    @endif
                                </td>

                                <!-- Statut -->
                                <td class="text-center">
                                    <div class="form-check form-switch d-flex justify-content-center">
                                        <input class="form-check-input" type="checkbox" 
                                               {{ $membre->status === 'active' ? 'checked' : '' }}
                                               onchange="toggleStatus({{ $membre->id }})"
                                               style="cursor: pointer; width: 32px; height: 18px;">
                                    </div>
                                </td>

                                <!-- Actions -->
                                <td class="text-center">
                                    <div class="btn-group btn-group-sm">
                                        <button class="btn btn-outline-primary btn-sm" 
                                                onclick="editMembre({{ json_encode($membre) }})"
                                                title="Modifier"
                                                style="font-size: 11px; padding: 4px 6px;">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <button class="btn btn-outline-info btn-sm" 
                                                onclick="viewStats({{ $membre->id }})"
                                                title="Stats"
                                                style="font-size: 11px; padding: 4px 6px;">
                                            <i class="bi bi-graph-up"></i>
                                        </button>
                                        <button class="btn btn-outline-danger btn-sm" 
                                                onclick="deleteMembre({{ $membre->id }}, '{{ $membre->name }}')"
                                                title="Supprimer"
                                                style="font-size: 11px; padding: 4px 6px;">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="text-center py-4">
                    <i class="bi bi-people-fill text-muted" style="font-size: 32px;"></i>
                    <h6 class="mt-2">Aucun membre dans l'équipe</h6>
                    <p class="text-muted small">Commencez par ajouter votre premier membre.</p>
                    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addMembreModal">
                        <i class="bi bi-plus-lg me-1"></i>Ajouter
                    </button>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- MODAL: AJOUTER UN MEMBRE -->
<div class="modal fade" id="addMembreModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 500px; max-height: 90vh;">
        <div class="modal-content" style="max-height: 90vh; display: flex; flex-direction: column;">
            <div class="modal-header border-0 bg-primary text-white p-2" style="flex-shrink: 0;">
                <h6 class="modal-title mb-0" style="font-size: 13px;"><i class="bi bi-person-plus me-1"></i>Ajouter membre</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" style="transform: scale(0.8);"></button>
            </div>
            <form id="addMembreForm" style="display: flex; flex-direction: column; flex: 1; overflow: hidden;">
                @csrf
                <div class="modal-body p-2" style="flex: 1; overflow-y: auto; overflow-x: hidden;">
                    <!-- Informations de base -->
                    <div class="mb-2">
                        <small class="text-primary fw-600" style="font-size: 11px;"><i class="bi bi-person-badge me-1"></i>INFORMATIONS</small>
                        <div class="row g-1 mt-1">
                            <div class="col-12">
                                <label class="form-label" style="font-size: 11px;">Nom <span class="text-danger">*</span></label>
                                <input type="text" class="form-control form-control-sm" name="name" required style="font-size: 12px;">
                            </div>
                            <div class="col-6">
                                <label class="form-label" style="font-size: 11px;">Email <span class="text-danger">*</span></label>
                                <input type="email" class="form-control form-control-sm" name="email" required style="font-size: 12px;">
                            </div>
                            <div class="col-6">
                                <label class="form-label" style="font-size: 11px;">Téléphone</label>
                                <input type="text" class="form-control form-control-sm" name="phone" style="font-size: 12px;">
                            </div>
                            <div class="col-12">
                                <label class="form-label" style="font-size: 11px;">Mot de passe <span class="text-danger">*</span></label>
                                <input type="password" class="form-control form-control-sm" name="password" required minlength="6" style="font-size: 12px;">
                            </div>
                        </div>
                    </div>

                    <!-- Assignation -->
                    <div class="mb-2">
                        <small class="text-primary fw-600" style="font-size: 11px;"><i class="bi bi-shop me-1"></i>ASSIGNATION</small>
                        <div class="row g-1 mt-1">
                            <div class="col-6">
                                <label class="form-label" style="font-size: 11px;">Magasin</label>
                                <input type="text" class="form-control form-control-sm" name="magasin" style="font-size: 12px;">
                            </div>
                            <div class="col-6">
                                <label class="form-label" style="font-size: 11px;">Service</label>
                                <input type="text" class="form-control form-control-sm" name="service" style="font-size: 12px;">
                            </div>
                        </div>
                    </div>

                    <!-- Type de paiement -->
                    <div class="mb-2">
                        <small class="text-primary fw-600" style="font-size: 11px;"><i class="bi bi-cash-coin me-1"></i>PAIEMENT</small>
                        <div class="row g-1 mt-1">
                            <div class="col-6">
                                <label class="form-label" style="font-size: 11px;">Type <span class="text-danger">*</span></label>
                                <select class="form-select form-select-sm" name="type_paiement" id="type_paiement" required style="font-size: 11px;">
                                    <option value="Commission">Commission</option>
                                    <option value="Salaire">Salaire</option>
                                </select>
                            </div>
                            <div class="col-6" id="commission_field">
                                <label class="form-label" style="font-size: 11px;">Taux (%)</label>
                                <input type="number" class="form-control form-control-sm" name="commission_rate" min="0" max="100" step="0.1" value="10" style="font-size: 12px;">
                            </div>
                            <div class="col-6" id="salary_field" style="display:none;">
                                <label class="form-label" style="font-size: 11px;">Salaire (MAD)</label>
                                <input type="number" class="form-control form-control-sm" name="monthly_salary" min="0" step="0.01" value="0" style="font-size: 12px;">
                            </div>
                        </div>
                    </div>

                    <!-- Permissions -->
                    <div class="mb-2">
                        <small class="text-primary fw-600" style="font-size: 11px;"><i class="bi bi-shield-check me-1"></i>PERMISSIONS</small>
                        
                        <div class="row g-1 mt-1">
                            <div class="col-6">
                                <small style="font-size: 10px; font-weight: 600;" class="text-muted">Commandes</small>
                                <div class="form-check" style="margin: 2px 0;">
                                    <input class="form-check-input" type="checkbox" name="permissions[]" value="pending-orders" id="perm_pending" style="width: 14px; height: 14px;">
                                    <label class="form-check-label" style="font-size: 10px; margin-left: 4px;" for="perm_pending">En attente</label>
                                </div>
                                <div class="form-check" style="margin: 2px 0;">
                                    <input class="form-check-input" type="checkbox" name="permissions[]" value="confirmed-orders" id="perm_confirmed" style="width: 14px; height: 14px;">
                                    <label class="form-check-label" style="font-size: 10px; margin-left: 4px;" for="perm_confirmed">Confirmées</label>
                                </div>
                                <div class="form-check" style="margin: 2px 0;">
                                    <input class="form-check-input" type="checkbox" name="permissions[]" value="delivery-notes" id="perm_delivery" style="width: 14px; height: 14px;">
                                    <label class="form-check-label" style="font-size: 10px; margin-left: 4px;" for="perm_delivery">Livraison</label>
                                </div>
                            </div>

                            <div class="col-6">
                                <small style="font-size: 10px; font-weight: 600;" class="text-muted">Expéditions</small>
                                <div class="form-check" style="margin: 2px 0;">
                                    <input class="form-check-input" type="checkbox" name="permissions[]" value="commandes" id="perm_commandes" style="width: 14px; height: 14px;">
                                    <label class="form-check-label" style="font-size: 10px; margin-left: 4px;" for="perm_commandes">Gestion</label>
                                </div>
                                <div class="form-check" style="margin: 2px 0;">
                                    <input class="form-check-input" type="checkbox" name="permissions[]" value="tracking" id="perm_tracking" style="width: 14px; height: 14px;">
                                    <label class="form-check-label" style="font-size: 10px; margin-left: 4px;" for="perm_tracking">Tracking</label>
                                </div>

                                <small style="font-size: 10px; font-weight: 600;" class="text-muted mt-2 d-block">أخرى</small>
                                <div class="form-check" style="margin: 2px 0;">
                                    <input class="form-check-input" type="checkbox" name="permissions[]" value="stock" id="perm_stock" style="width: 14px; height: 14px;">
                                    <label class="form-check-label" style="font-size: 10px; margin-left: 4px;" for="perm_stock">Stock</label>
                                </div>
                                <div class="form-check" style="margin: 2px 0;">
                                    <input class="form-check-input" type="checkbox" name="permissions[]" value="factures" id="perm_factures" style="width: 14px; height: 14px;">
                                    <label class="form-check-label" style="font-size: 10px; margin-left: 4px;" for="perm_factures">Factures</label>
                                </div>
                                <div class="form-check" style="margin: 2px 0;">
                                    <input class="form-check-input" type="checkbox" name="permissions[]" value="comptabilite" id="perm_compta" style="width: 14px; height: 14px;">
                                    <label class="form-check-label" style="font-size: 10px; margin-left: 4px;" for="perm_compta">محاسبة</label>
                                </div>
                                <div class="form-check" style="margin: 2px 0;">
                                    <input class="form-check-input" type="checkbox" name="permissions[]" value="reports" id="perm_reports" style="width: 14px; height: 14px;">
                                    <label class="form-check-label" style="font-size: 10px; margin-left: 4px;" for="perm_reports">Rapports</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 p-2 gap-1" style="flex-shrink: 0;">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal" style="font-size: 11px; padding: 4px 12px;">Annuler</button>
                    <button type="submit" class="btn btn-primary btn-sm" style="font-size: 11px; padding: 4px 12px;">Enregistrer</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- MODAL: MODIFIER MEMBRE -->
<div class="modal fade" id="editMembreModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header border-0 bg-primary text-white p-3">
                <h6 class="modal-title mb-0"><i class="bi bi-pencil me-2"></i>Modifier le membre</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="editMembreForm">
                @csrf
                @method('PUT')
                <input type="hidden" id="edit_membre_id">
                <div class="modal-body p-3">
                    <div class="row g-2">
                        <div class="col-md-6">
                            <label class="form-label small">Nom complet</label>
                            <input type="text" class="form-control form-control-sm" name="name" id="edit_name" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small">Téléphone</label>
                            <input type="text" class="form-control form-control-sm" name="phone" id="edit_phone">
                        </div>
                        <div class="col-12">
                            <label class="form-label small">Adresse e-mail</label>
                            <input type="email" class="form-control form-control-sm" name="email" id="edit_email">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small">Magasin</label>
                            <input type="text" class="form-control form-control-sm" name="magasin" id="edit_magasin">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small">Service</label>
                            <input type="text" class="form-control form-control-sm" name="service" id="edit_service">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small">Type</label>
                            <select class="form-select form-select-sm" name="type_paiement" id="edit_type_paiement">
                                <option value="Commission">Commission</option>
                                <option value="Salaire">Salaire</option>
                            </select>
                        </div>
                        <div class="col-md-4" id="edit_commission_field">
                            <label class="form-label small">Commission (%)</label>
                            <input type="number" class="form-control form-control-sm" name="commission_rate" id="edit_commission_rate">
                        </div>
                        <div class="col-md-4" id="edit_salary_field">
                            <label class="form-label small">Salaire (MAD)</label>
                            <input type="number" class="form-control form-control-sm" name="monthly_salary" id="edit_monthly_salary">
                        </div>
                    </div>

                    <hr class="my-2">

                    <h6 class="text-primary mb-2" style="font-size: 12px;">Permissions</h6>
                    <div id="edit_permissions_container" class="row g-1">
                    </div>
                </div>
                <div class="modal-footer border-0 p-2">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Fermer</button>
                    <button type="submit" class="btn btn-primary btn-sm">Sauvegarder</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- MODAL: VOIR PERMISSIONS -->
<div class="modal fade" id="permissionsModal" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0 p-3">
                <h6 class="modal-title mb-0"><i class="bi bi-shield-check me-2"></i>Permissions</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-3">
                <div id="permissions_list" style="font-size: 12px;"></div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
document.getElementById('type_paiement').addEventListener('change', function() {
    const commissionField = document.getElementById('commission_field');
    const salaryField = document.getElementById('salary_field');
    
    if (this.value === 'Commission') {
        commissionField.style.display = 'block';
        salaryField.style.display = 'none';
    } else {
        commissionField.style.display = 'none';
        salaryField.style.display = 'block';
    }
});

document.getElementById('edit_type_paiement')?.addEventListener('change', function() {
    const commissionField = document.getElementById('edit_commission_field');
    const salaryField = document.getElementById('edit_salary_field');
    
    if (this.value === 'Commission') {
        commissionField.style.display = 'block';
        salaryField.style.display = 'none';
    } else {
        commissionField.style.display = 'none';
        salaryField.style.display = 'block';
    }
});

document.getElementById('addMembreForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const submitBtn = this.querySelector('button[type="submit"]');
    const originalHtml = submitBtn.innerHTML;
    
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>En cours...';
    
    try {
        const response = await fetch('{{ route("equipes.store") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
            body: formData
        });
        
        const data = await response.json();
        
        if (data.success) {
            alert('✅ ' + data.message);
            location.reload();
        } else {
            alert('❌ ' + data.message);
        }
    } catch (error) {
        alert('❌ Erreur');
        console.error(error);
    } finally {
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalHtml;
    }
});

function editMembre(membre) {
    document.getElementById('edit_membre_id').value = membre.id;
    document.getElementById('edit_name').value = membre.name;
    document.getElementById('edit_email').value = membre.email || '';
    document.getElementById('edit_phone').value = membre.phone || '';
    document.getElementById('edit_magasin').value = membre.magasin || '';
    document.getElementById('edit_service').value = membre.service || '';
    document.getElementById('edit_type_paiement').value = membre.type_paiement || 'Commission';
    document.getElementById('edit_commission_rate').value = membre.commission_rate || 10;
    document.getElementById('edit_monthly_salary').value = membre.monthly_salary || 0;
    
    const event = new Event('change');
    document.getElementById('edit_type_paiement').dispatchEvent(event);
    
    const permissions = JSON.parse(membre.permissions || '[]');
    const permissionsContainer = document.getElementById('edit_permissions_container');
    
    const allPermissions = {
        'pending-orders': 'En attente',
        'confirmed-orders': 'Confirmées',
        'delivery-notes': 'Livraison',
        'commandes': 'Expéditions',
        'tracking': 'Tracking',
        'stock': 'Stock',
        'factures': 'Factures',
        'comptabilite': 'Comptabilité',
        'reports': 'Rapports'
    };
    
    let html = '';
    for (const [key, label] of Object.entries(allPermissions)) {
        const checked = permissions.includes(key) ? 'checked' : '';
        html += `
            <div class="col-md-6">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" 
                           name="permissions[]" value="${key}" 
                           id="edit_perm_${key}" ${checked}>
                    <label class="form-check-label small" for="edit_perm_${key}">
                        ${label}
                    </label>
                </div>
            </div>
        `;
    }
    
    permissionsContainer.innerHTML = html;
    
    const modal = new bootstrap.Modal(document.getElementById('editMembreModal'));
    modal.show();
}

document.getElementById('editMembreForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const id = document.getElementById('edit_membre_id').value;
    const formData = new FormData(this);
    
    try {
        const response = await fetch(`/equipes/${id}`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'X-HTTP-Method-Override': 'PUT'
            },
            body: formData
        });
        
        const data = await response.json();
        
        if (data.success) {
            alert('✅ ' + data.message);
            location.reload();
        } else {
            alert('❌ ' + data.message);
        }
    } catch (error) {
        alert('❌ Erreur');
        console.error(error);
    }
});

async function deleteMembre(id, name) {
    if (!confirm(`Êtes-vous sûr de supprimer ${name}?`)) {
        return;
    }
    
    try {
        const response = await fetch(`/equipes/${id}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            alert('✅ ' + data.message);
            location.reload();
        } else {
            alert('❌ ' + data.message);
        }
    } catch (error) {
        alert('❌ Erreur');
        console.error(error);
    }
}

async function toggleStatus(id) {
    try {
        const response = await fetch(`/equipes/${id}/toggle`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            }
        });
        
        const data = await response.json();
        
        if (!data.success) {
            location.reload();
        }
    } catch (error) {
        location.reload();
    }
}

function showPermissions(id, permissions) {
    const permissionLabels = {
        'pending-orders': 'En attente',
        'confirmed-orders': 'Confirmées',
        'delivery-notes': 'Livraison',
        'commandes': 'Expéditions',
        'tracking': 'Tracking',
        'stock': 'Stock',
        'factures': 'Factures',
        'comptabilite': 'Comptabilité',
        'reports': 'Rapports'
    };
    
    let html = '<ul class="list-group">';
    permissions.forEach(perm => {
        const label = permissionLabels[perm] || perm;
        html += `
            <li class="list-group-item" style="font-size: 12px; padding: 8px 12px;">
                <i class="bi bi-check-circle text-success me-2"></i>${label}
            </li>
        `;
    });
    html += '</ul>';
    
    document.getElementById('permissions_list').innerHTML = html;
    
    const modal = new bootstrap.Modal(document.getElementById('permissionsModal'));
    modal.show();
}

function viewStats(id) {
    window.location.href = `/equipes/${id}/stats`;
}
</script>
@endpush