@extends('layouts.app')

@section('title', 'Commandes en Attente')

@section('content')
<div class="container-fluid mt-4 px-4">
    <!-- Header Section -->
    <div class="page-header mb-4">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
            <div>
                <h1 class="page-title mb-2">
                    <i class="fas fa-hourglass-half text-warning me-2"></i>
                    Commandes en Attente
                </h1>
                <p class="page-subtitle mb-0">
                    <span class="badge bg-primary rounded-pill px-3 py-2">{{ $pendingOrders->count() }}</span>
                    commande(s) en attente
                </p>
            </div>
            <div>
                <a href="{{ route('commandes.index') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i> Retour aux Commandes
                </a>
            </div>
        </div>
    </div>

    <!-- Alert Messages -->
    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
        <div class="d-flex align-items-center">
            <i class="fas fa-check-circle fs-4 me-3"></i>
            <div>{{ session('success') }}</div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show shadow-sm" role="alert">
        <div class="d-flex align-items-center">
            <i class="fas fa-exclamation-circle fs-4 me-3"></i>
            <div>{{ session('error') }}</div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    <!-- No Data Message -->
    @if($pendingOrders->isEmpty())
    <div class="empty-state-card">
        <div class="empty-state-icon">
            <i class="fas fa-inbox"></i>
        </div>
        <h3 class="empty-state-title">Aucune commande en attente</h3>
        <p class="empty-state-text">Toutes les commandes ont été traitées avec succès</p>
        <a href="{{ route('commandes.index') }}" class="btn btn-primary btn-lg mt-3">
            <i class="fas fa-plus me-2"></i> Ajouter une Nouvelle Commande
        </a>
    </div>
    @else

    <!-- Status Filter Tabs -->
    <div class="status-tabs-card mb-4">
        <ul class="nav nav-pills status-tabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link {{ isset($currentStatus) && $currentStatus == 'pending' ? 'active' : '' }}" 
                   href="{{ route('pending-orders.by-status', 'pending') }}">
                    <i class="fas fa-hourglass-half"></i>
                    <span>En Attente</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ isset($currentStatus) && $currentStatus == 'confirmed' ? 'active' : '' }}" 
                   href="{{ route('pending-orders.by-status', 'confirmed') }}">
                    <i class="fas fa-check-circle"></i>
                    <span>Confirmées</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ isset($currentStatus) && $currentStatus == 'cancelled' ? 'active' : '' }}" 
                   href="{{ route('pending-orders.by-status', 'cancelled') }}">
                    <i class="fas fa-times-circle"></i>
                    <span>Annulées</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ !isset($currentStatus) ? 'active' : '' }}" 
                   href="{{ route('pending-orders.index') }}">
                    <i class="fas fa-list"></i>
                    <span>Toutes</span>
                </a>
            </li>
        </ul>
    </div>

    <!-- Action Buttons -->
    <div class="action-buttons-container mb-4" id="bulkActionsBar" style="display: none;">
        <div class="d-flex gap-2 flex-wrap align-items-center">
            <button type="button" class="btn btn-success" id="approveSelectedBtn">
                <i class="fas fa-check me-2"></i> Approuver la Sélection
            </button>
            <button type="button" class="btn btn-danger" id="deleteSelectedBtn">
                <i class="fas fa-trash me-2"></i> Supprimer la Sélection
            </button>
            <button type="button" class="btn btn-outline-secondary" id="clearSelectionBtn">
                <i class="fas fa-times me-2"></i> Annuler la Sélection
            </button>
            <div class="ms-auto">
                <span class="badge bg-primary fs-6 px-3 py-2" id="selectedCount">0 sélectionné(s)</span>
            </div>
        </div>
    </div>

    <!-- Table Section -->
    <div class="table-card">
        <div class="table-responsive">
            <table class="table table-hover orders-table mb-0">
                <thead>
                    <tr>
                        <th width="50px" class="text-center">
                            <div class="form-check d-flex justify-content-center align-items-center">
                                <input type="checkbox" id="selectAllCheckbox" class="form-check-input">
                            </div>
                        </th>
                        <th width="60px" class="text-center">#</th>
                        <th>Client</th>
                        <th>Téléphone</th>
                        <th>Ville</th>
                        <th>Produit</th>
                        <th width="100px" class="text-center">Qté</th>
                        <th width="120px" class="text-end">Prix</th>
                        <th width="120px" class="text-end">Total</th>
                        <th width="140px">Date</th>
                        <th width="200px" class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($pendingOrders as $index => $order)
                    <tr class="order-row" data-order-id="{{ $order->id }}">
                        <!-- Checkbox -->
                        <td class="text-center">
                            <div class="form-check d-flex justify-content-center align-items-center">
                                <input type="checkbox" class="form-check-input order-checkbox" value="{{ $order->id }}">
                            </div>
                        </td>

                        <!-- Row Number -->
                        <td class="text-center">
                            <span class="row-number">{{ $index + 1 }}</span>
                        </td>

                        <!-- Client Name -->
                        <td>
                            <div class="client-name">
                                {{ $order->structured_data['Nom du client'] ?? $order->structured_data['client_name'] ?? 'N/A' }}
                            </div>
                        </td>

                        <!-- Phone -->
                        <td>
                            <div class="phone-number">
                                <i class="fas fa-phone text-muted me-1"></i>
                                {{ $order->structured_data['Téléphone'] ?? $order->structured_data['client_phone'] ?? 'N/A' }}
                            </div>
                        </td>

                        <!-- City -->
                        <td>
                            <div class="city-name">
                                <i class="fas fa-map-marker-alt text-muted me-1"></i>
                                {{ $order->structured_data['Ville'] ?? $order->structured_data['city'] ?? 'N/A' }}
                            </div>
                        </td>

                        <!-- Product Name -->
                        <td>
                            <div class="product-name">
                                {{ $order->structured_data['products'] ?? $order->structured_data['product_name'] ?? 'N/A' }}
                            </div>
                        </td>

                        <!-- Quantity -->
                        <td class="text-center">
                            <span class="badge bg-info-soft">
                                {{ $order->structured_data['quantite'] ?? $order->structured_data['quantity'] ?? 1 }}
                            </span>
                        </td>

                        <!-- Price -->
                        <td class="text-end">
                            <span class="price-value">
                                {{ number_format($order->structured_data['Prix'] ?? $order->structured_data['price'] ?? 0, 2) }} DH
                            </span>
                        </td>

                        <!-- Total -->
                        <td class="text-end">
                            <span class="total-value">
                                {{ number_format($order->structured_data['Total'] ?? (($order->structured_data['Prix'] ?? 0) * ($order->structured_data['quantite'] ?? 1)), 2) }} DH
                            </span>
                        </td>

                        <!-- Created Date -->
                        <td>
                            <div class="date-time">
                                <i class="fas fa-clock text-muted me-1"></i>
                                {{ $order->created_at->format('d/m/Y') }}<br>
                                <small class="text-muted">{{ $order->created_at->format('H:i') }}</small>
                            </div>
                        </td>

                        <!-- Actions -->
                        <td>
                            <div class="action-buttons">
                                <button type="button" class="btn btn-sm btn-warning edit-btn" 
                                        data-order-id="{{ $order->id }}" 
                                        data-bs-toggle="tooltip" 
                                        title="Modifier">
                                    <i class="fas fa-edit"></i>
                                </button>

                                <button type="button" class="btn btn-sm btn-success approve-btn" 
                                        data-order-id="{{ $order->id }}" 
                                        data-bs-toggle="tooltip" 
                                        title="Approuver">
                                    <i class="fas fa-check"></i>
                                </button>

                                <button type="button" class="btn btn-sm btn-danger delete-btn" 
                                        data-order-id="{{ $order->id }}" 
                                        data-bs-toggle="tooltip" 
                                        title="Supprimer">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    @endif
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content modern-modal">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-edit text-warning me-2"></i> Modifier la Commande
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editForm">
                <div class="modal-body">
                    <input type="hidden" id="orderId" name="order_id">

                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label"><i class="fas fa-user me-2"></i>Nom du Client</label>
                            <input type="text" class="form-control" id="editClientName" name="client_name" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label"><i class="fas fa-phone me-2"></i>Téléphone</label>
                            <input type="tel" class="form-control" id="editClientPhone" name="client_phone" required>
                        </div>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label"><i class="fas fa-map-marker-alt me-2"></i>Adresse</label>
                            <input type="text" class="form-control" id="editAddress" name="client_address" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label"><i class="fas fa-city me-2"></i>Ville</label>
                            <input type="text" class="form-control" id="editCity" name="client_city" required>
                        </div>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label"><i class="fas fa-box me-2"></i>Produit</label>
                            <input type="text" class="form-control" id="editProduct" name="product_name" required>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label"><i class="fas fa-sort-numeric-up me-2"></i>Quantité</label>
                            <input type="number" class="form-control" id="editQuantity" name="quantity" min="1" required>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label"><i class="fas fa-money-bill-wave me-2"></i>Prix</label>
                            <input type="number" class="form-control" id="editPrice" name="price" step="0.01" min="0" required>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label"><i class="fas fa-comment me-2"></i>Remarques</label>
                        <textarea class="form-control" id="editNotes" name="notes" rows="3"></textarea>
                    </div>

                    <div class="total-preview">
                        <div class="d-flex justify-content-between align-items-center">
                            <span>Total Estimé:</span>
                            <span class="total-amount"><span id="totalPrice">0.00</span> DH</span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-2"></i>Annuler
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-2"></i>Enregistrer
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content modern-modal">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle me-2"></i>Confirmer la Suppression
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center py-4">
                <div class="delete-icon mb-3">
                    <i class="fas fa-trash-alt"></i>
                </div>
                <h5 class="mb-3">Êtes-vous sûr de vouloir supprimer cette commande ?</h5>
                <p class="text-muted mb-0">
                    <strong id="deleteOrderInfo"></strong>
                </p>
                <small class="text-danger d-block mt-2">
                    <i class="fas fa-info-circle me-1"></i>Cette action est irréversible
                </small>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>Annuler
                </button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                    <i class="fas fa-trash me-2"></i>Supprimer
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Approve Modal -->
<div class="modal fade" id="approveModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content modern-modal">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">
                    <i class="fas fa-check-circle me-2"></i>Confirmer l'Approbation
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center py-4">
                <div class="approve-icon mb-3">
                    <i class="fas fa-check-circle"></i>
                </div>
                <h5 class="mb-3">Voulez-vous approuver cette commande ?</h5>
                <p class="text-muted mb-0">
                    <strong id="approveOrderInfo"></strong>
                </p>
                <small class="text-info d-block mt-2">
                    <i class="fas fa-info-circle me-1"></i>La quantité sera déduite du stock automatiquement
                </small>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>Annuler
                </button>
                <button type="button" class="btn btn-success" id="confirmApproveBtn">
                    <i class="fas fa-check me-2"></i>Approuver
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('styles')
<style>
    :root {
        --primary-color: #4f46e5;
        --success-color: #10b981;
        --warning-color: #f59e0b;
        --danger-color: #ef4444;
        --info-color: #3b82f6;
        --gray-50: #f9fafb;
        --gray-100: #f3f4f6;
        --gray-200: #e5e7eb;
        --gray-300: #d1d5db;
        --gray-400: #9ca3af;
        --gray-500: #6b7280;
        --gray-600: #4b5563;
        --gray-700: #374151;
        --gray-800: #1f2937;
        --gray-900: #111827;
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    body {
        background-color: var(--gray-50);
        font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    }

    /* Page Header */
    .page-header {
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
        padding: 2rem;
        border-radius: 16px;
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--gray-200);
    }

    .page-title {
        font-size: 2rem;
        font-weight: 800;
        color: var(--gray-900);
        margin: 0;
        letter-spacing: -0.025em;
    }

    .page-subtitle {
        color: var(--gray-600);
        font-size: 1rem;
        font-weight: 500;
    }

    /* Empty State */
    .empty-state-card {
        background: white;
        padding: 5rem 2rem;
        border-radius: 20px;
        box-shadow: var(--shadow);
        text-align: center;
        border: 2px dashed var(--gray-200);
    }

    .empty-state-icon {
        font-size: 6rem;
        color: var(--gray-300);
        margin-bottom: 2rem;
        animation: float 3s ease-in-out infinite;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }

    .empty-state-title {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--gray-800);
        margin-bottom: 0.75rem;
    }

    .empty-state-text {
        color: var(--gray-500);
        font-size: 1.1rem;
    }

    /* Status Tabs */
    .status-tabs-card {
        background: white;
        padding: 1.25rem;
        border-radius: 16px;
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--gray-200);
    }

    .status-tabs {
        border-bottom: none;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .status-tabs .nav-link {
        border: 2px solid transparent;
        border-radius: 12px;
        padding: 0.875rem 1.75rem;
        color: var(--gray-600);
        font-weight: 700;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        gap: 0.625rem;
        font-size: 0.95rem;
    }

    .status-tabs .nav-link:hover {
        background-color: var(--gray-50);
        color: var(--primary-color);
        transform: translateY(-2px);
    }

    .status-tabs .nav-link.active {
        background: linear-gradient(135deg, var(--primary-color) 0%, #6366f1 100%);
        color: white;
        box-shadow: 0 10px 20px -10px rgba(79, 70, 229, 0.5);
        transform: translateY(-2px);
    }

    .status-tabs .nav-link i {
        font-size: 1.25rem;
    }

    /* Action Buttons Container */
    .action-buttons-container {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        padding: 1.25rem;
        border-radius: 14px;
        border-left: 5px solid var(--warning-color);
        box-shadow: var(--shadow-sm);
    }

    /* Table Card */
    .table-card {
        background: white;
        border-radius: 16px;
        box-shadow: var(--shadow-md);
        overflow: hidden;
        border: 1px solid var(--gray-200);
    }

    .orders-table {
        font-size: 0.925rem;
        margin-bottom: 0;
    }

    .orders-table thead {
        background: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 100%);
        color: white;
    }

    .orders-table thead th {
        padding: 1.125rem 1rem;
        font-weight: 700;
        border: none;
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 0.075em;
        white-space: nowrap;
    }

    .orders-table tbody td {
        padding: 1.125rem 1rem;
        vertical-align: middle;
        border-bottom: 1px solid var(--gray-100);
    }

    .orders-table tbody tr {
        transition: all 0.2s ease;
    }

    .orders-table tbody tr:hover {
        background: linear-gradient(90deg, var(--gray-50) 0%, transparent 100%);
        transform: scale(1.005);
    }

    /* Table Cells */
    .row-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        height: 36px;
        background: linear-gradient(135deg, var(--primary-color) 0%, #6366f1 100%);
        color: white;
        border-radius: 10px;
        font-weight: 800;
        font-size: 0.925rem;
        box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3);
    }

    .client-name {
        font-weight: 700;
        color: var(--gray-900);
        font-size: 0.95rem;
    }

    .phone-number, .city-name {
        color: var(--gray-600);
        font-size: 0.9rem;
        font-weight: 500;
    }

    .product-name {
        font-weight: 600;
        color: var(--gray-800);
    }

    .bg-info-soft {
        background-color: #dbeafe !important;
        color: #1e40af !important;
        font-weight: 700;
        padding: 0.5rem 0.875rem;
        border-radius: 8px;
        font-size: 0.925rem;
    }

    .price-value {
        color: var(--gray-700);
        font-weight: 600;
    }

    .total-value {
        color: var(--success-color);
        font-weight: 800;
        font-size: 1.05rem;
    }

    .date-time {
        font-size: 0.875rem;
        color: var(--gray-600);
        font-weight: 500;
    }

    /* Action Buttons */
    .action-buttons {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    .action-buttons .btn {
        padding: 0.625rem 0.875rem;
        border-radius: 10px;
        transition: all 0.2s ease;
        font-weight: 600;
        border: none;
    }

    .action-buttons .btn:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
    }

    .action-buttons .btn-warning {
        background: linear-gradient(135deg, var(--warning-color) 0%, #f59e0b 100%);
        color: white;
    }

    .action-buttons .btn-success {
        background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);
    }

    .action-buttons .btn-danger {
        background: linear-gradient(135deg, var(--danger-color) 0%, #dc2626 100%);
    }

    /* Modern Modal */
    .modern-modal {
        border: none;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: var(--shadow-xl);
    }

    .modern-modal .modal-header {
        background: linear-gradient(135deg, var(--primary-color) 0%, #6366f1 100%);
        color: white;
        border: none;
        padding: 1.75rem 2rem;
    }

    .modern-modal .modal-header.bg-danger {
        background: linear-gradient(135deg, var(--danger-color) 0%, #dc2626 100%) !important;
    }

    .modern-modal .modal-header.bg-success {
        background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%) !important;
    }

    .modern-modal .modal-body {
        padding: 2rem;
    }

    .modern-modal .modal-footer {
        background-color: var(--gray-50);
        border-top: 2px solid var(--gray-200);
        padding: 1.25rem 2rem;
    }

    /* Form Controls */
    .form-label {
        font-weight: 700;
        color: var(--gray-800);
        margin-bottom: 0.625rem;
        font-size: 0.925rem;
    }

    .form-control {
        border: 2px solid var(--gray-200);
        border-radius: 10px;
        padding: 0.75rem 1rem;
        transition: all 0.2s ease;
        font-size: 0.95rem;
    }

    .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
        transform: translateY(-1px);
    }

    /* Total Preview */
    .total-preview {
        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
        padding: 1.25rem 1.75rem;
        border-radius: 12px;
        border-left: 5px solid var(--info-color);
    }

    .total-amount {
        font-size: 1.75rem;
        font-weight: 900;
        color: var(--primary-color);
    }

    /* Modal Icons */
    .delete-icon, .approve-icon {
        font-size: 5rem;
        animation: pulse 2s ease-in-out infinite;
    }

    .delete-icon {
        color: var(--danger-color);
    }

    .approve-icon {
        color: var(--success-color);
    }

    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale(1.05);
            opacity: 0.9;
        }
    }

    /* Alerts */
    .alert {
        border: none;
        border-radius: 14px;
        padding: 1.25rem 1.5rem;
        box-shadow: var(--shadow-md);
        font-weight: 500;
    }

    /* Buttons */
    .btn {
        border-radius: 10px;
        padding: 0.75rem 1.5rem;
        font-weight: 700;
        transition: all 0.2s ease;
        border: none;
        font-size: 0.925rem;
    }

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    .btn-primary {
        background: linear-gradient(135deg, var(--primary-color) 0%, #6366f1 100%);
    }

    .btn-success {
        background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);
    }

    .btn-danger {
        background: linear-gradient(135deg, var(--danger-color) 0%, #dc2626 100%);
    }

    .btn-outline-secondary {
        border: 2px solid var(--gray-300);
        color: var(--gray-700);
        background: white;
        font-weight: 600;
    }

    .btn-outline-secondary:hover {
        background: var(--gray-100);
        border-color: var(--gray-400);
        color: var(--gray-900);
    }

    /* Form Check */
    .form-check-input {
        width: 1.375rem;
        height: 1.375rem;
        cursor: pointer;
        border: 2px solid var(--gray-300);
        border-radius: 6px;
        transition: all 0.2s ease;
    }

    .form-check-input:checked {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
    }

    .form-check-input:hover {
        border-color: var(--primary-color);
    }

    /* Responsive */
    @media (max-width: 768px) {
        .page-title {
            font-size: 1.5rem;
        }

        .status-tabs .nav-link {
            padding: 0.625rem 1rem;
            font-size: 0.875rem;
        }

        .status-tabs .nav-link span {
            display: none;
        }

        .orders-table {
            font-size: 0.8rem;
        }

        .orders-table thead th,
        .orders-table tbody td {
            padding: 0.75rem 0.5rem;
        }

        .action-buttons {
            flex-direction: column;
            gap: 0.375rem;
        }

        .action-buttons .btn {
            width: 100%;
        }
    }

    /* Smooth Scrollbar */
    .table-responsive::-webkit-scrollbar {
        height: 10px;
    }

    .table-responsive::-webkit-scrollbar-track {
        background: var(--gray-100);
        border-radius: 10px;
    }

    .table-responsive::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, var(--primary-color) 0%, #6366f1 100%);
        border-radius: 10px;
    }

    .table-responsive::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #4338ca 0%, var(--primary-color) 100%);
    }
