@php($money = fn ($v) => \App\Services\Insurance\QuotationPresenter::money((float) $v))
<x-layouts.app title="TATA AIG rate card" subtitle="IDV, discounts and package-plan rates per vehicle (linked to the vehicle master)."
               :breadcrumbs="['Insurance' => null, 'TATA AIG rate card' => null]">
    <x-slot:actions>
        <a href="{{ route('rates.tata.create') }}" class="btn btn-brand"><x-heroicon-m-plus class="h-4 w-4" /> Add rates for a vehicle</a>
    </x-slot:actions>

    @if ($missingCount > 0)
        <div class="mb-5 flex items-center gap-3 rounded-xl border border-sky-200 bg-sky-50 px-4 py-3 text-sm text-sky-800 dark:border-sky-500/20 dark:bg-sky-500/10 dark:text-sky-300">
            <x-heroicon-s-information-circle class="h-5 w-5 shrink-0" />
            <span class="flex-1">{{ number_format($missingCount) }} vehicle(s) of the master have no TATA AIG rates yet and cannot be quoted with TATA AIG.</span>
            <a href="{{ route('rates.tata.create') }}" class="font-medium underline">Add rates</a>
        </div>
    @endif

    <x-card :padded="false" x-data="bulkSelect">
        <div class="border-b border-ink-100 p-4 dark:border-ink-800">
            <x-filter-bar placeholder="Search manufacturer, model, variant, CC…">
                <x-select name="mfg" :options="$manufacturers" :value="request('mfg')" placeholder="All manufacturers" class="w-56" :enhance="true" />
                <x-select name="fuel" :options="$fuels" :value="request('fuel')" placeholder="Any fuel" class="w-36" />
            </x-filter-bar>
        </div>

        <div x-cloak x-show="selected.length" x-transition class="flex flex-wrap items-center justify-between gap-3 border-b border-brand-200 bg-brand-50/70 px-5 py-2.5 text-sm dark:border-brand-500/20 dark:bg-brand-500/10">
            <span><span class="font-semibold" x-text="selected.length"></span> vehicle(s) selected</span>
            <button type="button" class="btn btn-primary btn-sm" @click="$dispatch('open-modal', 'tata-bulk-update')"><x-heroicon-m-pencil-square class="h-4 w-4" /> Bulk update rates</button>
        </div>

        @if ($rates->isEmpty())
            <x-empty-state title="No TATA AIG rates found" message="Try another filter, or add rates for a vehicle." icon="heroicon-o-shield-check" />
        @else
            <div class="table-wrap">
                <table class="table table-compact">
                    <thead>
                        <tr>
                            <th class="w-10"><input type="checkbox" class="form-checkbox" :checked="all" @click="toggleAll(@js($rates->pluck('id')->all()))" aria-label="Select all"></th>
                            <th><x-sort-link column="mfg_name" label="Manufacturer" /></th>
                            <th><x-sort-link column="model" label="Model" /></th>
                            <th><x-sort-link column="sub_model" label="Variant" /></th>
                            <th class="text-right"><x-sort-link column="idv_6_1" label="IDV 0–1 yr" /></th>
                            <th><x-sort-link column="fuel_type" label="Fuel" /></th>
                            <th class="text-right"><x-sort-link column="cc" label="CC" /></th>
                            <th class="text-right"><x-sort-link column="discount" label="Tariff disc." /></th>
                            <th class="text-right"><x-sort-link column="age_discount" label="Extra disc." /></th>
                            <th class="text-right">Total disc.</th>
                            <th class="text-right">Pearl / Sapphire+ RTI</th>
                            <th><x-sort-link column="updated_date" label="Updated" /></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-ink-100 dark:divide-ink-800">
                        @foreach ($rates as $rate)
                            <tr>
                                <td><input type="checkbox" class="form-checkbox" value="{{ $rate->id }}" x-model.number="selected"></td>
                                <td class="font-medium text-ink-900 dark:text-white"><a href="{{ route('rates.tata.edit', $rate) }}" class="hover:text-brand-600">{{ $rate->mfg_name }}</a></td>
                                <td>{{ $rate->model }}</td>
                                <td class="max-w-[14rem] truncate" title="{{ $rate->sub_model }}">{{ $rate->sub_model }}</td>
                                <td class="text-right tabular-nums">{{ $money($rate->idv_6_1) }}</td>
                                <td><span class="badge badge-gray">{{ $rate->fuel_type ?: '—' }}</span></td>
                                <td class="text-right tabular-nums">{{ $rate->cc }}</td>
                                <td class="text-right tabular-nums">{{ (int) $rate->discount }}%</td>
                                <td class="text-right tabular-nums">{{ (int) $rate->age_discount }}%</td>
                                <td class="text-right font-semibold text-emerald-700 tabular-nums dark:text-emerald-400">{{ $rate->total_discount }}%</td>
                                <td class="text-right text-ink-500 tabular-nums">{{ $rate->pearl_plan ?: '—' }}% / {{ $rate->saphhire_plus_rti ?: '—' }}%</td>
                                <td class="text-ink-500">{{ $rate->updated_date?->format('d M Y') }}</td>
                                <td class="text-right"><a href="{{ route('rates.tata.edit', $rate) }}" class="btn-icon" title="Edit rates"><x-heroicon-o-pencil-square class="h-4 w-4" /></a></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <x-pagination-bar :paginator="$rates" />
        @endif

        <x-modal name="tata-bulk-update" title="Bulk update TATA AIG rates" maxWidth="4xl">
            <form method="POST" action="{{ route('rates.tata.bulk-update') }}" id="tata-bulk-form" x-data="confirmSubmit('Apply these rates to the selected vehicles?')" @submit="submit">
                @csrf
                <template x-for="id in selected" :key="id"><input type="hidden" name="ids[]" :value="id"></template>
                <p class="mb-4 text-sm text-ink-500">Only the fields you fill in are changed on the <strong x-text="selected.length"></strong> selected row(s); blank fields keep their current value.</p>
                <div class="mb-4 w-48">
                    <label class="form-label" for="tata_bulk_age_discount">Extra discount %</label>
                    <input type="number" id="tata_bulk_age_discount" name="age_discount" min="0" max="100" step="1" class="form-input form-input-sm" placeholder="—">
                </div>
                @include('insurance.rates._bulk-fields', ['groups' => $groups])
            </form>
            <x-slot:footer>
                <button type="button" class="btn btn-secondary" @click="$dispatch('close-modal', 'tata-bulk-update')">Cancel</button>
                <button type="submit" form="tata-bulk-form" class="btn btn-brand">Update selected</button>
            </x-slot:footer>
        </x-modal>
    </x-card>
</x-layouts.app>