@extends('layouts.app')

@section('page-title', 'Commandes en Attente')
@section('page-subtitle', 'Gestion des commandes en attente de confirmation')

@section('content')
<style>
    .card-header-pending {
        background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
        color: white;
        border: none;
    }

    .table-pending thead {
        background: #F8F9FA;
        border-bottom: 2px solid #E9ECEF;
    }

    .table-pending thead th {
        color: #495057;
        font-weight: 600;
        padding: 1rem;
        text-transform: uppercase;
        font-size: 0.85rem;
        letter-spacing: 0.5px;
    }

    .table-pending tbody tr {
        transition: all 0.2s ease;
        border-bottom: 1px solid #E9ECEF;
    }

    .table-pending tbody tr:hover {
        background: #F8F9FA;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .table-pending tbody td {
        padding: 1rem;
        vertical-align: middle;
    }

    .client-info {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .client-name {
        font-weight: 600;
        color: #1F2937;
        font-size: 0.95rem;
    }

    .client-category {
        display: inline-block;
        background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
        color: white;
        padding: 0.35rem 0.75rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        width: fit-content;
    }

    .client-city {
        color: #6B7280;
        font-size: 0.85rem;
    }

    .phone-link {
        color: #10B981;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.2s ease;
    }

    .phone-link:hover {
        color: #059669;
        text-decoration: underline;
    }

    .product-info {
        color: #495057;
    }

    .product-quantity {
        color: #6B7280;
        font-size: 0.85rem;
        margin-top: 0.25rem;
    }

    .total-amount {
        font-size: 1.1rem;
        font-weight: 700;
        color: #10B981;
        background: #ECFDF5;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        display: inline-block;
    }

    .form-select-sm {
        min-height: 32px;
        border: 1px solid #D1D5DB;
        border-radius: 6px;
        transition: all 0.2s ease;
    }

    .form-select-sm:hover {
        border-color: #F59E0B;
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
    }

    .form-select-sm:focus {
        border-color: #F59E0B;
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
    }

    .btn-actions {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
    }

    .btn-action-notes {
        background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
        color: white;
        border: none;
        border-radius: 6px;
        padding: 0.5rem 0.75rem;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 0.85rem;
        font-weight: 500;
    }

    .btn-action-notes:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }

    .btn-action-edit {
        background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
        color: white;
        border: none;
        border-radius: 6px;
        padding: 0.5rem 0.75rem;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 0.85rem;
        font-weight: 500;
    }

    .btn-action-edit:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    }

    .btn-action-delete {
        background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
        color: white;
        border: none;
        border-radius: 6px;
        padding: 0.5rem 0.75rem;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 0.85rem;
        font-weight: 500;
    }

    .btn-action-delete:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    }

    .badge-notes {
        background: #EF4444;
        color: white;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 700;
        margin-left: 0.5rem;
    }

    .date-time {
        color: #6B7280;
        font-size: 0.85rem;
    }

    .date-time-hour {
        color: #9CA3AF;
        font-size: 0.8rem;
        margin-top: 0.25rem;
    }

    .pagination-wrapper {
        background: #F9FAFB;
        padding: 1.5rem;
        border-top: 1px solid #E9ECEF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 0 0 0.75rem 0.75rem;
    }

    .empty-state-icon {
        font-size: 4rem;
        color: #D1D5DB;
        margin-bottom: 1rem;
    }
</style>

