<?php /** @var array $state; @var array $artists */ $step = 2; include __DIR__ . '/_wizard-shell.php'; ?>
<script src="<?= asset('js/booking-calendar.js') ?>"></script>
<section class="max-w-4xl mx-auto px-6 pb-28">
  <h2 class="text-2xl font-display mb-2"><?= e(t('booking.step_2.pick_date')) ?></h2>
  <p class="text-bone/60 mb-6"><?= e(t('booking.step_2.hint')) ?></p>

  <?php
    $calendarCfg = json_encode([
        'artistId' => (string)($state['artist_id'] ?? ''),
        'apiUrl'   => url('/api/availability'),
    ], JSON_UNESCAPED_SLASHES);
  ?>
  <div x-data="bookingCalendar(<?= htmlspecialchars($calendarCfg, ENT_QUOTES) ?>)" x-init="init()" class="grid md:grid-cols-[2fr_1fr] gap-8">
    <!-- Calendar grid -->
    <div>
      <div class="flex items-center justify-between mb-4">
        <button type="button" @click="prevMonth()" class="text-gold hover:opacity-80 text-sm flex items-center gap-1">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
          <?= e(t('booking.prev')) ?>
        </button>
        <div class="text-xl font-display" x-text="monthLabel"></div>
        <button type="button" @click="nextMonth()" class="text-gold hover:opacity-80 text-sm flex items-center gap-1">
          <?= e(t('booking.next_month')) ?>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
        </button>
      </div>
      <div class="grid grid-cols-7 gap-1 text-center text-[10px] uppercase tracking-widest text-bone/40 mb-2">
        <?php foreach (['S','M','T','W','T','F','S'] as $d): ?><div class="py-1"><?= $d ?></div><?php endforeach; ?>
      </div>
      <div class="grid grid-cols-7 gap-1">
        <template x-for="c in cells" :key="c.key">
          <button type="button"
                  :disabled="!c.date || c.past"
                  @click="c.date && !c.past && pickDate(c.date)"
                  :class="{
                    'bg-gold text-ink font-semibold ring-2 ring-gold/40': c.date === selectedDate,
                    'bg-white/5 hover:bg-gold/10 hover:border-gold/20 text-bone border border-transparent': c.date && c.date !== selectedDate && c.count > 0 && !c.past,
                    'bg-white/[0.02] text-bone/20 border border-transparent': c.date && c.count === 0 && !c.past,
                    'bg-transparent text-bone/10': c.past || !c.date,
                  }"
                  class="aspect-square rounded-lg text-sm flex flex-col items-center justify-center disabled:cursor-not-allowed transition-all">
            <span x-text="c.day"></span>
            <template x-if="c.count > 0 && !c.past">
              <span class="text-[8px] mt-0.5 text-gold/70" x-text="c.count + ' slots'"></span>
            </template>
          </button>
        </template>
      </div>
    </div>

    <!-- Slots panel -->
    <div class="bg-ink/40 border border-white/10 rounded-2xl p-5 self-start sticky top-28">
      <h3 class="text-sm uppercase tracking-widest text-gold mb-4"><?= e(t('booking.step_2.available_slots')) ?></h3>

      <!-- Status messages -->
      <div x-show="!selectedDate && !loadingSlots" class="text-center py-8">
        <div class="text-3xl mb-2 opacity-30">📅</div>
        <p class="text-bone/40 text-sm"><?= e(t('booking.step_2.pick_date_first')) ?></p>
      </div>
      <div x-show="loadingSlots" class="text-center py-8">
        <div class="animate-spin w-6 h-6 border-2 border-gold/30 border-t-gold rounded-full mx-auto"></div>
        <p class="text-bone/40 text-sm mt-3"><?= e(t('common.loading')) ?></p>
      </div>
      <div x-show="selectedDate && !loadingSlots && slots.length === 0" class="text-center py-8">
        <div class="text-3xl mb-2 opacity-30">🚫</div>
        <p class="text-bone/40 text-sm"><?= e(t('booking.step_2.no_slots')) ?></p>
      </div>

      <!-- Slot buttons — shows ALL slots including taken -->
      <div class="space-y-1.5 mt-2 max-h-[28rem] overflow-y-auto pr-1" x-show="slots.length > 0">
        <template x-for="slot in slots" :key="slot.start">
          <button type="button"
                  @click="pickSlot(slot)"
                  :disabled="slot.status !== 'free'"
                  :class="slotClass(slot)"
                  class="w-full text-left px-4 py-2.5 rounded-lg border text-sm transition-all flex items-center justify-between">
            <span x-text="slot.label"></span>
            <template x-if="slot.status === 'taken'">
              <span class="text-[10px] uppercase tracking-wider text-red-400/50"><?= e(t('booking.step_2.taken')) ?></span>
            </template>
            <template x-if="slot.status === 'past'">
              <span class="text-[10px] uppercase tracking-wider text-bone/20"><?= e(t('booking.step_2.past')) ?></span>
            </template>
            <template x-if="slot.status === 'free' && !(picked && picked.start === slot.start)">
              <span class="text-[10px] uppercase tracking-wider text-gold/40"><?= e(t('booking.step_2.available')) ?></span>
            </template>
            <template x-if="picked && picked.start === slot.start">
              <span class="text-[10px] uppercase tracking-wider">✓</span>
            </template>
          </button>
        </template>
      </div>

      <!-- Submit form -->
      <form method="POST" action="<?= url('/book/step/2') ?>" x-show="picked" x-cloak class="mt-4 border-t border-white/10 pt-4">
        <?= csrf_field() ?>
        <input type="hidden" name="start_at" :value="picked ? picked.start : ''">
        <input type="hidden" name="end_at"   :value="picked ? picked.end   : ''">
        <div class="text-xs text-gold mb-3">
          <?= e(t('booking.step_2.selected_label')) ?>: <span class="text-bone font-medium" x-text="picked ? picked.label : ''"></span>
        </div>
        <button type="submit" class="btn-gold w-full"><?= e(t('booking.next')) ?> →</button>
      </form>
    </div>
  </div>
  <div class="mt-6">
    <a href="<?= url('/book/step/1') ?>" class="text-sm text-bone/50 hover:text-bone flex items-center gap-1">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
      <?= e(t('booking.back')) ?>
    </a>
  </div>
</section>
