
<div class="mx-auto max-w-2xl px-4 sm:px-6 py-10"
     <?php if(! $this->isSettled && ! $this->isExpired): ?> wire:poll.5s="refreshStatus" <?php endif; ?>>

    <h1 class="text-3xl uppercase tracking-wide text-stone-100">
        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($this->isSettled): ?> You're booked
        <?php elseif($this->isExpired): ?> Slot released
        <?php elseif($this->awaitingReview): ?> Checking your payment
        <?php else: ?> Pay to confirm
        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
    </h1>

    <div class="mt-6 rounded-lg border border-ink-700 bg-ink-900 p-5">
        <div class="flex flex-wrap justify-between gap-4">
            <div>
                <div class="text-stone-100 font-semibold"><?php echo e($this->startsAtLabel); ?> &ndash; <?php echo e($this->endsAtLabel); ?></div>
                <div class="text-sm text-stone-400 mt-1">
                    <?php echo e($booking->room->name); ?> · <?php echo e($booking->type->getLabel()); ?>

                </div>
                
                <div class="mt-2 font-mono text-xs text-stone-500"><?php echo e($booking->reference); ?></div>
            </div>
            <div class="text-right">
                <div class="text-3xl font-mono text-amber-400 tabular-nums">£<?php echo e($booking->price_total); ?></div>
            </div>
        </div>
    </div>

    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($error): ?>
        <div class="mt-6 rounded-md border border-red-500/40 bg-red-500/10 px-4 py-3 text-sm text-red-200">
            <?php echo e($error); ?>

        </div>
    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($this->isSettled): ?>
        <div class="mt-6 rounded-lg border border-emerald-500/40 bg-emerald-500/10 p-5">
            <p class="text-emerald-200 font-semibold">Your session is confirmed.</p>
            <p class="mt-2 text-sm text-emerald-100/80">
                We have emailed the details. See you at the studio.
            </p>
            <a href="<?php echo e(route('account')); ?>" class="mt-4 inline-block text-sm text-amber-400 hover:underline">
                Back to my account
            </a>
        </div>

    <?php elseif($this->isExpired): ?>
        <div class="mt-6 rounded-lg border border-red-500/40 bg-red-500/10 p-5">
            <p class="text-red-200 font-semibold">This slot went back on sale.</p>
            <p class="mt-2 text-sm text-red-100/80">
                Payment was not completed in time. Nothing has been charged.
            </p>
            <a href="<?php echo e(route('book')); ?>" class="mt-4 inline-block text-sm text-amber-400 hover:underline">
                Book another time
            </a>
        </div>

    <?php elseif($this->awaitingReview): ?>
        <div class="mt-6 rounded-lg border border-sky-500/40 bg-sky-500/10 p-5">
            <p class="text-sky-100 font-semibold">We have your payment proof.</p>
            <p class="mt-2 text-sm text-sky-100/80">
                The studio checks transfers against the bank statement and will
                confirm shortly. Your slot is held in the meantime — the
                countdown has stopped.
            </p>
        </div>

    <?php else: ?>
        
        <div class="mt-6 rounded-lg border border-amber-500/40 bg-amber-500/10 p-5 text-center"
             <?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::$currentLoop['key'] = 'countdown-'.e($this->secondsRemaining).''; ?>wire:key="countdown-<?php echo e($this->secondsRemaining); ?>">
            <div class="text-xs font-mono uppercase tracking-widest text-amber-300">Slot reserved for</div>
            <div class="mt-1 text-4xl font-mono font-bold tabular-nums text-amber-300"
                 x-data="{
                     left: <?php echo \Illuminate\Support\Js::from($this->secondsRemaining)->toHtml() ?>,
                     init() {
                         // Ticks locally so the number moves every second,
                         // but the server is the authority — each poll
                         // overwrites this with the real remaining time.
                         setInterval(() => { if (this.left > 0) this.left-- }, 1000)
                     },
                     get display() {
                         const m = Math.floor(this.left / 60), s = this.left % 60
                         return `${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`
                     }
                 }"
                 x-text="display"><?php echo e(gmdate('i:s', $this->secondsRemaining)); ?></div>
            <p class="mt-2 text-xs text-amber-200/70">
                If the timer runs out, this slot goes back on sale.
            </p>
        </div>

        
        <div class="mt-6 rounded-lg border-2 border-amber-500 bg-ink-900 p-5">
            <div class="text-xs font-mono uppercase tracking-widest text-amber-400">
                Fastest — confirms instantly
            </div>
            <button type="button" wire:click="payByCard" wire:loading.attr="disabled"
                class="mt-3 w-full rounded-lg bg-amber-500 px-4 py-3 font-semibold uppercase tracking-wide text-ink-950
                       hover:bg-amber-400 disabled:opacity-60">
                <span wire:loading.remove wire:target="payByCard">Pay by card or Apple Pay</span>
                <span wire:loading wire:target="payByCard">Opening secure page&hellip;</span>
            </button>
            <p class="mt-3 text-xs text-stone-500">
                Secure Revolut page. Your booking confirms the moment it clears.
            </p>
        </div>

        
        <div class="mt-4 rounded-lg border border-ink-700 bg-ink-900 p-5">
            <button type="button" wire:click="$toggle('showTransfer')"
                    class="w-full text-left text-sm text-stone-300 hover:text-stone-100">
                Or pay by bank transfer — confirmed within 24 hours
                <span class="float-right text-stone-500"><?php echo e($showTransfer ? '−' : '+'); ?></span>
            </button>

            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($showTransfer): ?>
                <div class="mt-4 space-y-3 text-sm">
                    <div class="flex justify-between gap-4">
                        <span class="text-stone-500">Account name</span>
                        <span class="font-mono text-stone-100 text-right">
                            <?php echo e($this->bankDetails['name']); ?>

                            <span class="block text-xs text-stone-500"><?php echo e(config('studio.bank.name_note')); ?></span>
                        </span>
                    </div>
                    <div class="flex justify-between gap-4">
                        <span class="text-stone-500">Account number</span>
                        <span class="font-mono text-stone-100"><?php echo e($this->bankDetails['number']); ?></span>
                    </div>
                    <div class="flex justify-between gap-4">
                        <span class="text-stone-500">Sort code</span>
                        <span class="font-mono text-stone-100"><?php echo e($this->bankDetails['sort']); ?></span>
                    </div>

                    
                    <div class="rounded-md border border-amber-500/40 bg-amber-500/5 p-3">
                        <div class="text-xs font-mono uppercase tracking-widest text-amber-400">
                            Reference — must match exactly
                        </div>
                        <div class="mt-1 font-mono text-lg font-bold text-amber-300 break-all"
                             x-data="{ copied: false }">
                            <span x-ref="ref"><?php echo e($booking->reference); ?></span>
                            <button type="button" class="ml-2 text-xs text-stone-400 hover:text-stone-200"
                                    x-on:click="navigator.clipboard.writeText($refs.ref.textContent.trim()); copied = true; setTimeout(() => copied = false, 2000)">
                                <span x-show="! copied">Copy</span>
                                <span x-show="copied" x-cloak class="text-amber-400">Copied</span>
                            </button>
                        </div>
                        <p class="mt-1 text-xs text-stone-500">
                            A different reference will delay confirmation.
                        </p>
                    </div>

                    <div class="pt-2">
                        <label class="block text-xs font-mono uppercase tracking-widest text-stone-500">
                            Screenshot of your payment — optional
                        </label>
                        <input type="file" wire:model="proof" accept="image/*"
                               class="mt-2 block w-full text-sm text-stone-400
                                      file:mr-3 file:rounded-md file:border-0 file:bg-ink-700
                                      file:px-3 file:py-2 file:text-sm file:text-stone-200">
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['proof'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <p class="mt-1 text-xs text-red-300"><?php echo e($message); ?></p>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

                        <button type="button" wire:click="submitTransfer" wire:loading.attr="disabled"
                            class="mt-3 w-full rounded-lg border border-ink-600 px-4 py-3 text-sm font-semibold
                                   uppercase tracking-wide text-stone-200 hover:border-amber-500 disabled:opacity-60">
                            <span wire:loading.remove wire:target="submitTransfer,proof">I have sent the payment</span>
                            <span wire:loading wire:target="submitTransfer,proof">Uploading&hellip;</span>
                        </button>
                    </div>
                </div>
            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
        </div>
    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
</div>
<?php /**PATH C:\xampp\htdocs\projects\bilal\mith\mithstudios\resources\views/livewire/checkout.blade.php ENDPATH**/ ?>