@php
    use App\Enums\JobPriority;
    use App\Support\JobIntakeOptions;

    $device = $job->device;

    // Saved value, or what was typed before a validation error.
    $brandId = old('brand_id') ?? ($device->brand_id ?? ($device->brand_name ? 'other' : ''));
    $modelId = old('device_model_id') ?? ($device->device_model_id ?? ($device->model_name ? 'other' : ''));

    $config = [
        'catalogue' => $catalogue,
        'phoneTypeId' => $catalogue['types']->firstWhere('name', 'Phone')?->id,
        'typeId' => old('device_type_id', $device->device_type_id),
        'brandId' => old('brand_other') && ! old('brand_id') ? 'other' : $brandId,
        'modelId' => old('model_other') && ! old('device_model_id') ? 'other' : $modelId,
    ];

    $problems = old('problems', $job->problems ?? []);
    $conditions = old('condition_checks', $job->condition_checks ?? []);
    $accessories = old('accessories', $job->accessories ?? []);

    $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 = 'text-lg font-semibold text-gray-900';
@endphp

<x-app-layout :title="'Edit job '.$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">Edit job {{ $job->job_no }}</h1>
    </x-slot>

    <form method="POST" action="{{ route('jobs.update', $job) }}" novalidate
          x-data="jobEditForm(@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
        @method('PUT')

        @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

        {{-- Customer: shown only. Change it on the customer page. --}}
        <section class="{{ $section }}">
            <h2 class="{{ $heading }}">Customer</h2>
            <div class="flex flex-wrap items-center justify-between gap-3">
                <div>
                    <p class="font-semibold text-gray-900">{{ $job->customer->name }}</p>
                    <p class="text-sm text-gray-600">{{ $job->customer->phone_display }}{{ $job->customer->email ? ' · '.$job->customer->email : '' }}</p>
                </div>
                <a href="{{ route('customers.edit', $job->customer) }}" class="min-h-11 inline-flex items-center rounded-lg border border-gray-300 bg-white px-4 text-sm font-semibold text-gray-700 hover:bg-gray-50">
                    Edit customer
                </a>
            </div>
        </section>

        {{-- Device --}}
        <section class="{{ $section }}">
            <h2 class="{{ $heading }}">Device</h2>

            <div>
                <x-input-label value="Device type" />
                <div class="mt-1 grid grid-cols-3 gap-2 sm:grid-cols-4">
                    <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">
                <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', $device->brand_id ? '' : $device->brand_name) }}">
                    <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', $device->device_model_id ? '' : $device->model_name) }}">
                    <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" autocomplete="off" class="{{ $input }}" value="{{ old('color', $device->color) }}">
                </div>

                <div>
                    <x-input-label for="storage" value="Storage" />
                    <input id="storage" name="storage" type="text" autocomplete="off" class="{{ $input }}" value="{{ old('storage', $device->storage) }}">
                </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'" value="{{ old('serial_number', $device->serial_number) }}">
                    <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" autocomplete="off" class="{{ $input }} tracking-wide" value="{{ old('imei_2', $device->imei_2) }}">
                    <x-input-error :messages="$errors->get('imei_2')" class="mt-2" />
                </div>
            </div>
        </section>

        {{-- Problem --}}
        <section class="{{ $section }}">
            <h2 class="{{ $heading }}">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, $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 }}">{{ old('problem_reported', $job->problem_reported) }}</textarea>
                <x-input-error :messages="$errors->get('problem_reported')" class="mt-2" />
            </div>
        </section>

        {{-- Condition --}}
        <section class="{{ $section }}">
            <h2 class="{{ $heading }}">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, $conditions))>
                        {{ $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 }}">{{ old('device_condition', $job->device_condition) }}</textarea>
                <x-input-error :messages="$errors->get('device_condition')" class="mt-2" />
            </div>
        </section>

        {{-- Accessories --}}
        <section class="{{ $section }}">
            <h2 class="{{ $heading }}">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, $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 }}" value="{{ old('accessories_other', $job->accessories_other) }}">
                <x-input-error :messages="$errors->get('accessories_other')" class="mt-2" />
            </div>
        </section>

        {{-- Estimate, date, priority --}}
        <section class="{{ $section }}">
            <h2 class="{{ $heading }}">Estimate and delivery</h2>
            <div class="grid gap-4 sm:grid-cols-2">
                <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', $job->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" class="{{ $input }}"
                           value="{{ old('promised_on', $job->promised_on?->toDateString()) }}">
                    <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', $job->priority->value) === $p->value)>
                            {{ $p->label() }}
                        </label>
                    @endforeach
                </div>
            </div>
            <p class="text-sm text-gray-500">The advance payment, screen lock and photos are not changed here.</p>
        </section>

        <div class="sticky bottom-20 z-10 flex gap-3 lg:bottom-4">
            <a href="{{ route('jobs.show', $job) }}" class="flex min-h-14 flex-1 items-center justify-center rounded-xl border border-gray-300 bg-white text-base font-semibold text-gray-700 shadow-lg">Cancel</a>
            <button type="submit" class="min-h-14 flex-[2] 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">Save changes</span>
                <span x-show="saving" x-cloak>Saving…</span>
            </button>
        </div>
    </form>

    <script>
        function jobEditForm(config) {
            return {
                catalogue: config.catalogue,
                phoneTypeId: config.phoneTypeId,
                typeId: String(config.typeId ?? ''),
                brandId: String(config.brandId ?? ''),
                modelId: String(config.modelId ?? ''),
                saving: false,
                get isPhone() { return String(this.typeId) === String(this.phoneTypeId); },
                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;
                },
                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);
                },
            };
        }
    </script>
</x-app-layout>