@php
    use App\Enums\JobPriority;
    use App\Enums\PasscodeType;
    use App\Enums\PaymentMethod;
    use App\Models\Customer;
    use App\Support\JobIntakeOptions;
    use App\Support\Phone;

    $selectedCustomer = old('customer_id') ? Customer::find(old('customer_id')) : $customer;

    $config = [
        'lookupUrl' => route('customers.lookup'),
        'catalogue' => $catalogue,
        'phoneTypeId' => $catalogue['types']->firstWhere('name', 'Phone')?->id,
        'customer' => $selectedCustomer ? ['id' => $selectedCustomer->id, 'name' => $selectedCustomer->name, 'phone' => $selectedCustomer->phone_display] : null,
        'phone' => old('customer_phone') ? Phone::toLocal(old('customer_phone')) : ($selectedCustomer ? Phone::toLocal($selectedCustomer->phone) : ''),
        'typeId' => old('device_type_id', ''),
        'brandId' => old('brand_id') ?? (old('brand_other') ? 'other' : ''),
        'modelId' => old('device_model_id') ?? (old('model_other') ? 'other' : ''),
        'passcodeType' => old('passcode_type', ''),
        'passcode' => old('passcode', ''),
        'advance' => old('advance_amount') && (float) old('advance_amount') > 0 ? old('advance_amount') : '',
    ];

    $input = 'mt-1 block w-full min-h-12 text-base border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-lg shadow-sm';
    $chip = 'flex min-h-12 cursor-pointer select-none items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 text-sm font-medium text-gray-700 has-[:checked]:border-indigo-600 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-800';
    $section = 'rounded-xl bg-white p-4 shadow-sm sm:p-6 space-y-4';
    $heading = 'flex items-center gap-3 text-lg font-semibold text-gray-900';
    $num = 'flex h-7 w-7 items-center justify-center rounded-full bg-indigo-600 text-sm font-bold text-white';
@endphp

