@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')

    <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 seach-title-right">
                    <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="場所名稱、AED位置、場所id、AED id" autocomplete="off" value="{{$sKeyword}}"
                                />
                            </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-md-4 col-form-label"></label>
                            <div class="col-md-8">
                                <button type="button" onclick="resetUrl()" class="btn btn-warning">重設</button>
                                <button type="submit" class="btn btn-primary" value="">搜尋</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel">
                <div class="panel-body">
                    <div>
                        <h3 class="panel-title">AED位置</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" data-tabKey="1">
                        <thead>
                        <tr>
                            <th>操作</th>
                            <th>場所id</th>
                            <th>行政區</th>
                            <th>AED id</th>
                            <th>場所名稱</th>
                            <th>AED位置</th>
                            <th>備註</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">
                    <h3 class="panel-title">@if ($is_EQUIPMENT_MANUFACTURER)
                    設備廠商廢除AED申請列表    
                    @else
                    AED位置申請列表 
                    @endif</h3>
                    <div class="example table-responsive">
                    <div class="col-lg-6 p-4">
                        @can('create', App\Models\AedLocationApply::class)
                        <a href="{{ $Urls['create'] }}" class="btn btn-primary"><i class="icon md-plus" aria-hidden="true"></i>登錄</a>
                        @endcan
                    </div>
                    @if ($is_EQUIPMENT_MANUFACTURER)
                    <table class="table table-hover dataTable table-striped w-full jsgrid" data-tabKey="4">
                    @else    
                    <table class="table table-hover dataTable table-striped w-full jsgrid" data-tabKey="2">
                    @endif
                        <thead>
                        <tr>
                            <th>操作</th>
                            <th>場所id</th>
                            <th>AED id</th>
                            <th>場所名稱</th>
                            <th>AED位置</th>
                            <th>申請類型</th>
                            <th>狀態</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">
                    <h3 class="panel-title">
                        設備維修申請列表   
                    </h3>
                    <div class="example table-responsive">
                    <div class="col-lg-6 p-4">
                        
                    </div>
                    <table class="table table-hover dataTable table-striped w-full jsgrid" data-tabKey="5">
                        <thead>
                        <tr>
                            <th>操作</th>
                            <th>場所id</th>
                            <th>AED id</th>
                            <th>場所名稱</th>
                            <th>AED位置</th>
                            <th>申請類型</th>
                            <th>狀態</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">
                    <h3 class="panel-title">AED追加管理員及效期異動申請列表</h3>
                    <div class="example table-responsive">
                        <div class="col-lg-6 p-4">
                            @can('create', App\Models\AedLocationApply::class)
                                <a href="{{ $Urls['createdAedAdminApplyVerify'] }}" class="btn btn-primary"><i class="icon md-plus" aria-hidden="true"></i>追加管理員及效期異動</a>
                            @endcan
                        </div>
                        <table class="table table-hover dataTable table-striped w-full jsgrid" data-tabKey="3">
                            <thead>
                            <tr>
                                <th>操作</th>
                                <th>場所id</th>
                                <th>AED id</th>
                                <th>場所名稱</th>
                                <th>AED位置</th>
                                <th>申請類型</th>
                                <th>狀態</th>
                                <th>備註</th>
                                <th>新增時間</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

