@php $usesDrive = $this->usesDrive(); @endphp

<x-card class="p-6">
    <div class="flex flex-wrap items-start justify-between gap-3">
        <div>
            <h2 class="text-base font-semibold text-slate-900">{{ __('Files & Attachments') }}</h2>
            <p class="text-xs text-slate-400">{{ __('All files related to this job, including anything the client sent through their portal.') }}</p>
        </div>

        @if ($usesDrive && $job->drive_folder_url)
            {{-- The escape hatch: everything below is a convenience view of this
                 one folder, and anyone who would rather work in Drive itself
                 (version history, desktop sync, comments) should be one click away. --}}
            <div class="flex items-center gap-2">
                @if ($canUpdate)
                    <button type="button" wire:click="syncDrive" wire:loading.attr="disabled" wire:target="syncDrive"
                            class="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 disabled:opacity-50">
                        <span wire:loading.remove wire:target="syncDrive">{{ __('Check Drive for new files') }}</span>
                        <span wire:loading wire:target="syncDrive">{{ __('Checking…') }}</span>
                    </button>
                @endif
                <a href="{{ $job->drive_folder_url }}" target="_blank" rel="noopener"
                   class="inline-flex items-center gap-1.5 rounded-lg bg-slate-900 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-slate-700">
                    {{ __('Open folder in Drive') }}
                </a>
            </div>
        @endif
    </div>

    @if ($usesDrive)
        <p class="mt-3 rounded-lg bg-sky-50 px-3 py-2 text-[11px] text-sky-800 ring-1 ring-sky-100">
            {{ __("This job has its own Google Drive folder. Drop production files straight into it from Drive for Desktop — they do not have to be uploaded here — then use “Check Drive for new files” to list them.") }}
            @if ($job->drive_synced_at)
                <span class="text-sky-600">{{ __('Last checked') }} {{ $job->drive_synced_at->timezone(config('app.display_timezone'))->diffForHumans() }}.</span>
            @endif
        </p>
    @endif

    @if ($canUpdate)
        @php
            // One control for everything that can be added to a job. Splitting
            // "take a photo" from "upload a file" made two boxes for one act,
            // and the second one was the one nobody scrolled to.
            $destinations = [
                \App\Livewire\Jobs\Show::UPLOAD_FILE => [
                    'icon' => 'document',
                    'label' => __('Job file'),
                    'blurb' => __('Artwork, specs, references — the working files for this job.'),
                ],
                \App\Livewire\Jobs\Show::UPLOAD_PROOF => [
                    'icon' => 'eye',
                    'label' => __('Proof for the client'),
                    'blurb' => __('Goes to their job portal to be approved or sent back. Kept private, never given a public link.'),
                ],
                \App\Livewire\Jobs\Show::UPLOAD_SHOWCASE => [
                    'icon' => 'camera',
                    'label' => __('Showcase'),
                    'blurb' => __('A portfolio shot of the finished work. Shown in the gallery below, and under Showcase in the sidebar.'),
                ],
            ];
            $maxLabel = $this->uploadMaxKb() >= 1024
                ? round($this->uploadMaxKb() / 1024).' MB'
                : $this->uploadMaxKb().' KB';
        @endphp

        <div class="mt-5">
            <div class="flex flex-wrap items-center gap-1.5">
                <span class="mr-1 text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Add to') }}</span>
                @foreach ($destinations as $key => $meta)
                    <button type="button" wire:click="$set('uploadTo', '{{ $key }}')"
                            class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold ring-1 ring-inset transition
                                   {{ $uploadTo === $key
                                        ? 'bg-slate-900 text-white ring-slate-900'
                                        : 'bg-white text-slate-600 ring-slate-200 hover:ring-indigo-300 hover:text-indigo-700' }}">
                        <x-icon :name="$meta['icon']" class="h-3.5 w-3.5" />
                        {{ $meta['label'] }}
                    </button>
                @endforeach
            </div>

            <p class="mt-1.5 text-[11px] text-slate-500">{{ $destinations[$uploadTo]['blurb'] ?? '' }}</p>

            {{-- What this file is FOR. A job selling three flags with three
                 different designs has three drawings, and one pile of files on
                 the job is how the wrong one gets printed. Choosing a product
                 that was never split gives it its single piece behind the
                 scenes, so the drawing has something real to belong to. --}}
            @if ($job->lineItems->count() > 1 || $job->productParts->isNotEmpty())
                <div class="mt-3">
                    <x-label for="upload-target" :value="__('What is it for?')" class="text-[11px]" />
                    <select id="upload-target" wire:model.live="uploadTargetKey"
                            class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-sm">
                        <option value="">{{ __('The job as a whole') }}</option>
                        @foreach ($job->lineItems as $line)
                            @php $pieces = $job->productParts->where('line_item_id', $line->id)->values(); @endphp
                            @if ($pieces->count() > 1)
                                <optgroup label="{{ $line->name }}">
                                    @foreach ($pieces as $piece)
                                        <option value="part:{{ $piece->id }}">{{ $piece->label }}</option>
                                    @endforeach
                                </optgroup>
                            @else
                                <option value="line:{{ $line->id }}">{{ $line->name }}</option>
                            @endif
                        @endforeach
                    </select>
                    <x-input-error for="uploadTargetKey" class="mt-1" />
                </div>
            @endif

            <x-media-capture target="upload" class="mt-2.5" :max-kb="$this->uploadMaxKb()"
                             :hint="__('Photos, clips and voice notes are recorded here on the page — you never leave the job. Up to :size per file.', ['size' => $maxLabel])" />
            <x-input-error for="upload" class="mt-1.5" />
            <x-input-error for="upload.*" class="mt-1.5" />
        </div>
    @endif

    <div class="mt-5 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
        @foreach ($job->attachments->where('purpose', \App\Models\JobAttachment::PURPOSE_GENERAL)->sortByDesc('created_at') as $file)
            @php $href = $file->staffUrl(); @endphp
            <div wire:key="file-{{ $file->id }}" class="group relative overflow-hidden rounded-xl border border-slate-200 bg-white">
                {{-- Clips and voice notes play here rather than being downloaded
                     to find out which one they are — the reason a media library
                     gets abandoned is having to open every file to identify it. --}}
                @if ($file->kind === 'video')
                    <div class="aspect-[4/3] w-full bg-slate-900">
                        <video src="{{ $href }}" controls preload="metadata" playsinline class="h-full w-full object-contain"></video>
                    </div>
                @elseif ($file->kind === 'audio')
                    <div class="flex aspect-[4/3] w-full flex-col items-center justify-center gap-2 bg-brand-50 px-3">
                        <span class="flex h-11 w-11 items-center justify-center rounded-full bg-white text-brand-700 shadow-sm">
                            <x-icon name="microphone" class="h-5 w-5" />
                        </span>
                        <audio src="{{ $href }}" controls preload="metadata" class="h-8 w-full"></audio>
                    </div>
                @else
                    <a href="{{ $href }}" target="_blank" rel="noopener" class="block">
                        @if ($file->is_image)
                            {{-- Every image gets a thumbnail now, not just the ones
                                 that happened to land on the public disk: the stream
                                 route serves them all. --}}
                            <div class="aspect-[4/3] w-full overflow-hidden bg-slate-50">
                                <img src="{{ $href }}" alt="{{ $file->original_name }}" loading="lazy" class="h-full w-full object-cover" />
                            </div>
                        @else
                            <div class="flex aspect-[4/3] w-full items-center justify-center bg-slate-50">
                                <span class="rounded-lg bg-rose-50 px-3 py-1.5 text-xs font-bold text-rose-600">{{ $file->extension_label }}</span>
                            </div>
                        @endif
                    </a>
                @endif

                {{-- Where the file came from, where it is kept, and where a proof has got to. --}}
                <div class="flex flex-wrap gap-1 px-3 pt-2">
                    @if ($file->job_product_part_id)
                        @php $forPart = $job->productParts->firstWhere('id', $file->job_product_part_id); @endphp
                        @if ($forPart)
                            <span class="rounded-full bg-indigo-50 px-2 py-0.5 text-[10px] font-semibold text-indigo-700 ring-1 ring-indigo-200" title="{{ __('This file belongs to one piece of the job') }}">
                                {{ $forPart->label }}
                            </span>
                        @endif
                    @endif
                    @if ($file->isInDrive())
                        <span class="rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-semibold text-emerald-700 ring-1 ring-emerald-200">{{ __('In Drive') }}</span>
                    @endif
                    @if ($file->isFromClient())
                        <span class="rounded-full bg-sky-50 px-2 py-0.5 text-[10px] font-semibold text-sky-700 ring-1 ring-sky-200">{{ __('From client') }}</span>
                    @endif
                    @if ($file->is_proof)
                        @if ($file->proof_status === \App\Models\JobAttachment::PROOF_APPROVED)
                            <span class="rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-semibold text-emerald-700 ring-1 ring-emerald-200">{{ __('Approved') }}</span>
                        @elseif ($file->proof_status === \App\Models\JobAttachment::PROOF_CHANGES)
                            <span class="rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-semibold text-amber-700 ring-1 ring-amber-200">{{ __('Changes asked') }}</span>
                        @else
                            <span class="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-600 ring-1 ring-slate-200">{{ __('Awaiting client') }}</span>
                        @endif
                    @endif
                </div>

                <div class="flex items-center justify-between gap-2 p-3 pt-1.5">
                    <div class="min-w-0">
                        <p class="truncate text-xs font-medium text-slate-700" title="{{ $file->original_name }}">{{ $file->original_name }}</p>
                        <p class="text-[11px] text-slate-400">
                            {{ $file->extension_label }} · {{ $file->human_size }}
                            @if ($file->driveLink())
                                · <a href="{{ $file->driveLink() }}" target="_blank" rel="noopener" class="font-medium text-indigo-500 hover:text-indigo-600">{{ __('Drive') }}</a>
                            @endif
                        </p>
                    </div>
                    @if ($canUpdate)
                        <button type="button" wire:click="deleteAttachment({{ $file->id }})" wire:confirm="{{ __('Delete this file?') }}" class="shrink-0 text-slate-300 transition hover:text-rose-500">
                            <x-icon name="trash" class="h-4 w-4" />
                        </button>
                    @endif
                </div>

                {{-- Drawings uploaded before a product was split still need to
                     find their design, so they can be re-filed here rather than
                     deleted and uploaded again. --}}
                @if ($canUpdate && $job->productParts->isNotEmpty())
                    <div class="border-t border-slate-100 px-3 py-2">
                        <select wire:change="fileAgainst({{ $file->id }}, $event.target.value)"
                                class="block w-full rounded-lg border-slate-200 py-1 text-[11px] text-slate-600 focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="" @selected(! $file->job_product_part_id)>{{ __('For the job as a whole') }}</option>
                            @foreach ($job->productParts as $piece)
                                <option value="{{ $piece->id }}" @selected((int) $file->job_product_part_id === (int) $piece->id)>{{ $piece->fullLabel() }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif

                @if ($file->proof_comment)
                    <p class="border-t border-slate-100 px-3 py-2 text-[11px] italic text-slate-500">“{{ $file->proof_comment }}”</p>
                @endif

                @if ($canUpdate && $file->is_proof && $file->proof_status === \App\Models\JobAttachment::PROOF_CHANGES)
                    <button type="button" wire:click="resendProof({{ $file->id }})"
                            class="w-full border-t border-slate-100 px-3 py-2 text-[11px] font-semibold text-indigo-600 transition hover:bg-indigo-50">
                        {{ __('Send back for approval') }}
                    </button>
                @endif
            </div>
        @endforeach

    </div>

    @if ($job->attachments->where('purpose', \App\Models\JobAttachment::PURPOSE_GENERAL)->isEmpty())
        <p class="mt-4 text-sm text-slate-400">{{ __('No files attached.') }}</p>
    @endif
</x-card>