@php
    $editing = $plan->exists;
    $canEdit = auth('admin')->user()->can('pricing.edit');
    $packages = old('rental_packages', $plan->rental_packages ?: [['hours' => 1, 'km' => 10, 'price' => '', 'extra_km' => '', 'extra_minute' => '']]);
    $os = old('outstation_settings', $plan->outstation_settings ?? []);
    $num = fn ($name, $label, $value, $step = '0.01', $hint = null) => ['name' => $name, 'label' => $label, 'value' => $value, 'step' => $step, 'hint' => $hint];
@endphp
<x-admin.layout :title="$editing ? __('Fare plan') : __('New fare plan')">
    <x-admin.page-header :title="$editing ? __(':type · :service', ['type' => $plan->vehicleType?->name, 'service' => __($plan->service_type->label())]) : __('New fare plan')"
                         :subtitle="$editing ? ($plan->zone ? __('Zone override: :zone', ['zone' => $plan->zone->name]) : __('Default plan for all zones')) : null"
                         :back="route('admin.fare-plans.index')">
        @if ($editing && $canEdit)
            <form method="POST" action="{{ route('admin.fare-plans.destroy', $plan) }}" data-confirm="{{ __('Delete this fare plan? Riders in its zone fall back to the default plan (if any).') }}">
                @csrf @method('DELETE')
                <x-admin.button type="submit" variant="danger" icon="trash">{{ __('Delete') }}</x-admin.button>
            </form>
        @endif
    </x-admin.page-header>

    <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">
        <form method="POST" action="{{ $editing ? route('admin.fare-plans.update', $plan) : route('admin.fare-plans.store') }}"
              class="space-y-6 xl:col-span-2" x-data="{ service: '{{ old('service_type', $plan->service_type->value) }}', packages: @js(array_values($packages)) }">
            @csrf
            @if ($editing) @method('PUT') @endif
            <fieldset @disabled(! $canEdit) class="space-y-6">

            <x-admin.card :title="__('Applies to')">
                <div class="grid gap-5 sm:grid-cols-3">
                    <x-admin.select name="vehicle_type_id" :label="__('Vehicle type')" :options="$vehicleTypes" :value="$plan->vehicle_type_id" :placeholder="__('Select…')" required />
                    <x-admin.select name="service_type" :label="__('Service')" :options="$services" :value="$plan->service_type" x-model="service" required />
                    <x-admin.select name="zone_id" :label="__('Zone')" :options="$zones" :value="$plan->zone_id" :placeholder="__('Default (all zones)')" />
                </div>
            </x-admin.card>

            {{-- City ride / outstation base pricing --}}
            <x-admin.card :title="__('Trip pricing')" x-show="service !== 'rental'">
                <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
                    @foreach ([
                        $num('base_fare', __('Base fare'), $plan->base_fare),
                        $num('base_distance_km', __('Km included in base'), $plan->base_distance_km, '0.1'),
                        $num('per_km', __('Per km'), $plan->per_km),
                        $num('per_minute', __('Per minute'), $plan->per_minute),
                    ] as $f)
                        <x-admin.input :name="$f['name']" type="number" min="0" :step="$f['step']" :label="$f['label']" :value="$f['value'] ?? 0" required x-bind:disabled="service === 'rental'" />
                    @endforeach
                </div>
                <p class="mt-3 text-xs text-gray-500 dark:text-gray-400">{{ __('Trip charge = base + (km − included km) × per km + minutes × per minute. Surge multiplies the trip charge (city rides only).') }}</p>
            </x-admin.card>

            {{-- Rental packages --}}
            <x-admin.card :title="__('Rental packages')" x-show="service === 'rental'" x-cloak>
                <input type="hidden" name="base_fare" value="0" :disabled="service !== 'rental'">
                <input type="hidden" name="base_distance_km" value="0" :disabled="service !== 'rental'">
                <div class="space-y-3">
                    <div class="hidden grid-cols-6 gap-3 text-xs font-semibold text-gray-500 uppercase sm:grid">
                        <span>{{ __('Hours') }}</span><span>{{ __('Km included') }}</span><span>{{ __('Price') }}</span><span>{{ __('Extra / km') }}</span><span>{{ __('Extra / min') }}</span><span></span>
                    </div>
                    <template x-for="(pkg, i) in packages" :key="i">
                        <div class="grid grid-cols-2 gap-3 sm:grid-cols-6">
                            <input type="number" min="1" max="24" class="form-control" :name="`rental_packages[${i}][hours]`" x-model="pkg.hours" placeholder="{{ __('Hours') }}" :disabled="service !== 'rental'">
                            <input type="number" min="0" step="0.1" class="form-control" :name="`rental_packages[${i}][km]`" x-model="pkg.km" placeholder="{{ __('Km') }}" :disabled="service !== 'rental'">
                            <input type="number" min="0" step="0.01" class="form-control" :name="`rental_packages[${i}][price]`" x-model="pkg.price" placeholder="{{ __('Price') }}" :disabled="service !== 'rental'">
                            <input type="number" min="0" step="0.01" class="form-control" :name="`rental_packages[${i}][extra_km]`" x-model="pkg.extra_km" placeholder="{{ __('Extra/km') }}" :disabled="service !== 'rental'">
                            <input type="number" min="0" step="0.01" class="form-control" :name="`rental_packages[${i}][extra_minute]`" x-model="pkg.extra_minute" placeholder="{{ __('Extra/min') }}" :disabled="service !== 'rental'">
                            <button type="button" class="rounded-lg text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-500/10" @click="packages.splice(i, 1)" x-show="packages.length > 1">{{ __('Remove') }}</button>
                        </div>
                    </template>
                    <x-admin.button size="sm" variant="secondary" icon="plus" @click="packages.push({ hours: '', km: '', price: '', extra_km: '', extra_minute: '' })">{{ __('Add package') }}</x-admin.button>
                    @if ($errors->has('rental_packages*'))
                        <p class="form-error">{{ collect($errors->get('rental_packages*'))->flatten()->first() }}</p>
                    @endif
                </div>
                <input type="hidden" name="per_km" value="{{ old('per_km', $plan->per_km ?? 0) }}" :disabled="service !== 'rental'">
                <input type="hidden" name="per_minute" value="{{ old('per_minute', $plan->per_minute ?? 0) }}" :disabled="service !== 'rental'">
            </x-admin.card>

            {{-- Outstation --}}
            <x-admin.card :title="__('Outstation')" x-show="service === 'outstation'" x-cloak>
                <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                    <x-admin.input name="outstation_settings[per_km_one_way]" type="number" min="0" step="0.01" :label="__('Per km (one way)')" :value="$os['per_km_one_way'] ?? ''" x-bind:disabled="service !== 'outstation'" />
                    <x-admin.input name="outstation_settings[per_km_round_trip]" type="number" min="0" step="0.01" :label="__('Per km (round trip)')" :value="$os['per_km_round_trip'] ?? ''" x-bind:disabled="service !== 'outstation'" />
                    <x-admin.input name="outstation_settings[min_km_per_day]" type="number" min="0" step="1" :label="__('Minimum km / day (round trip)')" :value="$os['min_km_per_day'] ?? ''" x-bind:disabled="service !== 'outstation'" />
                    <x-admin.input name="outstation_settings[driver_allowance_per_day]" type="number" min="0" step="0.01" :label="__('Driver allowance / day')" :value="$os['driver_allowance_per_day'] ?? ''" x-bind:disabled="service !== 'outstation'" />
                    <x-admin.input name="outstation_settings[night_charge]" type="number" min="0" step="0.01" :label="__('Night charge (22:00–06:00 start)')" :value="$os['night_charge'] ?? ''" x-bind:disabled="service !== 'outstation'" />
                </div>
                @error('outstation_settings.per_km_one_way')<p class="form-error">{{ $message }}</p>@enderror
            </x-admin.card>

            <x-admin.card :title="__('Minimums, fees & waiting')">
                <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
                    <x-admin.input name="minimum_fare" type="number" min="0" step="0.01" :label="__('Minimum fare')" :value="$plan->minimum_fare ?? 0" required />
                    <x-admin.input name="booking_fee" type="number" min="0" step="0.01" :label="__('Booking fee')" :value="$plan->booking_fee ?? 0" required />
                    <x-admin.input name="tax_percent" type="number" min="0" max="100" step="0.01" :label="__('Tax %')" :value="$plan->tax_percent ?? 0" required />
                    <x-admin.input name="cancellation_fee" type="number" min="0" step="0.01" :label="__('Cancellation fee')" :value="$plan->cancellation_fee ?? 0" required />
                    <x-admin.input name="free_cancellation_minutes" type="number" min="0" :label="__('Free cancellation (min)')" :value="$plan->free_cancellation_minutes" required />
                    <x-admin.input name="free_waiting_minutes" type="number" min="0" :label="__('Free waiting (min)')" :value="$plan->free_waiting_minutes" required />
                    <x-admin.input name="waiting_charge_per_minute" type="number" min="0" step="0.01" :label="__('Waiting / min')" :value="$plan->waiting_charge_per_minute ?? 0" required />
                </div>
            </x-admin.card>

            <x-admin.card :title="__('Platform commission')">
                <div class="grid gap-5 sm:grid-cols-3">
                    <x-admin.select name="commission_type" :label="__('Type')" :options="['percentage' => __('Percentage of fare'), 'fixed' => __('Fixed per trip')]" :value="$plan->commission_type" required />
                    <x-admin.input name="commission_value" type="number" min="0" step="0.01" :label="__('Value')" :value="$plan->commission_value" required />
                </div>
                <p class="mt-3 text-xs text-gray-500 dark:text-gray-400">{{ __('Commission is taken from the trip fare only – booking fee, airport fee and tax go to the platform; tolls go to the driver. Promo discounts are paid by the platform.') }}</p>
            </x-admin.card>

            <x-admin.card>
                <x-admin.toggle name="is_active" :label="__('Active')" :checked="$plan->is_active" :hint="__('Inactive plans are ignored (the default plan is used instead).')" />
                @if ($canEdit)
                    <div class="mt-5 flex gap-2">
                        <x-admin.button type="submit">{{ $editing ? __('Save changes') : __('Create fare plan') }}</x-admin.button>
                        <x-admin.button variant="secondary" :href="route('admin.fare-plans.index')">{{ __('Cancel') }}</x-admin.button>
                    </div>
                @endif
            </x-admin.card>
            </fieldset>
        </form>

        {{-- Live simulator --}}
        <div>
            <x-admin.card :title="__('Fare simulator')" class="xl:sticky xl:top-24">
                @if ($editing)
                    <div x-data="{
                            input: { distance_km: 8, duration_min: 20, waiting_min: 0, surge: 1, tolls: 0, rental_hours: {{ (int) (collect($plan->rental_packages)->min('hours') ?? 1) }}, round_trip: false, days: 1 },
                            result: null, error: null, loading: false,
                            async run() {
                                this.loading = true; this.error = null;
                                try {
                                    const r = await fetch('{{ route('admin.fare-plans.simulate', $plan) }}', {
                                        method: 'POST',
                                        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content },
                                        body: JSON.stringify(this.input),
                                    });
                                    const data = await r.json();
                                    if (!r.ok) { this.error = data.message; this.result = null; } else { this.result = data; }
                                } catch (e) { this.error = '{{ __('Could not reach the server.') }}'; }
                                this.loading = false;
                            }
                         }" x-init="run()">
                        <p class="mb-4 text-xs text-gray-500 dark:text-gray-400">{{ __('Prices a sample trip with the saved plan using the real pricing engine. Save first to test changes.') }}</p>
                        <div class="grid grid-cols-2 gap-3 text-sm">
                            @if ($plan->service_type->value === 'rental')
                                <label class="col-span-2"><span class="form-label">{{ __('Package (hours)') }}</span>
                                    <select class="form-control" x-model.number="input.rental_hours" @change="run()">
                                        @foreach ($plan->rental_packages ?? [] as $p)<option value="{{ $p['hours'] }}">{{ $p['hours'] }}h · {{ $p['km'] }} km</option>@endforeach
                                    </select></label>
                            @endif
                            <label><span class="form-label">{{ __('Distance (km)') }}</span><input type="number" min="0" step="0.1" class="form-control" x-model.number="input.distance_km" @input.debounce.400ms="run()"></label>
                            <label><span class="form-label">{{ __('Duration (min)') }}</span><input type="number" min="0" class="form-control" x-model.number="input.duration_min" @input.debounce.400ms="run()"></label>
                            @if ($plan->service_type->value === 'ride')
                                <label><span class="form-label">{{ __('Waiting (min)') }}</span><input type="number" min="0" class="form-control" x-model.number="input.waiting_min" @input.debounce.400ms="run()"></label>
                                <label><span class="form-label">{{ __('Surge ×') }}</span><input type="number" min="1" max="10" step="0.1" class="form-control" x-model.number="input.surge" @input.debounce.400ms="run()"></label>
                            @endif
                            @if ($plan->service_type->value === 'outstation')
                                <label><span class="form-label">{{ __('Days') }}</span><input type="number" min="1" max="30" class="form-control" x-model.number="input.days" @input.debounce.400ms="run()"></label>
                                <label class="flex items-end gap-2 pb-2"><input type="checkbox" x-model="input.round_trip" @change="run()" class="size-4 rounded border-gray-300 text-brand-600"> {{ __('Round trip') }}</label>
                            @endif
                            <label class="col-span-2"><span class="form-label">{{ __('Tolls') }}</span><input type="number" min="0" step="0.01" class="form-control" x-model.number="input.tolls" @input.debounce.400ms="run()"></label>
                        </div>

                        <p class="form-error" x-show="error" x-text="error"></p>

                        <div class="mt-5 space-y-1.5 border-t border-gray-200 pt-4 text-sm dark:border-gray-800" x-show="result" :class="loading && 'opacity-50'">
                            <template x-for="item in result?.rider.items ?? []" :key="item.key">
                                <div class="flex justify-between gap-2"><span class="text-gray-600 dark:text-gray-400" x-text="item.label"></span><span class="tabular-nums" :class="item.amount < 0 && 'text-emerald-600'" x-text="item.amount.toFixed(2)"></span></div>
                            </template>
                            <div class="flex justify-between border-t border-gray-200 pt-2 text-base font-semibold dark:border-gray-800"><span>{{ __('Rider pays') }}</span><span class="tabular-nums" x-text="result?.formatted.total"></span></div>
                            <div class="flex justify-between text-gray-500"><span>{{ __('Platform commission') }}</span><span class="tabular-nums" x-text="result?.formatted.commission"></span></div>
                            <div class="flex justify-between text-gray-500"><span>{{ __('Driver earns') }}</span><span class="tabular-nums" x-text="result?.formatted.driver_earning"></span></div>
                        </div>
                    </div>
                @else
                    <x-admin.empty :message="__('Save the plan to try it in the simulator.')" icon="calculator" />
                @endif
            </x-admin.card>
        </div>
    </div>
</x-admin.layout>