{{--    <div class="col-lg-12">--}}
{{--        {!! $paginate !!}--}}
{{--    </div>--}}

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

        var admin = "{{ $admin }}";
        var is_EQUIPMENT_MANUFACTURER="{{ $is_EQUIPMENT_MANUFACTURER }}";
        var aedLocationEditStatus = null;
        $(document).ready(function () {

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

            //切換場所類型
            $('#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);
            }


            //移除
            $('body').on('click', '.delete_button', function(){

                if(confirm('確定刪除此筆資料?') === false){
                    return false;
                }

                let parameters = {
                    _method:'delete'
                }

                let thisObjectTr = $(this).closest('tr');

                showLoading();
                $.post($(this).data('url'), parameters, function(response){
                    hideLoading();

                    if(response.status){
                        notie.alert({type: 'success', text: response.message, time: 2});
                        thisObjectTr.remove();
                        location.reload();
                        return false;
                    }

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

                }, 'json');


                return false;
            });

            $(".table").each(function(){
                var tabKey = $(this).attr('data-tabKey');

                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();

                if(tabKey == 1){
                    $(this).DataTable( {
                        "searching": false, // 顯示搜尋
                        "processing": true,
                        "serverSide": true,
                        "ordering": false,
                        "autoWidth": false,
                        "ajax": {
                            "url": "{{route('admin.aed_management.locations.getAedLocationList')}}",
                            "data": {
                                "tabKey": tabKey,
                                "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,
                            },
                        },
                        "columns": [
                            { "data": "id" }, //第一欄使用data中的name
                            { "data": "place_id" },
                            { "data": "place_type_name" },
                            { "data": "aed_id" },
                            { "data": "plane_name" },
                            { "data": "placement" },
                            { "data": "memo" },
                            { "data": "aedSpotCheckUpdated_at" },
                            { "data": "created_at" },
                        ],
                        createdRow:function(row,data,dataIndex,cells){
                            var td = $(row).find('td:first-child');
                            var html = '';
                            
                            if(data.changeIcon)html += '<a href="' + data.show_url + '" class="btn btn-dark"><i class="icon md-format-list-bulleted" aria-hidden="true"></i>各項申請</a>';
                            else html += '<a href="' + data.show_url + '" class="btn btn-dark"><i class="icon md-eye" aria-hidden="true"></i>查看</a>';
                            if(data.aed_usage_report_url != false){
                                html += '<a href="' + data.aed_usage_report_url + '" class="btn btn-info m-3"><i class="icon md-plus" aria-hidden="true"></i>使用紀錄</a>';
                            }

                            if(data.aed_maintain_report_url != false){
                                html += '<a href="' + data.aed_maintain_report_url + '" class="btn btn-success m-3"><i class="icon md-plus" aria-hidden="true"></i>維護紀錄</a>';
                            }

                            if(data.aed_spot_check_report_url != false){
                                html += '<a href="' + data.aed_spot_check_report_url + '" class="btn btn-warning m-3"><i class="icon md-plus" aria-hidden="true"></i>AED抽查</a>';
                            }


                            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'
                                }
                            }
                        }
                    } );

                }else if(tabKey == 2 || tabKey == 3 || tabKey == 4|| tabKey == 5){
                   
                    $(this).DataTable( {
                        "searching": false, // 顯示搜尋
                        "processing": true,
                        "serverSide": true,
                        "ordering": false,
                        "autoWidth": false,
                        "ajax": {
                            "url": "{{route('admin.aed_management.locations.getAedLocationList')}}",
                            "data": {
                                "tabKey": tabKey,
                                "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,
                            },
                        },
                        "columns": [
                            { "data": "id" }, //第一欄使用data中的name
                            { "data": "place_id" },
                            { "data": "aed_id" },
                            { "data": "place_name" },
                            { "data": "placement" },
                            { "data": "apply_type" },
                            { "data": "status_name" },
                            { "data": "memo" },
                            { "data": "created_at" },
                        ],
                        createdRow:function(row,data,dataIndex,cells){
                            var td = $(row).find('td:first-child');
                            var html = '';
                            if(empty(data.createRecoverApply_url)=== false && admin == false){
                                    if(tabKey==5&&data.apply_type_id==7 && data.status==9)html +=  '<a href="' + data.createRecoverApply_url + '" class="btn btn-primary waves-effect waves-classic"><i class="icon md-plus" aria-hidden="true"></i>復原申請</a>';
                                }
                            if(aedLocationEditStatus.indexOf(data.status) > -1 && admin == false){
                            if(!is_EQUIPMENT_MANUFACTURER&&tabKey==3){
                                html += '<a href="' + data.edit_url + '" class="btn btn-success"><i class="icon md-edit" aria-hidden="true"></i>編輯</a>';
                                if(empty(data.delete_url)=== false ){
                                    if(tabKey!=4)html += `<button data-url="${data.delete_url}" class="btn btn-danger m-3 delete_button"><i class="icon md-delete" aria-hidden="true"></i>刪除</button>`;
                                }
                            }else if(tabKey==2){
                                if(empty(data.edit_url)=== false ){
                                html += '<a href="' + data.edit_url + '" class="btn btn-success"><i class="icon md-edit" aria-hidden="true"></i>編輯</a>';
                                }
                              
                                

                                if(empty(data.delete_url)=== false ){
                                    if(tabKey!=4)html += `<button data-url="${data.delete_url}" class="btn btn-danger m-3 delete_button"><i class="icon md-delete" aria-hidden="true"></i>刪除</button>`;
                                }
                            }else if(tabKey==5){
                                if(aedLocationEditStatus.indexOf(data.status) > -1 && admin == false){
                                 
                                        html += '<a href="' + data.edit_url + '" class="btn btn-success"><i class="icon md-edit" aria-hidden="true"></i>編輯</a>';
                                    
                                
                                    

                                    if(empty(data.delete_url)=== false ){
                                        html += `<button data-url="${data.delete_url}" class="btn btn-danger m-3 delete_button"><i class="icon md-delete" aria-hidden="true"></i>刪除</button>`;
                                    }
                                }
                            }
                            }
                            html += '<a href="' + data.show_url + '" class="btn btn-dark"><i class="icon md-eye" aria-hidden="true"></i>查看</a>';

                            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'
                                }
                            }
                        }
                    } );
                   
                }

            })

        });
    </script>
@endsection