@extends('admins.layouts.main')
@section('tool')
{{--    <div class="page-header-actions">--}}
{{--        <a id="export_button" href="{{ $Urls['export'] }}" class="btn btn-sm btn-icon btn-primary btn-round waves-effect waves-classic" data-toggle="tooltip" data-original-title="匯出檔案">--}}
{{--            <i class="icon md-download" aria-hidden="true"></i>--}}
{{--        </a>--}}
{{--    </div>--}}
@endsection
@section('content')
    <link href="{{ asset('/js/admins/global/jquery-ui-1.12.1/jquery-ui.css') }}" rel="stylesheet" type="text/css"></link>
    <link rel="stylesheet" href="{{ asset('/js/admins/global/jQuery-Timepicker-Addon/jquery-ui-timepicker-addon.css') }}">
    <script src="{{ asset('/js/admins/global/jquery-ui-1.12.1/jquery-ui.js') }}"></script>
    <script src="{{ asset('/js/admins/global/jQuery-Timepicker-Addon/jquery-ui-timepicker-addon.js') }}"></script>
    <div class="panel panel-bordered">
        <form id="From" method="get" class="form-horizontal" enctype="multipart/form-data">
            <div class="alert-light alert-dismissible alert-check">
                <div class="row">
                    <div class="p-4 pl-4 col-md-6 col-xl-6 form-title-right">
                        <div class="form-group row">
                            <label class="col-lg-4 col-form-label">縣市區域:</label>
                            <div class="col-md-4">
                                {{--                            <div class="example-wrap">--}}
                                <select id="place_city_id" class="form-control" name="s_place_city_id">
                                    <option value="all" {{ $sPlaceCityId == 'all' ? 'selected' : null }}>全部</option>
                                    @foreach($cities as $city)
                                        <option value="{{ $city->id }}" {{ $sPlaceCityId == $city->id ? 'selected' : null }}>{{ $city->name }}</option>
                                    @endforeach
                                </select>
                                {{--                            </div>--}}
                            </div>
                            <div class="col-md-4">
                                {{--                            <div class="example-wrap">--}}
                                <select id="place_town_id" class="form-control" name="s_place_town_id">
                                    <option value="0" >鄉鎮區域</option>
                                    @foreach($placeTown as $town)
                                        <option value="{{ $town->id }}" {{ $sPlaceAreaId == $town->id ? 'selected' : null }}>{{ $town->name }}</option>
                                    @endforeach
                                </select>
                                {{--                            </div>--}}
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-4 col-form-label ">關鍵字：</label>
                            <div class="col-md-8 ">
                                <input type="text" class="form-control" name="s_keyword" id="s_keyword"
                                       placeholder="" autocomplete="off" value="{{$sKeyword}}"
                                />
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-md-4 col-form-label"></label>
                            <div class="col-md-8" style="text-align: right">
                                <button type="button" onclick="resetUrl()" class="btn btn-warning">重設</button>
                                <button type="submit" class="btn btn-primary" value="">搜尋</button>
                            </div>
                        </div>
                    </div>
                    <div class="p-4 pl-4 col-md-6 col-xl-6 form-title-right">
                        <div class="form-group row">
                            <label class="col-lg-4 col-form-label">場所類型:</label>
                            <div class="col-md-4">
                                <select id="place_main_type" class="form-control" name="place_type_id">
                                    <option value="all" {{ $sPlaceTypeId == 'all' ? 'selected' : null }}>全部</option>
                                    @foreach($mainPlaceTypes as $placeType)
                                        <option value="{{ $placeType->id }}" {{ $sPlaceTypeId == $placeType->id ? 'selected' : null }}>{{ $placeType->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <select id="place_sub_type_id" class="form-control" name="place_sub_type_id">
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-4 col-form-label">安心場所:</label>
                            <div class="col-md-8">
                                <div class="radio-custom radio-default radio-inline">
                                    <input type="radio" id="is_safe_placeall"
                                           name="is_safe_place" value="99" {{ ($isSafePlace  ?? '99') == 99 ? 'checked' : null }}
                                    >
                                    <label for="is_safe_placeall">全部</label>
                                </div>
                                <div class="radio-custom radio-default radio-inline">
                                    <input type="radio" id="is_safe_place1"
                                           name="is_safe_place" value="1" {{ ($isSafePlace  ?? '99') == 1 ? 'checked' : null }}
                                    >
                                    <label for="is_safe_place1">是</label>
                                </div>
                                <div class="radio-custom radio-default radio-inline">
                                    <input type="radio" id="is_safe_place0"
                                           name="is_safe_place" value="0" {{ ($isSafePlace  ?? '99') == 0 ? 'checked' : null }}
                                    >
                                    <label for="is_safe_place0">否</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-4 col-form-label">AED設備:</label>
                            <div class="col-md-8">
                                <div class="radio-custom radio-default radio-inline">
                                    <input type="radio" id="have_aedall"
                                           name="have_aed" value="99" {{ ($have_aed  ?? '99') == 99 ? 'checked' : null }}
                                    >
                                    <label for="have_aedall">全部</label>
                                </div>
                                <div class="radio-custom radio-default radio-inline">
                                    <input type="radio" id="have_aed1"
                                           name="have_aed" value="1" {{ ($have_aed  ?? '99') == 1 ? 'checked' : null }}
                                    >
                                    <label for="have_aed1">有</label>
                                </div>
                                <div class="radio-custom radio-default radio-inline">
                                    <input type="radio" id="have_aed0"
                                           name="have_aed" value="0" {{ ($have_aed  ?? '99') == 0 ? 'checked' : null }}
                                    >
                                    <label for="have_aed0">無</label>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </form>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel">
                <div class="panel-body">
                    @can('createAedPlace', App\Models\Place::class)
                        <a href="{{$Url['createAedPlace']}}" class="btn btn-primary waves-effect waves-classic"><i
                                class="icon md-plus" aria-hidden="true"></i>新增場所</a>
                    @endcan
                    @can('mergePlace', App\Models\Place::class)
                        <a href="{{$Url['mergePlace']}}" class="btn btn-primary waves-effect waves-classic"><i
                                class="icon md-plus" aria-hidden="true"></i>單位整合</a>
                    @endcan
                    <div>
                        <h3 class="panel-title">{{$title}}</h3>
                        <a id="export_button" href="{{ $Urls['export'] }}"
                           class="btn btn-sm btn-icon btn-primary btn-round waves-effect waves-classic t-45"
                           data-toggle="tooltip" data-original-title="匯出檔案">
                            <i class="icon md-download" aria-hidden="true"></i>
                        </a>
                    </div>
                        <div class="example table-responsive">
                            <table class="table table-hover dataTable table-striped w-full jsgrid">
                                <thead>
                                <tr>
                                    <th>操作</th>
                                    <th>場所id</th>
                                    <th>場所名稱</th>
                                    <th>AED設備</th>
                                    <th>安心場所</th>
                                    <th>安心場所認證到期日</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel">
                <div class="panel-body">
                    <div>
                        <h3 class="panel-title">AED場所廢除列表</h3>
                        
                    </div>
                        <div class="example table-responsive">
                            <table class="table table-hover dataTable2 table-striped w-full jsgrid">
                                <thead>
                                <tr>
                                    <th>場所id</th>
                                    <th>場所名稱</th>
                                    <th>刪除原因</th>
                                    <th>操作者姓名</th>
                                    <th>操作者權限</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                </div>
            </div>
        </div>
    </div>    
        <!-- Modal -->
        <div class="modal fade" id="confirmPlaceDelView1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header bg-orange-50">
                        <h4 class="modal-title" id="my_modal_label">確認刪除</h4>
                    </div>
                    <div class="modal-body">
                        <span id="dast_info">刪除目標：</span>
                        <br/><br/>
                    <form id="From_PlaceToDel" method="post" class="form-horizontal" enctype="multipart/form-data">
                        <span id="src_info">刪除原因：</span>
                        <br/>
                        <textarea name="deleted_momo" id="deleted_momo"></textarea>
                        <input type="hidden" name="deleted_place_id" id="deleted_place_id">
                    </form>
                    
                    </div>
                    <div class="modal-footer">
                        <button  class="btn btn-default" data-dismiss="modal">返回</button>
                        <button id="modal-btn-si-PlaceToDel" class="btn btn-danger">確定</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 客製化confirm視窗 -->
        <div class="modal fade" tabindex="-1" role="dialog"  aria-hidden="true" id="confirmPlaceDelView2">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="check_place_title">Confirmar</h4>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="modal-btn-si-check-place">確定</button>
                        <button type="button" class="btn btn-danger" id="modal-btn-no">取消</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="alert" role="alert" id="result"></div>        
        <!-- （Modal） -->
{{--    <div class="col-lg-12">--}}
{{--        {!! $paginate !!}--}}
{{--    </div>--}}
    <script>
        function submitPlaceData(id){
            $('#deleted_momo').val('');
            $('#deleted_place_id').val(id)
            $('#dast_info').html('刪除目標：'+$('#deleted_name'+id).val());
            $("#confirmPlaceDelView1").modal('show');
        }

        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-PlaceToDel').click(function (){
            clickObj= $('#modal-btn-si-PlaceToDel');
            clickObj.attr('disabled', true);
            var verify_result = $('#deleted_momo').val();

            if (verify_result=="") {
                notie.alert({type: 'error', text: '請輸入刪除原因', time: 2});
                return false;
            }
             //ajax post確認是否有安心場所
            var formData = new FormData($('#From_PlaceToDel')[0]);
            $.ajax({
                url: "{{ action('App\Http\Controllers\Admins\AedManagement\PlaceController@getSafePlaceAndAedData') }}",
                type: "POST",
                data: formData,
                enctype: 'multipart/form-data',
                processData: false,  // tell jQuery not to process the data
                contentType: false   // tell jQuery not to set contentType
            }).done(function(data){
                console.log(data);
                clickObj.attr('disabled', false);
                if(data.hasAbleSafePlaceOrAed)showConfirm_PlaceToDel(data.msg);
                else showConfirm_PlaceToDel('確認送出?');
                return false;
            });
            
        });   
        $('#modal-btn-si-check-place').click(function (){
            clickObj= $('#modal-btn-si-check-place');
            clickObj.attr('disabled', true);
             //ajax 刪除places
            var formData = new FormData($('#From_PlaceToDel')[0]);
            $.ajax({
                    type: 'post',
                    url: "{{ action('App\Http\Controllers\Admins\AedManagement\PlaceController@delPlacesData') }}",
                    data: formData,
                    cache: false,
                    processData: false,
                    contentType: false,
                    enctype: 'multipart/form-data',
                    success: function (Response) {
                        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;
                        }
                        clickObj.attr('disabled', false);
                        notie.alert({type: 'error', text: Response.message, time: 2});
                    }
                });
                showLoading();
        });  
        $('#modal-btn-no').click(function (){
           
             $("#confirmPlaceDelView2").modal('hide');
        })
        function showConfirm_PlaceToDel(message){
            $('#check_place_title').html(message);
            $("#confirmPlaceDelView2").modal('show');
        }

        var subPlaceTypes = @json($subPlaceTypes);
        var towns = @json($towns);
        var areaId = "{{ $sPlaceAreaId ?? 0 }}";
        var placeSubTypeId = "{{ $sPlaceSubTypeId ?? 0 }}";

        var datetimepickerParams = {
            dateFormat: 'yy-mm-dd',
            changeYear: true,
            changeMonth: true,
            monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
            showTimepicker: false,
        };


    //預覽安心場所證書
    function exportReportWithCertificates(report,placeId, type){
        var url = new URL('{{ $exportCertificatesUrl }}');
        url.searchParams.append('report', report);
        /*
        url.searchParams.append('s_place_city_id', $("select[name=s_place_city_id]").val());
        url.searchParams.append('s_sd', $("input[name=s_sd]").val());
        url.searchParams.append('s_ed', $("input[name=s_ed]").val());
        */
        url.searchParams.append('place_id', placeId);
        url.searchParams.append('type', type);
        url.searchParams.append('preview', 1);
        window.open(url.href);
    }

        $(document).ready(function () {

            placeTypeObject = $('#place_sub_type_id');
            areaObject = $('#area_id');
            placeTownObject = $('#place_town_id');

            //日期插件
            $('.SUBDATE').datetimepicker(datetimepickerParams);

            //切換場所類型
            $('#place_main_type').change(function(){

                var place_main_type = $(this).val();
                option = '';

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

                placeTypeObject.empty();
                placeTypeObject.append(option);
            }).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.append(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.append(option);

                }, 'json');
            });


            $('#city_id').trigger( "change" );
            $('#place_city_id').trigger( "change" );
            //如果有areaId則下拉是選單選中對應項目
            if(areaId > 0){
                placeTownObject.find(`option[value='${areaId}']`).attr('selected', true);
            }

            //如果有placeSubTypeId則下拉是選單選中對應項目
            if(placeSubTypeId > 0){
                placeTypeObject.find(`option[value='${placeSubTypeId}']`).attr('selected', true);
            }


            $(".dataTable").each(function(){
                var place_city_id = $('#place_city_id').val();
                var place_town_id = $('#place_town_id').val();
                var s_keyword = $('#s_keyword').val();
                var place_main_type = $('#place_main_type').val();
                var place_sub_type_id = $('#place_sub_type_id').val();
                var is_safe_place = $("input[name='is_safe_place']:checked").val();
                var have_aed = $("input[name='have_aed']:checked").val();

                $(this).DataTable( {
                    "searching": false, // 顯示搜尋
                    "processing": true,
                    "serverSide": true,
                    "ordering": false,
                    "autoWidth": false,
                    "ajax": {
                        "url": "{{route('admin.aed_management.places.getPlaceList')}}",
                        "data": {
                            "s_place_city_id": place_city_id,
                            "s_place_town_id": place_town_id,
                            "s_keyword": s_keyword,
                            "place_type_id": place_main_type,
                            "place_sub_type_id": place_sub_type_id,
                            "is_safe_place": is_safe_place,
                            "have_aed": have_aed,
                        },
                    },
                    "columns": [
                        { "data": "id" }, //第一欄使用data中的name
                        { "data": "id" },
                        { "data": "name" },
                        { "data": "have_aed" },
                        { "data": "is_safe_place" },
                        { "data": "certification_period" },
                    ],
                    createdRow:function(row,data,dataIndex,cells){
                        var td = $(row).find('td:first-child');
                        var html = '';
                        @can('updateAedPlaceForAdmin', App\Models\Place::class)
                            html += '<a href="' + data.edit_url + '" class="btn btn-success"><i class="icon md-edit" aria-hidden="true"></i>編輯</a>';
                        @endcan
                        html += '<a href="' + data.show_url + '" class="btn btn-dark"><i class="icon md-eye" aria-hidden="true"></i>查看</a>';
                        @can('show', \App\Models\SafePlaceApply::class)
                        if(data.is_safe_place=="Y"){
                         html += '<a href="javascript:exportReportWithCertificates(1,\'' + data.id + '\', \'pdf\')" class="btn btn-primary"><i class="icon md-calendar-note" aria-hidden="true"></i>預覽</a>';
                        }    
                        @endcan
                        @if($user->user_role_id>0 && $user->user_role_id<=3)
                        html += '<textarea id="deleted_name'+data.id+'" style="display:none">'+data.name+'</textarea><a href="javascript:submitPlaceData('+data.id+');" class="btn btn-danger"><i class="icon md-delete" aria-hidden="true"></i>刪除</a>';
                        @endif
                        td.html(html)
                    },
                    language: {
                        "sInfo": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
                        "sInfoEmpty": "顯示第 0 至 0 項結果，共 0 項",
                        "search": "搜尋:",
                        "lengthMenu": "每頁顯示 _MENU_ 筆",
                        "zeroRecords": "沒有資料",
                        "processing": "處理中...",
                        "loadingRecords": "載入中...",
                        paginate: {
                            first:    '«',
                            previous: '‹',
                            next:     '›',
                            last:     '»'
                        },
                        aria: {
                            paginate: {
                                first:    'First',
                                previous: 'Previous',
                                next:     'Next',
                                last:     'Last'
                            }
                        }
                    }
                } );
            });
            $(".dataTable2").each(function(){
                var place_city_id = $('#place_city_id').val();
                var place_town_id = $('#place_town_id').val();
                var s_keyword = $('#s_keyword').val();
                var place_main_type = $('#place_main_type').val();
                var place_sub_type_id = $('#place_sub_type_id').val();
                var is_safe_place = $("input[name='is_safe_place']:checked").val();
                var have_aed = $("input[name='have_aed']:checked").val();

                $(this).DataTable( {
                    "searching": false, // 顯示搜尋
                    "processing": true,
                    "serverSide": true,
                    "ordering": false,
                    "autoWidth": false,
                    "ajax": {
                        "url": "{{route('admin.aed_management.places.getPlaceList')}}?tag=del",
                        "data": {
                            "s_place_city_id": place_city_id,
                            "s_place_town_id": place_town_id,
                            "s_keyword": s_keyword,
                            "place_type_id": place_main_type,
                            "place_sub_type_id": place_sub_type_id,
                            "is_safe_place": is_safe_place,
                            "have_aed": have_aed,
                        },
                    },
                    "columns": [
                        { "data": "id" },
                        { "data": "name" },
                        { "data": "deleted_momo" },
                        { "data": "DelUserName" },
                        { "data": "DelUserDepartmen" },
                    ],
                    createdRow:function(row,data,dataIndex,cells){
                    
                    },
                    language: {
                        "sInfo": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
                        "sInfoEmpty": "顯示第 0 至 0 項結果，共 0 項",
                        "search": "搜尋:",
                        "lengthMenu": "每頁顯示 _MENU_ 筆",
                        "zeroRecords": "沒有資料",
                        "processing": "處理中...",
                        "loadingRecords": "載入中...",
                        paginate: {
                            first:    '«',
                            previous: '‹',
                            next:     '›',
                            last:     '»'
                        },
                        aria: {
                            paginate: {
                                first:    'First',
                                previous: 'Previous',
                                next:     'Next',
                                last:     'Last'
                            }
                        }
                    }
                } );
            });            


        });
        
    </script>
@endsection