@extends('layouts.app')

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

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

    .header-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
        flex-wrap: wrap;
        gap: 1rem;
    }

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

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

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

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

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

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

    .btn-primary {
        background: linear-gradient(135deg, var(--primary), #2563eb);
        color: white;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    }

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

    .btn-success:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    }

    .btn-secondary {
        background: #e5e7eb;
        color: #374151;
    }

    .commandes-grid {
        display: grid;
        gap: 1.5rem;
    }

    .commande-card {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .commande-card:hover {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        transform: translateY(-4px);
    }

    .commande-header {
        background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
        padding: 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid #d1d5db;
    }

    .commande-number {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--primary);
    }

    .commande-date {
        font-size: 0.875rem;
        color: #6b7280;
    }

    .commande-body {
        padding: 1.5rem;
    }

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

    .info-item {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .info-label {
        font-size: 0.75rem;
        color: #9ca3af;
        font-weight: 600;
        text-transform: uppercase;
    }

    .info-value {
        font-size: 0.95rem;
        color: #111827;
        font-weight: 600;
    }

    .commande-footer {
        padding: 1rem 1.5rem;
        background: #f9fafb;
        border-top: 1px solid #e5e7eb;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .status-badge {
        padding: 0.5rem 1rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        font-weight: 600;
    }

    .status-pending {
        background: #fef3c7;
        color: #92400e;
    }

    .status-sent {
        background: #dcfce7;
        color: #166534;
    }

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

    .action-btn {
        padding: 0.5rem 0.75rem;
        border: none;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.875rem;
    }

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

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

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

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

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

    .modal-header {
        background: linear-gradient(to right, #10b981, #059669);
        color: white;
        padding: 2rem;
    }

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

    .modal-body {
        padding: 2rem;
    }

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

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

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

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

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

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

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

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

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

    @media (max-width: 768px) {
        .header-actions {
            flex-direction: column;
            align-items: stretch;
        }

        .btn {
            width: 100%;
            justify-content: center;
        }
    }
</style>

<div class="commandes-container">
    
    <!-- Header Actions -->
    <div class="header-actions">
        <div>
            <h1 style="font-size: 1.5rem; font-weight: 700; color: #111827; margin-bottom: 0.5rem;">
                📦 Gestion des Commandes
            </h1>
            <p style="color: #6b7280; font-size: 0.875rem;">
                Total: <strong>{{ $commandes->count() }}</strong> commande(s)
            </p>
        </div>
        <div>
            <button onclick="openAddCommandeModal()" class="btn btn-success">
                <i class="fas fa-plus-circle"></i> Ajouter Commande
            </button>
        </div>
    </div>

    <!-- Statistics -->
    <div class="stats-grid">
        <div class="stat-card" style="border-left-color: #3b82f6;">
            <div class="stat-label">📦 Total Commandes</div>
            <div class="stat-value" style="color: #3b82f6;">{{ $commandes->count() }}</div>
        </div>
        <div class="stat-card" style="border-left-color: #10b981;">
            <div class="stat-label">✅ Envoyées</div>
            <div class="stat-value" style="color: #10b981;">{{ $commandes->where('ozone_status', 'sent')->count() }}</div>
        </div>
        <div class="stat-card" style="border-left-color: #f59e0b;">
            <div class="stat-label">⏳ En Attente</div>
            <div class="stat-value" style="color: #f59e0b;">{{ $commandes->where('ozone_status', 'pending')->count() }}</div>
        </div>
        <div class="stat-card" style="border-left-color: #8b5cf6;">
            <div class="stat-label">💰 Total CA</div>
            <div class="stat-value" style="color: #8b5cf6; font-size: 1.5rem;">
                @php
                    $totalCA = 0;
                    foreach($commandes as $cmd) {
                        $data = is_string($cmd->structured_data) ? json_decode($cmd->structured_data, true) : $cmd->structured_data;
                        $totalCA += floatval($data['Total'] ?? 0);
                    }
                @endphp
                {{ number_format($totalCA, 2) }} MAD
            </div>
        </div>
    </div>

    <!-- Commandes List -->
    @if($commandes->count() > 0)
        <div class="commandes-grid">
            @foreach($commandes as $commande)
                @php
                    $data = is_string($commande->structured_data) ? json_decode($commande->structured_data, true) : $commande->structured_data;
                @endphp
                <div class="commande-card">
                    <div class="commande-header">
                        <div>
                            <div class="commande-number">#{{ $commande->row_number }}</div>
                            <div class="commande-date">
                                <i class="fas fa-calendar"></i> {{ $commande->created_at->format('d/m/Y H:i') }}
                            </div>
                        </div>
                        <div>
                            @if($commande->ozone_status == 'sent')
                                <span class="status-badge status-sent">✅ Envoyée</span>
                            @else
                                <span class="status-badge status-pending">⏳ En attente</span>
                            @endif
                        </div>
                    </div>

                    <div class="commande-body">
                        <div class="commande-info-grid">
                            <div class="info-item">
                                <div class="info-label">👤 Client</div>
                                <div class="info-value">{{ $data['Nom du client'] ?? $data['nom'] ?? '-' }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">📞 Téléphone</div>
                                <div class="info-value">{{ $data['Téléphone'] ?? $data['tel'] ?? '-' }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">📦 Produit</div>
                                <div class="info-value">{{ $data['products'] ?? $data['produit'] ?? '-' }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">🔢 Quantité</div>
                                <div class="info-value">{{ $data['quantite'] ?? $data['Quantité'] ?? '1' }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">📍 Ville</div>
                                <div class="info-value">{{ $data['Ville'] ?? $data['ville'] ?? '-' }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">💰 Total</div>
                                <div class="info-value" style="color: #10b981; font-size: 1.1rem;">
                                    {{ $data['Total'] ?? $data['total'] ?? '0' }} MAD
                                </div>
                            </div>
                        </div>

                        @if($commande->tracking_number)
                            <div style="background: #dcfce7; padding: 0.75rem; border-radius: 0.5rem; margin-top: 1rem;">
                                <div style="font-size: 0.75rem; color: #166534; font-weight: 600; margin-bottom: 0.25rem;">
                                    📦 NUMÉRO DE SUIVI
                                </div>
                                <code style="color: #166534; font-size: 0.95rem; font-weight: 700;">
                                    {{ $commande->tracking_number }}
                                </code>
                            </div>
                        @endif
                    </div>

                    <div class="commande-footer">
                        <div style="font-size: 0.75rem; color: #6b7280;">
                            📋 Source: <strong>{{ $commande->sheet_name }}</strong>
                        </div>
                        <div class="action-buttons">
                            <button onclick="viewCommande({{ $commande->id }})" class="action-btn action-btn-view">
                                <i class="fas fa-eye"></i> Voir
                            </button>
                            <button onclick="deleteCommande({{ $commande->id }})" class="action-btn action-btn-delete">
                                <i class="fas fa-trash"></i> Supprimer
                            </button>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <div class="empty-state">
            <div class="empty-state-icon">📭</div>
            <h3 style="color: #374151; margin-bottom: 0.5rem; font-size: 1.5rem;">Aucune commande</h3>
            <p style="font-size: 1rem; margin-bottom: 1.5rem;">Commencez par ajouter votre première commande</p>
            <button onclick="openAddCommandeModal()" class="btn btn-success">
                <i class="fas fa-plus-circle"></i> Ajouter Commande
            </button>
        </div>
    @endif

</div>

<!-- Add Commande Modal -->
<div id="addCommandeModal" class="modal-overlay">
    <div class="modal-content">
        <div class="modal-header">
            <h2>➕ Ajouter une Nouvelle Commande</h2>
            <p style="margin: 0.5rem 0 0 0; font-size: 0.875rem; opacity: 0.9;">
                Remplissez les informations ci-dessous
            </p>
        </div>
        <div class="modal-body">
            <form id="addCommandeForm">
                
                <!-- Client Info -->
                <h3 style="margin: 0 0 1rem 0; color: #111827; font-size: 1.1rem;">
                    <i class="fas fa-user"></i> Informations Client
                </h3>
                <div class="form-grid" style="margin-bottom: 1.5rem;">
                    <div class="form-group">
                        <label class="form-label">👤 Nom *</label>
                        <input type="text" name="client_name" class="form-input" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">📞 Téléphone *</label>
                        <input type="tel" name="client_phone" class="form-input" required>
                    </div>
                    <div class="form-group" style="grid-column: 1 / -1;">
                        <label class="form-label">📍 Adresse *</label>
                        <input type="text" name="client_address" class="form-input" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">🏙️ Ville *</label>
                        <input type="text" name="client_city" class="form-input" required>
                    </div>
                </div>

                <!-- Product Info -->
                <h3 style="margin: 0 0 1rem 0; color: #111827; font-size: 1.1rem;">
                    <i class="fas fa-box"></i> Informations Produit
                </h3>
                <div class="form-grid" style="margin-bottom: 1.5rem;">
                    <div class="form-group" style="grid-column: 1 / -1;">
                        <label class="form-label">📦 Produit *</label>
                        <select name="product_name" id="productSelect" class="form-select" onchange="updatePrice()" required>
                            <option value="">-- Sélectionnez --</option>
                            @foreach($products as $product)
                                <option value="{{ $product->name }}" 
                                        data-price="{{ $product->price ?? 0 }}"
                                        data-stock="{{ $product->current_stock }}">
                                    {{ $product->name }} (Stock: {{ $product->current_stock }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">🔢 Quantité *</label>
                        <input type="number" name="quantity" id="quantityInput" class="form-input" min="1" value="1" onchange="calculateTotal()" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">💰 Prix Unitaire *</label>
                        <input type="number" name="price" id="priceInput" class="form-input" step="0.01" min="0" onchange="calculateTotal()" required>
                    </div>
                    <div class="form-group" style="grid-column: 1 / -1;">
                        <label class="form-label">📝 Notes</label>
                        <textarea name="notes" class="form-textarea" rows="3"></textarea>
                    </div>
                </div>

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

@endsection

@push('scripts')
<script>
    function openAddCommandeModal() {
        document.getElementById('addCommandeModal').classList.add('active');
    }

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

    function updatePrice() {
        const select = document.getElementById('productSelect');
        const option = select.options[select.selectedIndex];
        const price = option.dataset.price || 0;
        document.getElementById('priceInput').value = price;
        calculateTotal();
    }

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

    function submitCommande() {
        const form = document.getElementById('addCommandeForm');
        const formData = new FormData(form);

        fetch('{{ route("commandes.store") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
            body: formData
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                alert('✅ ' + data.message);
                location.reload();
            } else {
                alert('❌ ' + data.message);
            }
        })
        .catch(err => {
            alert('❌ Erreur: ' + err.message);
        });
    }

    function viewCommande(id) {
        alert('View commande #' + id + ' (à implémenter)');
    }

    function deleteCommande(id) {
        if (!confirm('🗑️ Supprimer cette commande?')) return;

        fetch(`/commandes/${id}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            }
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                alert('✅ Commande supprimée!');
                location.reload();
            } else {
                alert('❌ ' + data.message);
            }
        });
    }

    // Close modal on outside click
    document.getElementById('addCommandeModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeAddCommandeModal();
        }
    });

    // Close on ESC
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeAddCommandeModal();
        }
    });
</script>
@endpush