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

    $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';
    $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';
    $original = $warranty->repairJob;
@endphp

<x-app-layout title="Warranty job">
    <x-slot name="header">
        <a href="{{ route('warranty.check', ['q' => $original?->job_no]) }}" class="text-sm text-gray-500 hover:text-gray-700">&larr; Warranty check</a>
        <h1 class="flex items-center gap-2 text-xl font-semibold text-gray-900">
            New warranty job <span class="rounded-full bg-amber-500 px-3 py-1 text-sm font-bold uppercase text-white">Warranty</span>
        </h1>
    </x-slot>

    <form method="POST" action="{{ route('warranty.job.store', $warranty) }}" x-data="{ saving: false }" @submit="saving = true"
          class="max-w-3xl mx-auto px-4 py-6 sm:px-6 lg:px-8 space-y-5">
        @csrf

        <x-input-error :messages="$errors->get('warranty')" />

        <section class="rounded-xl border border-amber-300 bg-amber-50 p-4 sm:p-6 text-sm text-amber-900 space-y-1">
            <p class="text-base font-semibold">{{ $warranty->device->display_name }} · {{ $warranty->customer->name }}</p>
            <p>Original repair: <strong>job {{ $original?->job_no }}</strong>@if ($warranty->invoice?->invoice_no), invoice {{ $warranty->invoice->invoice_no }}@endif.</p>
            <p>Covered: <strong>{{ $warranty->description }}</strong> until {{ $warranty->ends_on->format('d M Y') }} ({{ $warranty->daysLeft() }} days left).</p>
            @if ($warranty->claims->isNotEmpty())
                <p class="font-semibold">Already claimed on: {{ $warranty->claims->pluck('job_no')->join(', ') }}</p>
            @endif
            <p>The new job has <strong>no charge by default</strong>.</p>
        </section>

        <section class="{{ $section }}">
            <h2 class="text-lg font-semibold text-gray-900">What is wrong now</h2>
            <div>
                <x-input-label for="problem_reported" value="What the customer says" />
                <textarea id="problem_reported" name="problem_reported" rows="3" required class="{{ $input }}"
                          placeholder="e.g. New screen has lines again">{{ old('problem_reported') }}</textarea>
                <x-input-error :messages="$errors->get('problem_reported')" class="mt-2" />
            </div>
            <div>
                <x-input-label for="device_condition" value="Condition notes" />
                <textarea id="device_condition" name="device_condition" rows="2" class="{{ $input }}"
                          placeholder="Check for drops or water: they are not covered">{{ old('device_condition') }}</textarea>
            </div>
        </section>

        <section class="{{ $section }}">
            <h2 class="text-lg font-semibold text-gray-900">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 }}" value="{{ old('accessories_other') }}">
            </div>
        </section>

        <section class="{{ $section }}">
            <div class="grid gap-4 sm:grid-cols-2">
                <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-input-error :messages="$errors->get('promised_on')" class="mt-2" />
                </div>
                <div>
                    <x-input-label value="Priority" />
                    <div class="mt-1 grid grid-cols-2 gap-2">
                        @foreach (JobPriority::cases() as $p)
                            <label class="{{ $chip }} justify-center">
                                <input type="radio" name="priority" value="{{ $p->value }}" class="sr-only" @checked(old('priority', 'normal') === $p->value)>
                                {{ $p->label() }}
                            </label>
                        @endforeach
                    </div>
                </div>
            </div>
            <p class="text-sm text-gray-500">After saving, assign the technician from the job page.</p>
        </section>

        <div class="sticky bottom-20 z-10 lg:bottom-4">
            <button type="submit" x-bind:disabled="saving"
                    class="w-full min-h-14 rounded-xl bg-amber-500 text-lg font-semibold text-white shadow-lg hover:bg-amber-400 disabled:opacity-70">
                <span x-show="!saving">Create warranty job</span>
                <span x-show="saving" x-cloak>Saving…</span>
            </button>
        </div>
    </form>
</x-app-layout>