@extends('layouts.app')

@section('page-title', 'Bons de Livraison')
@section('page-subtitle', 'Historique des BLs créés')

@section('content')
<style>
    .bl-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        transition: all 0.3s ease;
    }

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

    .bl-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #f3f4f6;
    }

    .bl-ref {
        font-size: 1.25rem;
        font-weight: 700;
        color: #8b5cf6;
        font-family: 'Courier New', monospace;
    }

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

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

    .bl-info-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .bl-info-icon {
        width: 40px;
        height: 40px;
        background: #f3f4f6;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #8b5cf6;
    }

    .bl-info-text {
        flex: 1;
    }

    .bl-info-label {
        font-size: 0.75rem;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

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

    .bl-actions {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

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

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

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

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

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

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

    .filter-bar {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 2rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

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

    .form-group label {
        display: block;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: #374151;
    }

    .form-control {
        width: 100%;
        padding: 0.625rem;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 0.875rem;
    }

    .btn-filter {
        background: #3b82f6;
        color: white;
        padding: 0.625rem 1.5rem;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        width: 100%;
    }

    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        background: white;
        border-radius: 12px;
    }

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

<div class="container">
    
    <!-- Filter Bar -->
    <div class="filter-bar">
        <form method="GET" action="{{ route('delivery-notes.index') }}">
            <div class="filter-grid">
                <div class="form-group">
                    <label>Recherche BL</label>
                    <input type="text" name="search" class="form-control" placeholder="BL-xxx..." value="{{ request('search') }}">
                </div>
                <div class="form-group">
                    <label>Date Début</label>
                    <input type="date" name="date_from" class="form-control" value="{{ request('date_from') }}">
                </div>
                <div class="form-group">
                    <label>Date Fin</label>
                    <input type="date" name="date_to" class="form-control" value="{{ request('date_to') }}">
                </div>
                <div class="form-group">
                    <button type="submit" class="btn-filter">
                        <i class="fas fa-search"></i> Filtrer
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- BL List -->
    @if($deliveryNotes->count() > 0)
        @foreach($deliveryNotes as $bl)
            <div class="bl-card">
                <div class="bl-header">
                    <div>
                        <div class="bl-ref">
                            <i class="fas fa-file-invoice"></i> {{ $bl->bl_ref }}
                        </div>
                        <div class="bl-date">
                            <i class="far fa-calendar"></i> {{ $bl->created_at->format('d/m/Y à H:i') }}
                        </div>
                    </div>
                </div>

                <div class="bl-body">
                    <div class="bl-info-item">
                        <div class="bl-info-icon">
                            <i class="fas fa-box"></i>
                        </div>
                        <div class="bl-info-text">
                            <div class="bl-info-label">Colis</div>
                            <div class="bl-info-value">{{ $bl->parcel_count }}</div>
                        </div>
                    </div>

                    <div class="bl-info-item">
                        <div class="bl-info-icon">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <div class="bl-info-text">
                            <div class="bl-info-label">Statut</div>
                            <div class="bl-info-value">{{ ucfirst($bl->status) }}</div>
                        </div>
                    </div>
                </div>

                <div class="bl-actions">
                    <a href="https://client.ozoneexpress.ma/pdf-delivery-note?dn-ref={{ $bl->bl_ref }}" 
                       target="_blank" 
                       class="btn-bl btn-pdf">
                        <i class="fas fa-file-pdf"></i> PDF Standard
                    </a>

                    <a href="https://client.ozoneexpress.ma/pdf-delivery-note-tickets?dn-ref={{ $bl->bl_ref }}" 
                       target="_blank" 
                       class="btn-bl btn-labels">
                        <i class="fas fa-tags"></i> Étiquettes A4
                    </a>

                    <a href="https://client.ozoneexpress.ma/pdf-delivery-note-tickets-4-4?dn-ref={{ $bl->bl_ref }}" 
                       target="_blank" 
                       class="btn-bl btn-labels4x4">
                        <i class="fas fa-tag"></i> Étiquettes 10x10
                    </a>

                    <button onclick="deleteBL({{ $bl->id }})" class="btn-bl btn-delete">
                        <i class="fas fa-trash"></i> Supprimer
                    </button>
                </div>
            </div>
        @endforeach

        <!-- Pagination -->
        @if($deliveryNotes->hasPages())
            <div style="margin-top: 2rem; display: flex; justify-content: center;">
                {{ $deliveryNotes->links() }}
            </div>
        @endif
    @else
        <div class="empty-state">
            <i class="fas fa-inbox"></i>
            <h3>Aucun Bon de Livraison</h3>
            <p>Les BLs créés apparaîtront ici</p>
        </div>
    @endif

</div>

<script>
function deleteBL(blId) {
    if (!confirm('⚠️ Supprimer ce Bon de Livraison ?')) {
        return;
    }

    fetch(`/delivery-notes/${blId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('✅ ' + data.message);
            location.reload();
        } else {
            alert('❌ Erreur: ' + data.message);
        }
    })
    .catch(error => {
        alert('❌ Erreur: ' + error.message);
    });
}
</script>

@endsection