@extends('chauffeur.layouts.app')

@section('title', __('chauffeur.dashboard'))

@section('styles')
    <style>
        .sm-back-btn {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 9px 18px; border-radius: 10px;
            background: #111; color: #C3AD66;
            font-weight: 600; font-size: 14px; text-decoration: none;
            transition: transform .15s ease, background .15s ease;
        }
        .sm-back-btn:hover { background: #000; transform: translateX(-2px); color: #C3AD66; }

        .chauffeur-alert {
            padding: 14px 18px; border-radius: 12px; margin-bottom: 20px;
            border: 1px solid #f0d9a8; background: #fdf7e8; color: #8a6d1f;
        }
        .chauffeur-alert.is-danger { border-color: #f0b8b8; background: #fdeaea; color: #a12626; }

        .chauffeur-progress {
            height: 10px; border-radius: 10px; background: #eee; overflow: hidden; margin-top: 10px;
        }
        .chauffeur-progress span { display: block; height: 100%; background: #C3AD66; }

        .chauffeur-info-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
        .chauffeur-info-table th, .chauffeur-info-table td { padding: 12px 10px; border-bottom: 1px solid #eee; text-align: left; }
        .chauffeur-info-table th { font-size: 13px; text-transform: uppercase; color: #888; width: 260px; }
        .chauffeur-missing { color: #a12626; font-weight: 600; }

        .range-family { margin-top: 14px; }
        .range-family:first-child { margin-top: 4px; }
        .range-family-title {
            font-size: 12px; font-weight: 700; color: #8a7430;
            text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
        }
        .range-line {
            padding: 7px 10px; margin-bottom: 6px;
            border: 1px solid #eee; border-left: 3px solid #C3AD66; border-radius: 8px;
            background: #fafafa;
        }
        .range-line-name { display: block; font-weight: 600; color: #111; font-size: 14px; }
        .range-line-example { display: block; font-size: 11px; color: #999; font-weight: 400; }
        .range-line-prices { display: block; font-size: 12px; color: #8a7430; font-weight: 700; margin-top: 2px; }
        .range-empty { color: #a12626; font-weight: 600; font-size: 13px; margin: 10px 0 0; }

        /* La tuile s'étire avec son contenu, sans écraser les deux voisines. */
        .single-over-fiew-card { height: 100%; }
    </style>
@endsection

@section('content')
    <div class="transection">
        <div class="title-right-actioin-btn-wrapper-product-list">
            <h3 class="title">{{ __('chauffeur.hello') }} {{ $chauffeur->name ?? '' }} — {{ __('chauffeur.dashboard') }}</h3>
            <div class="button-wrapper" style="display:flex;flex-direction:column;align-items:flex-end;gap:10px;">
                <a href="{{ session('chauffeur_prelogin_url', url('/')) }}" class="sm-back-btn">
                    <span style="font-size:18px;line-height:1;">&larr;</span> {{ __('chauffeur.back') }}
                </a>
                <a href="{{ route('chauffeur.profile') }}" class="rts-btn btn-primary menu-btn">{{ __('chauffeur.profile') }}</a>
            </div>
        </div>

        @if($missingFields->isNotEmpty())
            <div class="chauffeur-alert">{{ __('chauffeur.profile_incomplete') }}</div>
        @endif

        {{-- Cartes statistiques --}}
        <div class="row g-5">
            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
                <div class="single-over-fiew-card">
                    <span class="top-main">{{ __('chauffeur.stat_profile') }}</span>
                    <div class="bottom">
                        <h2 class="title">{{ $profileCompletion }}%</h2>
                        <div class="right-primary"><img src="{{ asset('vendor/images/avatar/06.png') }}" alt=""></div>
                    </div>
                    <div class="chauffeur-progress"><span style="width: {{ $profileCompletion }}%;"></span></div>
                </div>
            </div>

            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
                <div class="single-over-fiew-card">
                    <span class="top-main">{{ __('chauffeur.stat_ranges') }}</span>
                    <div class="bottom">
                        <h2 class="title">{{ count($chauffeur->ranges ?? []) }}</h2>
                        <div class="right-primary"><img src="{{ asset('vendor/images/avatar/05.png') }}" alt=""></div>
                    </div>

                    {{-- Détail dans la tuile : quel service, et quelle gamme
                         dans ce service, avec le tarif enregistré. --}}
                    @forelse($rangesByFamily as $family)
                        <div class="range-family">
                            <div class="range-family-title">{{ $family['label'] }}</div>

                            @foreach($family['ranges'] as $range)
                                <div class="range-line">
                                    <span class="range-line-name">
                                        {{ $range['label'] }}
                                        @if($range['example'])
                                            <span class="range-line-example">
                                                {{ $range['example'] }}@if($range['seats']) · {{ $range['seats'] }} {{ __('chauffeur.seats') }}@endif
                                            </span>
                                        @endif
                                    </span>

                                    <span class="range-line-prices">
                                        @if($range['prices']['km'] !== null)
                                            {{ number_format($range['prices']['km'], 2, ',', ' ') }} €/km
                                        @endif
                                        @if($range['prices']['km'] !== null && $range['prices']['minute'] !== null) · @endif
                                        @if($range['prices']['minute'] !== null)
                                            {{ number_format($range['prices']['minute'], 2, ',', ' ') }} €/min
                                        @endif
                                    </span>
                                </div>
                            @endforeach
                        </div>
                    @empty
                        <p class="range-empty">{{ __('chauffeur.no_range_selected') }}</p>
                    @endforelse
                </div>
            </div>

            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
                <div class="single-over-fiew-card">
                    <span class="top-main">{{ __('chauffeur.stat_vehicle') }}</span>
                    <div class="bottom">
                        <h2 class="title" style="font-size:26px;">{{ $chauffeur->vehicle_plate ?: '—' }}</h2>
                        <div class="right-primary"><img src="{{ asset('vendor/images/avatar/04.png') }}" alt=""></div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Récapitulatif du compte --}}
        <div class="chart-and-account-balance-area mt--30">
            <div class="single-chart-area-card">
                <div class="head">
                    <h5 class="title">{{ __('chauffeur.my_details') }}</h5>
                </div>

                <div style="overflow-x:auto;">
                    <table class="chauffeur-info-table">
                        <tr>
                            <th>{{ __('chauffeur.phone') }}</th>
                            <td class="{{ $missingFields->contains('phone') ? 'chauffeur-missing' : '' }}">
                                {{ $chauffeur->phone ?: __('chauffeur.to_complete') }}
                            </td>
                        </tr>
                        <tr>
                            <th>{{ __('chauffeur.address') }}</th>
                            <td class="{{ $missingFields->contains('address') ? 'chauffeur-missing' : '' }}">
                                {{ $chauffeur->address
                                    ? trim($chauffeur->address . ' ' . $chauffeur->postal_code . ' ' . $chauffeur->city)
                                    : __('chauffeur.to_complete') }}
                            </td>
                        </tr>
                        <tr>
                            <th>{{ __('chauffeur.license_number') }}</th>
                            <td class="{{ $missingFields->contains('license_number') ? 'chauffeur-missing' : '' }}">
                                {{ $chauffeur->license_number ?: __('chauffeur.to_complete') }}
                            </td>
                        </tr>
                        <tr>
                            <th>{{ __('chauffeur.vehicle_model') }}</th>
                            <td>{{ $chauffeur->vehicle_model ?: '—' }}</td>
                        </tr>
                        <tr>
                            <th>{{ __('chauffeur.iban') }}</th>
                            <td class="{{ $missingFields->contains('iban') ? 'chauffeur-missing' : '' }}">
                                {{ $chauffeur->iban ?: __('chauffeur.to_complete') }}
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection