@extends("layouts.agent.app")
@section("page-title")
    {{__("Dashboard")}}
@endSection
@section("page-nav-title")
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i>{{__("Add New Car")}}</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">{{__("Dashboard")}}</a></li>
            <li class="breadcrumb-item"><a href="{{route("agent.MyCar.index")}}">{{__("My Car")}}</a></li>
            <li class="breadcrumb-item"><a href="#">{{__("Create")}}</a></li>
        </ul>
    </div>
@endsection

@section("content")

    <div class="row">
        <div class="col-lg-10 m-auto">
            <div class="tile">
                <div class="tile-body">
                    <form method="post" action="{{route("agent.MyCar.store")}}" enctype="multipart/form-data">
                        @csrf

                        <div class="row">

{{--                            <div class="col-lg-6">--}}
{{--                                <div class="form-group" id="from-date">--}}
{{--                                    <label class="control-label">{{__("select car type")}}</label>--}}
{{--                                    <select  id="year" class="form-control @if($errors->has('from_date')) is-invalid @endif" name="manufacturing_year">--}}
{{--                                        <option>select one</option>--}}
{{--                                        @foreach($CarsType as $car)--}}
{{--                                            <option value="{{$car->id}}">{{$car->make->name}}</option>--}}
{{--                                        @endforeach--}}
{{--                                    </select>--}}
{{--                                </div>--}}
{{--                                @error("manufacturing_year")--}}
{{--                                <div class="input-error">{{$message}}</div>--}}
{{--                                @enderror--}}
{{--                            </div>--}}

