@extends('layouts.public')
@section('infosradio', 'Grille des programmes')
@section('radio_name', $radio->name)
@section('radio_description', $radio->description)
@section('radio_contact', $radio->phone)
@section('radio_adresse', $radio->address)
@section('radio_email', $radio->email)

@section('content')
    <main class="main-content">
        <div class="position-relative overflow-hidden" style="height: 200px;">
            <img src="{{ asset('images/G7.jpg') }}" class="w-100 h-100 position-absolute top-0 start-0 object-fit-cover"
                style="filter: blur(5px); z-index: 0;" alt="Background flou">

            <div class="position-relative z-1 text-white d-flex align-items-center justify-content-center h-100">
                <div class="p-5 rounded">
                    <h2 class="mb-3">{!! nl2br('Grille des programmes : ' . $radio->name) !!}</h2>
                </div>
            </div>
        </div>
        <section class="bg-color2 p-md-5 p-1">
            <div class="bg-white p-4 container-xxl rounded-4 shadow-sm">

                @php $v = request()->get('view','day'); @endphp

                @php
                    $view = request()->get('view', 'day');
                @endphp
                {{-- 1) Choix de la vue --}}
                <div class="d-flex flex-column flex-md-row align-items-center mb-4 gap-md-0  gap-2">


                    {{-- 2. Prev / Date / Next --}}
                    <div class="d-flex align-items-center">
                        @if ($view === 'day')
                            <button class="btn me-1 text-gradient" onclick="navigateDate(-1)"><i
                                    class="bi bi-chevron-left"></i></button>
                        @endif

                        <input id="datepicker" data-radio-id="{{ $radio->id }}" readonly
                            class="form-control text-center mx-2"
                            style="width:160px; cursor:pointer; padding: 0.5rem 1rem !important;"
                            value="{{ $date->toDateString() }}" />

                        @if ($view === 'day')
                            <button class="btn text-gradient ms-1" onclick="navigateDate(+1)"><i
                                    class="bi bi-chevron-right"></i></button>
                        @endif
                    </div>
                    <div class="dropdown">
                        <button class="btn btn-sm gradient-btn dropdown-toggle" type="button" data-bs-toggle="dropdown"
                            aria-expanded="false" style="padding: 0.5rem 1rem !important;">
                            @if (request()->get('view') == 'week')
                                Cette Semaine
                            @elseif (request()->get('view') == 'day' && request()->get('date') == \Carbon\Carbon::now()->toDateString())
                                Aujourd'hui
                            @elseif (request()->get('view') == 'day' && request()->get('date') == \Carbon\Carbon::tomorrow()->toDateString())
                                Demain
                            @else
                                Choisir une période
                            @endif
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item bg-white text-dark  {{ $view === 'day' ? 'active-toggle' : 'outline-toggle' }}"
                                    onclick="location.href='?view=day&date={{ \Carbon\Carbon::now()->toDateString() }}'"
                                    href="javascript: void(0)">Aujourd'hui</a></li>

                            <li><a class="dropdown-item bg-white text-dark  {{ $view === 'day' ? 'active-toggle' : 'outline-toggle' }}"
                                    onclick="location.href='?view=day&date={{ \Carbon\Carbon::now()->addDay()->toDateString() }}'"
                                    href="javascript: void(0)">Demain</a></li>
                            <li><a class="dropdown-item bg-white text-dark  {{ $view === 'week' ? 'active-toggle' : 'outline-toggle' }}"
                                    onclick="location.href='?view=week&date={{ $date->toDateString() }}'"
                                    href="javascript: void(0)">Cette Semaine</a></li>
                        </ul>
                    </div>

                    @if ($view === 'week')
                        @php
                            // labels déjà définis plus haut
                            $days = collect($calendar)->keys(); // ex. ['2025-05-25','2025-05-26',…]
                        @endphp

                        {{-- 1) Bandeau des jours --}}
                        <div class="weekly-nav d-flex align-items-center justify-content-center flex-wrap gap-md-0  gap-2">
                            @foreach ($days as $day)
                                <button type="button" class="btn btn-sm btn-white week-day-button  ms-2 "
                                    data-day="{{ $day }}">
                                    {{ \Carbon\Carbon::parse($day)->locale('fr')->translatedFormat('l') }}
                                </button>
                            @endforeach
                        </div>
                    @endif
                </div>

                @php
                    $labels = [
                        'matin' => ['05:00', '11:59', 'Matin'],
                        'midi' => ['12:00', '13:59', 'Midi'],
                        'apresmidi' => ['14:00', '17:59', 'Après-midi'],
                        'soir' => ['18:00', '22:59', 'Soir'],
                        'nuit' => ['23:00', '04:59', 'Nuit'],
                    ];
                @endphp

                {{-- 3a) Vue JOUR --}}
                @if ($view === 'day')
                    <h4 class="mb-3">
                        {{ Str::ucfirst(\Carbon\Carbon::parse(request()->get('date'))->translatedFormat('l d F Y')) }}</h4>
                    @foreach ($moments as $key => $events)
                        @include('client._partials.moment', [
                            'label' => $labels[$key],
                            'events' => $events,
                            'key' => $key,
                        ])
                    @endforeach

                    {{-- 3b) Vue SEMAINE --}}
                    {{-- WEEKLY VIEW --}}
                @elseif($view === 'week')
                    {{-- 2) Conteneurs jour par jour --}}
                    @foreach ($calendar as $day => $momentsDay)
                        <div class="week-day-content" id="day-{{ $day }}"
                            style="{{ $loop->first ? '' : 'display: none;' }}">
                            <h4 class="mb-3">{{ \Carbon\Carbon::parse($day)->translatedFormat('l d F Y') }}</h4>

                            {{-- pour chaque “moment” de la journée on réutilise le partial --}}
                            @foreach ($momentsDay as $key => $events)
                                @include('client._partials.moment', [
                                    'label' => $labels[$key],
                                    'events' => $events,
                                    'key' => $day . '-' . $key,
                                ])
                            @endforeach
                        </div>
                    @endforeach
                @elseif($view === 'month')
                    <h4 class="mb-4">{{ $date->translatedFormat('F Y') }}</h4>
                    @foreach ($calendar as $day => $moments)
                        <div class="mb-4">
                            <strong>{{ \Carbon\Carbon::parse($day)->translatedFormat('F') }}</strong>
                            @foreach ($moments as $key => $events)
                                @if (count($events))
                                    <div class="mt-2"><em>{{ $labels[$key][2] }} ({{ count($events) }})</em></div>
                                    @foreach ($events as $event)
                                        <div class="ps-3">
                                            {{ formattedTime($event->start) }}–{{ formattedTime($event->end) }} :
                                            {{ $event->title }}
                                        </div>
                                    @endforeach
                                @endif
                            @endforeach
                        </div>
                    @endforeach

                @endif

            </div>
        </section>
    </main>
@endsection

@include('client._partials.scripts')