@extends('layouts.app')

@section('page-title', 'Détails du Colis')
@section('page-subtitle', $parcel->tracking_number)

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

    /* ===== BACK BUTTON ===== */
    .back-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        background: white;
        color: #374151;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        margin-bottom: 1.5rem;
    }

    .back-btn:hover {
        background: #f3f4f6;
        border-color: #3b82f6;
        color: #3b82f6;
        transform: translateX(-4px);
    }

    /* ===== MAIN CARD ===== */
    .detail-card {
        background: white;
        border-radius: 16px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.1);
        overflow: hidden;
        margin-bottom: 2rem;
    }

    .card-header {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        padding: 2rem;
        color: white;
    }

    .header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;
    }

    .tracking-info h2 {
        font-size: 2rem;
        font-weight: 800;
        margin-bottom: 0.5rem;
        font-family: 'Courier New', monospace;
    }

    .tracking-meta {
        display: flex;
        gap: 2rem;
        margin-top: 1rem;
        font-size: 0.9rem;
    }

    .meta-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        opacity: 0.9;
    }

    .current-status {
        text-align: right;
    }

    .status-badge-large {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem 1.5rem;
        background: white;
        color: #111827;
        border-radius: 12px;
        font-weight: 700;
        font-size: 1.1rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    .status-icon-large {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: white;
    }

    .sync-btn {
        margin-top: 1rem;
        padding: 0.75rem 1.5rem;
        background: white;
        color: #3b82f6;
        border: 2px solid white;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .sync-btn:hover {
        background: #f3f4f6;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    /* ===== ORDER DETAILS ===== */
    .order-details {
        padding: 2rem;
        background: #f9fafb;
    }

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

    .detail-item {
        background: white;
        padding: 1.5rem;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .detail-label {
        font-size: 0.75rem;
        color: #6b7280;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .detail-value {
        font-size: 1.1rem;
        color: #111827;
        font-weight: 600;
    }

    .detail-value.large {
        font-size: 1.5rem;
        color: #3b82f6;
    }

    /* ===== TIMELINE ===== */
    .timeline-card {
        background: white;
        border-radius: 16px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.1);
        padding: 2rem;
    }

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

    .timeline-title {
        font-size: 1.5rem;
        font-weight: 800;
        color: #111827;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .timeline-count {
        background: #3b82f6;
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 700;
    }

    /* ===== TIMELINE ITEMS ===== */
    .timeline {
        position: relative;
        padding-left: 3rem;
    }

    .timeline::before {
        content: '';
        position: absolute;
        left: 20px;
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(to bottom, #3b82f6, #e5e7eb);
    }

    .timeline-item {
        position: relative;
        margin-bottom: 2.5rem;
        padding-left: 2rem;
    }

    .timeline-item:last-child {
        margin-bottom: 0;
    }

    .timeline-dot {
        position: absolute;
        left: -2.65rem;
        top: 0;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: white;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        z-index: 2;
    }

    .timeline-content {
        background: #f9fafb;
        padding: 1.5rem;
        border-radius: 12px;
        border-left: 4px solid;
        transition: all 0.3s ease;
    }

    .timeline-content:hover {
        background: white;
        box-shadow: 0 4px 16px rgba(0,0,0,0.1);
        transform: translateX(4px);
    }

    .timeline-status {
        font-size: 1.1rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 0.5rem;
    }

    .timeline-time {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 0.75rem;
        font-size: 0.9rem;
        color: #6b7280;
    }

    .timeline-datetime {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
    }

    .timeline-relative {
        color: #9ca3af;
    }

    .timeline-comment {
        padding: 1rem;
        background: white;
        border-radius: 8px;
        font-size: 0.9rem;
        color: #4b5563;
        margin-top: 0.75rem;
        border-left: 3px solid #e5e7eb;
    }

    .timeline-livreur {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: 1rem;
        padding: 1rem;
        background: white;
        border-radius: 8px;
        border: 2px solid #e5e7eb;
    }

    .livreur-icon {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.2rem;
    }

    .livreur-info {
        flex: 1;
    }

    .livreur-name {
        font-weight: 700;
        color: #111827;
        margin-bottom: 0.25rem;
    }

    .livreur-phone {
        color: #6b7280;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* ===== EMPTY STATE ===== */
    .empty-timeline {
        text-align: center;
        padding: 4rem 2rem;
    }

    .empty-timeline i {
        font-size: 4rem;
        color: #d1d5db;
        margin-bottom: 1rem;
    }

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

    .empty-timeline p {
        color: #6b7280;
    }

    /* ===== LOADING ===== */
    .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) {
        .header-content {
            flex-direction: column;
            align-items: flex-start;
        }

        .current-status {
            text-align: left;
            width: 100%;
        }

        .tracking-info h2 {
            font-size: 1.5rem;
        }

        .tracking-meta {
            flex-direction: column;
            gap: 0.5rem;
        }

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

        .timeline {
            padding-left: 2rem;
        }

        .timeline::before {
            left: 10px;
        }

        .timeline-dot {
            left: -2.15rem;
            width: 35px;
            height: 35px;
            font-size: 1rem;
        }

        .timeline-item {
            padding-left: 1rem;
        }
    }
</style>

<div class="tracking-detail-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>

    <!-- Back Button -->
    <a href="{{ route('tracking.index') }}" class="back-btn">
        <i class="fas fa-arrow-left"></i>
        Retour à la liste
    </a>

    <!-- Main Card -->
    <div class="detail-card">
        <!-- Header -->
        <div class="card-header">
            <div class="header-content">
                <div class="tracking-info">
                    <h2>
                        <i class="fas fa-barcode"></i>
                        {{ $parcel->tracking_number }}
                    </h2>
                    <div class="tracking-meta">
                        <div class="meta-item">
                            <i class="fas fa-sync"></i>
                            <span>{{ $parcel->check_count }} vérifications</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-clock"></i>
                            <span>Dernière vérif: {{ $parcel->last_check_at ? $parcel->last_check_at->diffForHumans() : 'Jamais' }}</span>
                        </div>
                    </div>
                </div>
                <div class="current-status">
                    @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="status-badge-large">
                        <div class="status-icon-large" style="background: {{ $color }};">
                            <i class="fas {{ $icon }}"></i>
                        </div>
                        <span>{{ $parcel->current_status }}</span>
                    </div>
                    
                    <button onclick="syncParcel()" class="sync-btn">
                        <i class="fas fa-sync-alt"></i>
                        Actualiser
                    </button>
                </div>
            </div>
        </div>

        <!-- Order Details -->
        @if($order)
        <div class="order-details">
            <div class="details-grid">
                <div class="detail-item">
                    <div class="detail-label">
                        <i class="fas fa-user"></i>
                        Client
                    </div>
                    <div class="detail-value">{{ $order->full_name }}</div>
                </div>

                <div class="detail-item">
                    <div class="detail-label">
                        <i class="fas fa-phone"></i>
                        Téléphone
                    </div>
                    <div class="detail-value">{{ $order->phone }}</div>
                </div>

                <div class="detail-item">
                    <div class="detail-label">
                        <i class="fas fa-map-marker-alt"></i>
                        Ville
                    </div>
                    <div class="detail-value">{{ $order->city }}</div>
                </div>

                <div class="detail-item">
                    <div class="detail-label">
                        <i class="fas fa-dollar-sign"></i>
                        Montant
                    </div>
                    <div class="detail-value large">{{ number_format($order->price, 2) }} DH</div>
                </div>

                @if($order->address)
                <div class="detail-item" style="grid-column: 1 / -1;">
                    <div class="detail-label">
                        <i class="fas fa-location-arrow"></i>
                        Adresse
                    </div>
                    <div class="detail-value">{{ $order->address }}</div>
                </div>
                @endif

                @if($order->product)
                <div class="detail-item" style="grid-column: 1 / -1;">
                    <div class="detail-label">
                        <i class="fas fa-box"></i>
                        Produit
                    </div>
                    <div class="detail-value">{{ $order->product }}</div>
                </div>
                @endif
            </div>
        </div>
        @endif
    </div>

    <!-- Timeline -->
    <div class="timeline-card">
        <div class="timeline-header">
            <div class="timeline-title">
                <i class="fas fa-history"></i>
                Historique de Suivi
            </div>
            @if($timeline->count() > 0)
            <div class="timeline-count">
                {{ $timeline->count() }} événements
            </div>
            @endif
        </div>

        @if($timeline->count() > 0)
            <div class="timeline">
                @foreach($timeline as $item)
                    <div class="timeline-item">
                        <div class="timeline-dot" style="background: {{ $item['color'] }};">
                            <i class="fas {{ $item['icon'] }}"></i>
                        </div>
                        
                        <div class="timeline-content" style="border-left-color: {{ $item['color'] }};">
                            <div class="timeline-status">
                                {{ $item['status'] }}
                            </div>
                            
                            <div class="timeline-time">
                                <div class="timeline-datetime">
                                    <i class="fas fa-calendar-alt"></i>
                                    {{ $item['formatted_time'] }}
                                </div>
                                <div class="timeline-relative">
                                    ({{ $item['relative_time'] }})
                                </div>
                            </div>

                            @if($item['comment'])
                                <div class="timeline-comment">
                                    <i class="fas fa-comment-dots"></i>
                                    {{ $item['comment'] }}
                                </div>
                            @endif

                            @if($item['livreur'])
                                <div class="timeline-livreur">
                                    <div class="livreur-icon">
                                        <i class="fas fa-user"></i>
                                    </div>
                                    <div class="livreur-info">
                                        <div class="livreur-name">
                                            <i class="fas fa-id-badge"></i>
                                            {{ $item['livreur'] }}
                                        </div>
                                        @if($item['livreur_phone'])
                                            <div class="livreur-phone">
                                                <i class="fas fa-phone"></i>
                                                <a href="tel:{{ $item['livreur_phone'] }}" style="color: #3b82f6; text-decoration: none;">
                                                    {{ $item['livreur_phone'] }}
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="empty-timeline">
                <i class="fas fa-history"></i>
                <h3>Aucun Historique</h3>
                <p>L'historique de suivi apparaîtra ici après la synchronisation</p>
                <button onclick="syncParcel()" class="sync-btn" style="margin-top: 1.5rem;">
                    <i class="fas fa-sync-alt"></i>
                    Synchroniser maintenant
                </button>
            </div>
        @endif
    </div>

</div>

<script>
function syncParcel() {
    if (!confirm('Synchroniser ce colis avec OzoneExpress ?')) {
        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: '{{ $parcel->tracking_number }}'
        })
    })
    .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);
    });
}

// Auto-refresh every 5 minutes
setTimeout(() => {
    syncParcel();
}, 5 * 60 * 1000);
</script>

@endsection