</style>
@endsection

@section('scripts')
<script>
    const editModal = new bootstrap.Modal(document.getElementById('editModal'));
    const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
    const approveModal = new bootstrap.Modal(document.getElementById('approveModal'));

    let currentOrderId = null;

    // Calculate total
    document.getElementById('editQuantity')?.addEventListener('input', updateTotal);
    document.getElementById('editPrice')?.addEventListener('input', updateTotal);

    function updateTotal() {
        const quantity = parseFloat(document.getElementById('editQuantity')?.value || 0);
        const price = parseFloat(document.getElementById('editPrice')?.value || 0);
        const total = (quantity * price).toFixed(2);
        document.getElementById('totalPrice').textContent = total;
    }

    // Edit Button
    document.querySelectorAll('.edit-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.stopPropagation();
            const orderId = this.dataset.orderId;
            const row = document.querySelector(`tr.order-row[data-order-id="${orderId}"]`);
            
            currentOrderId = orderId;

            const cells = row.querySelectorAll('td');
            
            document.getElementById('orderId').value = orderId;
            document.getElementById('editClientName').value = cells[2]?.innerText.trim() || '';
            document.getElementById('editClientPhone').value = cells[3]?.innerText.trim().replace(/[^0-9+]/g, '') || '';
            document.getElementById('editCity').value = cells[4]?.innerText.trim().replace(/[^\w\s]/g, '') || '';
            document.getElementById('editProduct').value = cells[5]?.innerText.trim() || '';
            document.getElementById('editQuantity').value = cells[6]?.innerText.trim().replace(/[^0-9]/g, '') || '1';
            document.getElementById('editPrice').value = cells[7]?.innerText.trim().replace(/[^0-9.]/g, '') || '0';
            
            updateTotal();
            editModal.show();
        });
    });

    // Save Edit
    document.getElementById('editForm')?.addEventListener('submit', function(e) {
        e.preventDefault();

        const formData = {
            client_name: document.getElementById('editClientName').value,
            client_phone: document.getElementById('editClientPhone').value,
            client_address: document.getElementById('editAddress').value,
            client_city: document.getElementById('editCity').value,
            product_name: document.getElementById('editProduct').value,
            quantity: document.getElementById('editQuantity').value,
            price: document.getElementById('editPrice').value,
            notes: document.getElementById('editNotes').value,
        };

        fetch(`/pending-orders/${currentOrderId}/update`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content
            },
            body: JSON.stringify(formData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', 'Commande mise à jour avec succès');
                editModal.hide();
                setTimeout(() => location.reload(), 1500);
            } else {
                showAlert('error', data.message || 'Une erreur est survenue');
            }
        })
        .catch(error => {
            showAlert('error', 'Erreur de connexion');
        });
    });

    // Delete Button
    document.querySelectorAll('.delete-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.stopPropagation();
            const orderId = this.dataset.orderId;
            const row = document.querySelector(`tr.order-row[data-order-id="${orderId}"]`);
            const clientName = row.querySelector('td:nth-child(3)')?.innerText || 'Commande';
            
            currentOrderId = orderId;
            document.getElementById('deleteOrderInfo').textContent = `Client: ${clientName}`;
            deleteModal.show();
        });
    });

    // Confirm Delete
    document.getElementById('confirmDeleteBtn')?.addEventListener('click', function() {
        this.disabled = true;
        this.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Suppression...';

        fetch(`/pending-orders/${currentOrderId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content,
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', 'Commande supprimée avec succès');
                deleteModal.hide();
                setTimeout(() => location.reload(), 1000);
            } else {
                showAlert('error', data.message);
                this.disabled = false;
                this.innerHTML = '<i class="fas fa-trash me-2"></i>Supprimer';
            }
        });
    });

    // Approve Button
    document.querySelectorAll('.approve-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.stopPropagation();
            const orderId = this.dataset.orderId;
            const row = document.querySelector(`tr.order-row[data-order-id="${orderId}"]`);
            const clientName = row.querySelector('td:nth-child(3)')?.innerText || 'Commande';
            
            currentOrderId = orderId;
            document.getElementById('approveOrderInfo').textContent = `Client: ${clientName}`;
            approveModal.show();
        });
    });

    // Confirm Approve
    document.getElementById('confirmApproveBtn')?.addEventListener('click', function() {
        this.disabled = true;
        this.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Traitement...';

        fetch(`/pending-orders/${currentOrderId}/approve`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content,
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', data.message || 'Commande approuvée');
                approveModal.hide();
                setTimeout(() => location.reload(), 1500);
            } else {
                showAlert('error', data.message);
                this.disabled = false;
                this.innerHTML = '<i class="fas fa-check me-2"></i>Approuver';
            }
        });
    });

    // Select All
    document.getElementById('selectAllCheckbox')?.addEventListener('change', function() {
        document.querySelectorAll('.order-checkbox').forEach(cb => cb.checked = this.checked);
        updateActionButtons();
    });

    document.querySelectorAll('.order-checkbox').forEach(cb => {
        cb.addEventListener('change', updateActionButtons);
    });

    function updateActionButtons() {
        const checked = document.querySelectorAll('.order-checkbox:checked').length;
        const bar = document.getElementById('bulkActionsBar');
        const count = document.getElementById('selectedCount');

        if (checked > 0) {
            bar.style.display = 'block';
            count.textContent = `${checked} sélectionné(s)`;
        } else {
            bar.style.display = 'none';
        }
    }

    // Clear Selection
    document.getElementById('clearSelectionBtn')?.addEventListener('click', function() {
        document.querySelectorAll('.order-checkbox').forEach(cb => cb.checked = false);
        document.getElementById('selectAllCheckbox').checked = false;
        updateActionButtons();
    });

    // Delete Multiple
    document.getElementById('deleteSelectedBtn')?.addEventListener('click', function() {
        const ids = Array.from(document.querySelectorAll('.order-checkbox:checked')).map(cb => cb.value);
        
        if (ids.length === 0) return showAlert('warning', 'Sélectionnez au moins une commande');
        if (!confirm(`Supprimer ${ids.length} commande(s) ?`)) return;

        this.disabled = true;
        this.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Suppression...';

        fetch('/pending-orders/delete-multiple', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ ids })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showAlert('success', `${ids.length} commande(s) supprimée(s)`);
                setTimeout(() => location.reload(), 1500);
            } else {
                showAlert('error', data.message);
                this.disabled = false;
                this.innerHTML = '<i class="fas fa-trash me-2"></i>Supprimer la Sélection';
            }
        });
    });

    // Approve Multiple
    document.getElementById('approveSelectedBtn')?.addEventListener('click', function() {
        const ids = Array.from(document.querySelectorAll('.order-checkbox:checked')).map(cb => cb.value);
        
        if (ids.length === 0) return showAlert('warning', 'Sélectionnez au moins une commande');
        if (!confirm(`Approuver ${ids.length} commande(s) ?`)) return;

        this.disabled = true;
        this.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Traitement...';

        fetch('/pending-orders/approve-multiple', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ ids })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showAlert('success', `${ids.length} commande(s) approuvée(s)`);
                setTimeout(() => location.reload(), 1500);
            } else {
                showAlert('error', data.message);
                this.disabled = false;
                this.innerHTML = '<i class="fas fa-check me-2"></i>Approuver la Sélection';
            }
        });
    });

    // Show Alert
    function showAlert(type, message) {
        const alertClass = type === 'success' ? 'alert-success' : 
                          type === 'error' ? 'alert-danger' : 
                          type === 'warning' ? 'alert-warning' : 'alert-info';
        
        const icon = type === 'success' ? 'check-circle' : 
                     type === 'error' ? 'exclamation-circle' : 
                     type === 'warning' ? 'exclamation-triangle' : 'info-circle';
        
        const alertHTML = `
            <div class="alert ${alertClass} alert-dismissible fade show shadow-lg" role="alert" 
                 style="position: fixed; top: 20px; right: 20px; z-index: 9999; min-width: 350px; animation: slideIn 0.3s ease;">
                <div class="d-flex align-items-center">
                    <i class="fas fa-${icon} fs-4 me-3"></i>
                    <div class="fw-semibold">${message}</div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
        
        document.body.insertAdjacentHTML('beforeend', alertHTML);

        setTimeout(() => document.querySelector('.alert')?.remove(), 5000);
    }

    // Initialize tooltips
    document.addEventListener('DOMContentLoaded', function() {
        const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
        tooltips.forEach(el => new bootstrap.Tooltip(el));
    });
</script>

<style>
@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
</style>
@endsection