<?php
declare(strict_types=1);

/**
 * @var \App\View\AppView $this
 * @var \App\Model\Entity\Teacher $teacher
 * @var array<string, list<\App\Model\Entity\AvailabilitySlot>> $byDay
 */
$totalSlots = array_sum(array_map('count', $byDay));
$priceDollars = $teacher->getHourlyDollars();
?>
<?php $this->assign('title', 'Book ' . h($teacher->full_name) . ' · CandleCraft Academy'); ?>

<section class="cc-booking-wrap">
    <a class="cc-msg-back" href="<?= $this->Url->build(['_name' => 'booking_index']) ?>">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
        All teachers
    </a>

    <div class="cc-booking-head cc-reveal">
        <div class="cc-eyebrow"><?= h($teacher->role) ?></div>
        <h1 style="margin-top: 14px;">Book with <?= h($teacher->full_name) ?>.</h1>
        <p><?= h($teacher->bio) ?></p>
    </div>

    <div class="cc-steps-bar">
        <div class="cc-step-pill is-done"><span class="cc-step-pill__num">✓</span> Pick a teacher</div>
        <div class="cc-step-pill is-on"><span class="cc-step-pill__num">2</span> Pick a time</div>
        <div class="cc-step-pill"><span class="cc-step-pill__num">3</span> Pay & confirm</div>
    </div>

    <div style="display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: start;">
        <div class="cc-card cc-reveal">
            <h2 style="font-size: 20px; margin-bottom: 6px;">Open times — next 14 days</h2>
            <p class="cc-muted" style="margin-bottom: 18px; font-size: 14px;">All times Melbourne. Each slot is 90 minutes.</p>

            <?php if ($totalSlots === 0): ?>
                <div style="padding: 32px; text-align: center; background: var(--cc-bg-soft); border-radius: 12px;">
                    <strong>No open slots right now.</strong>
                    <p class="cc-muted" style="margin-top: 6px; font-size: 14px;">Send an enquiry and we'll let you know when something opens up.</p>
                </div>
            <?php else: ?>
                <div data-cc-slot-picker>
                    <?php foreach ($byDay as $day => $slots): ?>
                        <div class="cc-day-head"><?= h(date('l, j F', strtotime($day))) ?></div>
                        <div class="cc-slot-picker">
                            <?php foreach ($slots as $s): ?>
                                <button type="button" class="cc-slot" data-cc-slot data-slot-id="<?= (int)$s->id ?>">
                                    <div class="cc-slot__date"><?= h($s->starts_at->format('g:i A')) ?></div>
                                    <div class="cc-slot__time"><?= h(ucfirst($s->class_type)) ?></div>
                                </button>
                            <?php endforeach; ?>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        </div>

        <aside>
            <div class="cc-checkout-summary cc-reveal" style="--cc-reveal-delay: 100ms;">
                <h3>Your booking</h3>
                <div class="cc-checkout-summary__row"><span class="cc-checkout-summary__row-k">Teacher</span><span class="cc-checkout-summary__row-v"><?= h($teacher->full_name) ?></span></div>
                <div class="cc-checkout-summary__row"><span class="cc-checkout-summary__row-k">Class length</span><span class="cc-checkout-summary__row-v">90 min · 1-on-1</span></div>
                <div class="cc-checkout-summary__row"><span class="cc-checkout-summary__row-k">Location</span><span class="cc-checkout-summary__row-v">Studio (Melbourne)</span></div>
                <div class="cc-checkout-summary__total"><span>Total</span><span>A$<?= h($priceDollars) ?></span></div>

                <?= $this->Form->create(null, ['url' => ['_name' => 'booking_checkout']]) ?>
                    <?= $this->Form->hidden('slot_id', ['data-cc-slot-value' => '1', 'value' => '']) ?>
                    <div style="margin-top: 14px;">
                        <label class="cc-label" for="customer_name">Name</label>
                        <input class="cc-input" id="customer_name" name="customer_name" required autocomplete="name" placeholder="Your full name">
                    </div>
                    <div style="margin-top: 12px;">
                        <label class="cc-label" for="customer_email">Email</label>
                        <input class="cc-input" id="customer_email" type="email" name="customer_email" required autocomplete="email" placeholder="you@example.com">
                    </div>
                    <div style="margin-top: 12px;">
                        <label class="cc-label" for="customer_phone">Phone (optional)</label>
                        <input class="cc-input" id="customer_phone" name="customer_phone" autocomplete="tel" placeholder="+61 …">
                    </div>
                    <button class="cc-btn cc-btn--primary cc-btn--block cc-btn--lg" data-cc-booking-submit type="submit" disabled style="margin-top: 18px;">
                        Continue to payment
                    </button>
                    <div style="margin-top: 10px; font-size: 12px; color: var(--cc-ink-3); text-align: center;">
                        Secure payment via Stripe. We don't store card details.
                    </div>
                <?= $this->Form->end() ?>
            </div>
        </aside>
    </div>
</section>

<?php $this->start('css'); ?>
<style>
@media (max-width: 900px) {
    .cc-booking-wrap > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    .cc-checkout-summary { position: static; }
}
</style>
<?php $this->end(); ?>
