<x-admin-layout title="Edit Vehicle Type">
    <div class="card mb-4">
        <div class="card-body">
            <h5 class="fw-bold mb-4">Edit Vehicle Type</h5>
            <form method="POST" action="{{ route('admin.vehicle-types.update', $vehicleType) }}" enctype="multipart/form-data">
                @method('PUT')
                @include('admin.vehicle-types._form')
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <h5 class="fw-bold mb-1">Fare Rules</h5>
            <p class="text-muted small mb-4">
                Toggleable surcharges/discounts applied on top of the base fare — e.g. a
                "Bad weather surcharge" you switch on when conditions require it, or a
                standing "Night rate" multiplier. Rules apply in the order listed.
            </p>

            @if ($vehicleType->fareRules->isNotEmpty())
                <div class="table-responsive mb-4">
                    <table class="table align-middle">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Adjustment</th>
                                <th>Active</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($vehicleType->fareRules as $rule)
                                <tr>
                                    <form method="POST" action="{{ route('admin.vehicle-types.fare-rules.update', [$vehicleType, $rule]) }}">
                                        @csrf @method('PUT')
                                        <td>
                                            <input type="text" name="name" value="{{ $rule->name }}" class="form-control form-control-sm" required>
                                        </td>
                                        <td class="d-flex gap-2">
                                            <select name="adjustment_type" class="form-select form-select-sm" style="max-width:9rem">
                                                <option value="multiplier" @selected($rule->adjustment_type === 'multiplier')>Multiplier (×)</option>
                                                <option value="flat_amount" @selected($rule->adjustment_type === 'flat_amount')>Flat amount (+)</option>
                                            </select>
                                            <input type="number" step="0.01" name="adjustment_value" value="{{ $rule->adjustment_value }}" class="form-control form-control-sm" style="max-width:7rem" required>
                                        </td>
                                        <td>
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" name="is_active" value="1" @checked($rule->is_active)
                                                       onchange="this.form.requestSubmit()">
                                            </div>
                                        </td>
                                        <td class="text-end">
                                            <button type="submit" class="btn btn-sm btn-outline-dark">Save</button>
                                        </td>
                                    </form>
                                    <td class="text-end">
                                        <form method="POST" action="{{ route('admin.vehicle-types.fare-rules.destroy', [$vehicleType, $rule]) }}"
                                              data-confirm-title="Remove fare rule?" data-confirm-text="Remove this fare rule?" data-confirm-button="Remove">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger">Remove</button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif

            <form method="POST" action="{{ route('admin.vehicle-types.fare-rules.store', $vehicleType) }}" class="row g-2 align-items-end">
                @csrf
                <div class="col-md-4">
                    <label class="form-label fw-semibold small">Rule name</label>
                    <input type="text" name="name" placeholder="e.g. Bad weather surcharge" class="form-control" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-semibold small">Type</label>
                    <select name="adjustment_type" class="form-select">
                        <option value="multiplier">Multiplier (×)</option>
                        <option value="flat_amount">Flat amount (+)</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold small">Value</label>
                    <input type="number" step="0.01" name="adjustment_value" placeholder="1.25" class="form-control" required>
                </div>
                <div class="col-md-3">
                    <button type="submit" class="btn btn-dark w-100">Add Rule</button>
                </div>
            </form>
        </div>
    </div>
</x-admin-layout>
