@extends('admins.layouts.main')
@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-bordered">
                {{--                <div class="panel-heading">--}}
                {{--                    <h3 class="panel-title">{{ $title }}</h3>--}}
                {{--                </div>--}}
                <div class="example table-responsive">
                    <div class="panel p-4 form-title-right">
                        <form id="Form" action="{{$Urls['post']}}">
                        @csrf
                            <input type="hidden" name="_method" value="put">
                            <div class="row">
                            <div class="col-12">
                                <h4 class="example-title">AED資訊</h4>
                            </div>
                            <hr style="width:0%" ;/>

                            <div class="col-md-8 col-xl-8">
                                <div class="">
                                    <div class="example-wrap">
                                        <div class="example">
                                                <div class="form-group row">
                                                    <label class="col-lg-4 col-form-label"><span
                                                            class="txt-red">*</span>AED廠牌：</label>
                                                    <div class="col-md-8">
                                                        <div class="example-wrap ">
                                                            <select class="form-control" name="supplier_id" id="supplier_id" required>
                                                                <option value="" selected="">AED廠牌</option>
                                                                @foreach($suppliers as $k => $v)
                                                                    <option value="{{$v->id}}">{{$v->name}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            <div class="form-group row">
                                                <label class="col-lg-4 col-form-label"><span
                                                        class="txt-red">*</span>AED型號：</label>
                                                <div class="col-md-8">
                                                    <div class="example-wrap ">
                                                        <select class="form-control" name="aed_model_id" >
                                                            <option value="" selected="">AED型號</option>
                                                            @foreach($adeModels as $k => $v)
                                                                <option supplierId="{{ $v->supplier_id }}" value="{{$v->id}}">{{$v->name}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-lg-4 col-form-label"><span
                                                        class="txt-red">*</span>AED設備序號：</label>
                                                <div class="col-md-8 form-material">
                                                    <input type="text" class="form-control" name="serial_number"
                                                           placeholder="AED設備序號" autocomplete="off" required
                                                    />
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-lg-4 col-form-label"><span
                                                        class="txt-red">*</span>場所</label>
                                                <div class="col-md-8 row">
                                                    <div class="radio-custom radio-default radio-inline">
                                                        <input type="radio" id="place_type2" name="place_type" value="1" checked>
                                                        <label for="place_type2">置放於所屬場所</label>
                                                    </div>
                                                    <div class="radio-custom radio-default radio-inline">
                                                        <input type="radio" id="place_type1" name="place_type" value="2">
                                                        <label for="place_type1">其他場所</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="belong_place_content" class="form-group row">
                                                <label class="col-lg-4 col-form-label"><span
                                                        class="txt-red">*</span>置放場所</label>
                                                <div class="col-md-8">
                                                    <div class="example-wrap ">
                                                        <select  id="place_id"  class="form-control" name="place_id">
                                                                <option value="" selected="">置放場所</option>
                                                                @foreach($places as $k => $v)
                                                                    <option  value="{{$v->id}}" >{{$v->name}}</option>
                                                                @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group row other_place_content" >
                                                <label class="col-lg-4 col-form-label"><span
                                                        class="txt-red">*</span>選擇其他場所：</label>
                                                <div class="col-md-4">
                                                    <div class="example-wrap">
                                                        <select id="city_id" class="form-control">
                                                            <option value="0">縣市</option>
                                                            @foreach($cities as $city)
                                                                <option value="{{ $city->id }}" {{ ($place->city_id ?? 0) == $city->id ? 'selected' : null }}>{{ $city->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="example-wrap">
                                                        <select id="area_id" class="form-control">
                                                            <option value="0">鄉鎮市區</option>
                                                            @foreach($areas as $area)
                                                                <option value="{{ $area->id }}" {{ $place->area_id == $area->id ? 'selected' : null }}>{{ $area->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group row other_place_content" >
                                                <label class="col-lg-4 col-form-label"></label>
                                                <div class="col-md-8">
                                                    <div class="example-wrap ">
                                                        <select id="other_place_id" class="form-control" name="other_place_id">
                                                            <option value="" selected="">場所</option>
                                                            @foreach($otherPlaces as $placeEntity)
                                                                <option value="{{ $placeEntity->id }}" {{ $placeEntity->id == $place->id ? 'selected' : null }}>{{ $placeEntity->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-xl-4">
                            </div>
                        </div>
                        </form>

                    </div> <!-- End Panel  -->
                    <div class="col-lg-12 p-4 text-center">
                        <button class="btn btn-success btn-lg waves-effect waves-classic " type="button" id="submit_button">
                            <i class="icon md-check" aria-hidden="true"></i>下一步</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{--    <div class="col-lg-12">--}}
    {{--        {!! $Paginate !!}--}}
    {{--    </div>--}}


    <script>
        var getPlaceByAreaIdUrl = "{{ route('auth.get_place_by_area_id') }}";

        var towns = @json($towns);
        var areaId = 0;

        var areaObject;
        var placeTownObject;
        var placeObject;



        $(document).ready(function () {

            areaObject = $('#area_id');
            placeTownObject = $('#place_town_id');
            placeObject = $('#other_place_id');




            var Form = $('#Form');

            $('#submit_button').click(function (){

                var rules_obj = {}
                var message = {}

                //驗證資料
                var validate_success = form_validate('Form', rules_obj, message);
                if (!validate_success) {
                    return false;
                }
                showConfirm('確認送出?');
            });

            var requestCache = {};
            var clickObj;
            $.ajaxPrefilter(function(options, originalOptions, jqXHR) {
        
                if (options.type.toLowerCase() === "post" || options.type.toLowerCase() === "put") {
                    var key = options.url ;
                    // 同url post時 ajax 中止
                    if (requestCache[key]&& (new Date() - requestCache[key]) < 5000) {
                        console.log('Ajax was repeat. abort url:'+key);
                        setTimeout(function(){clickObj.attr('disabled', false);}, 5000);
                        jqXHR.abort();
                        requestCache[key] = new Date();
                    } else {
                        // 一時的狀態保持
                        requestCache[key] = new Date();
                        
                        // ajax結束時解除狀態
                        jqXHR.always(function () {
                           // delete ongoingRequests[options.url];
                        });
                    }
                }
                console.log('Ajax type:'+options.type.toLowerCase()+' url:'+key);
            });

            //確定送出按鈕
            $('#modal-btn-si').click(function(){
                clickObj= $('#modal-btn-si');
                clickObj.attr('disabled', true);
                var Request = Form.serializeArray();

                // Request.push({
                //     "name":"content",
                //     "value":CKEDITOR.instances.content.getData()
                // });

                // $('#submit_button').attr('disabled', true);
                showLoading();
                $.post(Form.attr('action'), Request, function (Response){
                    console.log('確定送出按鈕');
                    // $('#submit_button').attr('disabled', false);
                    hideLoading();
                    setTimeout(function(){clickObj.attr('disabled', false);}, 1500);
                    if(Response.status == true){
                        notie.alert({type: 'success', text: Response.message, time: 2});
                         var mySubmitForm = document.createElement("FORM");
                            mySubmitForm.setAttribute("id", "mySubmitForm");
                            mySubmitForm.setAttribute("action", Response.url);
                            document.body.appendChild(mySubmitForm);
                            mySubmitForm.submit();;
                        return false;
                    }

                    notie.alert({type: 'error', text: Response.message, time: 2});

                }, 'json');

                return false;
            });


            $("select[name=supplier_id]").change(function () {
                var supplier_id = document.getElementById("supplier_id").value;
                $("select[name=aed_model_id] option").hide();
                $("select[name=aed_model_id] option[supplierId=" + supplier_id + "]").show();
                $("select[name=aed_model_id] option[supplierId=" + supplier_id + "]:first").prop('selected', true);
                $('select[name=aed_model_id]').selectpicker('refresh');
                $("select[name=aed_model_id]").trigger("change");

            });

            //切換場所選擇
            $('input[name="place_type"]').change(function(){

                $('#belong_place_content').hide();
                $('.other_place_content').hide();

                $('#place_id').removeClass('required');
                $('#other_place_id').removeClass('required');
                //原有場所
                if($('input[name="place_type"]:checked').val() == 1){
                    $('#belong_place_content').show();
                    $('#place_id').addClass('required');

                }else{
                    $('.other_place_content').show();
                    $('#other_place_id').addClass('required');

                }

            }).change();

            //切換縣市
            $('#city_id, #place_city_id').change(function(){

                let targetObject = areaObject;

                if($(this).attr('id') == 'place_city_id'){
                    targetObject = placeTownObject;
                }


                var city_id = $(this).val();
                option = '<option value="0">鄉鎮市區</option>';

                //組合html
                $.each(towns[city_id], function( index, object) {
                    option += `<option value="${object.id}">${object.name}</option>`;
                });

                targetObject.empty();
                targetObject[0].innerHTML = option;
            });

            //切換鄉鎮
            $('#area_id, #place_town_id').change(function(){

                //如果為第二步驟的選擇鄉鎮不需要後續動作
                if($(this).attr('id') == 'place_town_id'){
                    return false;
                }

                var area_id = $(this).val();

                if(empty(area_id)){
                    return false;
                }

                var params = {
                    'area_id':area_id
                }

                $.post(getPlaceByAreaIdUrl, params, function(response){
                    option = '<option value="0">請選擇場所</option>';

                    //組合html
                    $.each(response, function(index, object) {
                        option += `<option value="${object.id}">${object.name}</option>`;
                    });

                    placeObject.empty();
                    placeObject[0].innerHTML = option;

                }, 'json');

            });

        });

    </script>
@endsection