@extends('frontend.layouts.booking')

@section('title', __('Select a time slot'))

@section('page_css')
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"
  >
  <style>
    .booking-card {
      max-width: 95vw;
      margin: 2rem auto;
    }
    .booking-card .card-body {
      padding: 2rem;
    }

    .calendar-col #calendar,
    .slots-col {
      max-width: 308px;
      width: 100%;
    }

    #calendar {
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      border-radius: 6px;
      border: 1px solid #ddd;
    }

    #slots-list {
      display: none;
      max-height: 50vh;
      overflow-y: auto;
      margin-bottom: 1rem;
    }
    #qty-container {
      display: none;
      margin-bottom: 1rem;
    }

    .list-group-item {
      width: 100%;
      background-color: #000;
      color: #fff;
      border: 1px solid #000;
    }
    .list-group-item:hover,
    .list-group-item.active {
      background-color: var(--bs-danger) !important;
      border-color: var(--bs-danger) !important;
      color: #fff !important;
    }

    .flatpickr-day.available,
    .flatpickr-day.today {
      background-color: #000 !important;
      color: #fff     !important;
    }
    .flatpickr-day.available:hover,
    .flatpickr-day.today:hover {
      background-color: var(--bs-danger) !important;
      color: #fff !important;
    }
    .flatpickr-day.selected,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange {
      background-color: var(--bs-danger) !important;
      border-color:     var(--bs-danger) !important;
      color:            #fff            !important;
    }
    .flatpickr-day.disabled {
      background: transparent !important;
      color: #ccc !important;
      cursor: not-allowed;
    }

    @media (max-width: 767.98px) {
      .booking-card .card-body { padding: 1rem; }
      #slots-list { max-height: 30vh; }
    }
  </style>
@endsection

@section('content')
  <div class="booking-card card bg-transparent shadow-lg">
    <div class="card-body bg-white rounded">

      <h3 class="text-center mb-4">
        {{ __('Select a date at :gym', ['gym' => $place->name]) }}
      </h3>

      <div class="row slot-picker justify-content-center gx-4">

        <div class="col-auto calendar-col mb-4 mb-lg-0">
          <div id="calendar"></div>
        </div>

        <div class="col-auto slots-col">
          <h5 id="selected-date" class="text-center mb-3">
            {{ __('Please pick a date') }}
          </h5>

          <div id="slots-list" class="list-group mb-3"></div>

          <div id="qty-container">
            <label for="qty-select" class="form-label">
              {{ __('How many entries?') }}
            </label>
            <select id="qty-select" class="form-select"></select>
          </div>

          <form method="GET" action="{{ route('booking.guestInfo') }}">
            <input type="hidden" name="place_id"    value="{{ $place->public_id }}">
            <input type="hidden" name="category_id" value="{{ $category->public_id }}">
            <input type="hidden" name="slot_id"     id="slot_id">
            <input type="hidden" name="quantity"    id="quantity">

            <button
              id="confirm-btn"
              type="submit"
              class="btn btn-danger w-100 mb-2"
              disabled
            >
              {{ __('Continue') }}
            </button>

            <a
              href="{{ route('booking.selectService', ['place_id' => $place->public_id]) }}"
              class="btn btn-outline-secondary w-100"
            >
              {{ __('Back') }}
            </a>
          </form>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('page_scripts')
  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
  <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/{{ app()->getLocale() }}.js"></script>

  <script>
  document.addEventListener('DOMContentLoaded', function() {
    const slots     = @json($slots);
    const datesMap  = {};
    const available = [];

    slots.forEach(s => {
      const d = s.start.slice(0,10);
      datesMap[d] ??= [];
      datesMap[d].push(s);
      if (!available.includes(d)) available.push(d);
    });

    flatpickr("#calendar", {
      inline: true,
      locale: "{{ app()->getLocale() }}",
      enable: available,
      dateFormat: "Y-m-d",
      onChange(_, dateStr) {
        document.getElementById("slots-list").style.display = "block";

        const [year, month, day] = dateStr.split('-').map(Number);
        const localDate = new Date(year, month - 1, day);

        document.getElementById("selected-date").textContent =
          localDate.toLocaleDateString(
            "{{ app()->getLocale() }}",
            { weekday:"long", year:"numeric", month:"long", day:"numeric" }
          );

        const listEl = document.getElementById("slots-list");
        listEl.innerHTML = "";
        datesMap[dateStr].forEach(slot => {
          const btn = document.createElement("button");
          btn.type = "button";
          btn.className = "list-group-item";
          const rawTime = slot.start.slice(11,16);
          btn.textContent = `${rawTime} (${slot.availableCapacity} {{ __('seats') }})`;
          btn.onclick = () => selectSlot(slot, btn);
          listEl.append(btn);
        });
      }
    });

    function selectSlot(slot, btn) {
      document
        .querySelectorAll("#slots-list .list-group-item")
        .forEach(b => b.classList.remove("active"));
      btn.classList.add("active");

      document.getElementById("slot_id").value = slot.id;

      const qtyC = document.getElementById("qty-container");
      qtyC.style.display = "block";
      const sel = document.getElementById("qty-select");
      sel.innerHTML = `<option value="">${"{{ __('Select number of entries') }}"}</option>`;
      for (let i = 1; i <= slot.availableCapacity; i++) {
        sel.innerHTML += `<option value="${i}">${i}</option>`;
      }

      document.getElementById("confirm-btn").disabled = true;
    }

    document
      .getElementById("qty-select")
      .addEventListener("change", function(e) {
        document.getElementById("quantity").value = e.target.value;
        document.getElementById("confirm-btn").disabled = false;
      });
  });
  </script>
@endsection