@if (!Permit::isPermit(str_replace('/create', '', Route::current()->uri()), 'create', true))
<div class="alert alert-danger">You are not allowed to access this section.</div>
@else
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.polyfills.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
    <style>
        .tag-input{
            display: block;
            width: 100%;
            padding: 0.7rem 0.7rem;
            font-size: 0.96rem;
            font-weight: 400;
            line-height: 1.25;
            color: #4e5154;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }
    </style>
<!-- Error display container -->
<div id="error-messages" class="alert alert-danger d-none"></div>
<!-- Basic Horizontal form layout section start -->
<form action="{{ route('vehicle-model.store') }}" class="form-horizontal" method="POST" autocomplete="off">
    @csrf
    <section>
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Add Vehicle Model</h4>
            </div>
            <div class="card-content">
                <div class="card-body">
                    <div class="form-body">
                        <div class="row">
                            <div class="col-12 mb-4">
                                <div class="form-group row">
                                    <div class="col-md-4">
                                        <span>{{__('Vehicle Manufacturer')}}</span>
                                    </div>
                                    <div class="col-md-8">
                                        @php
                                            $manufacturer = \App\Models\VehicleManufacturer::orderBy('name', 'ASC')->get();
                                        @endphp
                                        <div class="position-relative has-icon-left">
                                            <select name="vehicle_manufacturer" id="vehicle_manufacturer" class="form-control select2">
                                                <option value="">--select--</option>
                                                @foreach($manufacturer as $msngle)
                                                    <option value="{{$msngle->id}}">{{$msngle->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mb-4">
                                <div class="form-group row">
                                    <div class="col-md-4">
                                        <span>{{__('Model Name')}}</span>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="position-relative has-icon-left">
                                            <input type="text" id="model_name" class="form-control" name="model_name"
                                                    required  value="{{ old('model_name') }}" autocomplete="off">
                                            <div class="form-control-position">
                                                <i class="feather icon-info"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mb-4">
                                <div class="form-group row">
                                    <div class="col-md-4">
                                        <span>{{__('Model 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') }}"
                                                    required autocomplete="off">
                                            <div class="form-control-position">
                                                <i class="feather icon-info"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mb-4">
                                <div class="form-group row">
                                    <div class="col-md-4">
                                        <span>{{__('Model Name(Tags)')}}</span>
                                    </div>
                                    <div class="col-md-8">
                                            <input type="text" id="tags" class="tag-input"
                                                    name="tags" value="{{ old('tags') }}"
                                                    required autocomplete="off">
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mb-4">
                                <div class="form-group row">
                                    <div class="col-md-4">
                                        <span>{{__('Tawuniya Id')}}</span>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="position-relative has-icon-left">
                                            <input type="text" id="vendor_model_id" class="form-control"
                                                    name="vendor_model_id" value="{{ old('vendor_model_id') }}"
                                                    autocomplete="off">
                                            <div class="form-control-position">
                                                <i class="feather icon-info"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mb-4">
                                <div class="form-group row">
                                    <div class="col-md-4">
                                        <span>{{__('Tawuniya Title')}}</span>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="position-relative has-icon-left">
                                            <input type="text" id="vendor_title" class="form-control"
                                                    name="vendor_title" value="{{ old('vendor_title') }}"
                                                    autocomplete="off">
                                            <div class="form-control-position">
                                                <i class="feather icon-info"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mb-4">
                                <div class="form-group row">
                                    <div class="col-md-4">
                                        <span>{{__('Tawuniya Title(Arabic)')}}</span>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="position-relative has-icon-left">
                                            <input type="text" id="vendor_title_arabic" class="form-control"
                                                    name="vendor_title_arabic" value="{{ old('vendor_title_arabic') }}"
                                                    autocomplete="off">
                                            <div class="form-control-position">
                                                <i class="feather icon-info"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mb-4">
                                <div class="form-group row">
                                    <div class="col-md-4">
                                        <span>{{__('Elm make Id')}}</span>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="position-relative has-icon-left">
                                            <input type="text" id="elm_make_id" class="form-control"
                                                    name="elm_make_id" value="{{ old('elm_make_id') }}"
                                                    autocomplete="off">
                                            <div class="form-control-position">
                                                <i class="feather icon-info"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mb-4">
                                <div class="form-group row">
                                    <div class="col-md-4">
                                        <span>{{__('Elm Id')}}</span>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="position-relative has-icon-left">
                                            <input type="text" id="elm_id" class="form-control"
                                                    name="elm_id" value="{{ old('elm_id') }}"
                                                    autocomplete="off">
                                            <div class="form-control-position">
                                                <i class="feather icon-info"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mb-4">
                                <div class="form-group row">
                                    <div class="col-md-4">
                                        <span>{{__('Elm Title')}}</span>
                                    </div>
                                    <div class="col-md-8">
                                            <input type="text" id="elm_title" class="tag-input"
                                                    name="elm_title" value="{{ old('elm_title') }}"
                                                    autocomplete="off">
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mb-4">
                                <div class="form-group row">
                                    <div class="col-md-4">
                                        <span>{{__('Average annual mileage')}}</span>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="position-relative has-icon-left">
                                            <input type="number" step="any" id="average_annual_mileage" class="form-control"
                                                    name="average_annual_mileage" value="{{ old('average_annual_mileage')??25000 }}"
                                                    autocomplete="off">
                                            <div class="form-control-position">
                                                <i class="feather icon-info"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mb-4">
                                <div class="block-content block-content-full text-right border-top pt-1">
                                    <button type="submit" class="btn btn-primary"><i
                                                class="fa fa-check mr-1"></i>{{__('Save')}}</button>
                                    <button class="btn btn-secondary" data-bs-dismiss="offcanvas" aria-label="Close">{{__('Cancel & Back')}}</button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</form>
<script>
    // Select all elements with the class "tag-input"
    document.querySelectorAll('.tag-input').forEach(function (input) {
        var tagify = new Tagify(input);
    });
</script>
@endif