@extends('layouts.app')

@section('page-title', 'Commandes Confirmées')
@section('page-subtitle', 'Gestion des commandes confirmées prêtes pour l\'expédition')

@section('content')
<style>
    .confirmed-container {
        max-width: 1900px;
        margin: 0 auto;
        padding: 1.5rem;
    }

    .header-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
        flex-wrap: wrap;
        gap: 1rem;
        background: white;
        padding: 1.5rem;
        border-radius: 1rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .page-header-info h1 {
        font-size: 1.75rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .header-buttons {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .btn {
        padding: 0.875rem 1.75rem;
        border: none;
        border-radius: 0.5rem;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        text-decoration: none;
        font-size: 0.95rem;
    }

    .btn-primary {
        background: #3b82f6;
        color: white;
    }

    .btn-warning {
        background: #f59e0b;
        color: white;
    }

    .btn-orange {
        background: #FF6B35;
        color: white;
    }

    .btn-success {
        background: #10b981;
        color: white;
    }

    .btn-purple {
        background: #8b5cf6;
        color: white;
    }

    .btn-danger {
        background: #ef4444;
        color: white;
    }

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

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

    /* ===== TABLE STYLES ===== */
    .table-container {
        background: white;
        border-radius: 0.75rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .filter-section {
        padding: 1.5rem;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        align-items: center;
    }

    .filter-input {
        flex: 1;
        min-width: 150px;
        padding: 0.625rem 0.875rem;
        border: 1px solid #d1d5db;
        border-radius: 0.375rem;
        font-size: 0.875rem;
    }

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

    .orders-table thead {
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
    }

    .orders-table thead th {
        padding: 0.75rem 1rem;
        text-align: left;
        font-weight: 600;
        font-size: 0.75rem;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }

    .orders-table tbody tr {
        border-bottom: 1px solid #f3f4f6;
        transition: background 0.15s ease;
    }

    .orders-table tbody tr:hover {
        background: #f9fafb;
    }

    .orders-table tbody td {
        padding: 1rem;
        font-size: 0.875rem;
        vertical-align: middle;
    }

    .badge {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.25rem 0.625rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
        white-space: nowrap;
    }

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

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

    .delivery-logo {
        width: 32px;
        height: 32px;
        object-fit: contain;
    }

    .action-buttons-table {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .action-btn-small {
        padding: 0.4rem 0.75rem;
        border: none;
        border-radius: 0.375rem;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .action-btn-small:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .action-btn-info {
        background: #dbeafe;
        color: #1e40af;
    }

    .action-btn-success {
        background: #dcfce7;
        color: #166534;
    }

    .action-btn-pdf {
        background: #f3e8ff;
        color: #6b21a8;
    }

    .action-btn-warning {
        background: #fef3c7;
        color: #92400e;
    }

    .action-btn-danger {
        background: #fee2e2;
        color: #991b1b;
    }

    .action-btn-ship {
        background: #10b981;
        color: white;
        font-weight: 600;
    }

    .tracking-number-cell {
        font-family: 'Courier New', monospace;
        font-weight: 600;
        color: #166534;
        font-size: 0.8rem;
    }

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

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

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

    .modal-content {
        background: white;
        border-radius: 0.75rem;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        max-height: 90vh;
        overflow-y: auto;
        max-width: 900px;
        width: 100%;
    }

    .modal-header {
        background: #10b981;
        color: white;
        padding: 1.5rem 2rem;
    }

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

    .modal-body {
        padding: 2rem;
    }

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

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

    .service-card {
        background: white;
        border: 2px solid #e5e7eb;
        border-radius: 0.75rem;
        padding: 1.5rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .service-card:hover {
        border-color: #10b981;
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    }

    /* ✅ NEW: Sendit service card hover */
    .service-card.sendit:hover {
        border-color: #f59e0b;
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
    }

    /* ✅ NEW: District styles for Sendit */
    .district-option {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem;
        cursor: pointer;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
        transition: all 0.2s ease;
    }

    .district-option:hover {
        background: #f9fafb;
        border-color: #10b981;
    }

    .district-name {
        font-weight: 600;
        color: #111827;
    }

    .district-price {
        font-weight: 700;
        color: #10b981;
        background: #dcfce7;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.875rem;
    }

    .parcel-item {
        padding: 0.75rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.375rem;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .parcel-item:hover {
        background: #f9fafb;
    }

    .bulk-actions {
        display: none;
        gap: 0.75rem;
        padding: 0.75rem;
        background: #fef3c7;
        border-radius: 0.5rem;
        align-items: center;
    }

    .bulk-actions.active {
        display: flex;
    }

    @media (max-width: 768px) {
        .orders-table {
            font-size: 0.75rem;
        }

        .orders-table thead th,
        .orders-table tbody td {
            padding: 0.5rem;
        }
    }
</style>

<div class="confirmed-container">
    
    <!-- Header Actions -->
    <div class="header-actions">
        <div class="page-header-info">
            <h1>
                <i class="fas fa-check-circle" style="color: #10b981;"></i>
                CONFIRMÉES
            </h1>
        </div>
        <div class="header-buttons">
            <button onclick="openAddParcelModalWithData(null)" class="btn btn-orange">
                <i class="fas fa-plus"></i> Nouveau Colis
            </button>
            <button onclick="openBLModal()" class="btn btn-purple">
                <i class="fas fa-file-invoice"></i> Créer BL
            </button>
            <a href="{{ route('pending-orders.index') }}" class="btn btn-warning">
                <i class="fas fa-arrow-left"></i> Retour
            </a>
        </div>
    </div>

    <!-- Orders Table -->
    @if($confirmedOrders->count() > 0)
        <div class="table-container">
            <!-- Filters -->
            <div class="filter-section">
                <input type="text" class="filter-input" placeholder="Filtrer destinataire..." id="filterDestinataire">
                <input type="text" class="filter-input" placeholder="Filtrer téléphone..." id="filterTelephone">
                <input type="text" class="filter-input" placeholder="Filtrer ville..." id="filterVille">
                <input type="text" class="filter-input" placeholder="Filtrer produit..." id="filterProduit">

                <!-- Bulk Actions -->
                <div class="bulk-actions" id="bulkActions">
                    <span style="font-weight: 600; font-size: 0.875rem;">
                        <span id="selectedCount">0</span> sélectionné(s)
                    </span>
                    <button onclick="bulkCreateBL()" class="btn btn-purple" style="padding: 0.5rem 1rem; font-size: 0.875rem;">
                        <i class="fas fa-file-invoice"></i> Créer BL
                    </button>
                    <button onclick="bulkDelete()" class="btn btn-danger" style="padding: 0.5rem 1rem; font-size: 0.875rem;">
                        <i class="fas fa-trash"></i> Supprimer
                    </button>
                </div>
            </div>

            <table class="orders-table">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="selectAll" onchange="toggleSelectAll()"></th>
                        <th>N° Colis</th>
                        <th>Destinataire</th>
                        <th>Téléphone</th>
                        <th>Ville</th>
                        <th>Produit</th>
                        <th>Action By</th>
                        <th>Comment</th>
                        <th>Date</th>
                        <th>Livraison</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($confirmedOrders as $order)
                        <tr>
                            <!-- Checkbox -->
                            <td>
                                <input 
                                    type="checkbox" 
                                    class="order-checkbox" 
                                    value="{{ $order->id }}"
                                    data-tracking="{{ $order->tracking_number ?? '' }}"
                                    onchange="updateSelection()"
                                    {{ $order->tracking_number ? '' : 'disabled' }}
                                >
                            </td>

                            <!-- N° Colis -->
                            <td>
                                <div style="font-weight: 700; color: #10b981; font-size: 1.1rem;">#{{ $order->id }}</div>
                            </td>
                            
                            <!-- Destinataire -->
                            <td>
                                <div style="font-weight: 600;">{{ $order->client_name }}</div>
                            </td>
                            
                            <!-- Téléphone -->
                            <td style="font-weight: 500;">{{ $order->client_phone }}</td>
                            
                            <!-- Ville -->
                            <td>{{ $order->city ?? $order->client_city }}</td>
                            
                            <!-- Produit -->
                            <td>{{ $order->product_name }}</td>
                            
                            <!-- Action By -->
                            <td>
                                @if($order->tracking_number)
                                    <div style="display: flex; flex-direction: column; gap: 0.25rem;">
                                        <span class="badge badge-confirme">confirmé</span>
                                        <span class="badge badge-livre">Expédié</span>
                                    </div>
                                @else
                                    <span class="badge badge-confirme">confirmé</span>
                                @endif
                            </td>
                            
                            <!-- Comment -->
                            <td style="font-size: 0.75rem; color: #6b7280;">
                                {{ $order->notes ? Str::limit($order->notes, 30) : '—' }}
                            </td>
                            
                            <!-- Date -->
                            <td style="font-size: 0.75rem;">
                                {{ $order->confirmed_at ? $order->confirmed_at->format('d-m-y H:i') : $order->created_at->format('d-m-y H:i') }}
                            </td>
                            
                            <!-- ✅ MODIFIED: Livraison (Logo) - Show Sendit badge -->
                            <td>
                                @if($order->tracking_number)
                                    <div style="display: flex; align-items: center; gap: 0.5rem;">
                                        @if($order->delivery_service === 'sendit')
                                            <span style="background: #f59e0b; color: white; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 700;">SENDIT</span>
                                        @else
                                            <img src="https://client.ozoneexpress.ma/assets/images/logo.png" alt="OzoneExpress" class="delivery-logo" title="OzoneExpress">
                                        @endif
                                        <code class="tracking-number-cell">{{ $order->tracking_number }}</code>
                                    </div>
                                @else
                                    —
                                @endif
                            </td>
                            
                            <!-- Status -->
                            <td>
                                @if($order->tracking_number)
                                    <span class="badge badge-livre">
                                        <i class="fas fa-check-circle"></i> Expédié
                                    </span>
                                @else
                                    <span class="badge badge-confirme">
                                        <i class="fas fa-clock"></i> En attente
                                    </span>
                                @endif
                            </td>
                            
                            <!-- ✅ MODIFIED: Actions - Don't show BL PDF for Sendit -->
                            <td>
                                <div class="action-buttons-table">
                                    @if($order->tracking_number)
                                        <!-- Info -->
                                        <button 
                                            onclick="showParcelInfo({{ $order->id }})"
                                            class="action-btn-small action-btn-info"
                                            title="Informations">
                                            <i class="fas fa-eye"></i>
                                        </button>

                                        <!-- Tracking -->
                                        <button 
                                            onclick="trackParcel({{ $order->id }})"
                                            class="action-btn-small action-btn-success"
                                            title="Suivi">
                                            <i class="fas fa-route"></i>
                                        </button>

                                        <!-- BL PDF (Only for OzoneExpress) -->
                                        @if($order->delivery_service !== 'sendit')
                                            <button 
                                                onclick="downloadBL('{{ $order->tracking_number }}')"
                                                class="action-btn-small action-btn-pdf"
                                                title="Bon de Livraison">
                                                <i class="fas fa-file-pdf"></i>
                                            </button>
                                        @endif
                                    @else
                                        <!-- Expédier -->
                                        <button 
                                            onclick="openServiceModal({{ $order->id }})"
                                            class="action-btn-small action-btn-ship"
                                            title="Expédier">
                                            <i class="fas fa-shipping-fast"></i>
                                        </button>
                                    @endif

                                    <!-- Edit -->
                                    <button 
                                        onclick="editOrder({{ $order->id }})"
                                        class="action-btn-small action-btn-warning"
                                        title="Modifier">
                                        <i class="fas fa-edit"></i>
                                    </button>

                                    <!-- Delete -->
                                    <button 
                                        onclick="deleteOrder({{ $order->id }})"
                                        class="action-btn-small action-btn-danger"
                                        title="Supprimer">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if($confirmedOrders->hasPages())
            <div style="margin-top: 1.5rem; display: flex; justify-content: center;">
                {{ $confirmedOrders->links() }}
            </div>
        @endif
    @else
        <div class="empty-state">
            <i class="fas fa-inbox" style="font-size: 4rem; margin-bottom: 1rem; opacity: 0.3;"></i>
            <h3>Aucune commande confirmée</h3>
            <p>Les commandes confirmées apparaîtront ici</p>
        </div>
    @endif

</div>

<!-- ✅ MODIFIED: Service Modal - Added Sendit -->
<div id="serviceModal" class="modal-overlay">
    <div class="modal-content">
        <div class="modal-header">
            <h2><i class="fas fa-truck"></i> Choisir le service de livraison</h2>
        </div>
        <div class="modal-body">
            <div class="service-grid">
                <!-- OzoneExpress -->
                <div class="service-card" onclick="selectService('ozone')">
                    <div style="font-size: 2.5rem; margin-bottom: 1rem;">🚀</div>
                    <div style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem;">OzoneExpress</div>
                    <div style="font-size: 0.875rem; color: #6b7280;">Service de livraison rapide</div>
                </div>
                
                <!-- ✅ NEW: Sendit -->
                <div class="service-card sendit" onclick="selectService('sendit')">
                    <div style="font-size: 2.5rem; margin-bottom: 1rem;">📦</div>
                    <div style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem;">Sendit</div>
                    <div style="font-size: 0.875rem; color: #6b7280;">Livraison moderne avec tracking</div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button onclick="closeServiceModal()" class="btn btn-warning">Annuler</button>
        </div>
    </div>
</div>

<!-- City Modal (OzoneExpress) -->
<div id="cityModal" class="modal-overlay">
    <div class="modal-content" style="max-width: 500px;">
        <div class="modal-header">
            <h2>Sélectionnez la ville</h2>
        </div>
        <div class="modal-body">
            <input 
                type="text" 
                id="citySearch" 
                placeholder="🔍 Rechercher..."
                class="filter-input"
                style="margin-bottom: 1rem; width: 100%;"
                onkeyup="filterCities()"
            >
            <select 
                id="citySelect" 
                size="8"
                style="width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;">
                <option value="">Chargement...</option>
            </select>
        </div>
        <div class="modal-footer">
            <button onclick="closeCityModal()" class="btn btn-warning">Annuler</button>
            <button onclick="submitShipment()" class="btn btn-success">Confirmer</button>
        </div>
    </div>
</div>

<!-- ✅ NEW: District Modal (Sendit) -->
<div id="districtModal" class="modal-overlay">
    <div class="modal-content" style="max-width: 600px;">
        <div class="modal-header" style="background: #f59e0b;">
            <h2>Sélectionnez le district (Sendit)</h2>
        </div>
        <div class="modal-body">
            <input 
                type="text" 
                id="districtSearch" 
                placeholder="🔍 Rechercher un district..."
                class="filter-input"
                style="margin-bottom: 1rem; width: 100%;"
                onkeyup="filterDistricts()"
            >
            <div id="districtsList" style="max-height: 400px; 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: 1rem;">Chargement des districts...</p>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button onclick="closeDistrictModal()" class="btn btn-warning">Annuler</button>
        </div>
    </div>
</div>

<!-- BL Creation Modal -->
<div id="blModal" class="modal-overlay">
    <div class="modal-content" style="max-width: 700px;">
        <div class="modal-header" style="background: #8b5cf6;">
            <h2><i class="fas fa-file-invoice"></i> Créer un Bon de Livraison</h2>
        </div>
        <div class="modal-body">
            <div style="margin-bottom: 1.5rem;">
                <h3 style="font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem;">
                    Sélectionnez les colis à inclure:
                </h3>
                <div id="blParcelsList" style="max-height: 300px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 0.375rem; padding: 1rem;">
                    <!-- Will be filled by JavaScript -->
                </div>
            </div>
            <div style="background: #f9fafb; padding: 1rem; border-radius: 0.375rem; border-left: 4px solid #8b5cf6;">
                <div style="font-weight: 600; margin-bottom: 0.5rem;">📦 Colis sélectionnés: <span id="blSelectedCount">0</span></div>
                <div style="font-size: 0.875rem; color: #6b7280;">Sélectionnez au moins un colis pour créer le BL</div>
            </div>
        </div>
        <div class="modal-footer">
            <button onclick="closeBLModal()" class="btn btn-warning">Annuler</button>
            <button onclick="createBL()" class="btn btn-purple">
                <i class="fas fa-file-invoice"></i> Créer BL
            </button>
        </div>
    </div>
</div>

<!-- Parcel Info Modal -->
<div id="parcelInfoModal" class="modal-overlay">
    <div class="modal-content" style="max-width: 750px;">
        <div class="modal-header">
            <h2><i class="fas fa-box-open"></i> Informations du Colis</h2>
        </div>
        <div class="modal-body" id="parcelInfoContent">
            <div style="text-align: center; padding: 2rem;">
                <i class="fas fa-spinner fa-spin" style="font-size: 2rem; color: #3b82f6;"></i>
            </div>
        </div>
        <div class="modal-footer">
            <button onclick="closeParcelInfoModal()" class="btn btn-warning">Fermer</button>
        </div>
    </div>
</div>

<!-- Add Parcel Modal -->
<div id="addParcelModal" class="modal-overlay">
    <div class="modal-content" style="max-width: 650px;">
        <div class="modal-header" style="background: #FF6B35;">
            <h2><i class="fas fa-plus-circle"></i> Nouveau Colis</h2>
        </div>
        <div class="modal-body">
            <form id="addParcelForm">
                <div style="display: grid; gap: 1rem;">
                    <div>
                        <label style="display: block; font-weight: 500; margin-bottom: 0.5rem;">Nom *</label>
                        <input type="text" name="parcel_receiver" id="parcel_receiver" required class="filter-input" style="width: 100%;">
                    </div>
                    <div>
                        <label style="display: block; font-weight: 500; margin-bottom: 0.5rem;">Téléphone *</label>
                        <input type="text" name="parcel_phone" id="parcel_phone" required class="filter-input" style="width: 100%;">
                    </div>
                    <div>
                        <label style="display: block; font-weight: 500; margin-bottom: 0.5rem;">Ville *</label>
                        <select name="parcel_city" id="parcel_city" required class="filter-input" style="width: 100%;">
                            <option value="">Chargement...</option>
                        </select>
                    </div>
                    <div>
                        <label style="display: block; font-weight: 500; margin-bottom: 0.5rem;">Adresse *</label>
                        <textarea name="parcel_address" id="parcel_address" required rows="2" class="filter-input" style="width: 100%;"></textarea>
                    </div>
                    <div>
                        <label style="display: block; font-weight: 500; margin-bottom: 0.5rem;">Prix (MAD) *</label>
                        <input type="number" name="parcel_price" id="parcel_price" required min="1" step="0.01" class="filter-input" style="width: 100%;">
                    </div>
                    <div>
                        <label style="display: block; font-weight: 500; margin-bottom: 0.5rem;">Type *</label>
                        <select name="parcel_stock" id="parcel_stock" required class="filter-input" style="width: 100%;">
                            <option value="1">📦 Stock</option>
                            <option value="0">🚚 Ramassage</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button onclick="closeAddParcelModal()" class="btn btn-warning">Annuler</button>
            <button onclick="submitManualParcel()" class="btn btn-success">Créer</button>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    let currentOrderId = null;
    let currentService = null;
    let allCitiesOptions = [];
    let allDistrictsData = []; // ✅ NEW
    let selectedDistrictId = null; // ✅ NEW

    // ===== SELECTION MANAGEMENT =====
    function toggleSelectAll() {
        const selectAll = document.getElementById('selectAll');
        const checkboxes = document.querySelectorAll('.order-checkbox:not(:disabled)');
        checkboxes.forEach(cb => cb.checked = selectAll.checked);
        updateSelection();
    }

    function updateSelection() {
        const checked = document.querySelectorAll('.order-checkbox:checked').length;
        document.getElementById('selectedCount').textContent = checked;
        document.getElementById('bulkActions').classList.toggle('active', checked > 0);
    }

    // ===== BULK ACTIONS =====
    function bulkCreateBL() {
        const selectedWithTracking = Array.from(document.querySelectorAll('.order-checkbox:checked'))
            .filter(cb => cb.dataset.tracking)
            .map(cb => cb.dataset.tracking);
        
        if (selectedWithTracking.length === 0) {
            alert('⚠️ Aucun colis expédié sélectionné');
            return;
        }

        createBLWithTracking(selectedWithTracking);
    }

    function bulkDelete() {
        const selectedIds = Array.from(document.querySelectorAll('.order-checkbox:checked'))
            .map(cb => cb.value);
        
        if (selectedIds.length === 0) {
            alert('⚠️ Aucun colis sélectionné');
            return;
        }

        if (!confirm(`⚠️ Supprimer ${selectedIds.length} commande(s) ?`)) {
            return;
        }

        const loading = showLoading('Suppression en cours...');

        fetch('/pending-orders/bulk-delete', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ ids: selectedIds })
        })
        .then(response => response.json())
        .then(data => {
            loading.remove();
            if (data.success) {
                alert(`✅ ${data.count} commande(s) supprimée(s)`);
                location.reload();
            } else {
                alert('❌ Erreur: ' + (data.message || 'Échec'));
            }
        })
        .catch(error => {
            loading.remove();
            alert('❌ Erreur: ' + error.message);
        });
    }

    // ===== BL MODAL =====
    function openBLModal() {
        const shippedOrders = @json($confirmedOrders->whereNotNull('tracking_number')->values());
        const parcelsList = document.getElementById('blParcelsList');
        
        if (shippedOrders.length === 0) {
            parcelsList.innerHTML = '<div style="text-align: center; color: #9ca3af; padding: 2rem;">Aucun colis expédié disponible</div>';
        } else {
            parcelsList.innerHTML = shippedOrders.map(order => `
                <div class="parcel-item">
                    <input type="checkbox" class="bl-parcel-checkbox" value="${order.tracking_number}" onchange="updateBLCount()">
                    <div style="flex: 1;">
                        <div style="font-weight: 600;">#${order.id} - ${order.client_name}</div>
                        <div style="font-size: 0.75rem; color: #6b7280; font-family: monospace;">${order.tracking_number}</div>
                    </div>
                    <div style="font-weight: 600; color: #10b981;">${parseFloat(order.total).toFixed(2)} MAD</div>
                </div>
            `).join('');
        }
        
        document.getElementById('blModal').classList.add('active');
    }

    function closeBLModal() {
        document.getElementById('blModal').classList.remove('active');
    }

    function updateBLCount() {
        const checked = document.querySelectorAll('.bl-parcel-checkbox:checked').length;
        document.getElementById('blSelectedCount').textContent = checked;
    }

    function createBL() {
        const selectedParcels = Array.from(document.querySelectorAll('.bl-parcel-checkbox:checked'))
            .map(cb => cb.value);
        
        if (selectedParcels.length === 0) {
            alert('⚠️ Veuillez sélectionner au moins un colis');
            return;
        }

        createBLWithTracking(selectedParcels);
    }

    function createBLWithTracking(trackingNumbers) {
        if (!trackingNumbers || trackingNumbers.length === 0) {
            alert('⚠️ Aucun numéro de suivi fourni');
            return;
        }

        const loading = showLoading('Création du Bon de Livraison...');

        fetch('/pending-orders/create-bon-livraison', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ 
                tracking_numbers: trackingNumbers 
            })
        })
        .then(response => response.json())
        .then(data => {
            loading.remove();
            
            if (data.success) {
                closeBLModal();
                
                const message = `✅ Bon de Livraison créé et sauvegardé!\n\n` +
                              `📦 Référence: ${data.bl_ref}\n` +
                              `📦 Nombre de colis: ${data.parcel_count}\n\n` +
                              `Télécharger maintenant?`;
                
                if (confirm(message)) {
                    window.open(data.pdf_url, '_blank');
                    
                    setTimeout(() => {
                        if (confirm('📄 Télécharger les étiquettes A4?')) {
                            window.open(data.labels_url, '_blank');
                        }
                    }, 1000);
                    
                    setTimeout(() => {
                        if (confirm('🏷️ Télécharger les étiquettes 10x10cm?')) {
                            window.open(data.labels_4x4_url, '_blank');
                        }
                    }, 2000);
                }
                
                setTimeout(() => {
                    location.reload();
                }, 3000);
                
            } else {
                if (data.redirect) {
                    if (confirm(data.message + '\n\nAller aux paramètres maintenant?')) {
                        window.location.href = data.redirect;
                    }
                } else {
                    alert('❌ Erreur: ' + (data.message || 'Impossible de créer le BL'));
                }
            }
        })
        .catch(error => {
            loading.remove();
            console.error('Erreur:', error);
            alert('❌ Erreur de connexion: ' + error.message);
        });
    }

    // ===== SERVICE MODAL =====
    function openServiceModal(orderId) {
        currentOrderId = parseInt(orderId);
        document.getElementById('serviceModal').classList.add('active');
    }

    function closeServiceModal() {
        document.getElementById('serviceModal').classList.remove('active');
        currentOrderId = null;
        currentService = null;
    }

    // ✅ MODIFIED: selectService - Added Sendit handling
    function selectService(service) {
        currentService = service;
        document.getElementById('serviceModal').classList.remove('active');

        if (service === 'ozone') {
            document.getElementById('cityModal').classList.add('active');
            loadCities();
        } else if (service === 'sendit') {
            // ✅ NEW: Open Sendit districts modal
            document.getElementById('districtModal').classList.add('active');
            loadDistricts();
        }
    }

    // ===== CITY MANAGEMENT (OzoneExpress) =====
    function loadCities() {
        const select = document.getElementById('citySelect');
        select.innerHTML = '<option value="">Chargement...</option>';
        
        fetch('https://api.ozonexpress.ma/cities')
            .then(response => response.json())
            .then(data => {
                select.innerHTML = '<option value="">-- Sélectionnez --</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(error);
                select.innerHTML = '<option value="">❌ Erreur de chargement</option>';
                alert('❌ Impossible de charger les villes');
            });
    }

    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 closeCityModal() {
        document.getElementById('cityModal').classList.remove('active');
        document.getElementById('citySearch').value = '';
        currentService = null;
        currentOrderId = null;
    }

    // ✅ NEW: DISTRICT MANAGEMENT (Sendit)
    function loadDistricts() {
        const container = document.getElementById('districtsList');
        container.innerHTML = '<div style="text-align: center; padding: 2rem;"><i class="fas fa-spinner fa-spin" style="font-size: 2rem; color: #f59e0b;"></i></div>';
        
        fetch('/api/sendit/cities')
            .then(response => response.json())
            .then(data => {
                if (data.success && data.data) {
                    allDistrictsData = data.data;
                    renderDistricts(allDistrictsData);
                } else {
                    container.innerHTML = '<div style="text-align: center; color: #ef4444; padding: 2rem;">❌ Erreur de chargement</div>';
                }
            })
            .catch(error => {
                console.error('Erreur districts:', error);
                container.innerHTML = '<div style="text-align: center; color: #ef4444; padding: 2rem;">❌ Impossible de charger les districts</div>';
            });
    }

    function renderDistricts(districts) {
        const container = document.getElementById('districtsList');
        
        if (districts.length === 0) {
            container.innerHTML = '<div style="text-align: center; color: #9ca3af; padding: 2rem;">Aucun district trouvé</div>';
            return;
        }

        container.innerHTML = districts.map(district => `
            <div class="district-option" onclick="selectDistrict(${district.id}, '${district.name}', '${district.price}')">
                <div>
                    <div class="district-name">${district.name}</div>
                    <div style="font-size: 0.875rem; color: #6b7280;">${district.ville || 'Ville'}</div>
                </div>
                <div class="district-price">${district.price} MAD</div>
            </div>
        `).join('');
    }

    function filterDistricts() {
        const searchTerm = document.getElementById('districtSearch').value.toLowerCase();
        
        if (!searchTerm) {
            renderDistricts(allDistrictsData);
            return;
        }

        const filtered = allDistrictsData.filter(district => 
            (district.name || '').toLowerCase().includes(searchTerm) ||
            (district.ville || '').toLowerCase().includes(searchTerm)
        );
        
        renderDistricts(filtered);
    }

    function selectDistrict(districtId, districtName, districtPrice) {
        selectedDistrictId = districtId;
        
        if (confirm(`Expédier vers:\n\n📍 ${districtName}\n💰 ${districtPrice} MAD\n\nConfirmer?`)) {
            submitShipmentSendit();
        }
    }

    function closeDistrictModal() {
        document.getElementById('districtModal').classList.remove('active');
        document.getElementById('districtSearch').value = '';
        selectedDistrictId = null;
        currentService = null;
        currentOrderId = null;
    }

    // ===== SUBMIT SHIPMENT (OzoneExpress) =====
    function submitShipment() {
        const cityId = document.getElementById('citySelect').value;
        
        if (!cityId) {
            alert('⚠️ Veuillez sélectionner une ville');
            return;
        }

        if (!currentOrderId) {
            alert('❌ Erreur: Commande non identifiée');
            return;
        }

        const loading = showLoading('Expédition en cours...');

        fetch(`/pending-orders/${currentOrderId}/ship-order`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ 
                city_id: cityId, 
                service: 'ozone' 
            })
        })
        .then(response => response.json())
        .then(data => {
            loading.remove();
            
            if (data.success) {
                closeCityModal();
                closeServiceModal();
                alert(`✅ Colis expédié avec succès!\n\n📦 Numéro de suivi:\n${data.tracking_number}`);
                location.reload();
            } else {
                alert('❌ ' + (data.message || 'Échec de l\'expédition'));
                
                if (data.message && data.message.includes('déjà été expédié')) {
                    closeCityModal();
                    closeServiceModal();
                }
            }
        })
        .catch(error => {
            loading.remove();
            console.error(error);
            alert('❌ Erreur de connexion: ' + error.message);
        });
    }

    // ✅ NEW: SUBMIT SHIPMENT (Sendit)
    function submitShipmentSendit() {
        if (!selectedDistrictId) {
            alert('⚠️ Veuillez sélectionner un district');
            return;
        }

        if (!currentOrderId) {
            alert('❌ Erreur: Commande non identifiée');
            return;
        }

        const loading = showLoading('Expédition via Sendit...');

        fetch(`/pending-orders/${currentOrderId}/ship-order`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ 
                district_id: selectedDistrictId,
                service: 'sendit'
            })
        })
        .then(response => response.json())
        .then(data => {
            loading.remove();
            
            if (data.success) {
                closeDistrictModal();
                closeServiceModal();
                
                let message = `✅ Colis expédié via Sendit!\n\n📦 Numéro de suivi:\n${data.tracking_number}`;
                
                if (data.label_url) {
                    message += `\n\n🏷️ Étiquette disponible!`;
                    
                    if (confirm(message + '\n\nTélécharger l\'étiquette maintenant?')) {
                        window.open(data.label_url, '_blank');
                    }
                } else {
                    alert(message);
                }
                
                setTimeout(() => location.reload(), 1500);
            } else {
                alert('❌ ' + (data.message || 'Échec de l\'expédition'));
            }
        })
        .catch(error => {
            loading.remove();
            console.error(error);
            alert('❌ Erreur de connexion: ' + error.message);
        });
    }

    // ===== ADD PARCEL MODAL =====
    function openAddParcelModalWithData(orderData = null) {
        document.getElementById('addParcelModal').classList.add('active');
        loadParcelCities();
    }

    function closeAddParcelModal() {
        document.getElementById('addParcelModal').classList.remove('active');
    }

    function loadParcelCities() {
        const select = document.getElementById('parcel_city');
        select.innerHTML = '<option value="">Chargement...</option>';
        
        fetch('https://api.ozonexpress.ma/cities')
            .then(response => response.json())
            .then(data => {
                select.innerHTML = '<option value="">-- Sélectionnez --</option>';
                
                const cities = data.CITIES || data.cities || {};
                Object.entries(cities)
                    .sort((a, b) => (a[1].name || a[1].NAME || '').localeCompare(b[1].name || b[1].NAME || ''))
                    .forEach(([id, city]) => {
                        const option = document.createElement('option');
                        option.value = id;
                        option.textContent = city.name || city.NAME || `Ville #${id}`;
                        select.appendChild(option);
                    });
            });
    }

    function submitManualParcel() {
        const form = document.getElementById('addParcelForm');
        if (!form.checkValidity()) {
            form.reportValidity();
            return;
        }

        const formData = new FormData(form);
        const data = Object.fromEntries(formData.entries());

        const loading = showLoading('Création et expédition...');

        fetch('/pending-orders/add-manual-parcel', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            loading.remove();
            if (data.success) {
                closeAddParcelModal();
                alert(`✅ ${data.message}\n\n📦 Tracking: ${data.tracking_number}\n🏙️ Ville: ${data.city_name || 'N/A'}`);
                location.reload();
            } else {
                alert('❌ Erreur: ' + (data.message || 'Échec'));
            }
        })
        .catch(error => {
            loading.remove();
            alert('❌ Erreur: ' + error.message);
        });
    }

    // ===== EDIT & DELETE =====
    function editOrder(orderId) {
        window.location.href = `/pending-orders/${orderId}/edit`;
    }

    function deleteOrder(orderId) {
        if (!confirm('⚠️ Supprimer cette commande définitivement ?')) {
            return;
        }

        const loading = showLoading('Suppression en cours...');

        fetch(`/pending-orders/${orderId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            loading.remove();
            if (data.success) {
                alert('✅ Commande supprimée avec succès');
                location.reload();
            } else {
                alert('❌ Erreur: ' + (data.message || 'Échec'));
            }
        })
        .catch(error => {
            loading.remove();
            alert('❌ Erreur: ' + error.message);
        });
    }

    // ===== OTHER FUNCTIONS =====
    function downloadBL(trackingNumber) {
        window.open(`https://client.ozoneexpress.ma/pdf-delivery-note?dn-ref=${trackingNumber}`, '_blank');
    }

    function showParcelInfo(orderId) {
        document.getElementById('parcelInfoModal').classList.add('active');
        
        fetch(`/pending-orders/${orderId}/parcel-info`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const order = data.order;
                    document.getElementById('parcelInfoContent').innerHTML = `
                        <div style="display: grid; gap: 1rem;">
                            <div style="padding: 1rem; background: #f0fdf4; border-radius: 0.5rem; border-left: 4px solid #10b981;">
                                <strong style="color: #166534;">N° Colis:</strong> <span style="font-size: 1.25rem; font-weight: 700; color: #10b981;">#${order.id}</span>
                            </div>
                            <div><strong>Client:</strong> ${order.client_name}</div>
                            <div><strong>Téléphone:</strong> ${order.client_phone}</div>
                            <div><strong>Ville:</strong> ${order.city || order.client_city}</div>
                            <div><strong>Adresse:</strong> ${order.client_address || order.address || '—'}</div>
                            <div><strong>Produit:</strong> ${order.product_name}</div>
                            <div><strong>Quantité:</strong> ${order.quantity}</div>
                            <div><strong>Total:</strong> <span style="font-weight: 700; color: #10b981;">${parseFloat(order.total).toFixed(2)} MAD</span></div>
                            ${order.tracking_number ? `
                                <div style="padding: 1rem; background: #dbeafe; border-radius: 0.5rem; border-left: 4px solid #3b82f6;">
                                    <strong>Tracking:</strong> <code style="font-size: 1.1rem; font-weight: 700; color: #1e40af;">${order.tracking_number}</code>
                                </div>
                            ` : ''}
                            ${order.notes ? `<div><strong>Notes:</strong> ${order.notes}</div>` : ''}
                        </div>
                    `;
                }
            })
            .catch(error => {
                document.getElementById('parcelInfoContent').innerHTML = `
                    <div style="text-align: center; color: #ef4444; padding: 2rem;">
                        <i class="fas fa-exclamation-triangle" style="font-size: 2rem;"></i>
                        <p style="margin-top: 1rem;">Erreur de chargement</p>
                    </div>
                `;
            });
    }

    function closeParcelInfoModal() {
        document.getElementById('parcelInfoModal').classList.remove('active');
    }

    function trackParcel(orderId) {
        const loading = showLoading('Récupération du suivi...');
        
        fetch(`/pending-orders/${orderId}/track-order`)
            .then(response => response.json())
            .then(data => {
                loading.remove();
                if (data.success) {
                    let info = `📍 SUIVI DU COLIS\n\n`;
                    info += `📦 Numéro: ${data.tracking_number}\n`;
                    info += `📊 Statut: ${data.status || 'En cours'}\n`;
                    
                    if (data.tracking_info) {
                        info += `\n📋 Détails:\n${JSON.stringify(data.tracking_info, null, 2)}`;
                    }
                    
                    alert(info);
                } else {
                    alert('❌ Impossible de récupérer le suivi');
                }
            })
            .catch(error => {
                loading.remove();
                alert('❌ Erreur: ' + error.message);
            });
    }

    // ===== HELPER FUNCTIONS =====
    function showLoading(message) {
        const loading = document.createElement('div');
        loading.id = 'globalLoading';
        loading.style.cssText = 'position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 2000;';
        loading.innerHTML = `
            <div style="background: white; padding: 2rem; border-radius: 0.75rem; text-align: center; min-width: 300px;">
                <i class="fas fa-spinner fa-spin" style="font-size: 2rem; color: #10b981;"></i>
                <p style="margin-top: 1rem; font-weight: 600;">${message || 'Chargement...'}</p>
            </div>
        `;
        document.body.appendChild(loading);
        return loading;
    }

    // Close modals on ESC
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            document.querySelectorAll('.modal-overlay.active').forEach(m => m.classList.remove('active'));
        }
    });

    // Close modal on outside click
    document.querySelectorAll('.modal-overlay').forEach(modal => {
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                modal.classList.remove('active');
            }
        });
    });
</script>
@endpush