<div class="container-fluid">
    
    @include('pending-orders.partials.stats', ['stats' => $stats])
    
    @include('pending-orders.partials.filters')

    <div class="card shadow-sm border-0">
        <div class="card-header card-header-pending">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-hourglass-half"></i> 
                    Commandes en Attente 
                    <span class="badge bg-white text-warning ms-2" style="font-size: 0.9rem;">{{ $pendingOrders->total() }}</span>
                </h5>
                <div>
                    <span class="text-white">
                        <i class="fas fa-money-bill-wave"></i> 
                        Total: <strong>{{ number_format($pendingOrders->sum('price'), 2) }} MAD</strong>
                    </span>
                </div>
            </div>
        </div>
        <div class="card-body p-0">
            @if($pendingOrders->count() > 0)
                <div class="table-responsive">
                    <table class="table table-pending mb-0">
                        <thead>
                            <tr>
                                <th style="width: 5%;"><i class="fas fa-hashtag"></i> ID</th>
                                <th style="width: 18%;"><i class="fas fa-user"></i> Client</th>
                                <th style="width: 12%;"><i class="fas fa-phone"></i> Téléphone</th>
                                <th style="width: 18%;"><i class="fas fa-box"></i> Produit</th>
                                <th style="width: 10%;" class="text-center"><i class="fas fa-coins"></i> Prix</th>
                                {{-- ✅ Colonne Équipe --}}
                                @if(auth()->user()->role === 'admin')
                                <th style="width: 12%;" class="text-center"><i class="fas fa-users"></i> Équipe</th>
                                @endif
                                <th style="width: 10%;" class="text-center"><i class="fas fa-calendar"></i> Date</th>
                                <th style="width: 12%;" class="text-center"><i class="fas fa-tasks"></i> Statut</th>
                                <th style="width: 10%;" class="text-center"><i class="fas fa-sliders-h"></i> Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($pendingOrders as $order)
                            <tr>
                                <td>
                                    <span style="font-weight: 600; color: #3B82F6;">#{{ $order->id }}</span>
                                </td>
                                <td>
                                    <div class="client-info">
                                        <span class="client-name">{{ $order->client_name }}</span>
                                        {{-- ✅ Utiliser city correct --}}
                                        @if($order->city)
                                            <span class="client-city">
                                                <i class="fas fa-map-marker-alt"></i> {{ $order->city }}
                                            </span>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    <a href="tel:{{ $order->client_phone }}" class="phone-link">
                                        <i class="fas fa-phone"></i> {{ $order->client_phone }}
                                    </a>
                                </td>
                                <td>
                                    <div class="product-info">
                                        {{-- ✅ Utiliser products correct --}}
                                        <strong>{{ $order->products ?? 'Sans produit' }}</strong>
                                    </div>
                                </td>
                                <td class="text-center">
                                    {{-- ✅ Utiliser price correct --}}
                                    <span class="total-amount">{{ number_format($order->price, 2) }} MAD</span>
                                </td>
                                
                                {{-- ✅ Colonne Équipe --}}
                                @if(auth()->user()->role === 'admin')
                                <td class="text-center">
                                    @if($order->equipe)
                                        <span class="badge bg-info">{{ $order->equipe->name }}</span>
                                    @else
                                        <span class="badge bg-secondary">Non assignée</span>
                                    @endif
                                </td>
                                @endif
                                
                                <td class="text-center">
                                    <div class="date-time">
                                        <strong>{{ $order->created_at->format('d/m/Y') }}</strong>
                                        <div class="date-time-hour">{{ $order->created_at->format('H:i') }}</div>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <select class="form-select form-select-sm" 
                                            onchange="updateStatus({{ $order->id }}, this.value)">
                                        <option value="pending" {{ $order->status == 'pending' ? 'selected' : '' }}>
                                            ⏳ En attente
                                        </option>
                                        <option value="confirmed" {{ $order->status == 'confirmed' ? 'selected' : '' }}>
                                            ✅ Confirmée
                                        </option>
                                        <option value="cancelled" {{ $order->status == 'cancelled' ? 'selected' : '' }}>
                                            ❌ Annulée
                                        </option>
                                        <option value="no_response_1" {{ $order->status == 'no_response_1' ? 'selected' : '' }}>
                                            📞 Pas de réponse (1)
                                        </option>
                                        <option value="no_response_2" {{ $order->status == 'no_response_2' ? 'selected' : '' }}>
                                            📞 Pas de réponse (2)
                                        </option>
                                        <option value="no_response_3" {{ $order->status == 'no_response_3' ? 'selected' : '' }}>
                                            📞 Pas de réponse (3)
                                        </option>
                                    </select>
                                </td>
                                <td class="text-center">
                                    <div class="btn-actions">
                                        <button onclick="showNotes({{ $order->id }})" 
                                                class="btn-action-notes" 
                                                title="Afficher les notes">
                                            <i class="fas fa-sticky-note"></i>
                                            @if($order->notes_count > 0)
                                                <span class="badge-notes">{{ $order->notes_count }}</span>
                                            @endif
                                        </button>
                                        <button onclick="editOrder({{ $order->id }})" 
                                                class="btn-action-edit" 
                                                title="Modifier">
                                            <i class="fas fa-pencil-alt"></i>
                                        </button>
                                        @if(auth()->user()->role === 'admin')
                                        <button onclick="deleteOrder({{ $order->id }})" 
                                                class="btn-action-delete" 
                                                title="Supprimer">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                
                <div class="pagination-wrapper">
                    <div>
                        <span class="text-muted">
                            Affichage de {{ $pendingOrders->firstItem() }} à {{ $pendingOrders->lastItem() }} 
                            sur <strong>{{ $pendingOrders->total() }}</strong> commandes
                        </span>
                    </div>
                    <div>
                        {{ $pendingOrders->links() }}
                    </div>
                </div>
            @else
                <div class="text-center py-5">
                    <i class="fas fa-inbox empty-state-icon"></i>
                    <h5 class="text-muted">Aucune commande en attente</h5>
                    @if(request()->hasAny(['search', 'category', 'price_min', 'price_max', 'date_filter']))
                        <p class="text-muted">Essayez de modifier vos filtres</p>
                        <a href="{{ route('pending-orders.index') }}" class="btn btn-primary mt-3">
                            <i class="fas fa-redo"></i> Réinitialiser les filtres
                        </a>
                    @else
                        <p class="text-muted">Les commandes en attente apparaîtront ici</p>
                    @endif
                </div>
            @endif
        </div>
    </div>
