@extends('layouts/layoutMaster')

@section('title', 'Add Vehicle Trim')

<!-- Vendor Styles -->
@section('vendor-style')
@vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
  'resources/assets/vendor/libs/select2/select2.scss',
  'resources/assets/vendor/libs/@form-validation/form-validation.scss',
  'resources/assets/vendor/libs/animate-css/animate.scss',
  'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss'
])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/moment/moment.js',
  'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
  'resources/assets/vendor/libs/select2/select2.js',
  'resources/assets/vendor/libs/@form-validation/popular.js',
  'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
  'resources/assets/vendor/libs/@form-validation/auto-focus.js',
  'resources/assets/vendor/libs/cleavejs/cleave.js',
  'resources/assets/vendor/libs/cleavejs/cleave-phone.js',
  'resources/assets/vendor/libs/sweetalert2/sweetalert2.js'
])
@endsection
<!-- Page Scripts -->
@section('page-script')
@vite(['resources/js/vehicle_trim.js'])
@endsection

@section('content')
<section id="page-content">
    @if(count($errors)>0)
        @foreach($errors->all() as $error)
            <div class="alert alert-danger">
                {{$error}}
            </div>
        @endforeach
    @endif
    @if(session('success'))
        <div class="alert alert-success">
            {{session('success')}}
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger">
            {{session('error')}}
        </div>
    @endif
    <div id="alert-message" class="mb-2">
    </div>
</section>
<style>
.mini-toggle {
    width: 50px;
    height: 24px;
    background-color: #ccc;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
}

.mini-toggle[data-state="yes"] {
    background-color: #28a745; /* Green */
}

.mini-toggle[data-state="no"] {
    background-color: #dc3545; /* Red */
}

.mini-toggle[data-state="neutral"] {
    background-color: #6c757d; /* Gray */
}

.mini-toggle .knob {
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    transition: left 0.3s ease;
}

/* Center (neutral) */
.mini-toggle[data-state="neutral"] .knob {
    left: 50%;
    transform: translateX(-50%);
}

/* Right (yes) */
.mini-toggle[data-state="yes"] .knob {
    left: 29px;   /* 50px - 18px (knob) - 3px padding = 29px */
    transform: none;
}

