{{--
    The generic CRM uploader and file list (App\Livewire\Crm\Attachments).
    Mounted by name on any CRM record; see the class for the contract.
--}}
<div class="space-y-4">
    @if ($canAttach)
        <div class="rounded-2xl border-2 border-dashed border-slate-200 p-4 sm:p-5">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-12">
                @if ($category === null)
                    <div class="sm:col-span-4">
                        <x-label for="upload-category-{{ $recordType }}-{{ $recordId }}" value="{{ __('What is it?') }}" />
                        <select id="upload-category-{{ $recordType }}-{{ $recordId }}" wire:model="uploadCategory" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($categories as $key => $label)
                                <option value="{{ $key }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="uploadCategory" class="mt-2" />
                    </div>
                @endif

                <div class="{{ $category === null ? 'sm:col-span-8' : 'sm:col-span-12' }}">
                    <x-label for="upload-description-{{ $recordType }}-{{ $recordId }}" value="{{ __('Description (optional)') }}" />
                    <x-input id="upload-description-{{ $recordType }}-{{ $recordId }}" type="text" class="mt-1 block w-full placeholder:text-xs" wire:model="description" placeholder="{{ __('For example: signed order form, 12 March') }}" />
                    <x-input-error for="description" class="mt-2" />
                </div>

                <div class="sm:col-span-12">
                    <input type="file" multiple wire:model="upload"
                           class="block w-full text-sm text-slate-600 file:mr-4 file:rounded-xl file:border-0 file:bg-indigo-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-indigo-700 hover:file:bg-indigo-100" />
                    <x-upload-progress target="upload" class="mt-2" />
                    <p class="mt-2 text-xs text-slate-400">
                        {{ __('Up to :mb MB a file. Files are saved as soon as they finish uploading.', ['mb' => $maxMb]) }}
                        <button type="button" wire:click="openLinkForm" class="font-medium text-indigo-600 transition hover:text-indigo-800">{{ __('Add a link to a file stored elsewhere instead') }}</button>
                    </p>
                </div>
            </div>
        </div>
    @endif

    <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-100">
                <thead>
                    <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                        <th class="px-3 py-3.5 lg:px-4">{{ __('File') }}</th>
                        <th class="px-3 py-3.5 lg:px-4">{{ __('Type') }}</th>
                        <th class="px-3 py-3.5 lg:px-4">{{ __('Added') }}</th>
                        <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Actions') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 bg-white">
                    @forelse ($files as $file)
                        <tr wire:key="attachment-{{ $file->id }}" class="transition hover:bg-slate-50/70">
                            <td class="px-3 py-4 text-sm lg:px-4">
                                <div class="flex items-start gap-2">
                                    <x-icon :name="$file->isExternal() ? 'link' : 'document'" class="mt-0.5 h-4 w-4 shrink-0 text-slate-400" />
                                    <div class="min-w-0">
                                        <a href="{{ route('crm.attachments.show', $file) }}" target="_blank" rel="noopener" class="break-words font-medium text-slate-900 hover:text-indigo-600">{{ $file->original_name }}</a>
                                        @if ($file->description)
                                            <p class="text-xs text-slate-500">{{ $file->description }}</p>
                                        @endif
                                        <p class="text-xs text-slate-400">
                                            @if ($file->isExternal())
                                                {{ __('Link') }}
                                            @elseif ($file->size !== null)
                                                {{-- Number::fileSize() needs the intl extension, which the live host lacks. --}}
                                                {{ $file->size >= 1048576 ? number_format($file->size / 1048576, 1).' MB' : number_format(max(1, $file->size / 1024)).' KB' }}
                                            @endif
                                        </p>
                                    </div>
                                </div>
                            </td>
                            <td class="whitespace-nowrap px-3 py-4 text-sm lg:px-4">
                                <x-badge color="slate">{{ __($categories[$file->category] ?? 'Other') }}</x-badge>
                            </td>
                            <td class="whitespace-nowrap px-3 py-4 text-sm text-slate-500 lg:px-4">
                                {{ $file->created_at?->timezone(config('app.display_timezone'))->format('j M Y') }}
                                <span class="block text-xs text-slate-400">{{ $file->uploader?->name ?? __('Not available') }}</span>
                            </td>
                            <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-medium lg:px-4">
                                <div class="flex items-center justify-end gap-3">
                                    @unless ($file->isExternal())
                                        <a href="{{ route('crm.attachments.show', ['attachment' => $file, 'download' => 1]) }}" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Download') }}</a>
                                    @endunless
                                    @can('delete', $file)
                                        <button type="button" wire:click="remove({{ $file->id }})" wire:confirm="{{ __('Remove this file from the record?') }}" class="text-rose-600 transition hover:text-rose-800">{{ __('Remove') }}</button>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="px-6 py-10">
                                <x-empty-state icon="paper-clip" :title="__('No files yet')"
                                    :message="$canAttach ? __('Briefs, artwork, signed orders and other documents added here stay with the record.') : __('Nobody has added a file to this record.')"
                                    class="border-0 bg-transparent py-0" />
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @include('livewire.crm.partials.paginator', ['rows' => $files])
    </div>

    @if ($canAttach)
    <x-dialog-modal wire:model.live="showLinkForm">
        <x-slot name="title">{{ __('Add a link to a file') }}</x-slot>

        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                <div>
                    <x-label for="link-name-{{ $recordType }}-{{ $recordId }}" value="{{ __('Name') }}" />
                    <x-input id="link-name-{{ $recordType }}-{{ $recordId }}" type="text" class="mt-1 block w-full" wire:model="linkName" />
                    <x-input-error for="linkName" class="mt-2" />
                </div>
                <div>
                    <x-label for="link-url-{{ $recordType }}-{{ $recordId }}" value="{{ __('Link') }}" />
                    <x-input id="link-url-{{ $recordType }}-{{ $recordId }}" type="url" class="mt-1 block w-full placeholder:text-xs" wire:model="linkUrl" placeholder="https://drive.google.com/..." />
                    <x-input-error for="linkUrl" class="mt-2" />
                </div>
                @if ($category === null)
                    <div>
                        <x-label for="link-category-{{ $recordType }}-{{ $recordId }}" value="{{ __('What is it?') }}" />
                        <select id="link-category-{{ $recordType }}-{{ $recordId }}" wire:model="uploadCategory" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($categories as $key => $label)
                                <option value="{{ $key }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showLinkForm', false)">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="saveLink" wire:loading.attr="disabled" wire:target="saveLink">
                <span wire:loading.remove wire:target="saveLink">{{ __('Add link') }}</span>
                <span wire:loading wire:target="saveLink">{{ __('Saving…') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>
    @endif
</div>