</div>

@include('pending-orders.partials.edit-modal')
@include('pending-orders.partials.notes-modal')

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.all.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.css">

<style>
    .swal2-popup {
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    }

    .swal2-title {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
    }

    .swal2-html-container {
        font-family: 'Inter', sans-serif;
    }

    .swal2-toast {
        border-radius: 8px;
    }
</style>

<script>
let currentOrderId = null;

// ===== TOAST NOTIFICATIONS =====
function showSuccessToast(message) {
    Swal.fire({
        icon: 'success',
        title: message,
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true,
        backdrop: false,
        didOpen: (toast) => {
            toast.addEventListener('mouseenter', Swal.stopTimer)
            toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
    })
}

function showErrorToast(message) {
    Swal.fire({
        icon: 'error',
        title: message,
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true,
        backdrop: false,
        didOpen: (toast) => {
            toast.addEventListener('mouseenter', Swal.stopTimer)
            toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
    })
}

function showWarningToast(message) {
    Swal.fire({
        icon: 'warning',
        title: message,
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true,
        backdrop: false,
        didOpen: (toast) => {
            toast.addEventListener('mouseenter', Swal.stopTimer)
            toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
    })
}

// ===== CONFIRM ALERT =====
async function showConfirmAlert(title, message) {
    const result = await Swal.fire({
        title: title,
        text: message,
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#F59E0B',
        cancelButtonColor: '#6B7280',
        confirmButtonText: 'Oui, confirmer',
        cancelButtonText: 'Annuler',
        backdrop: 'rgba(0, 0, 0, 0.4)',
    });
    return result.isConfirmed;
}

// Edit Order
function editOrder(orderId) {
    fetch(`/pending-orders/${orderId}/edit`)
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                const order = data.order;
                
                document.getElementById('edit_order_id').value = order.id;
                document.getElementById('edit_client_name').value = order.client_name;
                document.getElementById('edit_client_phone').value = order.client_phone;
                document.getElementById('edit_client_address').value = order.client_address;
                document.getElementById('edit_client_city').value = order.city || '';
                {{-- ✅ Utiliser products correct --}}
                document.getElementById('edit_product_name').value = order.products || '';
                document.getElementById('edit_price').value = order.price;
                document.getElementById('edit_notes').value = order.notes || '';
                
                const modal = new bootstrap.Modal(document.getElementById('editOrderModal'));
                modal.show();
            } else {
                showErrorToast(`Erreur: ${data.message}`);
            }
        })
        .catch(err => {
            showErrorToast('Erreur de connexion');
        });
}

// Submit Edit Form
document.getElementById('editOrderForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const orderId = document.getElementById('edit_order_id').value;
    const formData = new FormData(this);
    const data = Object.fromEntries(formData.entries());
    
    fetch(`/pending-orders/${orderId}`, {
        method: 'PUT',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            showSuccessToast(data.message);
            bootstrap.Modal.getInstance(document.getElementById('editOrderModal')).hide();
            setTimeout(() => location.reload(), 1500);
        } else {
            showErrorToast(`Erreur: ${data.message}`);
        }
    })
    .catch(err => {
        showErrorToast('Erreur de connexion');
    });
});

// Show Notes Modal
function showNotes(orderId) {
    currentOrderId = orderId;
    document.getElementById('notes_order_id').textContent = orderId;
    document.getElementById('new_note').value = '';
    
    const modal = new bootstrap.Modal(document.getElementById('notesModal'));
    modal.show();
    
    loadNotes(orderId);
}

