@php
    $tabMeta = [
        'working' => ['label' => __('In progress'), 'icon' => 'pencil-square'],
        'review' => ['label' => __('Waiting for review'), 'icon' => 'shield-check'],
        'submitted' => ['label' => __('Submitted'), 'icon' => 'paper-airplane'],
        'closed' => ['label' => __('Answered'), 'icon' => 'archive-box'],
        'all' => ['label' => __('All'), 'icon' => 'queue-list'],
    ];
    $statusColors = \App\Livewire\Crm\Proposals\Show::STATUS_COLORS;
    $control = 'mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500';
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        <x-page-header :title="__('Proposals')">
            @if ($canCreate)
                <x-button type="button" wire:click="openCreate">
                    <x-icon name="plus" class="mr-1.5 h-4 w-4" /> {{ __('New proposal') }}
                </x-button>
            @endif
        </x-page-header>

        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            @foreach ($metrics as $m)
                <x-card class="group relative flex flex-col overflow-hidden p-5 ring-slate-200/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-300/40">
                    <div class="flex items-start justify-between gap-2">
                        <p class="truncate text-[11px] font-semibold uppercase tracking-wider text-slate-400" title="{{ $m['label'] }}">{{ $m['label'] }}</p>
                        <span class="flex items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40" style="height: 2rem; width: 2rem; background: linear-gradient(135deg, {{ $m['accent'] }}, {{ $m['accent'] }}bb)">
                            <x-icon :name="$m['icon']" class="h-4 w-4" />
                        </span>
                    </div>
                    <p class="mt-3 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ $m['value'] }}</p>
                    <span class="mt-2.5 inline-flex w-fit items-center gap-1 rounded-full bg-slate-100 px-2 py-1 text-[11px] font-semibold text-slate-500">{{ $m['sub'] }}</span>
                </x-card>
            @endforeach
        </section>

        <div class="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
            @foreach ($tabMeta as $key => $meta)
                <button type="button" wire:click="switchTab('{{ $key }}')"
                    class="flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $tab === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                    <x-icon :name="$meta['icon']" class="h-4 w-4" />
                    {{ $meta['label'] }}
                </button>
            @endforeach
        </div>

        <x-card class="overflow-hidden">
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
                <div>
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Proposals') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('Each proposal is shown by its latest version; earlier versions are on the proposal') }}</p>
                </div>
                <div class="relative max-w-xs flex-1">
                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                        <x-icon name="magnifying-glass" class="h-5 w-5" />
                    </span>
                    <input type="text" wire:model.live.debounce.300ms="search" placeholder="{{ __('Search title or organisation…') }}"
                        class="block w-full rounded-xl border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:ring-indigo-500" />
                </div>
            </div>

            <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 lg:px-4 py-3.5">{{ __('Proposal') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('For') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Written by') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Quote') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($proposals as $proposal)
                            <tr wire:key="proposal-{{ $proposal->id }}" class="transition hover:bg-slate-50/70">
                                <td class="px-3 lg:px-4 py-4 text-sm">
                                    <a href="{{ route('crm.proposals.show', $proposal) }}" wire:navigate class="font-medium text-slate-900 hover:text-indigo-600">{{ $proposal->title }}</a>
                                    <p class="mt-0.5 text-xs text-slate-400">{{ __('Version :v', ['v' => $proposal->version]) }}@if ($proposal->customer) · {{ $proposal->customer->name }} @endif</p>
                                </td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">
                                    @if ($proposal->opportunity)
                                        <span class="text-xs text-slate-400">{{ __('Opportunity') }}</span>
                                        <span class="block">{{ $proposal->opportunity->title }}</span>
                                    @elseif ($proposal->partnership)
                                        <span class="text-xs text-slate-400">{{ __('Partnership') }}</span>
                                        <span class="block">{{ $proposal->partnership->name }}</span>
                                    @else
                                        <span class="text-slate-400">{{ __('The organisation') }}</span>
                                    @endif
                                </td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">
                                    {{ $proposal->author?->name ?? __('Not available') }}
                                    @if ($proposal->status === 'in_review' && $proposal->reviewer)
                                        <span class="block text-xs text-slate-400">{{ __('With :name', ['name' => $proposal->reviewer->name]) }}</span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $proposal->quote?->quote_number ?? __('None linked') }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                    <x-badge :color="$statusColors[$proposal->status] ?? 'slate'">{{ __(\App\Models\Crm\Proposal::STATUSES[$proposal->status] ?? $proposal->status) }}</x-badge>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                    <div class="flex items-center justify-end gap-3">
                                        <a href="{{ route('crm.proposals.pdf', ['proposal' => $proposal, 'download' => 1]) }}" class="text-slate-500 transition hover:text-slate-800" title="{{ __('Download the PDF on the letterhead') }}">{{ __('PDF') }}</a>
                                        @if ($canCreate)
                                            <button type="button" wire:click="duplicate({{ $proposal->id }})" class="text-slate-500 transition hover:text-slate-800" title="{{ __('Start a new proposal with this text') }}">{{ __('Duplicate') }}</button>
                                        @endif
                                        <a href="{{ route('crm.proposals.show', $proposal) }}" wire:navigate class="text-indigo-600 transition hover:text-indigo-800">{{ __('Open') }}</a>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-6 py-12">
                                    @if (trim($search) !== '')
                                        <x-empty-state icon="magnifying-glass" :title="__('No proposal matches')" :message="__('Try another title, or clear the search.')" class="border-0 bg-transparent py-0" />
                                    @elseif ($tab === 'review')
                                        <x-empty-state icon="shield-check" :title="__('Nothing waiting for review')" :message="$isDirector ? __('Proposals officers send for approval will appear here.') : __('A proposal appears here while a director reviews it.')" class="border-0 bg-transparent py-0" />
                                    @else
                                        <x-empty-state icon="document-text" :title="__('No proposals here')" :message="$canCreate ? __('Start one with New proposal; it begins as a draft.') : __('Proposals the team writes will appear here.')" class="border-0 bg-transparent py-0" />
                                    @endif
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if ($proposals->hasPages())
                <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                    {{ $proposals->links() }}
                </div>
            @endif
        </x-card>
    </div>

    @if ($canCreate)
        <x-dialog-modal wire:model.live="showForm" maxWidth="2xl">
            <x-slot name="title">{{ __('New proposal') }}</x-slot>
            <x-slot name="content">
                <div class="grid grid-cols-1 gap-4">
                    @if ($reusable->isNotEmpty())
                        <div class="rounded-xl border border-indigo-100 bg-indigo-50/60 p-3">
                            <x-label for="copy_from" value="{{ __('Start from an existing proposal (optional)') }}" />
                            <select id="copy_from" wire:model.live="copy_from" class="{{ $control }}">
                                <option value="">{{ __('A blank draft') }}</option>
                                @foreach ($reusable as $source)
                                    <option value="{{ $source->id }}">{{ $source->title }}@if ($source->customer) · {{ $source->customer->name }}@endif · {{ __('v:v', ['v' => $source->version]) }}</option>
                                @endforeach
                            </select>
                            <p class="mt-1 text-xs text-indigo-700/80">{{ __('Its text and document link are copied into a new version 1 for you to adapt. The original is not touched.') }}</p>
                            <x-input-error for="copy_from" class="mt-2" />
                        </div>
                    @endif
                    <div>
                        <x-label for="title" value="{{ __('Title') }}" />
                        <x-input id="title" type="text" class="mt-1 block w-full" wire:model="title" />
                        <x-input-error for="title" class="mt-2" />
                    </div>
                    <p class="text-xs text-slate-500">{{ __('Say what the proposal is for. Choose an opportunity for a sale, a partnership for a partner, or only an organisation.') }}</p>
                    <div>
                        <x-label for="opportunity_id" value="{{ __('Opportunity') }}" />
                        <select id="opportunity_id" wire:model="opportunity_id" class="{{ $control }}">
                            <option value="">{{ __('None') }}</option>
                            @foreach ($opportunities as $opportunity)
                                <option value="{{ $opportunity->id }}">{{ $opportunity->title }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="opportunity_id" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="partnership_id" value="{{ __('Partnership') }}" />
                        <select id="partnership_id" wire:model="partnership_id" class="{{ $control }}">
                            <option value="">{{ __('None') }}</option>
                            @foreach ($partnerships as $partnership)
                                <option value="{{ $partnership->id }}">{{ $partnership->name }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="partnership_id" class="mt-2" />
                    </div>
                    @include('livewire.crm.partnerships.partials.organisation-picker', [
                        'field' => 'customer_id',
                        'label' => __('Organisation'),
                        'hint' => __('Taken from the opportunity when one is chosen.'),
                    ])
                </div>
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button wire:click="$set('showForm', false)" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
                <x-button class="ms-3" wire:click="save" wire:loading.attr="disabled" wire:target="save">
                    <span wire:loading.remove wire:target="save">{{ __('Start the draft') }}</span>
                    <span wire:loading wire:target="save">{{ __('Saving…') }}</span>
                </x-button>
            </x-slot>
        </x-dialog-modal>
    @endif
</div>