@extends('frontend.layouts.booking')

@section('title', __('Select dates'))

@section('page_css')
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"
  >
  <style>
    .booking-card {
      max-width: 1100px;
      margin: 2rem auto;
    }
    .booking-card .card-body {
      padding: 2rem;
    }
    .calendar-col #calendar {
      max-width: 320px;
      width: 100%;
    }
    .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.today {
      border-color: var(--bs-danger);
    }
    .flatpickr-day.disabled {
      color: #ccc !important;
      cursor: not-allowed;
    }
    .date-row {
      background: #f8f9fa;
      border-radius: 6px;
      padding: 12px 16px;
    }
    .date-row .date-label {
      font-weight: 600;
      margin-bottom: 6px;
    }
    @media (max-width: 767.98px) {
      .booking-card .card-body { padding: 1rem; }
    }
  </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-3">
        {{ __('Pick your daypass dates at :gym', ['gym' => $place->name]) }}
      </h3>
      <p class="text-center text-muted mb-4">
        {{ __('Select one or more future dates, then set how many people will come on each day.') }}
      </p>

      @if($errors->any())
        <div class="alert alert-danger">
          <ul class="mb-0">
            @foreach($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
      @endif

      <div class="row justify-content-center gx-4">
        <div class="col-auto calendar-col mb-4 mb-lg-0">
          <div id="calendar"></div>
          <div class="small text-muted mt-2">
            {{ __('Closed days and exceptional closures are disabled.') }}
          </div>
        </div>

        <div class="col">
          <form method="GET" action="{{ route('booking.daypasses.guestInfo') }}" id="dates-form">
            <input type="hidden" name="place_id" value="{{ $placePublicId }}">

            <div id="empty-state" class="text-center text-muted py-4">
              {{ __('Pick a date on the calendar to get started.') }}
            </div>

            <div id="dates-list" class="d-flex flex-column gap-2"></div>

            <div class="mt-4 d-grid gap-2">
              <button
                id="continue-btn"
                type="submit"
                class="btn btn-danger"
                disabled
              >
                {{ __('Continue') }}
              </button>

              <a
                href="{{ route('booking.selectService', ['place_id' => $placePublicId]) }}"
                class="btn btn-outline-secondary"
              >
                {{ __('Back') }}
              </a>
            </div>
          </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 closedWeekdays = @json($closedWeekdays);
      const disabledDates = @json($disabledDates);
      const minDate = "{{ $minDate }}";
      const initialQuantities = @json($dateQuantities);

      const calendarEl = document.getElementById('calendar');
      const listEl = document.getElementById('dates-list');
      const emptyState = document.getElementById('empty-state');
      const continueBtn = document.getElementById('continue-btn');

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

        return localDate.toLocaleDateString(
          "{{ app()->getLocale() }}",
          { weekday:"long", year:"numeric", month:"long", day:"numeric" }
        );
      }

      function render(selectedDates) {
        listEl.innerHTML = '';

        if (selectedDates.length === 0) {
          emptyState.classList.remove('d-none');
          continueBtn.disabled = true;
          return;
        }

        emptyState.classList.add('d-none');
        continueBtn.disabled = false;

        selectedDates.forEach(dateStr => {
          const qty = initialQuantities[dateStr] ?? 1;
          initialQuantities[dateStr] = qty;

          const row = document.createElement('div');
          row.className = 'date-row';

          row.innerHTML = `
            <div class="date-label">${humanize(dateStr)}</div>
            <div class="d-flex align-items-center gap-2 flex-wrap">
              <label class="form-label mb-0" for="qty-${dateStr}">{{ __('Number of people') }}</label>
              <input
                type="number"
                class="form-control"
                style="max-width: 100px"
                id="qty-${dateStr}"
                name="date_quantities[${dateStr}]"
                min="1"
                value="${qty}"
                required
              >
            </div>
          `;

          listEl.appendChild(row);
        });
      }

      flatpickr(calendarEl, {
        mode: "multiple",
        inline: true,
        locale: "{{ app()->getLocale() }}",
        dateFormat: "Y-m-d",
        minDate: minDate,
        defaultDate: Object.keys(initialQuantities),
        disable: [
          function(date) {
            const ymd = this.formatDate ? this.formatDate(date, "Y-m-d") : date.toISOString().slice(0, 10);
            if (disabledDates.includes(ymd)) return true;

            return closedWeekdays.includes(date.getDay());
          }
        ],
        onChange: function(selectedDates) {
          const formatted = selectedDates.map(date => this.formatDate(date, "Y-m-d"));
          render(formatted);
        },
      });

      listEl.addEventListener('input', function(event) {
        if (event.target && event.target.name && event.target.name.startsWith('date_quantities[')) {
          const match = event.target.name.match(/date_quantities\[(.+)\]/);
          if (match && match[1]) {
            initialQuantities[match[1]] = parseInt(event.target.value, 10) || 1;
          }
        }
      });

      render(Object.keys(initialQuantities));
    });
  </script>
@endsection