@extends('adminlte::page')

@section('title', 'Dashboard')

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

@section('content')
    <div class="card card-dark">
        <div class="card-header">
            <h3 class="card-title"> Add Vehicle </h3>
        </div>
        <form method="POST" id="add_vehicle" role="form" action="{{ route('vehicle.store') }}" enctype="multipart/form-data"
            class="jqueryValidation">
            @csrf
            <input type="hidden" value='@json(App\Models\Vehicles::passengerSeatingCapacityOptions())'>

            <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>
                            <option value="">--Select--</option>
                            @foreach ($transporters as $key)
                                {{-- <option value="{{ $key->id }}">{{ $key->name }} {{ $key->last_name }}</option> --}}
                                <option value="{{ $key->id }}"
                                    {{ old('transporter_id') == $key->id ? 'selected' : '' }}>{{ $key->get_user->name }}
                                    {{ $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 Image" required />
                    </div>
                </div>
                <!-- Make Dropdown -->
                <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 $make)
                                <option value="{{ $make->id }}" {{ old('make_id') == $make->id ? 'selected' : '' }}>
                                    {{ $make->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Model Dropdown -->
                    <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>
                            <!-- Models will be loaded via AJAX -->
                        </select>
                    </div>
                </div>

                {{-- <div class="form-group">
                    <label for="group">Vehicle Make</label>
                    <select class="form-control" name="make_id" required>
                        <option value="">--Select--</option>
                        @foreach ($vehicle_makes as $key)
                            <option value="{{ $key->id }}">{{ $key->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label for="group">Model</label>
                    <select class="form-control" name="model_id" required>
                        <option value="">--Select--</option>
                        @foreach ($vehicle_models as $key)
                            <option value="{{ $key->id }}">{{ $key->name }}</option>
                        @endforeach
                    </select>
                </div> --}}

                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="group">Vehicle Type</label>
                        <select class="form-control select2" name="vehicle_type_id" required>
                            <option value="">--Select--</option>
                            @foreach ($vehicle_types as $key)
                                <option value="{{ $key->id }}"
                                    {{ old('vehicle_type_id') == $key->id ? 'selected' : '' }}>{{ $key->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    {{-- <div class="form-group">
                    <label for=" last_contacted">Model Year</label>
                    <x-adminlte-input type="date" class="form-control" id="start_date " name="start_date"
                        placeholder="Enter  Start Date" required />
                    </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>
                            @for ($year = date('Y'); $year >= 1900; $year--)
                                <option value="{{ $year }}" {{ old('model_year') == $year ? '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>
                            <option value="">--Select--</option>
                            @foreach (App\Models\Vehicles::fuel_type as $key => $fuel_type)
                                <option value="{{ $key }}" {{ old('fuel_type') == $key ? '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>
                            <option value="">--Select--</option>
                            @foreach (App\Models\Vehicles::transmission_type as $key => $transmission_type)
                                <option value="{{ $key }}"
                                    {{ old('transmission_type') == $key ? 'selected' : '' }}>{{ $transmission_type }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="service_type">Service Type</label>
                        <select name="service_type" id="service_type" class="form-control select2" required>
                            <option value="">--Select--</option>
                            @foreach (App\Models\Vehicles::options() as $key => $service_type)
                                <option value="{{ $key }}" {{ old('service_type') == $key ? 'selected' : '' }}>
                                    {{ $service_type }}</option>
                            @endforeach
                        </select>
                    </div>
                <div class="col-md-6">
                    <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') == $key ? 'selected' : '' }}>
                                {{ $value }}
                            </option>
                        @endforeach
                    </select>
                </div>
                </div>

                {{-- Seating Quantity Input (Passenger) --}}
                <div class="form-group row">
                    <div class="col-md-2 mt-4 pt-2">
                        <input type="hidden" name="is_verified" value="0"> <!-- Hidden input for default value -->
                        <input type="checkbox" id="is_verified" name="is_verified" value="1"
                            {{ old('is_verified') == '1' ? 'checked' : '' }}>
                        <label for="is_verified">Is Verified</label>
                    </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') == $key ? 'selected' : '' }}>
                                    {{ $status }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6" id="inactive_reason_group" style="display: none;">
                        <label for="inactive_reason">Reason</label>
                        <x-adminlte-textarea class="form-control" id="inactive_reason" name="inactive_reason"
                            placeholder="Enter Inactive or Banned Reason">
                            {{ old('inactive_reason') }}
                        </x-adminlte-textarea>
                    </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"
                            value="{{ old('license_plate') }}" placeholder="Enter License Plate" required />
                    </div>
                 <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') }}
                        </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">Submit</button>
                </div>
            </div>
        </form>
    </div>
@stop

@section('js')
    <script>
        $('#make_id').on('change', function() {
            var makeId = $(this).val();
            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) {
                            $('#model_id').append('<option value="' + model.id + '">' + model
                                .name + '</option>');
                        });
                    }
                });
            } else {
                $('#model_id').html('<option value="">--Select Model--</option>');
            }
        });

        $(document).ready(function() {
            $('.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();
                $('#inactive_reason').val(''); // Clear the textarea value when hiding
            }
        }

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

        // $(document).ready(function() {
        //     const seatingOptions = JSON.parse($('#seating_options_data').val());

        //     $('#service_type').on('change', function() {
        //         const selectedType = $(this).val();
        //         const capacityDropdown = $('#seating_capacity');

        //         capacityDropdown.empty().append('<option value="">--Select--</option>');

        //         if (seatingOptions[selectedType]) {
        //             $.each(seatingOptions[selectedType], function(key, value) {
        //                 capacityDropdown.append(`<option value="${key}">${value}</option>`);
        //             });
        //         }
        //     });
        // });
    </script>
    <script>
        var QtyInput = (function() {
            var $qtyInputs = $(".qty-input");

            if (!$qtyInputs.length) {
                return;
            }

            var $inputs = $qtyInputs.find(".product-qty");
            var $countBtn = $qtyInputs.find(".qty-count");
            var qtyMin = parseInt($inputs.attr("min"));
            var qtyMax = parseInt($inputs.attr("max"));

            $inputs.change(function() {
                var $this = $(this);
                var $minusBtn = $this.siblings(".qty-count--minus");
                var $addBtn = $this.siblings(".qty-count--add");
                var qty = parseInt($this.val());

                if (isNaN(qty) || qty <= qtyMin) {
                    $this.val(qtyMin);
                    $minusBtn.attr("disabled", true);
                } else {
                    $minusBtn.attr("disabled", false);

                    if (qty >= qtyMax) {
                        $this.val(qtyMax);
                        $addBtn.attr('disabled', true);
                    } else {
                        $this.val(qty);
                        $addBtn.attr('disabled', false);
                    }
                }
            });

            $countBtn.click(function() {
                var operator = this.dataset.action;
                var $this = $(this);
                var $input = $this.siblings(".product-qty");
                var qty = parseInt($input.val());

                if (operator == "add") {
                    qty += 1;
                    if (qty >= qtyMin + 1) {
                        $this.siblings(".qty-count--minus").attr("disabled", false);
                    }

                    if (qty >= qtyMax) {
                        $this.attr("disabled", true);
                    }
                } else {
                    qty = qty <= qtyMin ? qtyMin : (qty -= 1);

                    if (qty == qtyMin) {
                        $this.attr("disabled", true);
                    }

                    if (qty < qtyMax) {
                        $this.siblings(".qty-count--add").attr("disabled", false);
                    }
                }

                $input.val(qty);
            });
        })();

        const seatingOptions = JSON.parse($('#seating_options_data').val());

        $('#service_type').on('change', function() {
            const selectedType = $(this).val();

            // Hide both fields
            $('#seating_capacity_dropdown_wrapper').hide();
            $('#seating_quantity_wrapper').hide();

            // Clear the final input
            $('#seating_capacity_final').val('');

            if (selectedType === '{{ App\Models\Vehicles::SERVICETYPE_PASSENGER }}') {
                $('#seating_quantity_wrapper').show();

                // Listen to quantity changes
                $('#seating_quantity_input').on('input', function() {
                    $('#seating_capacity_final').val($(this).val());
                }).trigger('input'); // Set initial value
            } else if (selectedType === '{{ App\Models\Vehicles::SERVICETYPE_GOODSTRANSPORT }}') {
                const dropdown = $('#seating_capacity_dropdown');
                dropdown.empty().append('<option value="">--Select--</option>');

                if (seatingOptions[selectedType]) {
                    $.each(seatingOptions[selectedType], function(key, value) {
                        dropdown.append(`<option value="${key}">${value}</option>`);
                    });
                }

                $('#seating_capacity_dropdown_wrapper').show();

                // Listen to dropdown change
                dropdown.on('change', function() {
                    $('#seating_capacity_final').val($(this).val());
                }).trigger('change'); // Set initial if needed
            }
        });

        var QtyInput = (function() {
            var $qtyInputs = $(".qty-input");

            if (!$qtyInputs.length) {
                return;
            }

            $qtyInputs.each(function() {
                var $this = $(this);
                var $input = $this.find(".product-qty");
                var $btnMinus = $this.find(".qty-count--minus");
                var $btnAdd = $this.find(".qty-count--add");

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

                // Initial state
                $btnMinus.prop("disabled", parseInt($input.val()) <= qtyMin);
                $btnAdd.prop("disabled", parseInt($input.val()) >= qtyMax);

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

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

                $input.off("change").on("change", function() {
                    var val = parseInt($input.val()) || qtyMin;
                    if (val <= qtyMin) {
                        $input.val(qtyMin);
                        $btnMinus.prop("disabled", true);
                    } else {
                        $btnMinus.prop("disabled", false);
                    }

                    if (val >= qtyMax) {
                        $input.val(qtyMax);
                        $btnAdd.prop("disabled", true);
                    } else {
                        $btnAdd.prop("disabled", false);
                    }
                });
            });
        })();
    </script>
@endsection