@extends('frontend.layouts.booking')

@section('title', __('Guest Information'))

@section('content')
<div class="row justify-content-center">
  <div class="col-md-8">
    <h2 class="text-white text-center mb-4">
      {{ __('Enter guest details') }}
      ({{ __(':n entries', ['n' => $quantity]) }})
    </h2>

    <form method="POST" action="{{ route('booking.create') }}">
      @csrf

      <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"     value="{{ $slot->id }}">
      <input type="hidden" name="quantity"    value="{{ $quantity }}">

      <div class="card mb-3">
        <div class="card-header">
          <strong>{{ __('Purchaser details') }}</strong>
          <span class="d-block text-muted small">
            {{ __('We’ll use these details for the purchase. Toggle “It’s me” on a guest to copy them over if you’re attending.') }}
          </span>
        </div>
        <div class="card-body">
          <div class="row g-2">
            <div class="col-md-6">
              <input
                type="text"
                name="purchaser[first_name]"
                class="form-control"
                placeholder="{{ __('First Name') }}"
                value="{{ old('purchaser.first_name') }}"
                required
              >
            </div>
            <div class="col-md-6">
              <input
                type="text"
                name="purchaser[last_name]"
                class="form-control"
                placeholder="{{ __('Last Name') }}"
                value="{{ old('purchaser.last_name') }}"
                required
              >
            </div>
          </div>

          <div class="row g-2 mt-2">
            <div class="col-md-6">
              <input
                type="email"
                name="purchaser[email]"
                class="form-control"
                placeholder="{{ __('Email') }}"
                value="{{ old('purchaser.email') }}"
                required
              >
            </div>
            <div class="col-md-6">
              <input
                type="tel"
                name="purchaser[phone]"
                class="form-control"
                placeholder="{{ __('Phone') }} ({{ __('optional') }})"
                value="{{ old('purchaser.phone') }}"
              >
            </div>
          </div>
        </div>
      </div>

      @for($i = 0; $i < $quantity; $i++)
        <div class="card mb-3 guest-block">
          <div class="card-header d-flex justify-content-between align-items-center">
            {{ __('Entry #:num', ['num' => $i + 1]) }}

            <div class="form-check form-switch m-0">
              <input type="hidden"
                     name="guests[{{ $i }}][is_me]"
                     value="0">
              <input
                class="form-check-input is-me-checkbox"
                type="checkbox"
                name="guests[{{ $i }}][is_me]"
                id="is_me_{{ $i }}"
                value="1"
                @checked(old("guests.$i.is_me"))
              >
              <label class="form-check-label" for="is_me_{{ $i }}">
                {{ __('It’s me') }}
              </label>
            </div>
          </div>

          <div class="card-body">
            <div class="row g-2">
              <div class="col-md-6">
                <input
                  type="text"
                  name="guests[{{ $i }}][first_name]"
                  class="form-control guest-first-name"
                  placeholder="{{ __('First Name') }}"
                  value="{{ old("guests.$i.first_name") }}"
                  required
                >
              </div>
              <div class="col-md-6">
                <input
                  type="text"
                  name="guests[{{ $i }}][last_name]"
                  class="form-control guest-last-name"
                  placeholder="{{ __('Last Name') }}"
                  value="{{ old("guests.$i.last_name") }}"
                  required
                >
              </div>
            </div>

            <div class="row g-2 mt-2">
              <div class="col-md-6">
                <input
                  type="email"
                  name="guests[{{ $i }}][email]"
                  class="form-control guest-email"
                  placeholder="{{ __('Email') }}"
                  value="{{ old("guests.$i.email") }}"
                  required
                >
              </div>
              <div class="col-md-6">
                <input
                  type="tel"
                  name="guests[{{ $i }}][phone]"
                  class="form-control guest-phone"
                  placeholder="{{ __('Phone') }}"
                  value="{{ old("guests.$i.phone") }}"
                >
              </div>
            </div>

            <div class="mt-2">
              <textarea
                name="guests[{{ $i }}][comments]"
                class="form-control"
                rows="2"
                placeholder="{{ __('Comments (optional)') }}"
              >{{ old("guests.$i.comments") }}</textarea>
            </div>
          </div>
        </div>
      @endfor

      <div class="text-center">
        <a
          href="{{ route('booking.selectSlot', [
            'place_id'    => $place->public_id,
            'category_id' => $category->public_id,
          ]) }}"
          class="btn btn-outline-light btn-lg me-2"
        >
          {{ __('Back') }}
        </a>
        <button type="submit" class="btn btn-primary btn-lg">
          {{ __('Proceed to Payment') }}
        </button>
      </div>
    </form>
  </div>
</div>
@endsection

@section('page_scripts')
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const checkboxes = document.querySelectorAll('.is-me-checkbox');
    const purchaser = {
      firstName: document.querySelector('input[name="purchaser[first_name]"]'),
      lastName: document.querySelector('input[name="purchaser[last_name]"]'),
      email: document.querySelector('input[name="purchaser[email]"]'),
      phone: document.querySelector('input[name="purchaser[phone]"]'),
    };

    const copyPurchaserDetails = (checkbox) => {
      if (! checkbox.checked) return;

      const guestBlock = checkbox.closest('.guest-block');
      if (! guestBlock) return;

      const pairs = [
        { selector: '.guest-first-name', value: purchaser.firstName?.value ?? '' },
        { selector: '.guest-last-name', value: purchaser.lastName?.value ?? '' },
        { selector: '.guest-email', value: purchaser.email?.value ?? '' },
        { selector: '.guest-phone', value: purchaser.phone?.value ?? '' },
      ];

      pairs.forEach(({ selector, value }) => {
        const input = guestBlock.querySelector(selector);
        if (input) {
          input.value = value;
          input.dispatchEvent(new Event('input', { bubbles: true }));
          input.dispatchEvent(new Event('change', { bubbles: true }));
        }
      });
    };

    checkboxes.forEach(cb => {
      cb.addEventListener('change', () => {
        if (cb.checked) {
          checkboxes.forEach(other => {
            if (other !== cb) other.checked = false;
          });

          copyPurchaserDetails(cb);
        }
      });
    });
  });
</script>
@endsection