<div class="mx-auto max-w-2xl px-4 sm:px-6 py-10">

    <h1 class="text-3xl uppercase tracking-wide text-stone-100">
        <?php echo e($order->service->name); ?>

    </h1>
    <p class="mt-2 font-mono text-xs text-stone-500"><?php echo e($order->reference); ?></p>

    <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($order->track_title); ?></div>
                <div class="mt-1 text-sm text-stone-400">
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($order->is_express): ?>
                        <span class="text-amber-400">Express</span> ·
                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                    Back <?php echo e($order->service->turnaroundLabel($order->is_express)); ?>

                </div>
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($order->due_at): ?>
                    <div class="mt-2 text-sm <?php echo e($order->isOverdue() ? 'text-red-300' : 'text-stone-400'); ?>">
                        Due <?php echo e($order->due_at->setTimezone(config('studio.timezone'))->format('D j M, H:i')); ?>

                    </div>
                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
            </div>
            <div class="text-right">
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(bccomp((string) $order->price_total, '0.00', 2) === 0): ?>
                    <div class="font-mono text-xl text-amber-400">On your package</div>
                <?php else: ?>
                    <div class="font-mono text-3xl tabular-nums text-amber-400">£<?php echo e($order->price_total); ?></div>
                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
            </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($notice): ?>
        <div class="mt-6 rounded-md border border-emerald-500/40 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-200">
            <?php echo e($notice); ?>

        </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->owesMoney): ?>
        <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">Payment needed</div>
            <p class="mt-2 text-sm text-stone-400">
                We start work once this clears and your audio is with us.
            </p>
            <button type="button" wire:click="payByCard" wire:loading.attr="disabled"
                class="mt-4 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>
        </div>
    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

    
    <div class="mt-6 rounded-lg border border-ink-700 bg-ink-900 p-5">
        <div class="font-mono text-xs uppercase tracking-widest text-stone-500">Your audio</div>

        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($this->sourceFiles->isEmpty()): ?>
            <p class="mt-2 text-sm text-stone-400">
                Nothing yet. We cannot start until we have something to work on.
            </p>
        <?php else: ?>
            <ul class="mt-3 space-y-2">
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__currentLoopData = $this->sourceFiles; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $file): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoopIteration(); ?><?php endif; ?>
                    <li class="flex items-center justify-between gap-3 rounded-md border border-ink-700 px-3 py-2 text-sm">
                        <span class="truncate text-stone-200">
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($file->isLink()): ?>
                                <?php echo e($file->external_url); ?>

                            <?php else: ?>
                                <?php echo e($file->original_name); ?>

                            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                        </span>
                        <span class="shrink-0 font-mono text-xs text-stone-500">
                            <?php echo e($file->isLink() ? 'link' : $file->humanSize()); ?>

                        </span>
                    </li>
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>
            </ul>
        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

        
        <div class="mt-5"
             x-data="{
                 busy: false,
                 percent: 0,
                 failure: null,
                 async upload(event) {
                     const file = event.target.files[0]
                     if (! file) return

                     this.busy = true
                     this.percent = 0
                     this.failure = null

                     try {
                         const signed = await $wire.signUpload(
                             file.name,
                             file.type || 'application/octet-stream',
                             file.size,
                         )

                         if (signed.error) { this.failure = signed.error; return }

                         await this.put(signed, file)

                         await $wire.confirmUpload(
                             signed.key,
                             file.name,
                             file.type || 'application/octet-stream',
                         )
                     } catch (e) {
                         this.failure = 'The upload did not finish. Check your connection and try again.'
                     } finally {
                         this.busy = false
                         event.target.value = ''
                     }
                 },
                 put(signed, file) {
                     // XHR rather than fetch, purely so there is a progress
                     // event. A 500 MB upload with no feedback looks broken.
                     return new Promise((resolve, reject) => {
                         const xhr = new XMLHttpRequest()
                         xhr.open('PUT', signed.url, true)
                         for (const [key, value] of Object.entries(signed.headers || {})) {
                             xhr.setRequestHeader(key, value)
                         }
                         xhr.upload.onprogress = (e) => {
                             if (e.lengthComputable) this.percent = Math.round((e.loaded / e.total) * 100)
                         }
                         xhr.onload = () => (xhr.status >= 200 && xhr.status < 300) ? resolve() : reject()
                         xhr.onerror = () => reject()
                         xhr.send(file)
                     })
                 },
             }">
            <label class="block font-mono text-xs uppercase tracking-widest text-stone-500">
                Add a file — WAV, MP3, AIFF or a ZIP of stems
            </label>
            <input type="file" accept=".wav,.mp3,.aiff,.aif,.zip,audio/*,application/zip"
                   x-on:change="upload" x-bind:disabled="busy"
                   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">

            <div x-show="busy" x-cloak class="mt-3">
                <div class="h-2 overflow-hidden rounded bg-ink-800">
                    <div class="h-full bg-amber-500 transition-all" x-bind:style="`width: ${percent}%`"></div>
                </div>
                <p class="mt-1 font-mono text-xs text-stone-500" x-text="`${percent}% uploaded`"></p>
            </div>

            <p x-show="failure" x-cloak x-text="failure" class="mt-2 text-xs text-red-300"></p>
        </div>

        <div class="mt-5 border-t border-ink-800 pt-4">
            <label class="block font-mono text-xs uppercase tracking-widest text-stone-500">
                Or send a link
            </label>
            <div class="mt-2 flex gap-2">
                <input type="url" wire:model="sourceLink" placeholder="https://youtube.com/… or BeatStars"
                       class="flex-1 rounded-lg border-ink-700 bg-ink-900 text-stone-100 focus:border-amber-500 focus:ring-amber-500">
                <button type="button" wire:click="addLink"
                        class="rounded-lg border border-ink-600 px-4 text-sm text-stone-200 hover:border-amber-500">
                    Add
                </button>
            </div>
        </div>
    </div>

    
    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($this->deliveries->isNotEmpty()): ?>
        <div class="mt-6 rounded-lg border border-emerald-500/40 bg-emerald-500/10 p-5">
            <div class="font-mono text-xs uppercase tracking-widest text-emerald-300">Your track is ready</div>
            <ul class="mt-3 space-y-2">
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__currentLoopData = $this->deliveries; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $delivery): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoopIteration(); ?><?php endif; ?>
                    <li class="flex items-center justify-between gap-3">
                        <span class="truncate text-sm text-emerald-100"><?php echo e($delivery->original_name); ?></span>
                        <button type="button" wire:click="download(<?php echo e($delivery->id); ?>)"
                                class="shrink-0 rounded-md bg-emerald-500/20 px-3 py-1.5 text-xs font-semibold
                                       uppercase tracking-wide text-emerald-200 hover:bg-emerald-500/30">
                            Download
                        </button>
                    </li>
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>
            </ul>
            <p class="mt-3 text-xs text-emerald-100/60">
                Download links are short-lived. Come back here any time for a fresh one.
            </p>
        </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/service-order.blade.php ENDPATH**/ ?>