@extends('frontend.layouts.booking')

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

@section('content')
<div class="row justify-content-center">
  <div class="col-md-10 col-lg-8">
    <h2 class="text-white text-center mb-3">
      {{ __('Daypass guests at :place', ['place' => $place->name]) }}
    </h2>
    <p class="text-center text-white-50 mb-4">
      {{ __('Provide the details for each day and guest (:n total).', ['n' => $total]) }}
    </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

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

      <input type="hidden" name="place_id" value="{{ $placePublicId }}">
      <div class="card mb-4">
        <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” for a guest to copy them over.') }}
          </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>

      @foreach($dateQuantities as $date => $qty)
        <input type="hidden" name="date_quantities[{{ $date }}]" value="{{ $qty }}">
      @endforeach

      @php $guestIndex = 0; @endphp
      @foreach($dateQuantities as $date => $qty)
        <div class="card mb-4">
          <div class="card-header">
            <strong>{{ \Carbon\Carbon::parse($date)->translatedFormat('l j F Y') }}</strong>
            <span class="text-muted">— {{ __(':n guest(s)', ['n' => $qty]) }}</span>
          </div>

          <div class="card-body">
            @for($i = 0; $i < $qty; $i++)
              <div class="border rounded p-3 mb-3 guest-block">
                <div class="d-flex justify-content-between align-items-center mb-2">
                  <span class="fw-bold">{{ __('Guest #:num', ['num' => $guestIndex + 1]) }}</span>
                  <div class="form-check form-switch m-0">
                    <input type="hidden"
                      name="guests[{{ $guestIndex }}][is_me]"
                      value="0">
                    <input
                      class="form-check-input is-me-checkbox"
                      type="checkbox"
                      name="guests[{{ $guestIndex }}][is_me]"
                      id="is_me_{{ $guestIndex }}"
                      value="1"
                      data-date="{{ $date }}"
                      @checked(old("guests.$guestIndex.is_me"))
                    >
                    <label class="form-check-label" for="is_me_{{ $guestIndex }}">
                      {{ __('It’s me') }}
                    </label>
                  </div>
                </div>

                <input type="hidden" name="guests[{{ $guestIndex }}][date]" value="{{ $date }}">

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

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

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

      <div class="text-center">
        <button
          type="button"
          id="back-btn"
          class="btn btn-outline-light btn-lg me-2">
          {{ __('Back') }}
        </button>
        <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 backBtn = document.getElementById('back-btn');
    const dateQuantities = @json($dateQuantities);
    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.dataset.date === cb.dataset.date) {
              other.checked = false;
            }
          });

          copyPurchaserDetails(cb);
        }
      });
    });

    if (backBtn) {
      backBtn.addEventListener('click', () => {
        const params = new URLSearchParams();
        params.set('place_id', "{{ $placePublicId }}");
        Object.entries(dateQuantities).forEach(([date, qty]) => {
          params.set(`date_quantities[${date}]`, qty);
        });
        window.location.href = "{{ route('booking.daypasses.selectDates') }}?" + params.toString();
      });
    }
  });
</script>
@endsection