<div class="mx-auto max-w-2xl px-4 sm:px-6 py-10"
     <?php if(! $this->isActive): ?> wire:poll.10s="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->isActive): ?> Package ready
        <?php elseif($this->awaitingReview): ?> Checking your payment
        <?php else: ?> Pay for your package
        <?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="font-semibold text-stone-100"><?php echo e($purchase->package->name); ?></div>
                <div class="mt-1 text-sm text-stone-400">
                    <?php echo e($purchase->studio_hours_granted); ?> studio hours ·
                    <?php echo e($purchase->engineer_hours_granted); ?> with an engineer ·
                    <?php echo e($purchase->mixmaster_credits_granted); ?> <?php echo e(Str::plural('track', $purchase->mixmaster_credits_granted)); ?>

                </div>
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($purchase->participants > 1): ?>
                    <div class="mt-1 text-sm text-stone-400">
                        Shared between <?php echo e($purchase->participants); ?> people
                    </div>
                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                <div class="mt-2 font-mono text-xs text-stone-500"><?php echo e($purchase->reference); ?></div>
            </div>
            <div class="text-right">
                <div class="text-3xl font-mono text-amber-400 tabular-nums">£<?php echo e($purchase->price_paid); ?></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->isActive): ?>
        <div class="mt-6 rounded-lg border border-emerald-500/40 bg-emerald-500/10 p-5">
            <p class="font-semibold text-emerald-200">Your package is ready to use.</p>
            <p class="mt-2 text-sm text-emerald-100/80">
                
                Valid until
                <?php echo e($purchase->expires_at?->setTimezone(config('studio.timezone'))->format('j F Y')); ?>.
                Book sessions with nothing to pay at checkout.
            </p>
            <a href="<?php echo e(route('book')); ?>" class="mt-4 inline-block text-sm text-amber-400 hover:underline">
                Book your first session
            </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="font-semibold text-sky-100">We have your payment proof.</p>
            <p class="mt-2 text-sm text-sky-100/80">
                The studio checks transfers against the bank statement. Your
                package activates as soon as that clears — nothing expires in
                the meantime.
            </p>
        </div>

    <?php else: ?>
        <div class="mt-6 rounded-lg border-2 border-amber-500 bg-ink-900 p-5">
            <div class="font-mono text-xs uppercase tracking-widest text-amber-400">
                Fastest — activates 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">
                Nothing is held or reserved, so there is no rush — but your
                package only starts working once it is paid for.
            </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 — activated 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="text-right font-mono text-stone-100">
                            <?php echo e(config('studio.bank.account_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(config('studio.bank.account_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(config('studio.bank.sort_code')); ?></span>
                    </div>

                    <div class="rounded-md border border-amber-500/40 bg-amber-500/5 p-3">
                        <div class="font-mono text-xs uppercase tracking-widest text-amber-400">
                            Reference — must match exactly
                        </div>
                        <div class="mt-1 break-all font-mono text-lg font-bold text-amber-300"
                             x-data="{ copied: false }">
                            <span x-ref="ref"><?php echo e($purchase->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>
                    </div>

                    <div class="pt-2">
                        <label class="block font-mono text-xs 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/package-checkout.blade.php ENDPATH**/ ?>