@extends('frontend.layouts.booking')

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

@section('content')
<div class="row justify-content-center">
  <div class="text-center">
    <h2 class="mb-4" style="color: white">
      {{ __('Select a service at :gym', ['gym' => $place->name]) }}
    </h2>

    @if($categories->isEmpty())
      <div style="color: white">
        {{ __('No services are available at this gym at the moment.') }}
        <br/><br/><br/>
        <a href="{{ route('booking.selectGym') }}" class="btn btn-primary">
            {{ __('Choose another gym') }}
        </a>
      </div>
    @else
      <form method="GET" action="{{ route('booking.selectSlot') }}" id="service-form">
        <input type="hidden" name="place_id" value="{{ $place->public_id }}">

        <div class="d-grid gap-3 mb-4">
          @foreach($categories as $category)
            <input
              type="radio"
              class="btn-check"
              name="category_id"
              id="category-{{ $category->public_id }}"
              value="{{ $category->public_id }}"
              autocomplete="off"
              required
            >
            <label
              class="btn btn-primary"
              for="category-{{ $category->public_id }}"
            >
              <strong>{{ $category->name }}</strong>
              @if($category->description)
                <div class="small">{{ $category->description }}</div>
              @endif
            </label>
          @endforeach
          @if($place->enable_daypass)
            <input
              type="radio"
              class="btn-check"
              name="category_id"
              id="daypass-option"
              value="daypass"
              autocomplete="off"
              required
            >
            <label class="btn btn-primary" for="daypass-option">
              <strong>{{ __('Daypass') }}</strong>
              <div class="small">
                {{ __('Become a member for a day.') }}
              </div>
            </label>
          @endif
        </div>

        <div class="text-center">
          <div class="mb-4">
          @if(!$categories->isEmpty())
            <a href="{{ route('booking.selectGym') }}" class="btn btn-outline-light btn-lg">
              {{ __('Back') }}
            </a>
          @endif
          <button
            type="button"
            id="continue-btn"
            class="btn btn-primary px-5"
            disabled
          >
            {{ __('Continue') }}
          </button>
          </div>
        </div>
      </form>
    @endif
  </div>
</div>
@endsection

@section('page_scripts')
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const radios = document.querySelectorAll('input[name="category_id"]');
    const btn = document.getElementById('continue-btn');
    const form = document.getElementById('service-form');
    const placePublicId = "{{ $place->public_id }}";

    radios.forEach(r => {
      r.addEventListener('change', () => {
        btn.disabled = false;
      });
    });

    btn.addEventListener('click', () => {
      const selected = document.querySelector('input[name="category_id"]:checked');
      if (!selected) return;

      if (selected.id === 'daypass-option') {
        window.location.href = "{{ route('booking.daypasses.selectDates') }}?place_id=" + encodeURIComponent(placePublicId);
        return;
      }

      form.submit();
    });
  });
</script>
@endsection