<x-app-layout title="New job card">
    <x-slot name="header">
        <h1 class="text-xl font-semibold text-gray-900">New job card</h1>
    </x-slot>

    <form method="POST" action="{{ route('jobs.store') }}" enctype="multipart/form-data" novalidate
          x-data="jobForm(@js($config))" @submit="saving = true" class="max-w-3xl mx-auto px-4 py-6 sm:px-6 lg:px-8 space-y-5">
        @csrf

        @if ($errors->any())
            <div class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800" role="alert">
                Please fix the {{ $errors->count() === 1 ? 'error' : $errors->count().' errors' }} below.
            </div>
        @endif

        {{-- ========== 1. Customer ========== --}}
        <section class="{{ $section }}">
            <h2 class="{{ $heading }}"><span class="{{ $num }}">1</span> Customer</h2>

            <input type="hidden" name="customer_id" :value="customer ? customer.id : ''">

            <div>
                <x-input-label for="customer_phone" value="Phone number" />
                <input id="customer_phone" name="customer_phone" type="tel" inputmode="tel" autocomplete="off" placeholder="0771234567"
                       class="{{ $input }} text-lg tracking-wide" x-model="phone" @input.debounce.400ms="lookup()" :readonly="!!customer"
                       @if (! $selectedCustomer) autofocus @endif>
                <x-input-error :messages="$errors->get('customer_phone')" class="mt-2" />
                <p x-show="searching" x-cloak class="mt-1 text-sm text-gray-500">Searching…</p>
            </div>

            {{-- Found --}}
            <div x-show="customer" x-cloak class="flex items-center justify-between gap-3 rounded-lg border border-green-300 bg-green-50 p-3">
                <div>
                    <p class="font-semibold text-green-900" x-text="customer?.name"></p>
                    <p class="text-sm text-green-800">Existing customer · <span x-text="customer?.phone"></span></p>
                </div>
                <button type="button" @click="clearCustomer()" class="min-h-11 rounded-lg border border-green-400 bg-white px-4 text-sm font-semibold text-green-800">Change</button>
            </div>

            {{-- Not found: new customer --}}
            <div x-show="!customer && searched" x-cloak class="space-y-4 rounded-lg border border-amber-300 bg-amber-50 p-3">
                <p class="text-sm font-medium text-amber-900">New customer. They will be saved with this job.</p>
                <div class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <x-input-label for="customer_name" value="Name" />
                        <input id="customer_name" name="customer_name" type="text" autocomplete="off" class="{{ $input }}" value="{{ old('customer_name') }}" x-ref="customerName">
                        <x-input-error :messages="$errors->get('customer_name')" class="mt-2" />
                    </div>
                    <div>
                        <x-input-label for="customer_email" value="Email (optional)" />
                        <input id="customer_email" name="customer_email" type="email" autocomplete="off" class="{{ $input }}" value="{{ old('customer_email') }}">
                        <x-input-error :messages="$errors->get('customer_email')" class="mt-2" />
                    </div>
                </div>
            </div>
        </section>

        {{-- ========== 2. Device ========== --}}
        <section class="{{ $section }}">
            <h2 class="{{ $heading }}"><span class="{{ $num }}">2</span> Device</h2>

            <div>
                <x-input-label value="Device type" />
                <div class="mt-1 grid grid-cols-3 gap-2 sm:grid-cols-6">
                    <template x-for="type in catalogue.types" :key="type.id">
                        <label class="{{ $chip }} justify-center text-center">
                            <input type="radio" name="device_type_id" class="sr-only" :value="type.id" x-model="typeId" @change="brandId = ''; modelId = ''">
                            <span x-text="type.name"></span>
                        </label>
                    </template>
                </div>
                <x-input-error :messages="$errors->get('device_type_id')" class="mt-2" />
            </div>

            <div class="grid gap-4 sm:grid-cols-2" x-show="typeId" x-cloak>
                <div>
                    <x-input-label for="brand_id" value="Brand" />
                    <select id="brand_id" name="brand_id" class="{{ $input }}" x-model="brandId" @change="modelId = ''">
                        <option value="">Choose brand</option>
                        <template x-for="brand in brandsForType" :key="brand.id">
                            <option :value="brand.id" x-text="brand.name" :selected="String(brand.id) === String(brandId)"></option>
                        </template>
                        <option value="other">Other (type it)</option>
                    </select>
                    <input x-show="brandId === 'other'" x-cloak name="brand_other" type="text" placeholder="Type the brand" autocomplete="off"
                           class="{{ $input }}" value="{{ old('brand_other') }}">
                    <x-input-error :messages="$errors->get('brand_id')" class="mt-2" />
                    <x-input-error :messages="$errors->get('brand_other')" class="mt-2" />
                </div>

                <div>
                    <x-input-label for="device_model_id" value="Model" />
                    <select id="device_model_id" name="device_model_id" class="{{ $input }}" x-model="modelId" :disabled="!brandId || brandId === 'other'">
                        <option value="">Choose model</option>
                        <template x-for="model in modelsForBrand" :key="model.id">
                            <option :value="model.id" x-text="model.n" :selected="String(model.id) === String(modelId)"></option>
                        </template>
                        <option value="other">Other (type it)</option>
                    </select>
                    <input x-show="modelId === 'other' || brandId === 'other'" x-cloak name="model_other" type="text" placeholder="Type the model" autocomplete="off"
                           class="{{ $input }}" value="{{ old('model_other') }}">
                    <x-input-error :messages="$errors->get('device_model_id')" class="mt-2" />
                    <x-input-error :messages="$errors->get('model_other')" class="mt-2" />
                </div>

                <div>
                    <x-input-label for="color" value="Colour" />
                    <input id="color" name="color" type="text" list="colours" autocomplete="off" class="{{ $input }}" value="{{ old('color') }}">
                    <datalist id="colours">
                        @foreach (['Black', 'White', 'Silver', 'Gold', 'Blue', 'Green', 'Red', 'Purple', 'Pink', 'Grey', 'Space Grey', 'Midnight', 'Starlight'] as $c)
                            <option value="{{ $c }}">
                        @endforeach
                    </datalist>
                </div>

                <div>
                    <x-input-label for="storage" value="Storage" />
                    <input id="storage" name="storage" type="text" list="storages" autocomplete="off" class="{{ $input }}" value="{{ old('storage') }}">
                    <datalist id="storages">
                        @foreach (['32GB', '64GB', '128GB', '256GB', '512GB', '1TB', '2TB'] as $s)
                            <option value="{{ $s }}">
                        @endforeach
                    </datalist>
                </div>

                <div>
                    <x-input-label for="serial_number" x-text="isPhone ? 'IMEI 1' : 'Serial number'" value="Serial number" />
                    <input id="serial_number" name="serial_number" type="text" autocomplete="off" class="{{ $input }} tracking-wide"
                           :inputmode="isPhone ? 'numeric' : 'text'" :maxlength="isPhone ? 17 : 100" value="{{ old('serial_number') }}">
                    <p x-show="isPhone" class="mt-1 text-xs text-gray-500">15 numbers. Dial *#06# to see it.</p>
                    <x-input-error :messages="$errors->get('serial_number')" class="mt-2" />
                </div>

                <div x-show="isPhone" x-cloak>
                    <x-input-label for="imei_2" value="IMEI 2 (dual SIM)" />
                    <input id="imei_2" name="imei_2" type="text" inputmode="numeric" maxlength="17" autocomplete="off" class="{{ $input }} tracking-wide" value="{{ old('imei_2') }}">
                    <x-input-error :messages="$errors->get('imei_2')" class="mt-2" />
                </div>
            </div>
        </section>

        {{-- ========== 3. Problem ========== --}}
        <section class="{{ $section }}">
            <h2 class="{{ $heading }}"><span class="{{ $num }}">3</span> Problem</h2>

            <div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
                @foreach (JobIntakeOptions::PROBLEMS as $key => $label)
                    <label class="{{ $chip }}">
                        <input type="checkbox" name="problems[]" value="{{ $key }}" class="h-5 w-5 rounded border-gray-300 text-indigo-600"
                               @checked(in_array($key, old('problems', [])))>
                        {{ $label }}
                    </label>
                @endforeach
            </div>

            <div>
                <x-input-label for="problem_reported" value="What the customer says" />
                <textarea id="problem_reported" name="problem_reported" rows="3" class="{{ $input }}"
                          placeholder="e.g. Dropped yesterday, touch not working at the bottom">{{ old('problem_reported') }}</textarea>
                <x-input-error :messages="$errors->get('problem_reported')" class="mt-2" />
            </div>
        </section>

        {{-- ========== 4. Condition ========== --}}
        <section class="{{ $section }}">
            <h2 class="{{ $heading }}"><span class="{{ $num }}">4</span> Condition when received</h2>

            <div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
                @foreach (JobIntakeOptions::CONDITIONS as $key => $label)
                    <label class="{{ $chip }}">
                        <input type="checkbox" name="condition_checks[]" value="{{ $key }}" class="h-5 w-5 rounded border-gray-300 text-indigo-600"
                               @checked(in_array($key, old('condition_checks', [])))>
                        {{ $label }}
                    </label>
                @endforeach
            </div>

            <div>
                <x-input-label for="device_condition" value="Condition notes" />
                <textarea id="device_condition" name="device_condition" rows="2" class="{{ $input }}"
                          placeholder="e.g. Small crack at top left corner">{{ old('device_condition') }}</textarea>
                <x-input-error :messages="$errors->get('device_condition')" class="mt-2" />
            </div>
        </section>

        {{-- ========== 5. Accessories ========== --}}
        <section class="{{ $section }}">
            <h2 class="{{ $heading }}"><span class="{{ $num }}">5</span> Accessories received</h2>

            <div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
                @foreach (JobIntakeOptions::ACCESSORIES as $key => $label)
                    <label class="{{ $chip }}">
                        <input type="checkbox" name="accessories[]" value="{{ $key }}" class="h-5 w-5 rounded border-gray-300 text-indigo-600"
                               @checked(in_array($key, old('accessories', [])))>
                        {{ $label }}
                    </label>
                @endforeach
            </div>

            <div>
                <x-input-label for="accessories_other" value="Other items" />
                <input id="accessories_other" name="accessories_other" type="text" autocomplete="off" class="{{ $input }}"
                       placeholder="e.g. Stylus pen" value="{{ old('accessories_other') }}">
                <x-input-error :messages="$errors->get('accessories_other')" class="mt-2" />
            </div>
        </section>

        {{-- ========== 6. Security ========== --}}
        <section class="{{ $section }}">
            <h2 class="{{ $heading }}"><span class="{{ $num }}">6</span> Screen lock</h2>
            <p class="-mt-2 text-sm text-gray-500">Saved encrypted. Only the admin and the assigned technician can see it.</p>

            <input type="hidden" name="passcode_type" :value="passcodeType">
            <input type="hidden" name="passcode" :value="passcodeValue">

            <div class="grid grid-cols-4 gap-2">
                @foreach (['' => 'None'] + collect(PasscodeType::cases())->mapWithKeys(fn ($t) => [$t->value => $t->label()])->all() as $value => $label)
                    <button type="button" @click="setPasscodeType(@js($value))"
                            class="min-h-12 rounded-lg border text-sm font-semibold"
                            :class="passcodeType === @js($value) ? 'border-indigo-600 bg-indigo-50 text-indigo-800' : 'border-gray-300 bg-white text-gray-700'">
                        {{ $label }}
                    </button>
                @endforeach
            </div>

            <div x-show="passcodeType === 'pin' || passcodeType === 'password'" x-cloak>
                <x-input-label for="passcode_text" x-text="passcodeType === 'pin' ? 'PIN' : 'Password'" value="Password" />
                <input id="passcode_text" type="text" autocomplete="off" class="{{ $input }} text-lg tracking-widest"
                       :inputmode="passcodeType === 'pin' ? 'numeric' : 'text'" x-model="passcodeText">
            </div>

            {{-- 3x3 pattern lock --}}
            <div x-show="passcodeType === 'pattern'" x-cloak class="flex flex-col items-center gap-3">
                <svg x-ref="pad" viewBox="0 0 300 300" class="w-64 max-w-full touch-none select-none rounded-xl bg-gray-900"
                     @pointerdown.prevent="patternStart($event)" @pointermove.prevent="patternMove($event)"
                     @pointerup="patternEnd()" @pointercancel="patternEnd()" @pointerleave="patternEnd()">
                    <polyline :points="patternLine" fill="none" stroke="#818cf8" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" />
                    {{-- Written out with Blade: Alpine's x-for <template> does not work inside <svg>. --}}
                    @for ($i = 1; $i <= 9; $i++)
                        @php($cx = 50 + (($i - 1) % 3) * 100)
                        @php($cy = 50 + intdiv($i - 1, 3) * 100)
                        <circle cx="{{ $cx }}" cy="{{ $cy }}" r="30" stroke-width="3"
                                :fill="pattern.includes({{ $i }}) ? '#4f46e5' : 'transparent'" :stroke="pattern.includes({{ $i }}) ? '#a5b4fc' : '#4b5563'" />
                        <circle cx="{{ $cx }}" cy="{{ $cy }}" r="9" :fill="pattern.includes({{ $i }}) ? '#ffffff' : '#9ca3af'" />
                        <text x="{{ $cx + 22 }}" y="{{ $cy - 18 }}" fill="#e0e7ff" font-size="20" font-weight="700"
                              x-show="pattern.includes({{ $i }})" x-text="pattern.indexOf({{ $i }}) + 1"></text>
                    @endfor
                </svg>
                <p class="text-sm text-gray-600" x-text="pattern.length ? 'Pattern: ' + pattern.join(' → ') : 'Draw the pattern with your finger or mouse.'"></p>
                <button type="button" @click="pattern = []" class="min-h-11 rounded-lg border border-gray-300 bg-white px-5 text-sm font-semibold text-gray-700">Clear pattern</button>
            </div>

            <x-input-error :messages="$errors->get('passcode')" class="mt-2" />
        </section>

        {{-- ========== 7. Payment and delivery ========== --}}
        <section class="{{ $section }}">
            <h2 class="{{ $heading }}"><span class="{{ $num }}">7</span> Payment and delivery</h2>

            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <x-input-label for="advance_amount" value="Advance payment (Rs.)" />
                    <input id="advance_amount" name="advance_amount" type="number" step="0.01" min="0" inputmode="decimal" placeholder="0.00"
                           class="{{ $input }}" x-model="advance">
                    <x-input-error :messages="$errors->get('advance_amount')" class="mt-2" />
                </div>

                <div x-show="Number(advance) > 0" x-cloak>
                    <x-input-label value="Paid by" />
                    <div class="mt-1 grid grid-cols-2 gap-2">
                        @foreach (PaymentMethod::money() as $method)
                            <label class="{{ $chip }} justify-center">
                                <input type="radio" name="advance_method" value="{{ $method->value }}" class="sr-only"
                                       @checked(old('advance_method', 'cash') === $method->value)>
                                {{ $method->label() }}
                            </label>
                        @endforeach
                    </div>
                    <x-input-error :messages="$errors->get('advance_method')" class="mt-2" />
                </div>

                <div>
                    <x-input-label for="estimated_cost" value="Estimated cost (Rs., optional)" />
                    <input id="estimated_cost" name="estimated_cost" type="number" step="0.01" min="0" inputmode="decimal"
                           class="{{ $input }}" value="{{ old('estimated_cost') }}">
                    <x-input-error :messages="$errors->get('estimated_cost')" class="mt-2" />
                </div>

                <div>
                    <x-input-label for="promised_on" value="Expected delivery date" />
                    <input id="promised_on" name="promised_on" type="date" min="{{ now()->toDateString() }}"
                           class="{{ $input }}" value="{{ old('promised_on') }}" x-ref="promised">
                    <div class="mt-2 flex flex-wrap gap-2">
                        @foreach (['Today' => 0, 'Tomorrow' => 1, '3 days' => 3, '1 week' => 7] as $label => $days)
                            <button type="button" class="min-h-10 rounded-lg border border-gray-300 bg-white px-3 text-sm text-gray-700"
                                    @click="$refs.promised.value = '{{ now()->addDays($days)->toDateString() }}'">{{ $label }}</button>
                        @endforeach
                    </div>
                    <x-input-error :messages="$errors->get('promised_on')" class="mt-2" />
                </div>
            </div>

            <div>
                <x-input-label value="Priority" />
                <div class="mt-1 grid grid-cols-2 gap-2 sm:max-w-sm">
                    @foreach (JobPriority::cases() as $p)
                        <label class="{{ $chip }} justify-center {{ $p === JobPriority::Urgent ? 'has-[:checked]:border-red-600 has-[:checked]:bg-red-50 has-[:checked]:text-red-800' : '' }}">
                            <input type="radio" name="priority" value="{{ $p->value }}" class="sr-only" @checked(old('priority', 'normal') === $p->value)>
                            {{ $p->label() }}
                        </label>
                    @endforeach
                </div>
            </div>
        </section>

        {{-- ========== 8. Photos ========== --}}
        <section class="{{ $section }}">
            <h2 class="{{ $heading }}"><span class="{{ $num }}">8</span> Device photos</h2>
            <p class="-mt-2 text-sm text-gray-500">Optional. Take photos of the front, back and any damage. You can add more later from the job page.</p>

            @if ($errors->any())
                <p class="rounded-lg bg-amber-50 px-3 py-2 text-sm text-amber-900">If you added photos, please add them again.</p>
            @endif

            <x-photo-picker />

            <x-input-error :messages="collect($errors->get('photos'))->merge(collect($errors->get('photos.*'))->flatten())->unique()->all()" class="mt-2" />
        </section>

        {{-- Save (sticks to the bottom on phones, above the menu bar) --}}
        <div class="sticky bottom-20 z-10 lg:bottom-4">
            <button type="submit" class="w-full min-h-14 rounded-xl bg-indigo-600 text-lg font-semibold text-white shadow-lg hover:bg-indigo-500 disabled:opacity-70"
                    x-bind:disabled="saving">
                <span x-show="!saving">Create job card</span>
                <span x-show="saving" x-cloak>Saving…</span>
            </button>
        </div>
    </form>

    <script>
        function jobForm(config) {
            return {
                catalogue: config.catalogue,
                phoneTypeId: config.phoneTypeId,

                // 1. Customer
                phone: config.phone,
                customer: config.customer,
                searched: !!config.phone && !config.customer,
                searching: false,
                async lookup() {
                    const digits = (this.phone || '').replace(/\D/g, '');
                    if (this.customer) return;
                    if (digits.length < 9) { this.searched = false; return; }
                    this.searching = true;
                    try {
                        const res = await fetch(config.lookupUrl + '?phone=' + encodeURIComponent(this.phone), { headers: { Accept: 'application/json' } });
                        const data = await res.json();
                        this.customer = data.found ? { id: data.id, name: data.name, phone: data.phone } : null;
                        this.searched = true;
                        if (!data.found) this.$nextTick(() => this.$refs.customerName.focus());
                    } catch (e) {
                        this.searched = true; // server still checks the phone on save
                    } finally {
                        this.searching = false;
                    }
                },
                clearCustomer() {
                    this.customer = null;
                    this.searched = false;
                    this.phone = '';
                    this.$nextTick(() => document.getElementById('customer_phone').focus());
                },

                // 2. Device (dropdowns filter each other)
                typeId: String(config.typeId ?? ''),
                brandId: String(config.brandId ?? ''),
                modelId: String(config.modelId ?? ''),
                get isPhone() { return String(this.typeId) === String(this.phoneTypeId); },
                // Values from inputs can be numbers or text: always compare as text.
                get brandsForType() {
                    const type = String(this.typeId);
                    const ids = new Set(this.catalogue.models.filter(m => String(m.t) === type).map(m => String(m.b)));
                    const list = this.catalogue.brands.filter(b => ids.has(String(b.id)));
                    return list.length ? list : this.catalogue.brands; // e.g. "Other" type: show all brands
                },
                get modelsForBrand() {
                    const type = String(this.typeId), brand = String(this.brandId);
                    return this.catalogue.models.filter(m => String(m.t) === type && String(m.b) === brand);
                },

                // 6. Screen lock
                passcodeType: config.passcodeType,
                passcodeText: config.passcodeType === 'pattern' ? '' : config.passcode,
                pattern: config.passcodeType === 'pattern' && config.passcode ? config.passcode.split('-').map(Number) : [],
                drawing: false,
                pointer: null,
                setPasscodeType(type) {
                    this.passcodeType = type;
                    this.passcodeText = '';
                    this.pattern = [];
                },
                get passcodeValue() {
                    if (this.passcodeType === 'pattern') return this.pattern.join('-');
                    return this.passcodeType ? this.passcodeText : '';
                },
                dot(i) { return { x: 50 + ((i - 1) % 3) * 100, y: 50 + Math.floor((i - 1) / 3) * 100 }; },
                padPoint(e) {
                    const r = this.$refs.pad.getBoundingClientRect();
                    return { x: (e.clientX - r.left) * 300 / r.width, y: (e.clientY - r.top) * 300 / r.height };
                },
                patternStart(e) {
                    this.pattern = [];
                    this.drawing = true;
                    this.$refs.pad.setPointerCapture?.(e.pointerId);
                    this.patternMove(e);
                },
                patternMove(e) {
                    if (!this.drawing) return;
                    const p = this.padPoint(e);
                    this.pointer = p;
                    for (let i = 1; i <= 9; i++) {
                        const d = this.dot(i);
                        if (!this.pattern.includes(i) && Math.hypot(d.x - p.x, d.y - p.y) < 36) this.pattern.push(i);
                    }
                },
                patternEnd() { this.drawing = false; this.pointer = null; },
                get patternLine() {
                    const pts = this.pattern.map(i => this.dot(i));
                    if (this.drawing && this.pointer && pts.length) pts.push(this.pointer);
                    return pts.map(p => p.x + ',' + p.y).join(' ');
                },

                // 7. Payment
                advance: config.advance,
                saving: false,
            };
        }
    </script>
</x-app-layout>