@extends("layouts.admin.app")
@section("page-title")
    {{__("Dashboard")}}
@endSection
@section("page-nav-title")
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i>{{__("User Cars")}}</h1>
            <p>{{__("Add Cars ". $provided_section->name) }}</p>
        </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("admin.provided-sections.cars",$provided_section->id)}}">{{__("Cars")}}</a></li>
{{--            <li class="breadcrumb-item"><a href="#">{{$provided_section->name}}</a></li>--}}
{{--            <li class="breadcrumb-item"><a href="{{route("admin.vector.index", ["vector_id" => $main_Client->id])}}">{{__("Users")}}</a></li>--}}
            <li class="breadcrumb-item"><a href="#">{{__("Add")}}</a></li>
        </ul>
    </div>
@endsection

@section("css-links")

@endsection

@section("content")

    <div class="row">
        <div class="col-lg-10 m-auto">
            <div class="tile">
                <h3 class="tile-title">{{__("Create")}}</h3>
                <div class="tile-body">
{{--                    {{route("admin.provided-sections.store", ["vector_id" => $main_Client->id])}}--}}
                    <form method="post" action="{{route("admin.provided-sections.store",["id" => $provided_section->id])}}" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-lg-10 m-auto">
                                <div class="tile">
                        @if($provided_type == 'gar' || $provided_type == 'mar' )
                            <hr>
                            <div id="RowSpecialist">
                                <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 @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>
                                    @if($provided_type != 'gar')
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label class="control-label">{{__("Car Type Specialist")}}</label>
                                                <select class="form-control  @if($errors->has('car_type_specialist')) is-invalid @endif selectCar" data-url="{{route("ajax.select-car.index")}}"   name="car_type_specialist[]" required>
                                                    <option selected disabled>{{__("selected Car Type Specialist")}}</option>
                                                    @foreach($commonMake as $key=> $common)
                                                        <option value="{{$common->make->id}}">{{$common->make->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            @error("car_type_specialist")
                                            <div class="input-error">{{$message}}</div>
                                            @enderror
                                        </div>
{{--                                        <div class="col-lg-12 add">--}}
{{--                                            <div class="custom-control custom-switch">--}}
{{--                                                <input type="checkbox" class="custom-control-input" id="customSwitch1">--}}
{{--                                                <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>--}}
{{--                                            </div>--}}
{{--                                        </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[1][]" multiple="" 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>

                                    @endif
                                    <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>

{{--                            @if($main_Client->type === 's-mar' || $main_Client->type == 'gar')--}}

{{--                                <div class="row">--}}
{{--                                    <div class="col-lg-6">--}}
{{--                                        <div class="form-group">--}}
{{--                                            <label class="control-label">{{__("Video")}}</label>--}}
{{--                                            <div class="upload-button-box">--}}

{{--                                                <button class="btn btn-primary form-control button-upload-file" >--}}
{{--                                                    <input class="input-file show-uploaded" data-upload-type="video" data-container-class-video="uploaded-video"  type="file"  name="video" accept="video/mp4,video/x-m4v,video/*" 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 video")}}</span>--}}
{{--                                                </span>--}}
{{--                                                </button>--}}
{{--                                            </div>--}}
{{--                                            <div class="invalid-feedback" style="display: none"></div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                    <div class="col-lg-3 col-md-5 col-sm-6">--}}
{{--                                        <div class="uploaded-video"></div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
                                {{--                            @break--}}
                                {{--                            @endswitch--}}
                            @endif
{{--                            @if($main_Client->type == 'gar')--}}

                                <hr>
{{--                                <div class="row">--}}
{{--                                    <div class="col-lg-6">--}}
{{--                                        <div class="form-group">--}}
{{--                                            <label class="control-label">{{__("Ads")}}</label>--}}
{{--                                            <div class="upload-button-box">--}}
{{--                                                <button class="btn btn-primary form-control button-upload-file" >--}}
{{--                                                    <input class="input-file show-uploaded" data-upload-type="single" data-imgs-container-class="Ads-images" type="file" name="ads" accept="image/x-png,image/gif,image/jpeg" 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">{{__("Main image")}}</span>--}}
{{--                                            </span>--}}
{{--                                                </button>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                    <div class="col-lg-3 col-md-5 col-sm-6">--}}
{{--                                        <div class="Ads-images"></div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            @endif--}}
{{--                        @endif--}}


{{--                        @if($main_Client->type == 's-mar')--}}
{{--                            <hr>--}}
{{--                        </div>--}}
{{--                            <div>--}}
{{--                                <div class="form-check">--}}
{{--                                    @php--}}
{{--                                        $vector = \App\Models\Vector::find($main_Client->id);--}}
{{--                                        $vectorType = $vector->vectorFiltersData->where('service_type','ty');--}}
{{--                                    @endphp--}}

{{--                                    <div class="row">--}}
{{--                                        <div class="col-lg-6">--}}
{{--                                            <div class="form-group">--}}
{{--                                                <label class="control-label">{{__("Video")}}</label>--}}
{{--                                                <div class="upload-button-box">--}}

{{--                                                    <button class="btn btn-primary form-control button-upload-file" >--}}
{{--                                                        <input class="input-file show-uploaded" data-upload-type="video" data-container-class-video="uploaded-video"  type="file"  name="video" accept="video/mp4,video/x-m4v,video/*" 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 video")}}</span>--}}
{{--                                                </span>--}}
{{--                                                    </button>--}}
{{--                                                </div>--}}
{{--                                                <div class="invalid-feedback" style="display: none"></div>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                        <div class="col-lg-3 col-md-5 col-sm-6">--}}
{{--                                            <div class="uploaded-video"></div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <hr>--}}

{{--                                    @foreach($vectorType as $type)--}}
{{--                                        <input class="form-check-input" type="radio" value="{{$type->id}}" id="flexRadioDefault" name="filterTypeId" required>--}}
{{--                                        <label class="form-check-label" for="flexRadioDefault1">--}}
{{--                                            {{$type->getNameAttribute()}}--}}
{{--                                        </label>--}}
{{--                                        <br>--}}
{{--                                    @endforeach--}}




                                {{--                                <div class="form-check">--}}
                                {{--                                    <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>--}}
                                {{--                                    <label class="form-check-label" for="flexCheckChecked">--}}
                                {{--                                        Checked checkbox--}}
                                {{--                                    </label>--}}
                                {{--                                </div>--}}
{{--                            </div>--}}
{{--                        @endif--}}
                                </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>
    </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();
    </script>

{{--    <script type="text/javascript">--}}
{{--        if(document.location.hostname == 'pratikborsadiya.in') {--}}
{{--            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){--}}
{{--                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),--}}
{{--                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)--}}
{{--            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');--}}
{{--            ga('create', 'UA-72504830-1', 'auto');--}}
{{--            ga('send', 'pageview');--}}
{{--        }--}}
{{--    </script>--}}
{{--    <script--}}
{{--        src="https://maps.googleapis.com/maps/api/js?key={{env("GOOGLE_API_KEY")}}&callback=initMap&libraries=&v=weekly"--}}
{{--        async--}}
{{--    ></script>--}}

{{--    <script src="{{asset("assets/js/maps.js")}}"></script>--}}




{{--    <script type="module" src="{{asset("assets/js/pages/locations_support.js")}}"></script>--}}

    <script type="text/javascript">

        // if ($(".myCheckBox").checked(false)){
        // $('.allModelsCheck').on('checked', true)){
        // if ($('.allModelsCheck').prop('checked', true){



    console.log($("#RowSpecialist2").html());

        /**********RowService************/

        $(document).ready( function () {
            console.log($("#RowService").length == 1);
            if($("#RowTemplate").length == 1){
                $(".removeService").hide();
            }else {
                $(".removeService").show();
            }
            $(document).ready(function () {
                $(document).on("click", ".addService", function () {
                    console.log($("#RowTemplate").length);

                    let htmlElement = $("script#RowTemplate").html();

                    $("#RowService").append($(htmlElement));
                    $(".removeService").show();
                });
            });
        });

        $(document).ready(function () {
            $(document).on("click", ".removeService", function () {
                // console.log($("#RowTemplate").children().length);
                let htmlElement = $("script#RowTemplate").html();
                $("#RowService").children().last().remove();
                console.log($("#RowTemplate").children().length);

                // if($("#RowTemplate").length == 1){
                //     $(".removeService").hide();
                // }
            });
        });


        $(document).on("click", ".CheckAll", function (){
            var id = $(this).data("counter");
            if($(this).prop("checked")) {
                $("#Car_Model_Name_Specialist" + id + " option").attr("selected", "selected")
            }else{
                $("#Car_Model_Name_Specialist" + id + " option").removeAttr("selected", "selected")
            }
            // $("#Car_Model_Name_Specialist" + id).attr("hidden", "hidden")
        })


        /**********RowSpecialist************/

        $(document).ready( function () {
            if($("#RowSpecialist").children().length == 1){
                $(".removeSpecialist").hide();
            }else {
                $(".removeSpecialist").show();
            }

            $(document).on("click", ".addSpecialist", function () {
                var counter = $("#counter").val();
                // alert(counter);
                console.log(counter);
                $("#counter").val(++counter);
                $("#RowSpecialist2").find("select.loai").attr("name", "car_model_name_specialist[" + counter + "][]")
                $("#RowSpecialist2").find(".CheckAll").attr("data-counter", counter)
                $("#RowSpecialist2").find("select.loai").attr("id","Car_Model_Name_Specialist"+counter)

                let htmlElement = $("#RowSpecialist2").html();
                console.log(htmlElement)
                $("#RowSpecialist").append($(htmlElement));
                $(".removeSpecialist").show();
                $('#Car_Model_Name_Specialist'+counter).select2();
            });

        });

        $(document).ready(function () {
            $(document).on("click", ".removeSpecialist", function () {
                // alert($(this).data("id"));
                let htmlElement = $("script#RowSpecialist").html();
                $("#RowSpecialist").children().last().remove();
                if($("#RowSpecialist").children().length == 1){
                    $(".removeSpecialist").hide();
                }
            });
        });

        /*** ********************* ***/
        $(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>

    @include("admin.provided_sections.template")

@endsection