@extends('layouts.app')

@section('page-title', 'Liste des Commandes')
@section('page-subtitle', 'Gestion de toutes vos commandes et expéditions')

@section('content')
<style>
    .data-container {
        max-width: 1600px;
        margin: 0 auto;
    }

    .header-info {
        font-size: 0.875rem;
        color: #6b7280;
        margin-bottom: 1rem;
        padding: 1rem;
        background: #f9fafb;
        border-radius: 0.5rem;
        border-left: 4px solid var(--primary);
    }

    .user-code {
        font-family: 'Courier New', monospace;
        font-weight: 700;
        color: var(--primary);
        background: #dbeafe;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
    }

    .button-group {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
        margin-bottom: 1.5rem;
    }

    .btn {
        padding: 0.5rem 1rem;
        border: none;
        border-radius: 0.5rem;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
        white-space: nowrap;
    }

    .btn-primary {
        background-color: var(--primary);
        color: white;
    }

    .btn-primary:hover {
        background-color: #2563eb;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    }

    .btn-secondary {
        background-color: var(--secondary);
        color: white;
    }

    .btn-secondary:hover {
        background-color: #7c3aed;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
    }

    .btn-success {
        background-color: var(--success);
        color: white;
    }

    .btn-success:hover {
        background-color: #059669;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    }

    .btn-danger {
        background-color: var(--danger);
        color: white;
    }

    .btn-danger:hover {
        background-color: #dc2626;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    }

    .btn-warning {
        background-color: var(--warning);
        color: white;
    }

    .btn-warning:hover {
        background-color: #d97706;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    }

    .btn-gray {
        background-color: #6b7280;
        color: white;
    }

    .btn-gray:hover {
        background-color: #4b5563;
    }

    .alert {
        padding: 1rem;
        border-radius: 0.5rem;
        margin-bottom: 1.5rem;
        border-left: 4px solid;
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .alert-blue {
        background-color: #eff6ff;
        border-color: var(--primary);
        color: #1e40af;
    }

    .alert-green {
        background-color: #f0fdf4;
        border-color: var(--success);
        color: #166534;
    }

    .alert-yellow {
        background-color: #fefce8;
        border-color: var(--warning);
        color: #854d0e;
    }

    .alert-icon {
        font-size: 1.5rem;
        flex-shrink: 0;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .stat-card {
        background: white;
        padding: 1.5rem;
        border-radius: 0.75rem;
        border-left: 4px solid var(--primary);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }

    .stat-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
    }

    .stat-label {
        font-size: 0.875rem;
        color: #6b7280;
        margin-bottom: 0.5rem;
        font-weight: 600;
    }

    .stat-value {
        font-size: 1.875rem;
        font-weight: 700;
        color: var(--primary);
    }

    .filter-section {
        background: linear-gradient(to right, #f9fafb, #f3f4f6);
        padding: 1.5rem;
        border-radius: 0.75rem;
        border: 2px solid #e5e7eb;
        margin-bottom: 1.5rem;
    }

    .filter-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }

    .filter-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .filter-label {
        font-size: 0.875rem;
        font-weight: 600;
        color: #374151;
    }

    .input-field,
    .select-field {
        padding: 0.5rem 1rem;
        border: 2px solid #d1d5db;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        transition: border-color 0.3s ease;
    }

    .input-field:focus,
    .select-field:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .table-container {
        overflow-x: auto;
        background: white;
        border-radius: 0.75rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .data-table {
        width: 100%;
        border-collapse: collapse;
    }

    .data-table thead {
        background: linear-gradient(to right, #2563eb, #7c3aed);
        color: white;
        font-weight: 600;
        font-size: 0.875rem;
    }

    .data-table th {
        padding: 1rem;
        text-align: left;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .data-table td {
        padding: 1rem;
        border: 1px solid #e5e7eb;
        font-size: 0.875rem;
    }

    .data-table tbody tr {
        transition: background-color 0.2s ease;
    }

    .data-table tbody tr:hover {
        background-color: #f3f4f6;
    }

    .data-table tbody tr:nth-child(even) {
        background-color: #fafafa;
    }

    .badge {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .badge-blue {
        background-color: #dbeafe;
        color: #1e40af;
    }

    .badge-green {
        background-color: #dcfce7;
        color: #166534;
    }

    .badge-orange {
        background-color: #fed7aa;
        color: #92400e;
    }

    .badge-purple {
        background-color: #e9d5ff;
        color: #6b21a8;
    }

    .service-badge {
        padding: 0.5rem 1rem;
        border-radius: 9999px;
        font-weight: 600;
        font-size: 0.875rem;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        color: white;
    }

    .service-badge:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .action-button {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 1.2rem;
        padding: 0.35rem 0.45rem;
        border-radius: 0.5rem;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .action-button:disabled {
        cursor: not-allowed;
        opacity: 0.4;
    }

    .action-button:disabled:hover {
        background-color: transparent !important;
        transform: none !important;
    }

    .action-button-info {
        background-color: #eff6ff;
        color: #3b82f6;
    }

    .action-button-info:hover:not(:disabled) {
        background-color: #dbeafe;
        transform: translateY(-2px);
    }

    .action-button-success {
        background-color: #f0fdf4;
        color: #10b981;
    }

    .action-button-success:hover:not(:disabled) {
        background-color: #dcfce7;
        transform: translateY(-2px);
    }

    .action-button-warning {
        background-color: #fffbeb;
        color: #f59e0b;
    }

    .action-button-warning:hover:not(:disabled) {
        background-color: #fef3c7;
        transform: translateY(-2px);
    }

    .action-button-danger {
        background-color: #fee2e2;
        color: #ef4444;
    }

    .action-button-danger:hover:not(:disabled) {
        background-color: #fecaca;
        transform: translateY(-2px);
    }

    .action-button-pdf {
        background-color: #f3e8ff;
        color: #7c3aed;
    }

    .action-button-pdf:hover:not(:disabled) {
        background-color: #e9d5ff;
        transform: translateY(-2px);
    }

    .modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(5px);
        z-index: 1100;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }

    .modal-overlay.active {
        display: flex;
    }

    .modal-content {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
        overflow: hidden;
        animation: slideIn 0.3s ease-out;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-header {
        background: linear-gradient(to right, #2563eb, #7c3aed);
        color: white;
        padding: 2rem;
    }

    .modal-header h2 {
        margin: 0;
        font-size: 1.875rem;
        font-weight: 700;
    }

    .modal-header p {
        margin: 0.5rem 0 0 0;
        font-size: 0.875rem;
        opacity: 0.9;
    }

    .modal-body {
        padding: 2rem;
    }

    .modal-footer {
        display: flex;
        gap: 1rem;
        justify-content: flex-end;
        padding: 1.5rem 2rem;
        border-top: 1px solid #e5e7eb;
    }

    .service-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .service-card {
        background: white;
        border: 4px solid;
        border-radius: 1rem;
        padding: 2rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .service-card:hover {
        transform: scale(1.05);
        box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
    }

    .service-card-ozone {
        border-color: #FF6B35;
        background: linear-gradient(to br, #fff7ed, #ffeaa7);
    }

    .service-card-sendit {
        border-color: #DC2626;
        background: linear-gradient(to br, #fef2f2, #fee2e2);
    }

    .service-card-leg {
        border-color: #A855F7;
        background: linear-gradient(to br, #faf5ff, #f3e8ff);
    }

    .service-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    .service-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 0.5rem;
    }

    .service-description {
        font-size: 0.875rem;
        color: #6b7280;
        margin-bottom: 1rem;
    }

    .service-features {
        text-align: left;
        font-size: 0.75rem;
        color: #374151;
        margin: 1rem 0;
        background: white;
        padding: 0.75rem;
        border-radius: 0.5rem;
        line-height: 1.5;
    }

    .note-badge {
        position: relative;
        display: inline-block;
    }

    .note-count {
        position: absolute;
        top: -8px;
        right: -8px;
        background: #ef4444;
        color: white;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: bold;
    }

    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        color: #9ca3af;
    }

    .empty-state-icon {
        font-size: 5rem;
        margin-bottom: 1rem;
    }

    /* Form Styles for Add Commande Modal */
    .form-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .form-label {
        font-size: 0.875rem;
        font-weight: 600;
        color: #374151;
    }

    .form-input,
    .form-select,
    .form-textarea {
        padding: 0.75rem 1rem;
        border: 2px solid #e5e7eb;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        transition: all 0.3s ease;
    }

    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .form-textarea {
        resize: vertical;
        min-height: 80px;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: scale(0.95) translateY(10px);
        }
        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    .hidden {
        display: none;
    }

    @media (max-width: 768px) {
        .filter-grid {
            grid-template-columns: 1fr;
        }

        .stats-grid {
            grid-template-columns: 1fr;
        }

        .service-grid {
            grid-template-columns: 1fr;
        }

        .table-container {
            font-size: 0.75rem;
        }

        .data-table th,
        .data-table td {
            padding: 0.5rem;
        }

        .button-group {
            flex-direction: column;
        }

        .btn {
            width: 100%;
            justify-content: center;
        }

        .form-grid {
            grid-template-columns: 1fr;
        }
    }
</style>

<div class="data-container">
    
    <!-- Header Info -->
    <div class="header-info">
        🔑 <strong>Code:</strong> <span class="user-code">{{ $user->user_code }}</span> 
        | 💾 <strong>Total:</strong> <span id="totalCount">{{ $sheetData->count() }}</span> commande(s)
        <span id="filteredCount" class="hidden" style="color: #f59e0b;"></span>
    </div>

    <!-- Action Buttons -->
    <div class="button-group">
        <!-- 🔴 NOUVEAU: Ajouter Commande -->
        <button onclick="openAddCommandeModal()" class="btn btn-success">
            <i class="fas fa-plus-circle"></i> Ajouter Commande
        </button>
        
        @if(Auth::user()->isAdmin())
            <button onclick="createBulkBL()" class="btn btn-secondary">
                <i class="fas fa-cube"></i> Créer BL Groupé
            </button>
        @endif
        <button onclick="refreshData()" class="btn btn-primary">
            <i class="fas fa-sync-alt"></i> Actualiser
        </button>
        @if(Auth::user()->isAdmin())
            <button onclick="clearData()" class="btn btn-danger">
                <i class="fas fa-trash"></i> Effacer tout
            </button>
        @endif
    </div>

    <!-- Alerts -->
    @if(Auth::user()->isAdmin())
        @if(empty($user->ozone_customer_id) || empty($user->ozone_api_key))
            <div class="alert alert-yellow">
                <div class="alert-icon">⚠️</div>
                <div>
                    <strong>Configuration OzoneExpress manquante!</strong>
                    <a href="{{ route('settings') }}" style="color: var(--primary); font-weight: 600; text-decoration: underline;">
                        Ajoutez vos identifiants ici →
                    </a>
                </div>
            </div>
        @else
            <div class="alert alert-green">
                <div class="alert-icon">✅</div>
                <div>
                    <strong>Configuration OzoneExpress active!</strong>
                    Vous pouvez utiliser toutes les fonctionnalités d'expédition.
                </div>
            </div>
        @endif

        <div class="alert alert-blue">
            <div class="alert-icon">📝</div>
            <div>
                <strong>Instructions Google Sheets:</strong> 
                Ajoutez votre code <code style="background-color: #dbeafe; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-family: monospace;">{{ $user->user_code }}</code> 
                dans la cellule <strong>A1</strong> de votre feuille Google Sheets.
            </div>
        </div>
    @endif

    <!-- Statistics -->
    <div class="stats-grid">
        <div class="stat-card" style="border-left-color: #3b82f6;">
            <div class="stat-label">📦 Total des Commandes</div>
            <div class="stat-value" style="color: #3b82f6;">{{ $sheetData->count() }}</div>
        </div>
        <div class="stat-card" style="border-left-color: #10b981;">
            <div class="stat-label">✅ Envoyées</div>
            <div class="stat-value" style="color: #10b981;">{{ $sheetData->where('ozone_status', 'sent')->count() }}</div>
        </div>
        <div class="stat-card" style="border-left-color: #f59e0b;">
            <div class="stat-label">⏳ En Attente</div>
            <div class="stat-value" style="color: #f59e0b;">{{ $sheetData->where('ozone_status', 'pending')->count() }}</div>
        </div>
        <div class="stat-card" style="border-left-color: #8b5cf6;">
            <div class="stat-label">🔄 Dernière MAJ</div>
            <div class="stat-value" style="font-size: 1rem; color: #8b5cf6;">
                @if($sheetData->max('updated_at'))
                    {{ \Carbon\Carbon::parse($sheetData->max('updated_at'))->format('d/m H:i') }}
                @else
                    N/A
                @endif
            </div>
        </div>
    </div>

    @if($sheetData->count() > 0)
        <!-- Filters -->
        <div class="filter-section">
            <div class="filter-grid">
                <div class="filter-group" style="grid-column: span 2;">
                    <label class="filter-label">🔍 Rechercher</label>
                    <input 
                        type="text" 
                        id="searchInput" 
                        placeholder="Rechercher dans toutes les colonnes..."
                        class="input-field"
                        onkeyup="filterTable()"
                    >
                </div>
                <div class="filter-group">
                    <label class="filter-label">📊 Filtrer par statut</label>
                    <select 
                        id="statusFilter" 
                        class="select-field"
                        onchange="filterTable()"
                    >
                        <option value="all">Tous</option>
                        <option value="sent">✅ Envoyés</option>
                        <option value="pending">⏳ En attente</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label class="filter-label">⚙️ Actions</label>
                    <button onclick="resetFilters()" class="btn btn-warning" style="width: 100%;">
                        <i class="fas fa-redo"></i> Réinitialiser
                    </button>
                </div>
            </div>
        </div>

        <!-- Table -->
        <div class="table-container">
            <table class="data-table" id="dataTable">
                <thead>
                    <tr>
                        @if(Auth::user()->isAdmin())
                            <th style="width: 40px; text-align: center;">
                                <input type="checkbox" id="select-all" style="cursor: pointer; width: 18px; height: 18px;">
                            </th>
                        @endif
                        <th style="text-align: center;">#</th>
                        <th style="text-align: center;">🚚 Service</th>
                        <th>👤 Client</th>
                        <th>📞 Téléphone</th>
                        <th>📍 Adresse</th>
                        <th style="text-align: center;">💰 Montant</th>
                        <th style="text-align: center;">📦 Suivi</th>
                        <th style="text-align: center;">📊 Statut</th>
                        <th style="text-align: center;">📝 Notes</th>
                        <th style="text-align: center;">⚙️ Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $firstRow = $sheetData->first();
                        $headers = [];
                        
                        if ($firstRow) {
                            if (is_array($firstRow->headers)) {
                                $headers = $firstRow->headers;
                            } elseif (is_string($firstRow->headers)) {
                                $decoded = json_decode($firstRow->headers, true);
                                $headers = (is_array($decoded) ? $decoded : []);
                            }
                            
                            if (empty($headers) && $firstRow->structured_data) {
                                if (is_array($firstRow->structured_data)) {
                                    $headers = array_keys($firstRow->structured_data);
                                } elseif (is_string($firstRow->structured_data)) {
                                    $decoded = json_decode($firstRow->structured_data, true);
                                    if (is_array($decoded)) {
                                        $headers = array_keys($decoded);
                                    }
                                }
                            }
                        }
                    @endphp

                    @foreach($sheetData as $row)
                        @php
                            $rowData = $row->structured_data;
                            if (is_string($rowData)) {
                                $rowData = json_decode($rowData, true) ?? [];
                            }
                        @endphp
                        <tr class="table-row" 
                            data-status="{{ $row->ozone_status }}"
                            data-search="{{ strtolower(json_encode($rowData)) }}"
                            data-row-id="{{ $row->id }}">
                            
                            @if(Auth::user()->isAdmin())
                                <td style="text-align: center;">
                                    <input type="checkbox" class="row-checkbox" value="{{ $row->id }}" style="cursor: pointer; width: 18px; height: 18px;">
                                </td>
                            @endif
                            <td style="text-align: center; font-weight: 700; color: var(--primary);">{{ $row->row_number }}</td>
                            
                            <!-- Service Badge -->
                            <td style="text-align: center;">
                                <button 
                                    onclick="openServiceSelectionModal({{ $row->id }})"
                                    class="service-badge"
                                    id="service-{{ $row->id }}"
                                    style="background-color: {{ $row->delivery_service === 'ozone' ? '#FF6B35' : ($row->delivery_service === 'sendit' ? '#DC2626' : ($row->delivery_service === 'leg' ? '#A855F7' : '#9CA3AF')) }}">
                                    {{ $row->delivery_service === 'ozone' ? '🧡 OzoneExpress' : ($row->delivery_service === 'sendit' ? '📦 Sendit' : ($row->delivery_service === 'leg' ? '🚚 LEG' : '❓ Non défini')) }}
                                </button>
                            </td>

                            <td>{{ $rowData['Nom du client'] ?? $rowData['nom'] ?? '-' }}</td>
                            <td>{{ $rowData['Téléphone'] ?? $rowData['tel'] ?? '-' }}</td>
                            <td>{{ $rowData['Adresse'] ?? $rowData['adresse'] ?? '-' }}</td>
                            <td style="font-weight: 600; text-align: center;">{{ $rowData['Total'] ?? $rowData['prix'] ?? '-' }}</td>
                            
                            <!-- Tracking -->
                            <td style="text-align: center;">
                                @if($row->tracking_number)
                                    <div style="display: flex; align-items: center; gap: 0.5rem; justify-content: center; flex-wrap: wrap;">
                                        <span style="font-size: 1.2rem;">🇲🇦</span>
                                        <code style="background-color: #dcfce7; color: #166534; padding: 0.25rem 0.75rem; border-radius: 0.25rem; font-family: monospace; font-weight: 600; font-size: 0.85rem;">
                                            {{ $row->tracking_number }}
                                        </code>
                                    </div>
                                @else
                                    <span style="color: #9ca3af; font-size: 0.85rem;">-</span>
                                @endif
                            </td>

                            <!-- Status -->
                            <td style="text-align: center;">
                                @if($row->ozone_status == 'sent')
                                    <span class="badge badge-green">✅ Envoyé</span>
                                @else
                                    <span class="badge badge-orange">⏳ Attente</span>
                                @endif
                            </td>

                            <!-- Notes -->
                            <td style="text-align: center;">
                                <button 
                                    onclick="openNotes({{ $row->id }})" 
                                    class="action-button note-badge action-button-info"
                                    title="📝 Notes">
                                    <i class="fas fa-sticky-note"></i>
                                    @if($row->notes->count() > 0)
                                        <span class="note-count">{{ $row->notes->count() }}</span>
                                    @endif
                                </button>
                            </td>

                            <!-- Actions -->
                            <td style="text-align: center;">
                                <div style="display: flex; gap: 0.35rem; justify-content: center; flex-wrap: wrap; align-items: center;">
                                    
                                    <!-- 1️⃣ Bon De Livraison PDF -->
                                    @if($row->tracking_number)
                                        <button 
                                            onclick="downloadBL('{{ $row->tracking_number }}')"
                                            class="action-button action-button-pdf"
                                            title="📄 Bon De Livraison PDF">
                                            <i class="fas fa-file-pdf"></i>
                                        </button>
                                    @else
                                        <button 
                                            class="action-button"
                                            style="color: #d1d5db; cursor: not-allowed; opacity: 0.5;"
                                            disabled
                                            title="PDF (indisponible)">
                                            <i class="fas fa-file-pdf"></i>
                                        </button>
                                    @endif

                                    <!-- 2️⃣ Info Colis -->
                                    @if($row->tracking_number)
                                        <button 
                                            onclick="showTrackingInfo('{{ $row->tracking_number }}')"
                                            class="action-button action-button-info"
                                            title="ℹ️ Informations du colis">
                                            <i class="fas fa-info-circle"></i>
                                        </button>
                                    @else
                                        <button 
                                            class="action-button"
                                            style="color: #d1d5db; cursor: not-allowed; opacity: 0.5;"
                                            disabled
                                            title="Info (indisponible)">
                                            <i class="fas fa-info-circle"></i>
                                        </button>
                                    @endif

                                    <!-- 3️⃣ Ajouter à OzoneExpress -->
                                    @if(Auth::user()->isAdmin() && $row->ozone_status != 'sent')
                                        <button 
                                            onclick="addParcel({{ $row->id }})"
                                            class="action-button action-button-info"
                                            title="➕ Ajouter à OzoneExpress">
                                            <i class="fas fa-plus-circle"></i>
                                        </button>
                                    @endif

                                    <!-- 4️⃣ Tracker Colis -->
                                    @if($row->tracking_number)
                                        <button 
                                            onclick="tracking({{ $row->id }})" 
                                            class="action-button action-button-success"
                                            title="📍 Suivre le colis">
                                            <i class="fas fa-map-marker-alt"></i>
                                        </button>
                                    @else
                                        <button 
                                            class="action-button"
                                            style="color: #d1d5db; cursor: not-allowed; opacity: 0.5;"
                                            disabled
                                            title="Suivi (indisponible)">
                                            <i class="fas fa-map-marker-alt"></i>
                                        </button>
                                    @endif

                                    <!-- 5️⃣ Modifier -->
                                    <button 
                                        onclick="editRow({{ $row->id }})" 
                                        class="action-button action-button-warning"
                                        title="✏️ Modifier la ligne">
                                        <i class="fas fa-edit"></i>
                                    </button>

                                    <!-- 6️⃣ Supprimer -->
                                    <button 
                                        onclick="deleteRow({{ $row->id }})" 
                                        class="action-button action-button-danger"
                                        title="🗑️ Supprimer la ligne">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @else
        <div class="empty-state">
            <div class="empty-state-icon">📭</div>
            <h3 style="color: #374151; margin-bottom: 0.5rem; font-size: 1.5rem;">Aucune commande</h3>
            <p style="font-size: 1rem; margin-bottom: 1.5rem;">Commencez par ajouter votre première commande</p>
            <button onclick="openAddCommandeModal()" class="btn btn-success">
                <i class="fas fa-plus-circle"></i> Ajouter Commande
            </button>
        </div>
    @endif

</div>

<!-- 🔴 MODALS -->

<!-- Service Selection Modal -->
<div id="serviceSelectionModal" class="modal-overlay">
    <div class="modal-content" style="max-width: 900px; width: 100%;">
        <div class="modal-header">
            <h2>🚚 Choisir le service de livraison</h2>
            <p>Sélectionnez la meilleure option pour votre expédition</p>
        </div>
        <div class="modal-body">
            <div class="service-grid">
                <!-- OzoneExpress -->
                <div class="service-card service-card-ozone" onclick="selectService('ozone')">
                    <div class="service-icon">🧡</div>
                    <div class="service-title">OzoneExpress</div>
                    <div class="service-description">Service de livraison avancé</div>
                    <div class="badge badge-green">✅ Configuré</div>
                    <div class="service-features">
                        ✓ Suivi en temps réel<br>
                        ✓ Garantie de livraison<br>
                        ✓ Support 24/7
                    </div>
                </div>

                <!-- Sendit -->
                <div class="service-card service-card-sendit" onclick="selectService('sendit')">
                    <div class="service-icon">📦</div>
                    <div class="service-title">Sendit</div>
                    <div class="service-description">Service de livraison économique</div>
                    <div class="badge" style="background: #fee2e2; color: #991b1b;">❓ Non configuré</div>
                    <div class="service-features">
                        ✓ Tarifs économiques<br>
                        ✓ Couverture étendue<br>
                        ✓ Facile à utiliser
                    </div>
                </div>

                <!-- LEG -->
                <div class="service-card service-card-leg" onclick="selectService('leg')">
                    <div class="service-icon">🚚</div>
                    <div class="service-title">LEG</div>
                    <div class="service-description">Logistics Express Group</div>
                    <div class="badge" style="background: #fee2e2; color: #991b1b;">❓ Non configuré</div>
                    <div class="service-features">
                        ✓ Service rapide<br>
                        ✓ Livraison sécurisée<br>
                        ✓ Suivi en direct
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button onclick="closeServiceSelectionModal()" class="btn btn-danger">
                ❌ Annuler
            </button>
        </div>
    </div>
</div>

<!-- City Selection Modal -->
<div id="cityModal" class="modal-overlay">
    <div class="modal-content" style="max-width: 500px; width: 100%;">
        <div class="modal-header">
            <h2>🏙️ Sélectionnez la ville</h2>
        </div>
        <div class="modal-body">
            <input 
                type="text" 
                id="citySearch" 
                placeholder="🔍 Rechercher une ville..."
                class="input-field"
                style="width: 100%; margin-bottom: 1rem;"
                onkeyup="filterCities()"
            >
            <select 
                id="citySelect" 
                size="8"
                class="select-field"
                style="width: 100%; padding: 0.75rem; min-height: 250px;">
                <option value="">🔄 Chargement...</option>
            </select>
        </div>
        <div class="modal-footer">
            <button onclick="closeModal()" class="btn btn-gray">❌ Annuler</button>
            <button onclick="submitParcel()" class="btn btn-primary">✅ Confirmer</button>
        </div>
    </div>
</div>

<!-- Notes Modal -->
<div id="notesModal" class="modal-overlay">
    <div class="modal-content" style="max-width: 600px; width: 100%;">
        <div class="modal-header">
            <h2>📝 Notes et Statuts</h2>
        </div>
        <div class="modal-body">
            <input type="hidden" id="currentRowId">
            
            <!-- Add Note Form -->
            <div style="background-color: #faf5ff; padding: 1.5rem; border-radius: 0.75rem; border-left: 4px solid #a855f7; margin-bottom: 1.5rem;">
                <h3 style="margin: 0 0 1rem 0; color: #6b21a8; font-weight: 600;">
                    <i class="fas fa-plus-circle"></i> Ajouter une note
                </h3>
                <form id="addNoteForm">
                    <textarea 
                        id="noteText"
                        required
                        rows="3"
                        placeholder="Entrez votre note..."
                        class="input-field"
                        style="width: 100%; margin-bottom: 1rem;"
                    ></textarea>
                    <button type="submit" class="btn btn-secondary" style="width: 100%;">
                        <i class="fas fa-save"></i> Enregistrer
                    </button>
                </form>
            </div>

            <!-- Notes List -->
            <div id="notesList" style="max-height: 300px; overflow-y: auto;">
                <div style="text-align: center; padding: 2rem; color: #9ca3af;">
                    <i class="fas fa-spinner fa-spin" style="font-size: 2rem;"></i>
                    <p style="margin-top: 0.5rem;">Chargement...</p>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button onclick="closeNotes()" class="btn btn-gray">Fermer</button>
        </div>
    </div>
</div>

<!-- 🔴 Add Commande Modal -->
<div id="addCommandeModal" class="modal-overlay">
    <div class="modal-content" style="max-width: 800px; width: 100%;">
        <div class="modal-header" style="background: linear-gradient(to right, #10b981, #059669);">
            <h2>➕ Ajouter une Nouvelle Commande</h2>
            <p>Remplissez les informations ci-dessous</p>
        </div>
        <div class="modal-body">
            <form id="addCommandeForm">
                
                <!-- Client Info -->
                <h3 style="margin: 0 0 1rem 0; color: #111827; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem;">
                    <i class="fas fa-user"></i> Informations Client
                </h3>
                <div class="form-grid" style="margin-bottom: 1.5rem;">
                    <div class="form-group">
                        <label class="form-label">👤 Nom du client *</label>
                        <input type="text" name="client_name" class="form-input" placeholder="Ex: Ahmed Mohamed" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">📞 Téléphone *</label>
                        <input type="tel" name="client_phone" class="form-input" placeholder="Ex: 0612345678" required>
                    </div>
                    <div class="form-group" style="grid-column: 1 / -1;">
                        <label class="form-label">📍 Adresse *</label>
                        <input type="text" name="client_address" class="form-input" placeholder="Ex: 123 Rue Mohammed V" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">🏙️ Ville *</label>
                        <input type="text" name="client_city" class="form-input" placeholder="Ex: Casablanca" required>
                    </div>
                </div>

                <!-- Product Info -->
                <h3 style="margin: 0 0 1rem 0; color: #111827; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem;">
                    <i class="fas fa-box"></i> Informations Produit
                </h3>
                <div class="form-grid" style="margin-bottom: 1.5rem;">
                    <div class="form-group" style="grid-column: 1 / -1;">
                        <label class="form-label">📦 Produit *</label>
                        <input type="text" name="product_name" id="productNameInput" class="form-input" placeholder="Nom du produit" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">🔢 Quantité *</label>
                        <input type="number" name="quantity" id="quantityInput" class="form-input" min="1" value="1" onchange="calculateTotalModal()" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">💰 Prix Unitaire (MAD) *</label>
                        <input type="number" name="price" id="priceInput" class="form-input" step="0.01" min="0" placeholder="0.00" onchange="calculateTotalModal()" required>
                    </div>
                    <div class="form-group" style="grid-column: 1 / -1;">
                        <label class="form-label">📝 Notes</label>
                        <textarea name="notes" class="form-textarea" placeholder="Informations supplémentaires..."></textarea>
                    </div>
                </div>

                <!-- Total Display -->
                <div style="background: linear-gradient(135deg, #dbeafe, #bfdbfe); padding: 1.5rem; border-radius: 0.75rem; text-align: center;">
                    <div style="font-size: 0.875rem; color: #1e40af; font-weight: 600; margin-bottom: 0.5rem;">
                        💵 MONTANT TOTAL
                    </div>
                    <div id="totalDisplayModal" style="font-size: 2rem; font-weight: 700; color: #1e40af;">
                        0.00 MAD
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button onclick="closeAddCommandeModal()" class="btn btn-gray">
                ❌ Annuler
            </button>
            <button onclick="submitCommande()" class="btn btn-success" id="submitCommandeBtn">
                <i class="fas fa-save"></i> Enregistrer
            </button>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    let currentRowId = null;
    let currentService = null;
    let allCitiesOptions = [];
    const totalRows = {{ $sheetData->count() }};
    let currentRowForNotes = null;

    // Initialize
    document.addEventListener('DOMContentLoaded', function() {
        setupCheckboxes();
        setupKeyboardShortcuts();
    });

    // Checkboxes
    function setupCheckboxes() {
        const selectAllCheckbox = document.getElementById('select-all');
        if (!selectAllCheckbox) return;

        selectAllCheckbox.addEventListener('change', function() {
            document.querySelectorAll('.row-checkbox').forEach(cb => {
                const row = cb.closest('tr');
                if (row && row.style.display !== 'none') {
                    cb.checked = this.checked;
                }
            });
        });
    }

    // Service Modal
    function openServiceSelectionModal(rowId) {
        currentRowId = parseInt(rowId);
        document.getElementById('serviceSelectionModal').classList.add('active');
    }

    function closeServiceSelectionModal() {
        document.getElementById('serviceSelectionModal').classList.remove('active');
        currentService = null;
    }

    function selectService(service) {
        currentService = service;
        closeServiceSelectionModal();

        if (service === 'ozone') {
            document.getElementById('cityModal').classList.add('active');
            loadCities();
        } else {
            alert('⚠️ ' + (service === 'sendit' ? 'Sendit' : 'LEG') + ' non configuré');
        }
    }

    // City Management
    function loadCities() {
        const select = document.getElementById('citySelect');
        select.innerHTML = '<option value="">🔄 Chargement des villes...</option>';
        
        fetch('https://api.ozonexpress.ma/cities')
            .then(response => response.json())
            .then(data => {
                select.innerHTML = '<option value="">-- Sélectionnez une ville --</option>';
                
                const cities = data.CITIES || data.cities || {};
                const citiesArray = Object.entries(cities)
                    .map(([id, city]) => ({
                        id: id,
                        name: city.name || city.NAME || `Ville #${id}`,
                        price: city.price || city.PRICE || '0'
                    }))
                    .sort((a, b) => a.name.localeCompare(b.name));
                
                citiesArray.forEach(city => {
                    const option = document.createElement('option');
                    option.value = city.id;
                    option.textContent = `${city.name} (${city.price} MAD)`;
                    select.appendChild(option);
                });

                allCitiesOptions = Array.from(select.options).slice(1);
            })
            .catch(error => {
                console.error('Erreur:', error);
                select.innerHTML = '<option value="">❌ Erreur de chargement</option>';
            });
    }

    function filterCities() {
        const searchTerm = document.getElementById('citySearch').value.toLowerCase();
        const select = document.getElementById('citySelect');
        
        select.innerHTML = '<option value="">-- Sélectionnez --</option>';
        
        const filtered = allCitiesOptions.filter(option => 
            option.textContent.toLowerCase().includes(searchTerm)
        );
        
        filtered.forEach(option => select.add(option.cloneNode(true)));
    }

    function closeModal() {
        document.getElementById('cityModal').classList.remove('active');
        document.getElementById('citySearch').value = '';
    }

    // Submit Parcel
    function submitParcel() {
        const cityId = document.getElementById('citySelect').value;
        
        if (!cityId) {
            alert('⚠️ Veuillez sélectionner une ville avant de continuer.');
            return;
        }

        // Show loading
        const loadingMsg = document.createElement('div');
        loadingMsg.style.cssText = `
            position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
            background: white; padding: 2rem; border-radius: 1rem;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2); z-index: 1200;
            text-align: center;
        `;
        loadingMsg.innerHTML = `
            <div style="font-size: 2.5rem; margin-bottom: 1rem;">
                <i class="fas fa-spinner fa-spin" style="color: #3b82f6;"></i>
            </div>
            <div style="font-weight: 600; color: #111827; margin-bottom: 0.5rem;">
                Ajout du colis...
            </div>
            <div style="font-size: 0.9rem; color: #6b7280;">
                Patientez quelques secondes
            </div>
        `;
        document.body.appendChild(loadingMsg);

        fetch(`/ozone/add-parcel/${currentRowId}?city_id=${cityId}`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            }
        })
        .then(r => r.json())
        .then(data => {
            loadingMsg.remove();
            
            if (data.success) {
                closeModal();
                alert('✅ Colis ajouté avec succès!\n\n📦 Numéro de suivi: ' + data.tracking);
                location.reload();
            } else {
                alert('❌ Erreur: ' + data.message);
            }
        })
        .catch(e => {
            loadingMsg.remove();
            alert('❌ Erreur: ' + e.message);
        });
    }

    // Add Parcel
    function addParcel(rowId) {
        openServiceSelectionModal(rowId);
    }

    // Filtering
    function filterTable() {
        const searchTerm = document.getElementById('searchInput').value.toLowerCase();
        const statusFilter = document.getElementById('statusFilter').value;
        const rows = document.querySelectorAll('.table-row');
        let visibleCount = 0;

        rows.forEach(row => {
            const searchData = row.getAttribute('data-search');
            const status = row.getAttribute('data-status');
            
            let matchSearch = searchTerm === '' || searchData.includes(searchTerm);
            let matchStatus = statusFilter === 'all' || status === statusFilter;
            
            if (matchSearch && matchStatus) {
                row.style.display = '';
                visibleCount++;
            } else {
                row.style.display = 'none';
            }
        });

        updateFilterCount(visibleCount);
    }

    function updateFilterCount(visible) {
        const filteredCount = document.getElementById('filteredCount');
        if (visible === totalRows) {
            filteredCount.classList.add('hidden');
        } else {
            filteredCount.classList.remove('hidden');
            filteredCount.textContent = ` (${visible} affichée(s))`;
        }
    }

    function resetFilters() {
        document.getElementById('searchInput').value = '';
        document.getElementById('statusFilter').value = 'all';
        filterTable();
    }

    // Edit & Delete
    function editRow(rowId) {
        alert('✏️ Fonction de modification - En développement');
    }

    function deleteRow(rowId) {
        if (!confirm('🗑️ Êtes-vous sûr de vouloir supprimer cette ligne?')) return;
        
        fetch(`/api/sheet-data/${rowId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            }
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                alert('✅ Ligne supprimée avec succès!');
                location.reload();
            } else {
                alert('❌ Erreur: ' + data.message);
            }
        })
        .catch(err => {
            alert('❌ Erreur: ' + err.message);
        });
    }

    // Notes
    function openNotes(rowId) {
        currentRowForNotes = rowId;
        document.getElementById('currentRowId').value = rowId;
        document.getElementById('notesModal').classList.add('active');
        loadNotes(rowId);
    }

    function closeNotes() {
        document.getElementById('notesModal').classList.remove('active');
        document.getElementById('noteText').value = '';
        currentRowForNotes = null;
    }

    function loadNotes(rowId) {
        fetch(`/notes/${rowId}`)
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    displayNotes(data.notes);
                } else {
                    document.getElementById('notesList').innerHTML = `
                        <div style="text-align: center; padding: 2rem; color: #ef4444;">
                            <i class="fas fa-exclamation-triangle" style="font-size: 2rem;"></i>
                            <p>${data.message || 'Erreur de chargement'}</p>
                        </div>
                    `;
                }
            });
    }

    function displayNotes(notes) {
        const container = document.getElementById('notesList');
        
        if (notes.length === 0) {
            container.innerHTML = `
                <div style="text-align: center; padding: 2rem; color: #9ca3af;">
                    <i class="fas fa-sticky-note" style="font-size: 3rem; margin-bottom: 0.5rem;"></i>
                    <p>Aucune note pour le moment</p>
                </div>
            `;
            return;
        }

        let html = '<div style="display: flex; flex-direction: column; gap: 0.75rem;">';
        
        notes.forEach(note => {
            html += `
                <div style="background-color: #f9fafb; border: 2px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem;">
                    <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem;">
                        <div style="display: flex; gap: 0.5rem; align-items: center;">
                            <span class="badge badge-blue">${note.user}</span>
                            ${note.status ? `<span class="badge badge-purple">${note.status}</span>` : ''}
                        </div>
                        <div style="font-size: 0.75rem; color: #9ca3af;">
                            <i class="fas fa-clock"></i> ${note.date}
                        </div>
                    </div>
                    <p style="margin: 0; color: #374151;">${note.note}</p>
                </div>
            `;
        });
        
        html += '</div>';
        container.innerHTML = html;
    }

    document.getElementById('addNoteForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const rowId = document.getElementById('currentRowId').value;
        const note = document.getElementById('noteText').value;
        
        fetch(`/notes/${rowId}`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ note: note })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                document.getElementById('noteText').value = '';
                loadNotes(rowId);
                alert('✅ Note ajoutée avec succès!');
            } else {
                alert('❌ Erreur: ' + data.message);
            }
        });
    });

    // Tracking
    function tracking(rowId) {
        fetch(`/ozone/tracking/${rowId}`)
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    alert('📍 Suivi du colis:\n\n' + JSON.stringify(data.tracking, null, 2));
                } else {
                    alert('❌ Erreur: ' + data.message);
                }
            })
            .catch(err => {
                alert('❌ Erreur de connexion');
            });
    }

    // Download Bon De Livraison
    function downloadBL(trackingNumber) {
        const pdfUrl = `https://client.ozoneexpress.ma/pdf-delivery-note?dn-ref=${trackingNumber}`;
        window.open(pdfUrl, '_blank');
    }

    // Show Tracking Info
    function showTrackingInfo(trackingNumber) {
        alert(`📦 Numéro de suivi:\n${trackingNumber}\n\n🇲🇦 Pays: Maroc\n🏢 Prestataire: OzoneExpress`);
    }

    // Create Bulk BL
    function createBulkBL() {
        const rowIds = Array.from(document.querySelectorAll('.row-checkbox:checked')).map(cb => cb.value);

        if (rowIds.length === 0) {
            alert('⚠️ Veuillez sélectionner au moins une ligne avant de créer un BL.');
            return;
        }

        if (!confirm(`📦 Créer un Bon de Livraison pour ${rowIds.length} colis?`)) return;

        fetch('/ozone/delivery-note', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ row_ids: rowIds })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                alert('✅ Bon de Livraison créé avec succès!\n\n📋 Référence: ' + data.bl_ref);
                if (data.pdf_url) {
                    window.open(data.pdf_url, '_blank');
                }
                location.reload();
            } else {
                alert('❌ Erreur: ' + data.message);
            }
        })
        .catch(err => {
            alert('❌ Erreur de connexion: ' + err.message);
        });
    }

    function clearData() {
        if (!confirm('⚠️ Êtes-vous sûr de vouloir effacer TOUTES les données?')) return;
        
        fetch('/clear-data', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                alert('✅ Toutes les données ont été effacées!');
                location.reload();
            } else {
                alert('❌ Erreur: ' + data.message);
            }
        })
        .catch(err => {
            alert('❌ Erreur: ' + err.message);
        });
    }

    function refreshData() {
        location.reload();
    }

    // 🔴 ADD COMMANDE MODAL FUNCTIONS

    function openAddCommandeModal() {
        document.getElementById('addCommandeModal').classList.add('active');
    }

    function closeAddCommandeModal() {
        document.getElementById('addCommandeModal').classList.remove('active');
        document.getElementById('addCommandeForm').reset();
        document.getElementById('totalDisplayModal').textContent = '0.00 MAD';
    }

    function calculateTotalModal() {
        const quantity = parseFloat(document.getElementById('quantityInput').value) || 0;
        const price = parseFloat(document.getElementById('priceInput').value) || 0;
        const total = quantity * price;
        document.getElementById('totalDisplayModal').textContent = total.toFixed(2) + ' MAD';
    }

    function submitCommande() {
        const form = document.getElementById('addCommandeForm');
        
        if (!form.checkValidity()) {
            form.reportValidity();
            return;
        }
        
        const formData = new FormData(form);
        const submitBtn = document.getElementById('submitCommandeBtn');
        
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Enregistrement...';

        fetch('{{ route("commandes.store") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
            body: formData
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                alert('✅ Commande ajoutée avec succès!\n\n' +
                      `📦 Numéro: #${data.commande.row_number}\n` +
                      `👤 Client: ${data.commande.client}\n` +
                      `📦 Produit: ${data.commande.product}\n` +
                      `💰 Total: ${data.commande.total} MAD`);
                closeAddCommandeModal();
                location.reload();
            } else {
                alert('❌ Erreur: ' + data.message);
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="fas fa-save"></i> Enregistrer';
            }
        })
        .catch(err => {
            alert('❌ Erreur de connexion: ' + err.message);
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<i class="fas fa-save"></i> Enregistrer';
        });
    }

    // Utilities
    function setupKeyboardShortcuts() {
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                document.querySelectorAll('.modal-overlay.active').forEach(el => {
                    el.classList.remove('active');
                });
                closeAddCommandeModal();
            }
        });
    }

    // Close modals on outside click
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('modal-overlay')) {
            e.target.classList.remove('active');
        }
    });

    // Close Add Commande Modal on outside click
    document.getElementById('addCommandeModal')?.addEventListener('click', function(e) {
        if (e.target === this) {
            closeAddCommandeModal();
        }
    });
</script>
@endpush