@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Vehicle</h1>
    {{-- <small>Manage Vehicle</small> --}}
@stop

@section('content')
    <div class="card card-dark">
        <div class="card-header">
            <h3 class="card-title">Edit City</h3>
        </div>
        <form method="POST" id="edit_vehicle" action="{{ route('vehicle.update', $vehicle->id) }}"
            enctype="multipart/form-data" class="jqueryValidation">
            @csrf
            @method('PATCH')
            <div class="card-body editCard_body">
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="group">Transporter</label>
                        <select class="form-control select2" name="transporter_id" required>
                            @foreach ($transporters as $key)
                                <option value="{{ $key->id }}"
                                    {{ $vehicle->transporter_id == $key->id ? 'Selected' : '' }}>
                                    {{ optional($key->get_user)->name }} {{ optional($key->get_user)->last_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="vehicle_image">Image</label>
                        <x-adminlte-input class="form-control" id="vehicle_image" name="vehicle_image" type="file"
                            placeholder="Upload new Image" />
                        @if ($vehicle->getFirstMedia('vehicle_image'))
                            <div>
                                <img src="{{ $vehicle->getFirstMediaUrl('vehicle_image') }}" alt="Image" width="100">
                            </div>
                        @endif
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="make_id">Brand</label>
                        <select class="form-control select2" name="make_id" id="make_id" required>
                            <option value="">--Select Brand--</option>
                            @foreach ($vehicle_makes as $vehicle_make)
                                <option value="{{ $vehicle_make->id }}"
                                    {{ $vehicle->make_id == $vehicle_make->id ? 'selected' : '' }}>
                                    {{ $vehicle_make->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="model_id">Model</label>
                        <select class="form-control select2" name="model_id" id="model_id" required>
                            <option value="">--Select Model--</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="group">Type</label>
                        <select class="form-control select2" name="vehicle_type_id" id="" required>
                            @foreach ($vehicle_types as $vehicle_type)
                                <option value="{{ $vehicle_type->id }}"
                                    {{ $vehicle->vehicle_type_id == $vehicle_type->id ? 'Selected' : '' }}>
                                    {{ $vehicle_type->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="model_year">Model Year</label>
                        <select id="model_year" name="model_year" class="form-control select2" required>
                            <option value="">--Select--</option>
                            @php
                                $currentYear = isset($vehicle->model_year) ? $vehicle->model_year : null;
                            @endphp
                            @for ($year = date('Y'); $year >= 1900; $year--)
                                <option value="{{ $year }}" {{ $year == $currentYear ? 'selected' : '' }}>
                                    {{ $year }}</option>
                            @endfor
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="fuel_type">Fuel Type</label>
                        <select name="fuel_type" id="fuel_type" class="form-control" required>
                            @foreach (App\Models\Vehicles::fuel_type as $key => $fuel_type)
                                <option value="{{ $key }}"
                                    {{ $vehicle->fuel_type == $fuel_type ? 'selected' : '' }}>
                                    {{ $fuel_type }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="transmission_type">Transmission Type</label>
                        <select name="transmission_type" id="transmission_type" class="form-control" required>
                            @foreach (App\Models\Vehicles::transmission_type as $key => $transmission_type)
                                <option value="{{ $key }}"
                                    {{ $vehicle->transmission_type == $transmission_type ? 'selected' : '' }}>
                                    {{ $transmission_type }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="license_plate">License Plate (e.g., UP32AB1234)</label>
                        <input type="text" class="form-control" id="license_plate" name="license_plate"
                            placeholder="Enter License Plate" value="{{ $vehicle->license_plate ?? '' }}" required />
                    </div>
                    <div class="col-md-6">
                        <label for="service_type">Service Type</label>
                        <select name="service_type" id="service_type" class="form-control" required>
                            <option value="" disabled>--Select--</option>
                            @foreach (App\Models\Vehicles::options() as $key => $service_type)
                                <option value="{{ $key }}"
                                    {{ $vehicle->service_type == $key ? 'selected' : '' }}>
                                    {{ $service_type }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="description">Description</label>
                        <x-adminlte-textarea class="form-control" id="description" name="description"
                            placeholder="Enter Description"
                            required>{{ old('description', $vehicle->description ?? '') }}</x-adminlte-textarea>
                    </div>
                  <div class="col-md-6" id="seating_quantity_wrapper">
                    <label for="seating_capacity">Seating Capacity</label>
                    <select class="form-control" id="seating_capacity" name="seating_capacity">
                        <option value="">--Select--</option>
                        @foreach(\App\Models\Vehicles::passengerSeatingCapacityOptions() as $key => $value)
                            <option value="{{ $key }}" 
                                {{ old('seating_capacity', $vehicle->seating_capacity ?? '') == $key ? 'selected' : '' }}>
                                {{ $value }}
                            </option>
                        @endforeach
                    </select>
                </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="status">Status</label>
                        <select name="status" id="status" class="form-control">
                            @foreach (App\Models\Vehicles::status as $key => $status)
                                <option value="{{ $key }}"
                                    {{ old('status', $vehicle->status ?? '') == $key ? 'selected' : '' }}>
                                    {{ $status }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 mt-4 pt-2">
                        <input type="hidden" name="is_verified" value="0">
                        <input type="checkbox" id="is_verified" name="is_verified" value="1"
                            {{ old('is_verified') == '1' || (isset($vehicle) && $vehicle->is_verified) ? 'checked' : '' }}>
                        <label for="is_verified">Is Verified</label>
                    </div>
                    <div class="col-md-6" id="inactive_reason_group" style="display: none;">
                        <label for="inactive_reason">Inactive Reason</label>
                        <x-adminlte-textarea class="form-control" id="inactive_reason" name="inactive_reason"
                            placeholder="Enter Inactive or Banned Reason">{{ old('inactive_reason', $vehicle->inactive_reason ?? '') }}</x-adminlte-textarea>
                    </div>
                </div>
                <div class="card-footer d-flex justify-content-end">
                    <a href="{{ route('vehicle.index') }}" class="btn btn-danger mx-1">Cancel</a>
                    <button type="submit" class="btn btn-dark mx-1">Update</button>
                </div>
            </div>
        </form>
    </div>
@stop
@section('js')
    <script>
        $(document).ready(function() {
            const selectedMakeId = "{{ $selectedMakeId }}";
            const selectedModelId = "{{ $selectedModelId }}";

            function loadModels(makeId, selectedModelId = null) {
                if (makeId) {
                    $.ajax({
                        url: "{{ route('get.models.by.make', ':make_id') }}".replace(':make_id', makeId),
                        type: 'GET',
                        success: function(data) {
                            $('#model_id').empty().append('<option value="">--Select Model--</option>');
                            $.each(data, function(key, model) {
                                let selected = (model.id == selectedModelId) ? 'selected' : '';
                                $('#model_id').append('<option value="' + model.id + '" ' +
                                    selected + '>' + model.name + '</option>');
                            });
                        }
                    });
                } else {
                    $('#model_id').html('<option value="">--Select Model--</option>');
                }
            }

            // When brand is changed
            $('#make_id').on('change', function() {
                const makeId = $(this).val();
                loadModels(makeId); // Load without preselect
            });

            // On page load (edit case)
            if (selectedMakeId) {
                loadModels(selectedMakeId, selectedModelId); // Pre-load and select current model
            }

            $('.select2').select2({
                placeholder: "--Select--",
                width: '100%'
            });

            function toggleInactiveReason() {
                const value = $('#status').val();
                // Show the inactive reason group for "Inactive" (0) and "Banned" (2) status
                if (value == "0" || value == "2") {
                    $('#inactive_reason_group').show();
                } else {
                    $('#inactive_reason_group').hide();
                }
            }

            $('#status').on('change', toggleInactiveReason);
            // Trigger on page load
            toggleInactiveReason();

            const seatingOptions = JSON.parse($('#seating_options_data').val());
            const finalInput = $('#seating_capacity_final');
            const quantityInput = $('#seating_quantity_input');
            const dropdown = $('#seating_capacity_select');
            const quantityWrapper = $('#seating_quantity_wrapper');
            const dropdownWrapper = $('#seating_capacity_select_wrapper');

            function toggleInputs(type) {
                dropdownWrapper.hide();
                quantityWrapper.hide();

                if (type === 'Passenger') {
                    quantityWrapper.show();

                    let qty = parseInt(finalInput.val());
                    if (isNaN(qty) || qty < 2 || qty > 12) {
                        qty = 2; // fallback default
                    }

                    quantityInput.val(qty);
                    finalInput.val(qty);
                } else if (type === 'Goods Transport') {
                    dropdown.empty().append('<option value="">--Select--</option>');
                    const savedCapacity = finalInput.val();

                    if (seatingOptions[type]) {
                        $.each(seatingOptions[type], function(key, value) {
                            const selected = (savedCapacity == key) ? 'selected' : '';
                            dropdown.append(`<option value="${key}" ${selected}>${value}</option>`);
                        });
                    }

                    dropdownWrapper.show();
                    finalInput.val(dropdown.val());
                }
            }

            // Trigger on load
            if (serviceType.length && serviceType.val()) {
                toggleInputs(serviceType.val());
            }

            // On change of service type
            serviceType.on('change', function() {
                toggleInputs($(this).val());
            });

            // Update final hidden value on change
            quantityInput.on('input change', function() {
                finalInput.val($(this).val());
            });

            dropdown.on('change', function() {
                finalInput.val($(this).val());
            });

            // + / - buttons
            $('.qty-input').each(function() {
                const $input = $(this).find(".product-qty");
                const $btnMinus = $(this).find(".qty-count--minus");
                const $btnAdd = $(this).find(".qty-count--add");

                const qtyMin = parseInt($input.attr("min")) || 1;
                const qtyMax = parseInt($input.attr("max")) || 999;

                function updateBtns(val) {
                    $btnMinus.prop("disabled", val <= qtyMin);
                    $btnAdd.prop("disabled", val >= qtyMax);
                }

                updateBtns(parseInt($input.val()));

                $btnMinus.on("click", function() {
                    let val = parseInt($input.val());
                    if (val > qtyMin) {
                        $input.val(val - 1).trigger('change');
                    }
                });

                $btnAdd.on("click", function() {
                    let val = parseInt($input.val());
                    if (val < qtyMax) {
                        $input.val(val + 1).trigger('change');
                    }
                });

                $input.on("change", function() {
                    let val = parseInt($input.val()) || qtyMin;
                    if (val < qtyMin) val = qtyMin;
                    if (val > qtyMax) val = qtyMax;
                    $input.val(val);
                    updateBtns(val);
                });
            });

            // On submit, ensure correct value is set
            $('#edit_vehicle').on('submit', function() {
                const type = serviceType.val();
                if (type === 'Passenger') {
                    finalInput.val(quantityInput.val());
                } else if (type === 'Goods Transport') {
                    finalInput.val(dropdown.val());
                }
                console.log("Submitting seating_capacity:", finalInput.val());
            });

        });
    </script>
@endsection