@extends('layouts.app')

@section('title', 'Statistiques - Livreur')

@push('styles')
<style>
    :root {
        --driver-primary: #10b981;
    }

    .page-header {
        background: linear-gradient(135deg, var(--driver-primary) 0%, #059669 100%);
        padding: 1.5rem;
        color: white;
    }

    .stats-overview {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 1rem;
        margin-top: -1.5rem;
    }

    .stat-card {
        background: white;
        border-radius: 16px;
        padding: 1.25rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .stat-card.full-width {
        grid-column: span 2;
    }

    .stat-icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .stat-value {
        font-size: 1.75rem;
        font-weight: 700;
        color: #1f2937;
    }

    .stat-value.earnings {
        color: var(--driver-primary);
    }

    .stat-label {
        font-size: 0.8rem;
        color: #6b7280;
    }

    .stat-trend {
        font-size: 0.75rem;
        margin-top: 0.5rem;
    }

    .trend-up { color: #10b981; }
    .trend-down { color: #ef4444; }

    .section-title {
        padding: 1rem;
        font-weight: 600;
        color: #1f2937;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .chart-container {
        background: white;
        margin: 0 1rem 1rem;
        border-radius: 16px;
        padding: 1rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .bar-chart {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        height: 150px;
        padding-top: 1rem;
    }

    .bar-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
    }

    .bar {
        width: 30px;
        background: linear-gradient(180deg, var(--driver-primary) 0%, #059669 100%);
        border-radius: 6px 6px 0 0;
        transition: height 0.5s ease;
        min-height: 4px;
    }

    .bar-label {
        font-size: 0.7rem;
        color: #9ca3af;
        margin-top: 0.5rem;
    }

    .bar-value {
        font-size: 0.75rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 0.25rem;
    }

    .performance-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 0 1rem 100px;
    }

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

    .performance-card .value {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1f2937;
    }

    .performance-card .label {
        font-size: 0.75rem;
        color: #6b7280;
    }

    .rating-stars {
        color: #fbbf24;
        font-size: 1.25rem;
    }

    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        background: white;
        border-top: 1px solid #e5e7eb;
        padding: 0.5rem;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
        z-index: 45; /* Below main nav z-50 */
    }

    .bottom-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem;
        color: #9ca3af;
        text-decoration: none;
        font-size: 0.7rem;
    }

    .bottom-nav a.active {
        color: var(--driver-primary);
    }

    .bottom-nav a .icon {
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
    }
    
    /* Fix z-index hierarchy */
    nav, .nav-container {
        z-index: 9999 !important;
    }
</style>
@endpush

@section('content')
{{-- Section d'aide --}}
<div class="px-4 pt-4">
    <x-help-section page="driver.stats" />
</div>

<!-- Header -->
<div class="page-header">
    <h5 class="mb-1">📊 Mes statistiques</h5>
    <p class="mb-0 opacity-75">Performances et gains</p>
</div>

<!-- Overview Stats -->
<div class="stats-overview">
    <div class="stat-card">
        <div class="stat-icon">💰</div>
        <div class="stat-value earnings">{{ number_format($monthlyTotal, 2) }}€</div>
        <div class="stat-label">Gains ce mois</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">📦</div>
        <div class="stat-value">{{ $driver->completed_deliveries }}</div>
        <div class="stat-label">Livraisons totales</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">⭐</div>
        <div class="stat-value">{{ number_format($driver->rating ?? 5, 1) }}</div>
        <div class="stat-label">Note moyenne</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">✅</div>
        <div class="stat-value">{{ $driver->success_rate }}%</div>
        <div class="stat-label">Taux de réussite</div>
    </div>
</div>

<!-- Weekly Chart -->
<div class="section-title">
    📈 Livraisons (7 derniers jours)
</div>

<div class="chart-container">
    <div class="bar-chart">
        @php
            $maxCount = $weeklyStats->max('count') ?: 1;
            $days = ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'];
        @endphp
        @for($i = 6; $i >= 0; $i--)
            @php
                $date = now()->subDays($i)->format('Y-m-d');
                $stat = $weeklyStats->firstWhere('date', $date);
                $count = $stat['count'] ?? 0;
                $height = ($count / $maxCount) * 100;
                $dayName = $days[now()->subDays($i)->dayOfWeek];
            @endphp
            <div class="bar-item">
                <div class="bar-value">{{ $count }}</div>
                <div class="bar" style="height: {{ max($height, 5) }}%"></div>
                <div class="bar-label">{{ $dayName }}</div>
            </div>
        @endfor
    </div>
</div>

<!-- Performance -->
<div class="section-title">
    🏆 Performance
</div>

<div class="performance-grid">
    <div class="performance-card">
        <div class="value">{{ $driver->total_deliveries }}</div>
        <div class="label">Courses totales</div>
    </div>
    <div class="performance-card">
        <div class="value">{{ $driver->average_delivery_time ?? 0 }} min</div>
        <div class="label">Temps moyen</div>
    </div>
    <div class="performance-card">
        <div class="value">{{ number_format($driver->total_earnings ?? 0, 2) }}€</div>
        <div class="label">Gains totaux</div>
    </div>
    <div class="performance-card">
        <div class="value">{{ $driver->commission_rate }}%</div>
        <div class="label">Taux commission</div>
    </div>
</div>

<!-- Bottom Navigation -->
<div class="bottom-nav">
    <a href="{{ route('driver.dashboard') }}">
        <span class="icon">🏠</span>
        Dashboard
    </a>
    <a href="{{ route('driver.map') }}">
        <span class="icon">🗺️</span>
        Carte
    </a>
    <a href="{{ route('driver.deliveries') }}">
        <span class="icon">📦</span>
        Historique
    </a>
    <a href="{{ route('driver.pricing') }}">
        <span class="icon">💰</span>
        Tarifs
    </a>
    <a href="{{ route('driver.stats') }}" class="active">
        <span class="icon">📊</span>
        Stats
    </a>
</div>
@endsection