/* Left (no) */
.mini-toggle[data-state="no"] .knob {
    left: 3px;
    transform: none;
}
</style>
<!-- Basic Horizontal form layout section start -->
<form action="{{ route('vehicle-trim.store') }}" class="form-horizontal" method="POST" autocomplete="off" id="vehicle_trim_form" enctype="multipart/form-data">
    @csrf
    <section>
        <div class="row match-height">
            <div class="col-md-12 col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Add Vehicle Trim</h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <div class="form-body">
                                <div class="row">
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Vehicle Manufacturer')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <select name="manufacturer_id" id="manufacturer_id" class="form-control select2" onchange="getmodel(this.value)" required>
                                                        <option value="">--select--</option>
                                                        @foreach($manufacturer as $msngle)
                                                            <option value="{{$msngle->id}}">{{$msngle->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Vehicle Model')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <select name="model_id" id="model_id"  class="form-control select2" required >
                                                        <option value="">--select--</option> @foreach($vehiclemodel as $msngle)
                                                            <option  value="{{$msngle->id}}">{{$msngle->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Vehicle from Year')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <select name="year_id" id="year_id" class="form-control select2" required>
                                                        <option value="">--select--</option> @foreach($vechileyear as $ysngle)
                                                            <option  value="{{$ysngle->id}}">{{$ysngle->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Vehicle to Year')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <select name="year_to_id" id="year_to_id" class="form-control select2">
                                                        <option value="">--select--</option> @foreach($vechileyear as $ysngle)
                                                            <option  value="{{$ysngle->id}}">{{$ysngle->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Trim Name')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="text" id="name" class="form-control" name="name"
                                                            required  value="{{ old('name') }}" autocomplete="off">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-info"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Trim Name(Arabic)')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="text" id="name_arabic" class="form-control"
                                                            name="name_arabic" value="{{ old('name_arabic') }}"
                                                            autocomplete="off">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-info"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Trim Name(Tags)')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="text" id="tags" class="form-control"
                                                            name="tags" value="{{ old('tags') }}"
                                                            autocomplete="off">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-info"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('FaceLift')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="checkbox" id="face_lift" name="face_lift"
                                                            value="1">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('New Model')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="checkbox" id="new_model" name="new_model"
                                                            value="1">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Market Demand')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="checkbox" id="market_demand" name="market_demand"
                                                            value="1">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{ __('Base Price') }}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="text" name="base_price" id="base-price" class="form-control" maxlength="10"
                                                        value="{{ old('base_price') }}">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-home"></i>
                                                    </div>
                                                </div>
                                                <small id="char-count" class="text-danger"></small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('New Vehicle Image')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="file" name="vehicle_image" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{ __('Manufacturer/Series') }}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="text" id="manufacturer_code"
                                                        class="form-control" name="manufacturer_code"
                                                        value="{{ old('manufacturer_code') ?? "" }}"
                                                        autocomplete="off">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-info"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{ __('Generation Name') }}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="text" id="generation_name"
                                                        class="form-control" name="generation_name"
                                                        value="{{ old('generation_name') ?? "" }}"
                                                        autocomplete="off">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-info"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{ __('Generation start Year') }}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <select name="generation_start_years" id="generation_start_years" class="form-control select2"
                                                        >
                                                        <option value="">--select--</option>
                                                        @foreach ($vechileyear as $ysngle)
                                                            <option value="{{ $ysngle->name }}"
                                                                {{ old('generation_start_years') == $ysngle->name ? 'selected' : '' }}>
                                                                {{ $ysngle->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{ __('Generation End Year') }}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <select name="generation_end_years" id="generation_end_years" class="form-control select2"
                                                        >
                                                        <option value="">--select--</option>
                                                        <option value="On Going" {{ old('generation_end_years') == "On Going" ? 'selected' : '' }}>On Going</option>
                                                        @foreach ($vechileyear as $ysngle)
                                                            <option value="{{ $ysngle->name }}"
                                                                {{ old('generation_end_years') == $ysngle->name ? 'selected' : '' }}>
                                                                {{ $ysngle->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <hr>
                                        <h5>Trim Specification</h5>
                                    </div>
                                    <div class="col-4 toggle-engine-type" style="display: none">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Battery Size(kWh)')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="number" id="battery_size" class="form-control" name="battery_size"
                                                                value="{{ old('battery_size') }}" autocomplete="off" min="0" step="any">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-info"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-4 toggle-engine-type" style="display: none">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Battery Range(km)')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="number" id="battery_range" class="form-control" name="battery_range"
                                                                value="{{ old('battery_range') }}" autocomplete="off" min="0" step="any">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-info"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-4 toggle-engine-type" style="display: none">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Electric Motor')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <select name="electric_motor_type_id" id="electric_motor_type_id"
                                                        class="form-control select2">
                                                        <option value="">--select--</option>
                                                        @foreach ($electricMotors as $item)
                                                            <option value="{{ $item->id }}">{{ $item->title }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Engine Type')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <select name="engine_type" id="engine_type" class="form-control select2">
                                                        <option value="">--select--</option>
                                                        @foreach($engineTypes as $item)
                                                            <option value="{{$item->id}}">{{$item->title}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span style="color: red">{{__('Fuel Type')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <select name="fuel_type" id="fuel_type" class="form-control select2">
                                                        <option value="">--select--</option>
                                                        @foreach($fuelTypes as $item)
                                                            <option value="{{$item->id}}">{{$item->title}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span style="color: red">{{__('Engine Cylinders')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <select name="engine_cylinder" id="engine_cylinder" class="form-control select2">
                                                        <option value="">--select--</option>
                                                        @foreach($engineCylinders as $item)
                                                            <option value="{{$item->id}}">{{$item->title}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Engine Turbine')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <select name="engine_turbine" id="engine_turbine" class="form-control select2">
                                                        <option value="">--select--</option>
                                                        @foreach($engineTurbines as $item)
                                                            <option value="{{$item->id}}">{{$item->title}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span style="color: red">{{__('Gearbox Type')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <select name="gearbox_type" id="gearbox_type" class="form-control select2">
                                                        <option value="">--select--</option>
                                                        @foreach($gearboxTypes as $item)
                                                            <option value="{{$item->id}}">{{$item->title}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span style="color: red">{{__('Number Of Gears')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <select name="number_of_gear_id" id="number_of_gear_id" class="form-control select2">
                                                        <option value="">--select--</option>
                                                        @foreach($numberOfGears as $item)
                                                            <option value="{{$item->id}}" >{{$item->title}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span style="color: red">{{__('Drive')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <select name="drive" id="drive" class="form-control select2">
                                                        <option value="">--select--</option>
                                                        @foreach($drives as $item)
                                                            <option value="{{$item->id}}">{{$item->title}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span style="color: red">{{__('Vehicle Type')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <select name="vehicle_type_id" id="vehicle_type_id" class="form-control select2">
                                                        <option value="">--select--</option>
                                                        @foreach($vehicleTypes as $item)
                                                            <option value="{{$item->id}}" >{{$item->title}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span style="color: red">{{__('Body Type')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <select name="body_type" id="body_type" class="form-control select2">
                                                        <option value="">--select--</option>
                                                        @foreach($bodyTypes as $item)
                                                            <option value="{{$item->id}}">{{$item->title}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span style="color: red">{{__('Axel')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <select name="axels_id" id="axels_id" class="form-control select2">
                                                        <option value="">--select--</option>
                                                        @foreach($axels as $item)
                                                            <option value="{{$item->id}}">{{$item->title}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span style="color: red">{{__('Liter (Engine Capacity)')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="number" id="liter" class="form-control" name="liter"
                                                                value="{{ old('liter') }}" autocomplete="off" min="0" step="any">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-info"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span style="color: red">{{__('Engine Power (HP)')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="number" id="engine_power" class="form-control" name="engine_power"
                                                                value="{{ old('engine_power') }}" autocomplete="off" min="0" step="any">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-info"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Fuel Consumption (km/1L)')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="number" id="fuel_consumption" class="form-control" name="fuel_consumption"
                                                                value="{{ old('fuel_consumption') }}" autocomplete="off" min="0" step="any">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-info"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Power-Torque')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="number" id="power_torque" class="form-control" name="power_torque"
                                                                value="{{ old('power_torque') }}" autocomplete="off" min="0" step="any">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-info"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span style="color: red">{{__('Number of Doors')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="text" id="number_of_doors" class="form-control" name="number_of_doors"
                                                                value="{{ old('number_of_doors') }}" autocomplete="off">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-info"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Fuel Capacity (l)')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="number" min="0" step="any" id="fuel_capacity" class="form-control"
                                                            name="fuel_capacity" value="{{ old('fuel_capacity') }}"
                                                            autocomplete="off">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-info"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Length (mm)')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="number" min="0" step="any" id="length" class="form-control"
                                                            name="length" value="{{ old('length') }}"
                                                            autocomplete="off">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-info"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span style="color: red">{{__('Number of Passengers')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="text" id="number_of_passengers" class="form-control" name="number_of_passengers"
                                                                value="{{ old('number_of_passengers') }}" autocomplete="off">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-info"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Height (mm)')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="number" min="0" step="any"" id="height" class="form-control"
                                                            name="height" value="{{ old('height') }}"
                                                            autocomplete="off">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-info"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Width (mm)')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="number" min="0" step="any" id="width" class="form-control"
                                                            name="width" value="{{ old('width') }}"
                                                            autocomplete="off">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-info"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Trunk Capacity (liters)')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="text" id="trunk_capacity" class="form-control"
                                                            name="trunk_capacity" value="{{ old('trunk_capacity') }}"
                                                            autocomplete="off" 
                                                            pattern="^[0-9\s\-]+$"
                                                            title="Only numbers, spaces, and hyphens are allowed"
                                                            oninput="this.value = this.value.replace(/[^0-9\s\-]/g, '')">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-info"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Wheelbase (mm)')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="number" min="0" step="any" id="wheelbase" class="form-control"
                                                            name="wheelbase" value="{{ old('wheelbase') }}"
                                                            autocomplete="off">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-info"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Acceleration 0-100 Km/h (sec)')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="number" min="0" step="any" id="acceleration" class="form-control"
                                                            name="acceleration" value="{{ old('acceleration') }}"
                                                            autocomplete="off">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-info"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Top Speed (Km/h)')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="number" min="0" step="any" id="top_speed" class="form-control"
                                                            name="top_speed" value="{{ old('top_speed') }}"
                                                            autocomplete="off">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-info"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Weight (kg)')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="number" min="0" step="any" id="weight" class="form-control"
                                                            name="weight" value="{{ old('weight') }}"
                                                            autocomplete="off">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-info"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                    </div>
                                    @foreach ($safetyFeatures as $category => $features)
                                    <div class="col-6 mb-4">
                                        <h4>{{$category}}</h4>
                                        <hr>
                                        <div class="row">
                                            @foreach ($features as $feature)
                                            <div class="col-6 mb-4">
                                                <div class="form-group row">
                                                    <div class="col-md-8">
                                                        <span>{{ $feature->title }}</span>
                                                        <i class="feather icon-info text-primary" 
                                                                data-toggle="tooltip" 
                                                                data-placement="top" 
                                                                style="cursor: pointer;"
                                                                title="{{ $feature->description }}">
                                                        </i>
                                                    </div>
                                                    @php
                                                        $status = old('safety_features.'.$feature->id);
                                                        if ($status === 1) {
                                                            $initialState = 'yes';
                                                            $value = '1';
                                                        } elseif ($status === 0) {
                                                            $initialState = 'no';
                                                            $value = '0';
                                                        } else {
                                                            $initialState = 'neutral';
                                                            $value = '';
                                                        }
                                                    @endphp
                                                    <div class="col-md-4">
                                                        <div class="three-state-toggle" data-feature-id="{{ $feature->id }}">
                                                            <input type="hidden" name="safety_features[{{ $feature->id }}]" value="{{ $value }}">

                                                            <div class="mini-toggle" data-state="{{ $initialState }}">
                                                                <div class="knob"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    {{-- <div class="col-md-4">
                                                        <div class="custom-control custom-switch">
                                                            <input type="checkbox" class="custom-control-input"
                                                                name="safety_features[{{ $feature->id }}]"
                                                                {{ old('safety_features.'.$feature->id) ? 'checked' : '' }}
                                                                value="1" id="{{ $feature->slug }}">
                                                            <label class="custom-control-label" for="{{ $feature->slug }}"></label>
                                                        </div>
                                                    </div> --}}
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    @endforeach
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Reliability Index Score')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="number" id="reliability_index_score" class="form-control" name="reliability_index_score"
                                                                value="{{ old('reliability_index_score')}}" autocomplete="off" min="0" step="any">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-info"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Financial Risk Index')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <select name="financial_risk_index" id="financial_risk_index" class="form-control select2">
                                                        <option value="">--select--</option>
                                                        <option value="low">1- Low - 🟢</option>
                                                        <option value="medium">2- Medium - 🟡 </option>
                                                        <option value="high">3- High - 🔴</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="block-content block-content-full text-right border-top pt-1">
                                            <button id="btn-add" class="btn btn-primary"><i
                                                        class="fa fa-check mr-1"></i>{{__('Save')}}</button>
                                                    <input type="hidden" name="add_another" id="add-another" value="0">
                                            <button  id="btn-add-another" class="btn btn-primary"><i
                                                            class="fa fa-check mr-1"></i>{{__('Save and add another')}}</button>
                                            <a href="/admin/vehicle-trim"
                                                class="btn btn-secondary">{{__('Cancel & Back')}}</a>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</form>
<script>
function getmodel(value) {
// alert(value);
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: '/admin/get/vechile/op/modelbyid/ajx',
type: 'GET',
data: {manufr_id:value},
success: function (res) {

    $('#model_id').html(res);
}
});
}
</script>
@endsection