@extends('chauffeur.layouts.app')

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

@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; }

        .agenda-day { margin-bottom: 30px; }
        .agenda-day-title {
            display: flex; align-items: baseline; gap: 10px;
            font-size: 15px; font-weight: 800; color: #111;
            text-transform: capitalize; margin-bottom: 14px;
            padding-bottom: 8px; border-bottom: 2px solid #f0e6cc;
        }
        .agenda-day-title.is-today { color: #a8904a; }
        .agenda-day-title span {
            font-size: 11px; font-weight: 700; color: #a8904a;
            text-transform: uppercase; letter-spacing: .05em;
        }

        .course-card {
            border: 1px solid #eee; border-left: 4px solid #C3AD66; border-radius: 14px;
            background: #fff; padding: 20px 22px; margin-bottom: 18px;
        }
        .course-head {
            display: flex; flex-wrap: wrap; align-items: baseline;
            justify-content: space-between; gap: 10px; margin-bottom: 14px;
        }
        .course-when { font-size: 17px; font-weight: 700; color: #111; }
        .course-ref { font-size: 12px; color: #999; }
        .course-status {
            display: inline-block; padding: 4px 12px; border-radius: 20px;
            font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
        }
        .status-chauffeur_accepted { background: #e6f0fb; color: #1c5a9e; }
        .status-paid { background: #eafaee; color: #1e7a35; }
        .course-lines { display: grid; gap: 6px; margin-bottom: 14px; }
        .course-line { display: flex; gap: 12px; font-size: 14px; color: #444; }
        .course-line span:first-child {
            flex: 0 0 170px; color: #999; font-size: 12px;
            text-transform: uppercase; letter-spacing: .03em; padding-top: 2px;
        }
        .course-line strong { color: #111; font-weight: 600; }
        .course-deadline { font-size: 12px; color: #c0392b; font-weight: 600; }

        .ride-progress {
            display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
            margin-top: 16px; padding-top: 16px; border-top: 1px solid #f0f0f0;
        }
        .ride-step-done {
            display: inline-flex; align-items: center; gap: 6px;
            font-size: 12.5px; color: #1e7a35; font-weight: 600;
        }
        .ride-step-done i { font-size: 11px; }
        .ride-arrow { color: #ccc; font-size: 12px; }
        .ride-btn {
            display: inline-flex; align-items: center; gap: 8px;
            border: none; border-radius: 10px; padding: 11px 20px;
            background: #C3AD66; color: #fff; font-weight: 700; font-size: 14px; cursor: pointer;
        }
        .ride-btn:hover { background: #a8904a; }
        .ride-done-label {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: 13.5px; font-weight: 700; color: #1e7a35;
        }

        .agenda-empty { color: #999; font-size: 14px; padding: 40px 0; text-align: center; }
        .agenda-empty i { display: block; font-size: 40px; color: #ddd; margin-bottom: 14px; }
    </style>
@endsection

@section('content')
    <div class="transection">
        <div class="title-right-actioin-btn-wrapper-product-list">
            <h3 class="title">{{ __('chauffeur.agenda') }}</h3>
            <div class="button-wrapper">
                <a href="{{ route('chauffeur.dashboard') }}" class="sm-back-btn">
                    <span style="font-size:18px;line-height:1;">&larr;</span> {{ __('chauffeur.dashboard') }}
                </a>
            </div>
        </div>

        @if (session('booking_success'))
            <div class="chauffeur-alert is-success" style="padding:14px 18px;border-radius:12px;margin-bottom:20px;border:1px solid #b8e0c0;background:#eafaee;color:#1e7a35;">
                {{ session('booking_success') }}
            </div>
        @endif
        @if (session('booking_error'))
            <div class="chauffeur-alert is-danger" style="padding:14px 18px;border-radius:12px;margin-bottom:20px;border:1px solid #f0b8b8;background:#fdeaea;color:#a12626;">
                {{ session('booking_error') }}
            </div>
        @endif

        @forelse ($days as $date => $bookings)
            @php $isToday = \Illuminate\Support\Carbon::parse($date)->isToday(); @endphp
            <div class="agenda-day">
                <div class="agenda-day-title {{ $isToday ? 'is-today' : '' }}">
                    {{ \Illuminate\Support\Carbon::parse($date)->translatedFormat('l j F Y') }}
                    @if ($isToday)
                        <span>{{ __('chauffeur.agenda_today') }}</span>
                    @endif
                </div>

                @foreach ($bookings as $booking)
                    <div class="course-card">
                        @include('chauffeur.partials.booking-summary', ['booking' => $booking])
                    </div>
                @endforeach
            </div>
        @empty
            <div class="agenda-empty">
                <i class="fa-regular fa-calendar"></i>
                {{ __('chauffeur.agenda_empty') }}
            </div>
        @endforelse
    </div>
@endsection