@extends('layouts.app')

@section('page-title', 'Suivi des Colis')
@section('page-subtitle', 'Suivez l\'état de tous vos envois en temps réel')

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

    /* ===== STATS CARDS ===== */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .stat-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        gap: 1.5rem;
        transition: all 0.3s ease;
    }

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

    .stat-icon {
        width: 70px;
        height: 70px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: white;
    }

    .stat-icon.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
    .stat-icon.green { background: linear-gradient(135deg, #10b981, #059669); }
    .stat-icon.orange { background: linear-gradient(135deg, #f59e0b, #d97706); }
    .stat-icon.purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
    .stat-icon.red { background: linear-gradient(135deg, #ef4444, #dc2626); }

    .stat-content {
        flex: 1;
    }

    .stat-label {
        font-size: 0.875rem;
        color: #6b7280;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 0.5rem;
    }

    .stat-value {
        font-size: 2rem;
        font-weight: 800;
        color: #111827;
        line-height: 1;
    }

    .stat-change {
        font-size: 0.75rem;
        color: #10b981;
        margin-top: 0.5rem;
    }

    /* ===== FILTER BAR ===== */
    .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-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
    }

    .filter-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #111827;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .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;
        font-size: 0.875rem;
    }

    .form-control {
        width: 100%;
        padding: 0.75rem;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        font-size: 0.875rem;
        transition: all 0.3s ease;
    }

    .form-control:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

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

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

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

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

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

    .btn-icon {
        background: white;
        color: #6b7280;
        border: 2px solid #e5e7eb;
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 8px;
    }

    /* ===== STATUS FILTER TABS ===== */
    .status-tabs {
        display: flex;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
    }

    .status-tab {
        padding: 0.625rem 1.25rem;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.875rem;
        cursor: pointer;
        transition: all 0.3s ease;
        background: white;
        border: 2px solid #e5e7eb;
        color: #6b7280;
        text-decoration: none;
    }

    .status-tab:hover {
        border-color: #3b82f6;
        color: #3b82f6;
        transform: translateY(-2px);
    }

    .status-tab.active {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        color: white;
        border-color: transparent;
    }

    /* ===== PARCEL CARDS ===== */
    .parcels-list {
        display: grid;
        gap: 1.5rem;
    }

    .parcel-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        border-left: 4px solid transparent;
    }

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

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

    .tracking-number {
        font-size: 1.25rem;
        font-weight: 700;
        color: #111827;
        font-family: 'Courier New', monospace;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .copy-btn {
        background: #f3f4f6;
        border: none;
        padding: 0.5rem;
        border-radius: 6px;
        cursor: pointer;
        color: #6b7280;
        transition: all 0.3s ease;
    }

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

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.875rem;
        color: white;
    }

    .parcel-body {
        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: #6b7280;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .info-value {
        font-size: 0.875rem;
        color: #111827;
        font-weight: 500;
    }

    .info-value.highlight {
        color: #3b82f6;
        font-weight: 600;
    }

    .parcel-actions {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
        padding-top: 1rem;
        border-top: 2px solid #f3f4f6;
    }

    .btn-sm {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }

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

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

    /* ===== EMPTY STATE ===== */
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .empty-state i {
        font-size: 5rem;
        color: #d1d5db;
        margin-bottom: 1.5rem;
    }

    .empty-state h3 {
        font-size: 1.5rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 0.5rem;
    }

    .empty-state p {
        color: #6b7280;
        font-size: 1rem;
    }

    /* ===== LOADING OVERLAY ===== */
    .loading-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }

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

    .loading-spinner {
        background: white;
        padding: 2rem 3rem;
        border-radius: 12px;
        text-align: center;
    }

    .spinner {
        width: 60px;
        height: 60px;
        border: 4px solid #f3f4f6;
        border-top-color: #3b82f6;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 0 auto 1rem;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
        .stats-grid {
            grid-template-columns: 1fr;
        }

        .filter-grid {
            grid-template-columns: 1fr;
        }

        .status-tabs {
            flex-direction: column;
        }

        .parcel-header {
            flex-direction: column;
            gap: 1rem;
        }

        .tracking-number {
            font-size: 1rem;
        }

        .parcel-actions {
            flex-direction: column;
        }

        .btn {
            width: 100%;
        }
    }
</style>

<div class="tracking-container">

    <!-- Loading Overlay -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="loading-spinner">
            <div class="spinner"></div>
            <p style="color: #111827; font-weight: 600;">Synchronisation en cours...</p>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon blue">
                <i class="fas fa-box"></i>
            </div>
            <div class="stat-content">
                <div class="stat-label">Total Colis</div>
                <div class="stat-value">{{ $parcels->total() }}</div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon green">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="stat-content">
                <div class="stat-label">Livrés</div>
                <div class="stat-value">{{ $statusCounts->get('Livré', 0) }}</div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon orange">
                <i class="fas fa-truck"></i>
            </div>
            <div class="stat-content">
                <div class="stat-label">En Transit</div>
                <div class="stat-value">
                    {{ $statusCounts->get('Expédié', 0) + $statusCounts->get('Mise en distribution', 0) }}
                </div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon purple">
                <i class="fas fa-clock"></i>
            </div>
            <div class="stat-content">
                <div class="stat-label">En Attente</div>
                <div class="stat-value">
                    {{ $statusCounts->get('Nouveau Colis', 0) + $statusCounts->get('Attente De Ramassage', 0) }}
                </div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon red">
                <i class="fas fa-undo"></i>
            </div>
            <div class="stat-content">
                <div class="stat-label">Retours</div>
                <div class="stat-value">{{ $statusCounts->get('Retour', 0) }}</div>
            </div>
        </div>
    </div>

    <!-- Filter Bar -->
    <div class="filter-bar">
        <div class="filter-header">
            <div class="filter-title">
                <i class="fas fa-filter"></i>
                Filtres & Actions
            </div>
            <button onclick="syncAll()" class="btn btn-success">
                <i class="fas fa-sync-alt"></i>
                Tout Synchroniser
            </button>
        </div>

        <!-- Status Tabs -->
        <div class="status-tabs">
            <a href="{{ route('tracking.index') }}" class="status-tab {{ !request('status') ? 'active' : '' }}">
                <i class="fas fa-th"></i> Tous
            </a>
            <a href="{{ route('tracking.index', ['status' => 'Nouveau Colis']) }}" 
               class="status-tab {{ request('status') == 'Nouveau Colis' ? 'active' : '' }}">
                <i class="fas fa-box"></i> Nouveau
            </a>
            <a href="{{ route('tracking.index', ['status' => 'Attente De Ramassage']) }}" 
               class="status-tab {{ request('status') == 'Attente De Ramassage' ? 'active' : '' }}">
                <i class="fas fa-clock"></i> En Attente
            </a>
            <a href="{{ route('tracking.index', ['status' => 'Expédié']) }}" 
               class="status-tab {{ request('status') == 'Expédié' ? 'active' : '' }}">
                <i class="fas fa-shipping-fast"></i> Expédié
            </a>
            <a href="{{ route('tracking.index', ['status' => 'Mise en distribution']) }}" 
               class="status-tab {{ request('status') == 'Mise en distribution' ? 'active' : '' }}">
                <i class="fas fa-truck"></i> En Distribution
            </a>
            <a href="{{ route('tracking.index', ['status' => 'Livré']) }}" 
               class="status-tab {{ request('status') == 'Livré' ? 'active' : '' }}">
                <i class="fas fa-check-circle"></i> Livré
            </a>
            <a href="{{ route('tracking.index', ['status' => 'Retour']) }}" 
               class="status-tab {{ request('status') == 'Retour' ? 'active' : '' }}">
                <i class="fas fa-undo"></i> Retour
            </a>
        </div>

        <!-- Search Form -->
        <form method="GET" action="{{ route('tracking.index') }}">
            <div class="filter-grid">
                <div class="form-group">
                    <label>
                        <i class="fas fa-search"></i> Recherche
                    </label>
                    <input type="text" 
                           name="search" 
                           class="form-control" 
                           placeholder="Numéro de suivi..." 
                           value="{{ request('search') }}">
                </div>

                <div class="form-group">
                    <label>
                        <i class="fas fa-filter"></i> Statut
                    </label>
                    <select name="status" class="form-control">
                        <option value="">Tous les statuts</option>
                        <option value="Nouveau Colis" {{ request('status') == 'Nouveau Colis' ? 'selected' : '' }}>Nouveau Colis</option>
                        <option value="Attente De Ramassage" {{ request('status') == 'Attente De Ramassage' ? 'selected' : '' }}>Attente De Ramassage</option>
                        <option value="Ramassé" {{ request('status') == 'Ramassé' ? 'selected' : '' }}>Ramassé</option>
                        <option value="Expédié" {{ request('status') == 'Expédié' ? 'selected' : '' }}>Expédié</option>
                        <option value="Reçu" {{ request('status') == 'Reçu' ? 'selected' : '' }}>Reçu</option>
                        <option value="Mise en distribution" {{ request('status') == 'Mise en distribution' ? 'selected' : '' }}>Mise en distribution</option>
                        <option value="Livré" {{ request('status') == 'Livré' ? 'selected' : '' }}>Livré</option>
                        <option value="Retour" {{ request('status') == 'Retour' ? 'selected' : '' }}>Retour</option>
                    </select>
                </div>

                <div class="form-group">
                    <label style="opacity: 0;">Action</label>
                    <button type="submit" class="btn btn-primary" style="width: 100%;">
                        <i class="fas fa-search"></i> Rechercher
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Parcels List -->
    @if($parcels->count() > 0)
        <div class="parcels-list">
            @foreach($parcels as $parcel)
                @php
                    $statusColors = [
                        'Nouveau Colis' => '#3b82f6',
                        'Attente De Ramassage' => '#f59e0b',
                        'Ramassé' => '#8b5cf6',
                        'Expédié' => '#06b6d4',
                        'Reçu' => '#14b8a6',
                        'Mise en distribution' => '#f97316',
                        'Livré' => '#10b981',
                        'Retour' => '#ef4444',
                        'Annulé' => '#6b7280',
                    ];
                    $statusIcons = [
                        'Nouveau Colis' => 'fa-box',
                        'Attente De Ramassage' => 'fa-clock',
                        'Ramassé' => 'fa-truck-pickup',
                        'Expédié' => 'fa-shipping-fast',
                        'Reçu' => 'fa-warehouse',
                        'Mise en distribution' => 'fa-truck',
                        'Livré' => 'fa-check-circle',
                        'Retour' => 'fa-undo',
                        'Annulé' => 'fa-times-circle',
                    ];
                    $color = $statusColors[$parcel->current_status] ?? '#9ca3af';
                    $icon = $statusIcons[$parcel->current_status] ?? 'fa-question-circle';
                @endphp

                <div class="parcel-card" style="border-left-color: {{ $color }};">
                    <div class="parcel-header">
                        <div class="tracking-number">
                            <i class="fas fa-barcode" style="color: {{ $color }};"></i>
                            {{ $parcel->tracking_number }}
                            <button class="copy-btn" onclick="copyTracking('{{ $parcel->tracking_number }}')" title="Copier">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                        <span class="status-badge" style="background: {{ $color }};">
                            <i class="fas {{ $icon }}"></i>
                            {{ $parcel->current_status }}
                        </span>
                    </div>

                    <div class="parcel-body">
                        <div class="info-item">
                            <div class="info-label">
                                <i class="fas fa-clock"></i> Dernière MAJ
                            </div>
                            <div class="info-value">
                                {{ $parcel->last_update_at ? $parcel->last_update_at->format('d/m/Y à H:i') : '-' }}
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fas fa-sync"></i> Vérifications
                            </div>
                            <div class="info-value highlight">
                                {{ $parcel->check_count }} fois
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fas fa-calendar"></i> Dernière Vérif.
                            </div>
                            <div class="info-value">
                                {{ $parcel->last_check_at ? $parcel->last_check_at->diffForHumans() : '-' }}
                            </div>
                        </div>
                    </div>

                    <div class="parcel-actions">
                        <a href="{{ route('tracking.show', $parcel->tracking_number) }}" class="btn btn-info btn-sm">
                            <i class="fas fa-eye"></i>
                            Voir Historique
                        </a>
                        <button onclick="syncParcel('{{ $parcel->tracking_number }}')" class="btn btn-sync btn-sm">
                            <i class="fas fa-sync-alt"></i>
                            Synchroniser
                        </button>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Pagination -->
        @if($parcels->hasPages())
            <div style="margin-top: 2rem; display: flex; justify-content: center;">
                {{ $parcels->links() }}
            </div>
        @endif
    @else
        <div class="empty-state">
            <i class="fas fa-inbox"></i>
            <h3>Aucun Colis Trouvé</h3>
            <p>{{ request('search') || request('status') ? 'Aucun résultat pour vos critères de recherche' : 'Les colis suivis apparaîtront ici' }}</p>
        </div>
    @endif

</div>

<script>
// ===== COPY TRACKING NUMBER =====
function copyTracking(trackingNumber) {
    navigator.clipboard.writeText(trackingNumber).then(() => {
        alert('✅ Numéro copié: ' + trackingNumber);
    }).catch(err => {
        console.error('Erreur de copie:', err);
    });
}

// ===== SYNC SINGLE PARCEL =====
function syncParcel(trackingNumber) {
    if (!confirm(`Synchroniser le colis ${trackingNumber} ?`)) {
        return;
    }

    document.getElementById('loadingOverlay').classList.add('active');

    fetch('{{ route("tracking.sync") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            tracking_number: trackingNumber
        })
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('loadingOverlay').classList.remove('active');
        
        if (data.success) {
            alert('✅ ' + data.message);
            location.reload();
        } else {
            alert('❌ ' + data.message);
        }
    })
    .catch(error => {
        document.getElementById('loadingOverlay').classList.remove('active');
        alert('❌ Erreur: ' + error.message);
    });
}

// ===== SYNC ALL PARCELS =====
function syncAll() {
    if (!confirm('⚠️ Synchroniser tous les colis ?\nCela peut prendre quelques minutes.')) {
        return;
    }

    document.getElementById('loadingOverlay').classList.add('active');

    fetch('{{ route("tracking.sync-all") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('loadingOverlay').classList.remove('active');
        
        if (data.success) {
            alert('✅ ' + data.message);
            location.reload();
        } else {
            alert('❌ ' + data.message);
        }
    })
    .catch(error => {
        document.getElementById('loadingOverlay').classList.remove('active');
        alert('❌ Erreur: ' + error.message);
    });
}
</script>

@endsection