<?php /** @var array $artists — available artists (active) */ ?>
<div x-data="{
  pickedDate: '',
  pickedTime: '',
  calYear: new Date().getFullYear(),
  calMonth: new Date().getMonth(),
  get monthLabel() { return new Date(this.calYear, this.calMonth, 1).toLocaleDateString(undefined, { month:'long', year:'numeric' }); },
  get calCells() {
    const first = new Date(this.calYear, this.calMonth, 1);
    const dim = new Date(this.calYear, this.calMonth+1, 0).getDate();
    const sw = first.getDay();
    const today = new Date(); today.setHours(0,0,0,0);
    let c = [];
    for (let i=0; i<sw; i++) c.push({d:'',date:'',past:true});
    for (let d=1; d<=dim; d++) {
      const dt = this.calYear+'-'+String(this.calMonth+1).padStart(2,'0')+'-'+String(d).padStart(2,'0');
      c.push({d, date:dt, past: new Date(this.calYear,this.calMonth,d)<today});
    }
    return c;
  },
  prevM() { this.calMonth--; if(this.calMonth<0){this.calMonth=11;this.calYear--;} },
  nextM() { this.calMonth++; if(this.calMonth>11){this.calMonth=0;this.calYear++;} },
  get times() {
    let t=[];
    for(let h=9;h<=21;h++) for(let m=0;m<60;m+=30) {
      const hh=String(h).padStart(2,'0'), mm=String(m).padStart(2,'0');
      const ampm = h>=12?'PM':'AM', h12 = h>12?h-12:(h===0?12:h);
      t.push({val:hh+':'+mm, label:h12+':'+mm+' '+ampm});
    }
    return t;
  }
}">
  <input type="hidden" name="appt_date" :value="pickedDate">
  <input type="hidden" name="appt_time" :value="pickedTime">

  <!-- Artist -->
  <div class="mb-4">
    <label class="label"><?= e(t('hub.new_appt.artist')) ?></label>
    <select name="artist_id" class="input">
      <option value=""><?= e(t('booking.no_preference')) ?></option>
      <?php foreach ($artists as $art): ?>
        <option value="<?= e($art['id']) ?>"><?= e($art['display_name']) ?></option>
      <?php endforeach; ?>
    </select>
  </div>

  <!-- Inline calendar -->
  <div class="mb-4">
    <label class="label mb-2"><?= e(t('hub.new_appt.date')) ?></label>
    <div class="bg-ink/60 border border-white/10 rounded-xl p-4">
      <div class="flex items-center justify-between mb-3">
        <button type="button" @click="prevM()" class="text-gold/60 hover:text-gold p-1 transition-colors">
          <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>
        </button>
        <span class="text-sm font-medium" x-text="monthLabel"></span>
        <button type="button" @click="nextM()" class="text-gold/60 hover:text-gold p-1 transition-colors">
          <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-0.5 text-center text-[9px] uppercase tracking-widest text-bone/30 mb-1">
        <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>
      </div>
      <div class="grid grid-cols-7 gap-0.5">
        <template x-for="c in calCells" :key="c.date||Math.random()">
          <button type="button"
                  :disabled="!c.date || c.past"
                  @click="c.date && !c.past && (pickedDate = c.date)"
                  :class="{
                    'bg-gold text-ink font-semibold': c.date === pickedDate,
                    'hover:bg-gold/10 text-bone': c.date && c.date !== pickedDate && !c.past,
                    'text-bone/15': c.past || !c.date
                  }"
                  class="aspect-square rounded-lg text-xs flex items-center justify-center transition-all disabled:cursor-not-allowed"
                  x-text="c.d"></button>
        </template>
      </div>
    </div>
    <div class="text-xs text-gold/70 mt-2" x-show="pickedDate" x-text="pickedDate ? new Date(pickedDate+'T12:00').toLocaleDateString(undefined,{weekday:'long',month:'long',day:'numeric'}) : ''"></div>
  </div>

  <!-- Time grid -->
  <div class="mb-4">
    <label class="label mb-2"><?= e(t('hub.new_appt.time')) ?></label>
    <div class="grid grid-cols-4 sm:grid-cols-5 gap-1.5 max-h-48 overflow-y-auto pr-1">
      <template x-for="t in times" :key="t.val">
        <button type="button" @click="pickedTime = t.val"
                :class="pickedTime === t.val ? 'bg-gold text-ink border-gold font-semibold' : 'bg-ink/60 border-white/10 text-bone/70 hover:border-gold/30 hover:bg-gold/5'"
                class="border rounded-lg px-2 py-2 text-xs text-center transition-all"
                x-text="t.label"></button>
      </template>
    </div>
  </div>

  <!-- Notes -->
  <div class="mb-4">
    <label class="label"><?= e(t('hub.appointment.notes')) ?></label>
    <input name="notes" class="input" placeholder="<?= e(t('hub.appointment.notes_placeholder')) ?>">
  </div>

  <!-- Staff PIN -->
  <div class="pt-3 border-t border-white/10">
    <p class="text-[10px] uppercase tracking-widest text-gold mb-3"><?= e(t('hub.pin.staff_confirmation')) ?></p>
    <div class="grid grid-cols-2 gap-3">
      <div><label class="label"><?= e(t('hub.pin.username')) ?></label><input name="username" required class="input" autocomplete="off"></div>
      <div><label class="label"><?= e(t('hub.pin.pin')) ?></label><input name="pin" type="password" inputmode="numeric" maxlength="20" required class="input text-center tracking-[0.5em]" autocomplete="off"></div>
    </div>
    <button class="btn-gold w-full mt-4"
            :disabled="!pickedDate || !pickedTime"
            :class="!pickedDate || !pickedTime ? 'opacity-40 cursor-not-allowed' : ''"
            ><?= e(t('hub.new_appt.create_btn')) ?></button>
  </div>
</div>
