@php($money = fn ($v) => \App\Services\Insurance\QuotationPresenter::money((float) $v))
<x-layouts.app title="HDFC ERGO rate card" :subtitle="$canManage ? 'Vehicle master with IDV, discounts and add-on rates by policy year.' : 'Vehicle list with IDV and discounts (read-only).'"
               :breadcrumbs="['Insurance' => null, 'HDFC rate card' => null]">
    @if ($canManage)
        <x-slot:actions>
            <button type="button" class="btn btn-secondary" @click="$dispatch('open-modal', 'mfg-discount')"><x-heroicon-m-building-office class="h-4 w-4" /> Manufacturer discount</button>
            <a href="{{ route('rates.hdfc.create') }}" class="btn btn-brand"><x-heroicon-m-plus class="h-4 w-4" /> Add vehicle</a>
        </x-slot:actions>
    @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>

        @if ($canManage)
            <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', 'bulk-update')"><x-heroicon-m-pencil-square class="h-4 w-4" /> Bulk update rates</button>
            </div>
        @endif

        @if ($cars->isEmpty())
            <x-empty-state title="No vehicles found" message="Try another manufacturer, fuel or search term." icon="heroicon-o-truck" />
        @else
            <div class="table-wrap">
                <table class="table table-compact">
                    <thead>
                        <tr>
                            @if ($canManage)<th class="w-10"><input type="checkbox" class="form-checkbox" :checked="all" @click="toggleAll(@js($cars->pluck('id')->all()))" aria-label="Select all"></th>@endif
                            <th><x-sort-link column="id" label="ID" /></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="seating_capacity" label="Seats" /></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><x-sort-link column="updated_date" label="Updated" /></th>
                            @if ($canManage)<th></th>@endif
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-ink-100 dark:divide-ink-800">
                        @foreach ($cars as $car)
                            <tr>
                                @if ($canManage)<td><input type="checkbox" class="form-checkbox" value="{{ $car->id }}" x-model.number="selected"></td>@endif
                                <td class="text-ink-400 tabular-nums">{{ $car->id }}</td>
                                <td class="font-medium text-ink-900 dark:text-white">
                                    @if ($canManage)<a href="{{ route('rates.hdfc.edit', $car) }}" class="hover:text-brand-600">{{ $car->mfg_name }}</a>@else{{ $car->mfg_name }}@endif
                                </td>
                                <td>{{ $car->model }}</td>
                                <td class="max-w-[14rem] truncate" title="{{ $car->sub_model }}">{{ $car->sub_model }}</td>
                                <td class="text-right tabular-nums">{{ $money($car->idv_6_1) }}</td>
                                <td><span class="badge badge-gray">{{ $car->fuel_type ?: '—' }}</span></td>
                                <td class="text-right tabular-nums">{{ $car->cc }}</td>
                                <td class="text-right tabular-nums">{{ $car->seating_capacity }}</td>
                                <td class="text-right tabular-nums">{{ (int) $car->discount }}%</td>
                                <td class="text-right tabular-nums">{{ (int) $car->age_discount }}%</td>
                                <td class="text-right font-semibold text-emerald-700 tabular-nums dark:text-emerald-400">{{ $car->total_discount }}%</td>
                                <td class="text-ink-500">{{ $car->updated_date?->format('d M Y') }}</td>
                                @if ($canManage)
                                    <td class="text-right"><a href="{{ route('rates.hdfc.edit', $car) }}" class="btn-icon" title="Edit rates"><x-heroicon-o-pencil-square class="h-4 w-4" /></a></td>
                                @endif
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <x-pagination-bar :paginator="$cars" />
        @endif

        @if ($canManage)
            <x-modal name="bulk-update" title="Bulk update HDFC rates" maxWidth="4xl">
                <form method="POST" action="{{ route('rates.hdfc.bulk-update') }}" id="hdfc-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 vehicle(s); blank fields keep their current value. Changing the 1st-year tariff discount suggests the 2nd-year value (−5 %).</p>
                    <div class="mb-4 w-48">
                        <label class="form-label" for="bulk_age_discount">Extra discount %</label>
                        <input type="number" id="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', 'bulk-update')">Cancel</button>
                    <button type="submit" form="hdfc-bulk-form" class="btn btn-brand">Update selected</button>
                </x-slot:footer>
            </x-modal>

            <x-modal name="mfg-discount" title="Manufacturer-wide discount" maxWidth="md">
                <form method="POST" action="{{ route('rates.hdfc.mfg-discount') }}" id="mfg-discount-form" class="space-y-4" x-data="confirmSubmit('Overwrite the tariff and extra discount of EVERY vehicle of this manufacturer?')" @submit="submit">
                    @csrf
                    <x-select name="mfg_name" label="Manufacturer" :options="$manufacturers" placeholder="Select…" required />
                    <div class="grid grid-cols-2 gap-4">
                        <x-input name="discount" type="number" label="Tariff discount %" min="0" max="100" required />
                        <x-input name="age_discount" type="number" label="Extra discount %" min="0" max="100" required />
                    </div>
                    <p class="text-xs text-ink-500">Sets the 1st-year tariff discount and the extra discount for all vehicles of the manufacturer.</p>
                </form>
                <x-slot:footer>
                    <button type="button" class="btn btn-secondary" @click="$dispatch('close-modal', 'mfg-discount')">Cancel</button>
                    <button type="submit" form="mfg-discount-form" class="btn btn-brand">Apply</button>
                </x-slot:footer>
            </x-modal>
        @endif
    </x-card>
</x-layouts.app>