@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> {{__("Edit provided_sections")}}</h1>
            <p>{{__("Edit provided_section Information")}}</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.main_category.index")}}">{{__("Main Categories")}}</a></li>--}}
            {{--            <li class="breadcrumb-item"><a href="#">{{$category->mainCategory->name}}</a></li>--}}
            {{--            <li class="breadcrumb-item"><a href="{{route("admin.sub_category.index", ["main_id" => $category->mainCategory->id])}}">{{__("Sub Categories")}}</a></li>--}}
            <li class="breadcrumb-item"><a href="#">{{__("Edit")}}</a></li>
            {{--            <li class="breadcrumb-item"><a href="#">{{$category->name}}</a></li>--}}
        </ul>
    </div>
@endsection

@section("css-links")
    <link rel="stylesheet" href="{{asset("assets/css/utils/week_days.css")}}">
@endsection

@section("content")

    <div class="row">
        <div class="col-lg-10 m-auto">
            <div class="tile">
                <h3 class="tile-title">{{__("Edit provided_section ( ".$provided_section->name . " )") }}</h3>
                <div class="tile-body">
                    <form method="post" action="{{route("admin.provided-sections.update",["id" =>$provided_section->id,"Employee"=>$Employee ??  null,"type"=>$type??null,"vector_id"=>Request()->vector_id]) }}" enctype="multipart/form-data">
                        @csrf
                        @method('put')

                        <div class="row">

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Provided Section Name English")}}</label>
                                    <input class="form-control @if($errors->has('provided_section_en')) is-invalid @endif" type="text" name="name_en" placeholder="{{__("Provided Section English")}}" value="{{inputValue("name_en",$provided_section)}}" required>
                                </div>
                                @error("provided_section_en")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Provided Section Name Arabic")}}</label>
                                    <input class="form-control @if($errors->has('provided_section_ar')) is-invalid @endif" type="text" name="name_ar" placeholder="{{__("Enter Provided Section Arabic")}}" value="{{inputValue("name_ar",$provided_section)}}" required>
                                </div>
                                @error("provided_section_ar")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">

                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Provided Section Phone Number")}}</label>
                                    <input class="form-control @if($errors->has('phone_number')) is-invalid @endif" type="text" name="phone_number" placeholder="{{__("Enter Phone Number")}}" value="{{ inputValue("phone_number", $provided_section)}}" >
                                </div>
                                @error("phone_number")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Provided Section Country")}}</label>
                                    <input class="form-control @if($errors->has('country')) is-invalid @endif" type="text" name="country"  readonly value="{{"United Arab Emirates"}}" required>
                                </div>
                                @error("country")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Provided Section City")}}</label>
                                    <select class="form-control js-basic-single-select2 @if($errors->has('section_city')) is-invalid @endif" id="section_city" data-url="{{route("ajax.sub-areas.index")}}" name="section_city" required>
                                        <option selected disabled >{{__("selected City")}}</option>
                                        @foreach($states as $key=> $name)
                                            <option value="{{$name['area_name']}}" data-id="{{$name['id']}}">{{$name['area_name']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                @error("section_city")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Provided Section Sub Area")}}</label>
                                    {{--                                    js-basic-single-select2--}}
                                    <select class="form-control  @if($errors->has('sub_areas')) is-invalid @endif" id="sub_areas" name="sub_areas" required>
                                        <option value="0">{{__("selected sub area")}}</option>
                                    </select>
                                </div>
                                @error("sub_areas")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>

{{--                            <div class="col-lg-6">--}}
{{--                                <div class="form-group">--}}
{{--                                    <label class="control-label">{{__("Provided Section City")}}</label>--}}
{{--                                    <select class="form-control @if($errors->has('city')) is-invalid @endif" name="city" required>--}}
{{--                                        <option selected >{{__($provided_section->city)}}</option>--}}
{{--                                        <option selected disabled >{{__("selected City")}}</option>--}}
{{--                                        @foreach($states as $key=> $name)--}}
{{--                                            <option value="{{$name['name']}}">{{$name['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">{{__("IBAN")}}</label>
                                    <input class="form-control @if($errors->has('iban')) is-invalid @endif" type="text" name="iban" placeholder="{{__("Enter IBAN")}}" value="{{inputValue("iban",$provided_section)}}" required>
                                </div>
                                @error("iban")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Map")}}</label> <br>
                                    <!-- Button trigger modal -->
                                    <button type="button" onclick="getLocation()" class="btn btn-primary @if($errors->has('lng')) is-invalid @endif" data-toggle="modal" data-target="#exampleModalCenter">
                                        <span class="icon color-light"><i class="fas fa-map-marker-alt"></i></span>{{__("Map")}}

                                    </button>
                                    <spna class="btn btn-success" id="mapStatus" style="display: none"> Location saved</spna>
                                    <!-- Modal -->
                                    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="row parent-box">
                                                        <div class="col-lg-12 m-auto map-box">
                                                            <div class="tile-body" id="parent-box">
                                                                <!--- Map Section --->
                                                                <div id="map-box" style="@if(Session::has("location_details")) display:none @endif">
                                                                    <div id="map"></div>

                                                                </div>
                                                                <!--- Info Section --->
                                                                <div id="info-box" style="@if(Session::has("location_details")) display:block @endif">
                                                                    <input type="hidden" name="lat" id="lat" value="{{inputValue("latitude")}}">
                                                                    <input type="hidden" name="lng" id="lng" value="{{inputValue("longitude")}}">
                                                                    <button type="button" class="close btn btn-success" data-dismiss="modal" aria-label="Close">
                                                                        Done
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @error("lng")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="col-lg-6">
                                @if($provided_section->user->type == 'gar')
                                    <hr>
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label class="control-label">{{__("Garage Type")}}</label>
                                                <select class="form-control  js-basic-single-select2 @if($errors->has('garage_type')) is-invalid @endif" multiple name="garage_type" required>
                                                    <option  disabled>{{__("Selected Garage Type")}}</option>
                                                    @foreach($garage_type as $garage)
                                                        <option  value="{{$garage->id}}"
                                                             @if($provided_section->garageDetails)
                                                                 @if($provided_section->garageDetails->garageTypes->service_type == $garage->service_type)
                                                                 selected
                                                                @endif
                                                            @endif>{{$garage->getNameAttribute()}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            @error("garage_type")
                                            <div class="input-error">{{$message}}</div>
                                            @enderror
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label class="control-label">{{__("Certified Insurance Company")}}</label>
                                                <select class="form-control js-basic-single-select2 @if($errors->has('certified_insurance_company')) is-invalid @endif" multiple name="certified_insurance_company[]" >
                                                    @foreach($insurance_company as $company)
                                                        <option value="{{$company->id}}" @if(cehck_Garage_Details($provided_section,$company->id)) selected @endif  >{{$company->name_en}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            @error("certified_insurance_company")
                                            <div class="input-error">{{$message}}</div>
                                            @enderror
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">

                                                <label class="control-label">{{__("Section Specialization")}}</label>
                                                <select class="form-control SP js-basic-single-select2 @if($errors->has('section_specialization')) is-invalid @endif" multiple name="section_specialization[]" required >
                                                    @foreach($specialization as $specia)
                                                        <option value="{{$specia->id}}" @if(cehck_Garage_Details($provided_section,$specia->id)) selected @endif>{{$specia->getNameAttribute()}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            @error("section_specialization")
                                            <div class="input-error">{{$message}}</div>
                                            @enderror
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label class="control-label">{{__("Section Specialized For")}}</label>
                                                <select class="form-control js-basic-single-select2 @if($errors->has('section_specialized_for')) is-invalid @endif" multiple  name="section_specialized_for[]"  required>
                                                    @foreach($specialized_for as $specia)
                                                        <option value="{{$specia->id}}"  @if(cehck_Garage_Details($provided_section,$specia->id)) selected @endif>{{$specia->getNameAttribute()}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            @error("section_specialized_for")
                                            <div class="input-error">{{$message}}</div>
                                            @enderror
                                        </div>
                                    </div>
                                @endif
                            </div>
                            <div class="tile-footer">
                                <button class="btn btn-primary" type="submit"><i class="fa fa-fw fa-lg fa-check-circle"></i> {{__("Edit")}}</button>
                            </div>
                        </div>
                    </form>

@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>
                            $("#section_city").on("change",function (){
                                var ProvidedSectionCityId = $(this).find('option:selected').data("id"),
                                    sub_area_url = $(this).data("url");

                                $.ajaxSetup({
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                    }
                                })
                                $.ajax({
                                    type:"GET",
                                    url: sub_area_url,
                                    data : {id :ProvidedSectionCityId },
                                    success: function( response ) {

                                        let subArea =$("#sub_areas");
                                        subArea
                                            .find('option')
                                            .remove()
                                            .end()
                                            .append(`<option selected="selected">{{__("selected sub area")}}</option>`)
                                            .val('0')
                                        ;

                                        // subArea
                                        //     .empty()
                                        //     .append('<option value="whatever">text</option>')
                                        //     .find('option:first')
                                        //     .attr("selected","selected")
                                        // ;
                                        // subArea.html("<option selected=\"selected\">The Option...</option>");

                                        // console.log(subArea.options)
                                        {{--subArea.empty().append(`<option disabled value="0">{{__("selected sub area")}}</option>`);--}}

                                        var  options ="";
                                        let subAreas = response.data.sub_areas;
                                        // if (subAreas.length === 0){
                                        //     return 1;
                                        // }
                                        subAreas.forEach((subArea)=> {
                                            options += `<option value="${subArea.id}"> ${subArea.sub_area_name}</optopn>`
                                            console.log(options)
                                        })
                                        // console.log(subArea.find("option:selected").val())
                                        // subArea.options[0].selected="true";
                                        subArea.append(options);



                                        // $("#sub_areas option:selected").val('selected sub area');

                                        console.log("success")

                                    },
                                    error : function (response) {
                                        console.log("Not sucsess")

                                        // resolve(response);
                                    }
                                })


                                console.log(ProvidedSectionCityId)
                            })
                        </script>
<script type="text/javascript" src="{{asset("assets/js/plugins/select2.min.js")}}"></script>
<script type="text/javascript">
$('.Car_Model_Name_Specialist').select2();
</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">


/**********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();
// }
});
});


/**********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);
$("#counter").val(++counter);
$("#RowSpecialist2").find("select.loai").attr("name", "car_model_name_specialist[" + counter + "][]")
$("#RowSpecialist2").find("select.loai").attr("id","Car_Model_Name_Specialist"+counter)
let htmlElement = $("#RowSpecialist2").html();
$("#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>


@endsection