@extends('frontend.layouts.booking')

@section('title', __('Choose a Facility'))

@section('content')
<div class="row justify-content-center">
  <div class="text-center">
    <h2 class="mb-4" style="color: white">
      {{ __('Select a facility') }}
    </h2>

    @if($places->isEmpty())
      <div style="color: white">
        {{ __('No facilities are available at the moment.') }}
      </div>
    @else
      <form method="GET" action="{{ route('booking.selectService') }}">
        <div class="d-grid gap-3 mb-4">
          @foreach($places as $place)
            <input
              type="radio"
              class="btn-check"
              name="place_id"
              id="place-{{ $place->public_id }}"
              value="{{ $place->public_id }}"
              autocomplete="off"
              required
            >
            <label
              class="btn btn-primary"
              for="place-{{ $place->public_id }}"
            >
              <strong>{{ $place->name }}</strong>
            </label>
          @endforeach
        </div>

        <div class="text-center">
          <button
            type="submit"
            id="continue-btn"
            class="btn btn-primary px-5"
            disabled
          >
            {{ __('Continue') }}
          </button>
        </div>
      </form>
    @endif
  </div>
</div>
@endsection

@section('page_scripts')
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const radios = document.querySelectorAll('input[name="place_id"]');
    const btn    = document.getElementById('continue-btn');

    radios.forEach(radio => {
      radio.addEventListener('change', () => {
        btn.disabled = false;
      });
    });
  });
</script>
@endsection