// Load Notes
function loadNotes(orderId) {
    document.getElementById('notesList').innerHTML = `
        <div class="text-center py-4">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Chargement...</span>
            </div>
        </div>
    `;
    
    fetch(`/pending-orders/${orderId}/notes`)
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                displayNotes(data.notes);
            } else {
                document.getElementById('notesList').innerHTML = `
                    <div class="alert alert-danger"><i class="fas fa-exclamation-circle"></i> Erreur de chargement</div>
                `;
            }
        })
        .catch(err => {
            document.getElementById('notesList').innerHTML = `
                <div class="alert alert-danger"><i class="fas fa-exclamation-circle"></i> Erreur de connexion</div>
            `;
        });
}

// Display Notes
function displayNotes(notes) {
    const notesList = document.getElementById('notesList');
    
    if (notes.length === 0) {
        notesList.innerHTML = `
            <div class="text-center py-4 text-muted">
                <i class="fas fa-sticky-note fa-3x mb-3"></i>
                <p>Aucune note pour cette commande</p>
            </div>
        `;
        return;
    }
    
    let html = '';
    notes.forEach(note => {
        const date = new Date(note.created_at);
        const formattedDate = date.toLocaleDateString('fr-FR', {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });
        
        html += `
            <div class="note-item">
                <div class="note-header">
                    <div>
                        <span class="note-author">
                            <i class="fas fa-user"></i> ${note.user.name}
                        </span>
                        <span class="note-date">${formattedDate}</span>
                    </div>
                    ${note.user_id == {{ Auth::id() }} ? `
                        <button onclick="deleteNote(${note.id})" class="btn btn-sm btn-danger note-delete">
                            <i class="fas fa-trash"></i>
                        </button>
                    ` : ''}
                </div>
                <div class="note-content">${escapeHtml(note.note)}</div>
            </div>
        `;
    });
    
    notesList.innerHTML = html;
}

// Add Note
document.getElementById('addNoteForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const noteText = document.getElementById('new_note').value.trim();
    
    if (!noteText) {
        showWarningToast('⚠️ Veuillez écrire une note');
        return;
    }
    
    fetch(`/pending-orders/${currentOrderId}/notes`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({ note: noteText })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            showSuccessToast('✅ Note ajoutée avec succès');
            document.getElementById('new_note').value = '';
            loadNotes(currentOrderId);
            setTimeout(() => location.reload(), 1500);
        } else {
            showErrorToast(`Erreur: ${data.message}`);
        }
    })
    .catch(err => {
        showErrorToast('Erreur de connexion');
    });
});

// Delete Note
async function deleteNote(noteId) {
    const confirmed = await showConfirmAlert('Supprimer la note?', 'Cette action est irréversible');
    if (!confirmed) return;
    
    fetch(`/pending-orders/${currentOrderId}/notes/${noteId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        }
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            showSuccessToast('✅ Note supprimée');
            loadNotes(currentOrderId);
            setTimeout(() => location.reload(), 1500);
        } else {
            showErrorToast(`Erreur: ${data.message}`);
        }
    })
    .catch(err => {
        showErrorToast('Erreur de connexion');
    });
}

// Escape HTML
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Update Status
async function updateStatus(orderId, newStatus) {
    if (newStatus === 'confirmed') {
        const confirmed = await showConfirmAlert(
            'Confirmer cette commande?',
            'Elle sera transférée vers les Expéditions'
        );
        if (!confirmed) {
            location.reload();
            return;
        }
    }
    
    fetch(`/pending-orders/${orderId}/status`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ status: newStatus })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            showSuccessToast(data.message);
            if (data.redirect) {
                setTimeout(() => window.location.href = data.redirect, 1500);
            } else {
                setTimeout(() => location.reload(), 1500);
            }
        } else {
            showErrorToast(`Erreur: ${data.message}`);
            location.reload();
        }
    })
    .catch(err => {
        showErrorToast('Erreur de connexion');
        location.reload();
    });
}

// Delete Order
async function deleteOrder(id) {
    const confirmed = await showConfirmAlert('Supprimer cette commande?', 'Cette action est irréversible');
    if (!confirmed) return;
    
    fetch(`/pending-orders/${id}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        }
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            showSuccessToast(data.message);
            setTimeout(() => location.reload(), 1500);
        } else {
            showErrorToast(`Erreur: ${data.message}`);
        }
    })
    .catch(err => {
        showErrorToast('Erreur de connexion');
    });
}
</script>
@endpush