@php
    use App\Enums\MessageEvent;

    $big = 'flex min-h-16 items-center justify-center gap-2 rounded-xl px-3 text-center text-lg font-semibold shadow-sm';
@endphp

<x-app-layout :title="'Job '.$job->job_no">
    <div class="max-w-3xl mx-auto px-4 py-6 sm:px-6 lg:px-8 space-y-5">
        <x-flash />

        {{-- Big confirmation --}}
        <div class="rounded-xl bg-green-600 p-6 text-center text-white shadow-sm">
            <p class="text-sm font-medium uppercase tracking-wide text-green-100">Job card created</p>
            <p class="mt-1 text-4xl font-bold tracking-wide tabular-nums">{{ $job->job_no }}</p>
            @if ($job->warranty_id)
                <p class="mt-2"><x-warranty-badge :job="$job" size="lg" /> <span class="text-green-50">No charge by default.</span></p>
            @endif
            <p class="mt-2 text-green-50">Write this number on the device tag.</p>
            @if ($job->photos->isNotEmpty())
                <p class="mt-1 text-sm text-green-100">{{ $job->photos->count() }} {{ str('photo')->plural($job->photos->count()) }} saved.</p>
            @endif
        </div>

        {{-- Was the job card PDF emailed to the customer? (sent automatically when the job is saved) --}}
        @can('use-front-desk')
            @if ($jobCardEmail)
                <div class="flex items-start gap-3 rounded-xl bg-green-50 p-4 text-green-900 ring-1 ring-green-200" data-job-card-email="sent">
                    <x-icon name="check" class="mt-0.5 h-6 w-6 text-green-600" />
                    <p>
                        <span class="font-semibold">The job card PDF is being emailed to {{ $jobCardEmail->recipient }}.</span>
                        <span class="block text-sm text-green-800">It goes out within a minute. You can check it in the job's Messages tab.</span>
                    </p>
                </div>
            @else
                <div class="flex items-start gap-3 rounded-xl bg-amber-50 p-4 text-amber-900 ring-1 ring-amber-200" data-job-card-email="none">
                    <x-icon name="alert" class="mt-0.5 h-6 w-6 text-amber-600" />
                    <p>
                        <span class="font-semibold">The job card was not emailed.</span>
                        <span class="block text-sm text-amber-800">
                            {{ $job->customer->email ? 'Emails for new jobs are turned off in Settings > Messages.' : 'This customer has no email address.' }}
                            Send it on WhatsApp below: the message has a link to the job card PDF.
                        </span>
                    </p>
                </div>
            @endif
        @endcan

        {{-- Next steps --}}
        <div class="grid grid-cols-2 gap-3">
            {{-- 1. Job created message with the tracking link and job card PDF link --}}
            @can('use-front-desk')
                <x-whatsapp-button :job="$job" :event="MessageEvent::JobCreated" class="{{ $big }} col-span-2 min-h-20 text-xl" />
            @endcan

            {{-- 2. QR sticker for the device --}}
            <a href="{{ route('jobs.sticker', ['job' => $job, 'layout' => 'label']) }}" target="_blank"
               class="{{ $big }} bg-white text-gray-800 ring-1 ring-gray-300 hover:bg-gray-50">
                <x-icon name="qr" class="h-6 w-6 shrink-0" /> Print QR sticker
            </a>

            {{-- 3. Job card --}}
            @include('jobs.partials.job-card-buttons', ['class' => $big, 'printLabel' => 'Print job card', 'printOnly' => true])

            {{-- 4. Job page --}}
            <a href="{{ route('jobs.show', $job) }}" class="{{ $big }} col-span-2 bg-white text-gray-800 ring-1 ring-gray-300 hover:bg-gray-50">
                Open job
            </a>
        </div>

        <a href="{{ route('jobs.create') }}" class="flex min-h-12 items-center justify-center rounded-xl text-base font-semibold text-indigo-700 hover:bg-indigo-50">
            + New job card
        </a>

        {{-- Summary --}}
        @include('jobs.partials.summary')
    </div>
</x-app-layout>