@extends('layouts.app')

@section('page-title', 'Commandes Annulées')
@section('page-subtitle', 'Liste des commandes annulées ou refusées')

@section('content')
<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 bg-danger text-white">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0">❌ Commandes Annulées ({{ $cancelledOrders->total() }})</h5>
                <div>
                    <strong>Total perdu: {{ number_format($cancelledOrders->sum('total'), 2) }} MAD</strong>
                </div>
            </div>
        </div>
        <div class="card-body">
            @if($cancelledOrders->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>👤 Client</th>
                                <th>📞 Téléphone</th>
                                <th>📦 Produit</th>
                                <th class="text-center">💰 Total</th>
                                <th class="text-center">📅 Annulée le</th>
                                <th>📝 Notes</th>
                                <th class="text-center">⚙️ Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($cancelledOrders as $order)
                            <tr style="opacity: 0.7;">
                                <td>{{ $order->id }}</td>
                                <td>
                                    <strong>{{ $order->client_name }}</strong>
                                    @if($order->category)
                                        <br><span class="badge bg-secondary">{{ $order->category_label }}</span>
                                    @endif
                                    @if($order->client_city)
                                        <br><small class="text-muted">📍 {{ $order->client_city }}</small>
                                    @endif
                                </td>
                                <td>{{ $order->client_phone }}</td>
                                <td>
                                    {{ $order->products }}
                                    <br><small class="text-muted">Qté: {{ $order->quantity }} × {{ number_format($order->price, 2) }} MAD</small>
                                </td>
                                <td class="text-center">
                                    <span class="text-danger">{{ number_format($order->total, 2) }} MAD</span>
                                </td>
                                <td class="text-center">
                                    <small>{{ $order->cancelled_at ? $order->cancelled_at->format('d/m/Y') : '-' }}</small>
                                    <br><small class="text-muted">{{ $order->cancelled_at ? $order->cancelled_at->format('H:i') : '' }}</small>
                                </td>
                                <td>
                                    <small>{{ Str::limit($order->notes ?? '-', 50) }}</small>
                                </td>
                                <td class="text-center">
                                    <div class="btn-group" role="group">
                                        <button onclick="showNotes({{ $order->id }})" class="btn btn-sm btn-info" title="Notes">
                                            <i class="fas fa-sticky-note"></i>
                                            @if($order->notes_count > 0)
                                                <span class="badge bg-danger">{{ $order->notes_count }}</span>
                                            @endif
                                        </button>
                                        <button onclick="editOrder({{ $order->id }})" class="btn btn-sm btn-warning" title="Modifier">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button onclick="deleteOrder({{ $order->id }})" class="btn btn-sm btn-danger" title="Supprimer">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div>
                        Affichage de {{ $cancelledOrders->firstItem() }} à {{ $cancelledOrders->lastItem() }} sur {{ $cancelledOrders->total() }} commandes
                    </div>
                    <div>
                        {{ $cancelledOrders->links() }}
                    </div>
                </div>
            @else
                <div class="text-center py-5">
                    <i class="fas fa-times-circle text-muted" style="font-size: 4rem;"></i>
                    <h5 class="mt-3 text-muted">Aucune commande annulée</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.cancelled') }}" class="btn btn-primary">
                            <i class="fas fa-redo"></i> Réinitialiser les filtres
                        </a>
                    @endif
                </div>
            @endif
        </div>
    </div>
</div>

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

@endsection

@push('scripts')
<script>
let currentOrderId = null;

// Calculate Edit Total
function calculateEditTotal() {
    const quantity = parseFloat(document.getElementById('edit_quantity').value) || 0;
    const price = parseFloat(document.getElementById('edit_price').value) || 0;
    const total = quantity * price;
    document.getElementById('edit_total_display').value = total.toFixed(2) + ' MAD';
}

// 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.client_city || '';
                document.getElementById('edit_product_name').value = order.product_name;
                document.getElementById('edit_quantity').value = order.quantity;
                document.getElementById('edit_price').value = order.price;
                document.getElementById('edit_category').value = order.category || '';
                document.getElementById('edit_notes').value = order.notes || '';
                
                calculateEditTotal();
                
                const modal = new bootstrap.Modal(document.getElementById('editOrderModal'));
                modal.show();
            } else {
                alert('Erreur: ' + data.message);
            }
        })
        .catch(err => {
            alert('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) {
            alert(data.message);
            bootstrap.Modal.getInstance(document.getElementById('editOrderModal')).hide();
            location.reload();
        } else {
            alert('Erreur: ' + data.message);
        }
    })
    .catch(err => {
        alert('Erreur de connexion');
    });
});

// ===== NOTES FUNCTIONS =====

// 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">Erreur de chargement</div>
                `;
            }
        })
        .catch(err => {
            document.getElementById('notesList').innerHTML = `
                <div class="alert alert-danger">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) {
        alert('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) {
            document.getElementById('new_note').value = '';
            loadNotes(currentOrderId);
            location.reload();
        } else {
            alert('Erreur: ' + data.message);
        }
    })
    .catch(err => {
        alert('Erreur de connexion');
    });
});

// Delete Note
function deleteNote(noteId) {
    if (!confirm('🗑️ Supprimer cette note?')) 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) {
            loadNotes(currentOrderId);
            location.reload();
        } else {
            alert('Erreur: ' + data.message);
        }
    })
    .catch(err => {
        alert('Erreur de connexion');
    });
}

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

// Delete Order
function deleteOrder(id) {
    if (!confirm('🗑️ Supprimer définitivement cette commande?')) 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) {
            alert(data.message);
            location.reload();
        } else {
            alert('Erreur: ' + data.message);
        }
    })
    .catch(err => {
        alert('Erreur de connexion');
    });
}
</script>
@endpush