@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">
    <section class="bg-color2 p-md-5 p-1">
      <div class="container">
        <h2 class="fw-bold">Grille des programmes de {{$radio->name}}</h2>

        <div class="d-flex flex-column flex-md-row justify-content-between align-items-center my-4">
          <a href="{{ route('client.programmes', ['radio_id' => $radio->id, 'date' => $date->copy()->subDay()->toDateString()]) }}" class="btn rounded px-4 py-2 me-0 me-md-2 mb-3 mb-md-0 w-100 w-md-auto" style="border: 2px solid #c86b59">
              <label for="" class="text-gradient">&lt; Jour précédent</label>
          </a>
          <input
              type="text"
              id="datepicker"
              data-radio-id="{{ $radio->id }}"
              class="form-control bg-linear-gradient text-white text-center border-0 rounded px-4 py-2 me-0 me-md-2 mb-3 mb-md-0 w-100 w-md-auto"
              style="width: auto; cursor: pointer;"
              value="{{ request()->get('date') ? request()->get('date') : \Carbon\Carbon::now()->translatedFormat('l d F Y') }}"
              readonly
          />
          <a href="{{ route('client.programmes', ['radio_id' => $radio->id, 'date' => $date->copy()->addDay()->toDateString()]) }}" class="btn rounded px-4 py-2 w-100 w-md-auto" style="border: 2px solid #c86b59">
              <label for="" class="text-gradient">Jour suivant &gt;</label>
          </a>
        </div>

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

        @foreach($moments as $key => $events)
          @php
            $label = $moment_labels[$key]['label'];
            $start = $moment_labels[$key]['start'];
            $end = $moment_labels[$key]['end'];
          @endphp

          <div class="row g-4 mb-3">
            <div class="col-12 d-flex">
              <div class="text-center me-3" style="width: 60px">
                <div class="fw-semibold">{{ $start }}</div>
                <div class="timeline-marker my-2">
                  <i class="bi bi-play-fill text-gradient"></i>
                </div>
                <div class="timeline-line"></div>
                <div class="fw-semibold">{{ $end }}</div>
              </div>

              <div class="flex-grow-1">
                <div class="card programme-card">
                  <div class="card-body d-flex justify-content-between">
                    <div>
                      <h5 class="mb-1">{{ $label }}</h5>
                      <small>{{ count($events) }} {{ count($events) > 1 ? 'programmes' : 'programme' }}</small>
                    </div>
                  </div>
                  <div class="programme-footer px-3 py-3 toggle-programmes" data-target="#programmes-{{ $key }}">
                    <i class="bi bi-chevron-down"></i> Afficher les programmes
                  </div>

                  <div class="programmes" id="programmes-{{ $key }}" style="display: none;">
                  <div class="row">
  @forelse ($events as $event)
    <div class="col-12 col-md-6 col-lg-4 mb-3">
      <div class="border rounded p-3 h-100 bg-white">
        <div class="d-flex">
          @if($event->image)
            <div class="programme-logo me-2">
              <img src="{{ asset('images/events/'.$event->image) }}" alt="Logo" width="80" class="rounded">
            </div>
          @endif
          <div>
            <strong>Heures : </strong>{{ formattedTime($event->start) }} à {{ formattedTime($event->end)}}<br>
            <strong>Programme : </strong> {{ $event->title }}<br>
            <strong>Genre :</strong> {{ $event->category->name }}
          </div>
        </div>
      </div>
    </div>
  @empty
    <div class="col-12">
      <div class="border rounded p-3 bg-light">Aucun programme pour ce moment</div>
    </div>
  @endforelse
</div>

                  </div>
                </div>
              </div>
            </div>
          </div>
        @endforeach
      </div>
    </section>
  </main>
@endsection
@section('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endsection

@section('scripts')
<script>
  document.querySelectorAll('.toggle-programmes').forEach(btn => {
    btn.addEventListener('click', () => {
      const target = document.querySelector(btn.dataset.target);
      target.style.display = (target.style.display === 'none' || target.style.display === '') ? 'block' : 'none';
      const icon = btn.querySelector('i');
      icon.classList.toggle('bi-chevron-down');
      icon.classList.toggle('bi-chevron-up');
    });
  });
</script>

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    flatpickr("#datepicker", {
        dateFormat: "Y-m-d",
        defaultDate: "{{ request()->get('date') ? request()->get('date') : \Carbon\Carbon::now() }}",
        locale: "fr",
        onChange: function(selectedDates, dateStr, instance) {
            const radioId = document.querySelector('#datepicker').dataset.radioId;
            window.location.href = `/client/programmes/${radioId}?date=${dateStr}`;
        }
    });
  });
</script>
@endsection