@php
    use App\Support\Money;
    use App\Support\Phone;

    $returned = old('returned', array_keys($items));
    $collectedBy = old('collected_by', 'customer');
    $owes = (float) $balance > 0;
    $input = 'mt-1 block w-full min-h-12 text-base rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500';
    $section = 'rounded-xl bg-white p-4 shadow-sm sm:p-6 space-y-4';
@endphp

<x-app-layout :title="'Deliver '.$job->job_no">
    <x-slot name="header">
        <a href="{{ route('jobs.show', $job) }}" class="text-sm text-gray-500 hover:text-gray-700">&larr; Job {{ $job->job_no }}</a>
        <h1 class="text-xl font-semibold text-gray-900">Deliver device</h1>
        <p class="text-sm text-gray-500">{{ $job->device->display_name }} · {{ $job->customer->name }} · {{ $job->customer->phone_display }}</p>
    </x-slot>

    <div class="max-w-3xl mx-auto px-4 py-6 sm:px-6 lg:px-8 space-y-5">
        <x-flash />

        {{-- ========== Balance ========== --}}
        <section class="{{ $section }}">
            <h2 class="text-lg font-semibold text-gray-900">Payment</h2>

            @if ($draftInvoice)
                <p class="rounded-lg bg-amber-50 px-4 py-3 text-sm text-amber-900">
                    The invoice is still a draft. <a href="{{ route('invoices.show', $draftInvoice) }}" class="font-semibold underline">Finalize it</a> so the balance is correct.
                </p>
            @elseif (! $invoice)
                <p class="rounded-lg bg-amber-50 px-4 py-3 text-sm text-amber-900">
                    There is no invoice yet. <a href="{{ route('invoices.create', $job) }}" class="font-semibold underline">Create the invoice</a> before handing over.
                </p>
            @endif

            @if (! $owes)
                <p class="flex items-center gap-2 rounded-lg bg-green-50 px-4 py-3 font-semibold text-green-800">
                    <x-icon name="check" class="h-5 w-5" /> Nothing left to pay.
                </p>
            @else
                <div @class(['rounded-lg px-4 py-3', 'bg-red-50 text-red-900' => ! $allowed, 'bg-amber-50 text-amber-900' => $allowed])>
                    <p class="text-lg font-bold">Balance to pay: {{ Money::format($balance) }}</p>
                    @if ($allowed)
                        <p class="text-sm">Allowed by {{ $job->balanceOverrideBy?->name }}: {{ $job->balance_override_reason }}</p>
                    @else
                        <p class="text-sm">The device cannot be delivered until this is paid, unless an admin allows it.</p>
                    @endif
                </div>
                @if ($invoice && ! $allowed)
                    <a href="{{ route('invoices.show', $invoice) }}#payments" class="flex min-h-12 items-center justify-center rounded-xl bg-green-600 px-6 font-semibold text-white hover:bg-green-500 sm:inline-flex">
                        Take the payment
                    </a>
                @endif

                @if (! $allowed)
                    @can('allowBalance', $job)
                        <form method="POST" action="{{ route('jobs.deliver.allow-balance', $job) }}" class="space-y-3 rounded-lg border border-amber-300 bg-amber-50 p-4">
                            @csrf
                            <p class="text-sm font-semibold text-amber-900">Admin: let the device go with this balance</p>
                            <div>
                                <x-input-label for="override_reason" value="Reason" />
                                <input id="override_reason" name="override_reason" type="text" maxlength="500" value="{{ old('override_reason') }}"
                                       placeholder="e.g. Regular customer, pays on Friday" class="{{ $input }}">
                                <x-input-error :messages="$errors->get('override_reason')" class="mt-2" />
                            </div>
                            <button type="submit" class="min-h-12 rounded-lg bg-amber-600 px-5 font-semibold text-white hover:bg-amber-500">Allow delivery with balance</button>
                        </form>
                    @else
                        <p class="text-sm text-gray-600">Ask an admin to open this page and allow delivery with a balance.</p>
                    @endcan
                @endif
            @endif
            <x-input-error :messages="$errors->get('balance')" />
        </section>

        {{-- ========== Handover form ========== --}}
        <form method="POST" action="{{ route('jobs.deliver.store', $job) }}" x-data="handover(@js(['collectedBy' => $collectedBy]))" @submit="submit($event)" class="space-y-5">
            @csrf

            {{-- Accessories --}}
            <section class="{{ $section }}">
                <h2 class="text-lg font-semibold text-gray-900">Give back the accessories</h2>
                @if ($items)
                    <p class="-mt-2 text-sm text-gray-500">These were left with the device. Tick each item as you give it back.</p>
                    <div class="grid gap-2 sm:grid-cols-2">
                        @foreach ($items as $key => $label)
                            <label class="flex min-h-12 cursor-pointer items-center gap-3 rounded-lg border border-gray-300 bg-white px-3 text-base font-medium text-gray-800 has-[:checked]:border-green-600 has-[:checked]:bg-green-50">
                                <input type="checkbox" name="returned[]" value="{{ $key }}" class="h-6 w-6 rounded border-gray-300 text-green-600 focus:ring-green-500"
                                       @checked(in_array($key, $returned, true))>
                                {{ $label }}
                            </label>
                        @endforeach
                    </div>
                @else
                    <p class="text-gray-500">No accessories were left with the device.</p>
                @endif
                <div>
                    <x-input-label for="handover_notes" value="Notes (required if something is not given back)" />
                    <textarea id="handover_notes" name="handover_notes" rows="2" maxlength="1000" class="{{ $input }}"
                              placeholder="e.g. Customer did not want the box back">{{ old('handover_notes') }}</textarea>
                    <x-input-error :messages="$errors->get('handover_notes')" class="mt-2" />
                </div>
            </section>

            {{-- Who collects --}}
            <section class="{{ $section }}">
                <h2 class="text-lg font-semibold text-gray-900">Collected by</h2>
                <div class="grid grid-cols-2 gap-2">
                    <label class="flex min-h-12 cursor-pointer items-center justify-center rounded-lg border border-gray-300 bg-white px-3 text-sm font-semibold text-gray-700 has-[:checked]:border-indigo-600 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-800">
                        <input type="radio" name="collected_by" value="customer" class="sr-only" x-model="collectedBy"> The customer
                    </label>
                    <label class="flex min-h-12 cursor-pointer items-center justify-center rounded-lg border border-gray-300 bg-white px-3 text-sm font-semibold text-gray-700 has-[:checked]:border-indigo-600 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-800">
                        <input type="radio" name="collected_by" value="other" class="sr-only" x-model="collectedBy"> Another person
                    </label>
                </div>
                <p x-show="collectedBy === 'customer'" class="text-sm text-gray-600">{{ $job->customer->name }} · {{ $job->customer->phone_display }}</p>
                <div x-show="collectedBy === 'other'" x-cloak class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <x-input-label for="collector_name" value="Their name" />
                        <input id="collector_name" name="collector_name" type="text" maxlength="150" autocomplete="off" value="{{ old('collector_name') }}" class="{{ $input }}">
                        <x-input-error :messages="$errors->get('collector_name')" class="mt-2" />
                    </div>
                    <div>
                        <x-input-label for="collector_phone" value="Their phone" />
                        <input id="collector_phone" name="collector_phone" type="tel" inputmode="tel" placeholder="0771234567" autocomplete="off"
                               value="{{ old('collector_phone') ? Phone::toLocal(old('collector_phone')) : '' }}" class="{{ $input }}">
                        <x-input-error :messages="$errors->get('collector_phone')" class="mt-2" />
                    </div>
                </div>
                <x-input-error :messages="$errors->get('collected_by')" />
            </section>

            {{-- Signature --}}
            <section class="{{ $section }}">
                <div class="flex items-center justify-between">
                    <h2 class="text-lg font-semibold text-gray-900">Signature</h2>
                    <button type="button" @click="clear()" class="min-h-11 rounded-lg border border-gray-300 bg-white px-4 text-sm font-semibold text-gray-700 hover:bg-gray-50">Clear</button>
                </div>
                <p class="-mt-2 text-sm text-gray-500">
                    <span x-text="collectedBy === 'other' ? 'The person collecting' : 'The customer'"></span>
                    signs with a finger or the mouse to confirm they received the device{{ $items ? ' and the ticked items' : '' }}.
                </p>
                <div class="relative">
                    <canvas x-ref="pad" class="block h-48 w-full touch-none rounded-xl border-2 border-dashed border-gray-300 bg-white sm:h-56"
                            @pointerdown.prevent="start($event)" @pointermove.prevent="move($event)"
                            @pointerup="end()" @pointercancel="end()" @pointerleave="end()"></canvas>
                    <p x-show="!hasInk" class="pointer-events-none absolute inset-0 flex items-center justify-center text-gray-400">Sign here</p>
                    <div class="pointer-events-none absolute bottom-10 left-6 right-6 border-b border-gray-300"></div>
                </div>
                <input type="hidden" name="signature" x-ref="signature">
                <p x-show="missing" x-cloak class="text-sm text-red-700">Ask the customer to sign in the box.</p>
                <x-input-error :messages="$errors->get('signature')" />
            </section>

            <div class="sticky bottom-20 z-10 lg:bottom-4">
                @if ($canDeliver)
                    <button type="submit" x-bind:disabled="saving"
                            class="w-full min-h-14 rounded-xl bg-green-600 text-lg font-semibold text-white shadow-lg hover:bg-green-500 disabled:opacity-70">
                        <span x-show="!saving">Deliver device</span>
                        <span x-show="saving" x-cloak>Saving…</span>
                    </button>
                @else
                    <p class="rounded-xl bg-gray-200 px-4 py-4 text-center font-semibold text-gray-600 shadow-lg">
                        Cannot deliver: balance of {{ Money::format($balance) }} to pay.
                    </p>
                @endif
            </div>
        </form>
    </div>

    <script>
        function handover(config) {
            return {
                collectedBy: config.collectedBy,
                drawing: false,
                hasInk: false,
                missing: false,
                saving: false,
                last: null,
                init() {
                    this.resize();
                    // Rotating a phone or tablet changes the box size: start again.
                    window.addEventListener('resize', () => { if (!this.hasInk) this.resize(); });
                },
                // Sharp lines on phone screens: draw at the screen's pixel density.
                resize() {
                    const c = this.$refs.pad, ratio = Math.max(window.devicePixelRatio || 1, 1), r = c.getBoundingClientRect();
                    c.width = Math.round(r.width * ratio);
                    c.height = Math.round(r.height * ratio);
                    const ctx = c.getContext('2d');
                    ctx.scale(ratio, ratio);
                    ctx.lineWidth = 2.5;
                    ctx.lineCap = 'round';
                    ctx.lineJoin = 'round';
                    ctx.strokeStyle = '#111827';
                },
                point(e) {
                    const r = this.$refs.pad.getBoundingClientRect();
                    return { x: e.clientX - r.left, y: e.clientY - r.top };
                },
                start(e) {
                    this.drawing = true;
                    this.$refs.pad.setPointerCapture?.(e.pointerId);
                    this.last = this.point(e);
                    const ctx = this.$refs.pad.getContext('2d');
                    ctx.beginPath();
                    ctx.arc(this.last.x, this.last.y, 1.2, 0, Math.PI * 2);
                    ctx.fillStyle = '#111827';
                    ctx.fill();
                },
                move(e) {
                    if (!this.drawing) return;
                    const p = this.point(e), ctx = this.$refs.pad.getContext('2d');
                    ctx.beginPath();
                    ctx.moveTo(this.last.x, this.last.y);
                    ctx.lineTo(p.x, p.y);
                    ctx.stroke();
                    this.last = p;
                    this.hasInk = true;
                    this.missing = false;
                },
                end() { this.drawing = false; },
                clear() {
                    const c = this.$refs.pad;
                    c.getContext('2d').clearRect(0, 0, c.width, c.height);
                    this.hasInk = false;
                },
                submit(e) {
                    if (!this.hasInk) {
                        e.preventDefault();
                        this.missing = true;
                        this.$refs.pad.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        return;
                    }
                    this.$refs.signature.value = this.$refs.pad.toDataURL('image/png');
                    this.saving = true;
                },
            };
        }
    </script>
</x-app-layout>