{{--                            <div class="row appendData">--}}
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="control-label">{{__("Vehicle Type Specialist")}}</label>
                                        <select class="form-control js-basic-single-select2 @if($errors->has('vehicle_type_specialist')) is-invalid @endif"  name="vehicle_type_specialist[]" required>
                                            <option selected disabled>{{__("selected Vehicle Type Specialist")}}</option>
                                            @foreach($vehicletypes as $key=> $name)
                                                <option value="{{$name->id}}">{{$name->name_en}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @error("vehicle_type_specialist")
                                    <div class="input-error">{{$message}}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="control-label">{{__("Car Type Specialist")}}</label>
                                        <select class="form-control js-basic-single-select2 @if($errors->has('car_type_specialist')) is-invalid @endif selectCar" data-url="{{route("ajax.select-car.index")}}" name="car_type_specialist[]" required>
                                            {{--                                                    <optgroup label="Select Types Related it">  form-input select2 --}}
                                            <option selected disabled>{{__("selected Car Type Specialist")}}</option>
                                            @foreach($commonMake as $key=> $common)
                                                <option value="{{$common->make->id}}">{{$common->make->name}}</option>
                                            @endforeach
                                            {{--                                                    </optgroup>--}}
                                        </select>
                                    </div>
                                    @error("car_type_specialist")
                                    <div class="input-error">{{$message}}</div>
                                    @enderror
                                </div>
                                    <div class="col-lg-6 add">
                                        <div class="form-group">
                                            <label class="control-label">{{__("Car Model Name Specialist")}}</label>

                                            <br>
{{--                                            <input class="form-check-input CheckAll" type="checkbox"  name="all_model"  value="12" data-counter="1" id="allModelsCheck" >--}}
{{--                                            <label class="form-check-label" for="defaultCheck1">--}}
{{--                                                All Models--}}
{{--                                            </label>--}}
{{--                                            <br>--}}


                                            <select  class="form-control Car_Model_Name_Specialist @if($errors->has('car_model_name_specialist')) is-invalid @endif" id="Car_Model_Name_Specialist1"   name="car_model_name_specialist" required>
                                                <option  disabled>{{__("selected Type Specialist First")}}</option>
                                            </select>
                                        </div>

                                        <input type="hidden" value="1" id="counter">


                                        @error("car_model_name_specialist")
                                        <div class="input-error">{{$message}}</div>
                                        @enderror
                                    </div>

                            <div class="col-lg-6">
                                <div class="form-group" id="from-date">
                                    <label class="control-label">{{__("Select Manufacturing Year")}}</label>
                                    <select  id="year" class="form-control @if($errors->has('manufacturing_year')) is-invalid @endif" name="manufacturing_year" required>
                                        <option>select one</option>
                                    </select>
                                </div>
                                @error("manufacturing_year")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>

{{--                                <div class="col-lg-2 text-right ">--}}
{{--                                        <span data-id="" class="addSpecialist btn btn-success btn-sm ">--}}
{{--                                            <i class="fa fa-plus"></i>--}}
{{--                                        </span>--}}
{{--                                </div>--}}
{{--                                <div class="col-lg-2 text-right " >--}}
{{--                                        <span data-id="" class="removeSpecialist btn btn-success btn-sm ">--}}
{{--                                            <i class="fa fa-minus"></i>--}}
{{--                                        </span>--}}
{{--                                </div>--}}
{{--                            </div>--}}

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("City")}}</label>
                                    <select class="form-control js-basic-single-select2 @if($errors->has('city')) is-invalid @endif" name="city" required>
                                        {{--                                        <option selected disabled >{{__("selected City")}}</option>--}}
                                        {{--                                        <option selected disabled >{{__("selected City")}}</option>--}}
                                        @foreach($states as $key=> $name)
                                            <option value="{{$name['area_name']}}">{{$name['area_name']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                @error("city")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Kilometers")}}</label>
                                    <input type="number"  class="form-control @if($errors->has("kilometers")) is-invalid @endif" name="kilometers" value="{{inputValue("kilometers")}}" required>
                                </div>
                                @error("kilometers")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>


                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Monthly Installment")}}</label>
                                    <input type="number"  class="form-control @if($errors->has("monthly_installment")) is-invalid @endif" name="monthly_installment" value="{{inputValue("monthly_installment")}}" required>
                                </div>
                                @error("monthly_installment")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Enter Vehicle Price")}}</label>
                                    <input type="number"  class="form-control @if($errors->has("price")) is-invalid @endif" name="price" value="{{inputValue("price")}}" required>
                                </div>
                                @error("price")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Color")}}</label>
                                    <br>
                                    <input type="color" name="color" style="width: 100px;height: 50px">
                                </div>
                                @error("color")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Returned")}}</label>
                                    <br>
                                    <input type="checkbox" name="returned">
                                </div>
                                @error("returned")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Image")}}</label>
                                    <div>
                                        <button class="btn btn-primary form-control button-upload-file" >
                                            <input class="input-file show-uploaded" data-upload-type="single" data-imgs-container-class="uploaded-images" type="file" name="image" required>
                                            <span class="upload-file-content">
                                                <i class="fas fa-upload fa-lg upload-file-content-icon left"></i>
                                                <span class="upload-file-content-text">{{__("Upload Photo")}}</span>
                                            </span>
                                        </button>
                                    </div>
                                </div>
                                @error("image")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-3 col-md-5 col-sm-6">
                                <div class="uploaded-images"></div>
                            </div>
                        </div>
                        <div class="tile-footer">
                            <button class="btn btn-primary" type="submit"><i class="fa fa-fw fa-lg fa-check-circle"></i> {{__("Create")}}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@section("scripts")
    <script type="text/javascript" src="{{asset("assets/js/plugins/select2.min.js")}}"></script>
    <script type="text/javascript">
        $('.Car_Model_Name_Specialist').select2();
        $('.js-basic-single-select2').select2();
    </script>
    <script>
        $(document).on("change", ".selectCar", function(){
            var id = $(this).val(),
                url = $(this).data("url"),
                parent = $(this);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: "GET",
                url: url,
                data: {id: id},
                success: function( response ) {

                    var option = ""
                        ,data = response.data;
                    data.cars.forEach((car) => {
                        option += `<option type="chek" value="${car.id}">${car.name}</option>`;
                    })
                    let el =parent.parent("div").parent("div").parent("div").children(".add").children("div")
                    let select =el.children("select");
                    select.empty().append(option);
                    let span=el.find(".select2").find("ul").empty();
                    console.log(span);

                },
                error : function (response) {
                    resolve(response);
                }
            });
        })
    </script>
    <script>
        var max = new Date().getFullYear()+1,
            min = max - 99,
            select = document.getElementById('year');

        for (var i = max; i >= min; i--) {
            var opt = document.createElement('option');
            opt.value = i;
            opt.innerHTML = i;
            select.appendChild(opt);
        }
    </script>
    <script>
        var colorCode = '#000',
            alpha = '00';
        function colorPickerFunc(target, colorActive) {
            colorActive ? (function () {
                colorPicker.disabled = false;
                colorAlpha.disabled = false;
                colorPicker.oninput = function () { genareateColorFunc(this.value, colorAlpha.value) }
                colorAlpha.oninput = function () { genareateColorFunc(colorPicker.value, this.value ) }
                // genarate color function;
                function genareateColorFunc(colorCode, alpha) {
                    colorCode = colorCode+ alpha;
                    console.log(colorCode);
                }

            })() : (function () {
                colorPicker.disabled = true;
                colorAlpha.disabled = true;
            })();
    </script>


@endsection