@extends('admins.layouts.main')
@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">
                    <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="場所名稱、E-mail、申請表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="panel">
        <header class="panel-heading">
            <h3 class="panel-title">審核AED管理員列表</h3>
        </header>
        <div class="panel-body">
            <ul class="nav nav-pills tab-list" id="tab-list" role="tablist">
                @foreach ($tabOrder as $status)
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#status-{{ $tabKey }}-{{ $status }}"
                            role="tab" data-tabKey={{ $tabKey }} data-tabStatus={{ $status }}><span
                                id="status-{{ $tabKey }}-{{ $status }}-count">
                            {{ $tableTypeName[$status] }} () </a>
                    </li>
                @endforeach
            </ul>
            <div class="tab-content" id="tab-content">
                @foreach ($tabOrder as $status)
                    <div class="tab-pane fade" id="status-{{ $tabKey }}-{{ $status }}" role="tabpanel">
                        <table id="locationApply-{{ $tabKey }}-{{ $status }}"
                            class="table locationApply2 locationApply" data-tabKey={{ $tabKey }}
                            data-tabStatus={{ $status }}>
                            <thead>
                                <tr class="table-head-2">

                                    <th>備查</th>
                                    <th>申請表id</th>
                                    <th>場所名稱</th>
                                    <th>管理員姓名</th>
                                    <th>帳號</th>
                                    <th>狀態</th>
                                    <th>新增日期</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
        <div class="panel">
        <header class="panel-heading">
            <h3 class="panel-title">審核新AED管理員及場所列表</h3>
        </header>
        <div class="panel-body">
            <ul class="nav nav-pills tab-list" id="tab-list" role="tablist">
                @foreach ($tabOrder as $status)
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#status-{{ $tabKey }}-{{ $status }}"
                            role="tab" data-tabKey={{ $tabKey }} data-tabStatus={{ $status }}><span
                                id="status-{{ $tabKey }}-{{ $status }}-count">{{ $tableTypeName[$status] }}
                                ()
                            </span></a>

                    </li>
                @endforeach
            </ul>
            <div class="tab-content" id="tab-content">
                @foreach ($tabOrder as $status)
                    <div class="tab-pane fade" id="status-{{ $tabKey }}-{{ $status }}" role="tabpanel">
                        <table id="locationApply-{{ $tabKey }}-{{ $status }}"
                            class="table locationApply2 locationApply" data-tabKey={{ $tabKey }}
                            data-tabStatus={{ $status }}>
                            <thead>
                                <tr class="table-head-2">
                                    <th style="width:10%">操作</th>
                                    <th style="width:5%">申請表id</th>
                                    <th style="width:15%">場所名稱</th>
                                    <th style="width:15%">管理員姓名</th>
                                    <th style="width:10%">帳號</th>
                                    <th style="width:10%">狀態</th>
                                    <th style="width:10%">新增日期</th>
                                </tr>
                            </thead>

                        </table>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
        <div class="panel">
        <header class="panel-heading">
            <h3 class="panel-title">審核AED管理員證書</h3>
        </header>
        <div class="panel-body">
            <ul class="nav nav-pills tab-list" id="tab-list" role="tablist">
                @foreach ($tabOrder as $status)
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#status-{{ $tabKey }}-{{ $status }}"
                            role="tab" data-tabKey={{ $tabKey }} data-tabStatus={{ $status }}><span
                                id="status-{{ $tabKey }}-{{ $status }}-count">{{ $tableTypeName[$status] }}
                                ()
                            </span></a>

                    </li>
                @endforeach
            </ul>
            <div class="tab-content" id="tab-content">
                @foreach ($tabOrder as $status)
                    <div class="tab-pane fade" id="status-{{ $tabKey }}-{{ $status }}" role="tabpanel">
                        <table id="CertificateApply-{{ $tabKey }}-{{ $status }}"
                            class="table table2 locationApply2 locationApply" data-tabKey={{ $tabKey }}
                            data-tabStatus={{ $status }}>
                            <thead>
                                <tr class="table-head-2">
                                    <th style="width:10%">操作</th>
                                    <th style="width:5%">申請表id</th>
                                    <th style="width:15%">場所名稱</th>
                                    <th style="width:15%">管理員姓名</th>
                                    <th style="width:10%">帳號</th>
                                    <th style="width:10%">狀態</th>
                                    <th style="width:10%">新增日期</th>
                                </tr>
                            </thead>

                        </table>
                    </div>
                @endforeach
            </div>
            {{-- <table class="table table2 table-hover dataTable table-striped w-full jsgrid" data-tabKey="1">
                <thead>
                <tr>
                    <th>備查</th>
                    <th>申請表id</th>
                    <th>場所名稱</th>
                    <th>管理員姓名</th>
                    <th>帳號</th>
                    <th>狀態</th>
                    <th>新增日期</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table> --}}
        </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 dtParams = {
            "searching": false, // 顯示搜尋
            "ordering": true, // 顯示搜尋
            "bPaginate": true, // 顯示搜尋
            "info": true, // 顯示資訊
            "pageLength": 10,
            autoFill: {
                horizontal: true
            },
            language: {
                "sInfo": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
                "sInfoEmpty": "顯示第 0 至 0 項結果，共 0 項",
                "search": "搜尋:",
                "lengthMenu": "每頁顯示 _MENU_ 筆",
                "zeroRecords": "沒有資料",
                paginate: {
                    first: '«',
                    previous: '‹',
                    next: '›',
                    last: '»'
                },
                aria: {
                    paginate: {
                        first: 'First',
                        previous: 'Previous',
                        next: 'Next',
                        last: 'Last'
                    }
                }
            }
        };

        function getDataTableObj(tabKey, tabStatus, place_city_id, place_town_id, s_keyword, place_main_type,
            place_sub_type_id) {

            if (tabKey == 0) {

                var table = $('#locationApply-' + tabKey + '-' + tabStatus).DataTable({
                    "searching": false, // 顯示搜尋
                    "processing": true,
                    "serverSide": true,
                    "ordering": false,
                    "autoWidth": false,
                    "ajax": {
                        "url": "{{ route('admin.aed_management.aed_administrators.getAedadministratorsList') }}",
                        "data": {
                            "tabKey": tabKey,
                            "tabStatus": tabStatus,
                            "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,
                        },
                    },
                    "destroy": true, //Cannot reinitialise DataTable,解决重新加载表格内容问题
                    "columns": [{
                            "data": "id"
                        }, //第一欄使用data中的name
                        {
                            "data": "id"
                        },
                        {
                            "data": "getPlacesName"
                        },
                        {
                            "data": "name"
                        },
                        {
                            "data": "account"
                        },
                        {
                            "data": "status_chinese"
                        },
                        {
                            "data": "created_at2"
                        },
                    ],
                    createdRow: function(row, data, dataIndex, cells) {
                        var td = $(row).find('td:first-child');
                        var html = '';
                        @can('verifyPlace', App\Models\UserApply::class)
                            if (data.status == 1)
                                html += '<a href="' + data.urls.verify + '?isUser=true&staus=' + data.status +
                                '" class="btn btn-warning m-3"><i class="icon md-spellcheck" aria-hidden="true"></i>備查</a>';
                        @endcan
                        @can('showPlace', App\Models\UserApply::class)
                            html += '<a href="' + data.urls.show + '?isUser=true&staus=' + data.status +
                                '" class="btn btn-dark"><i class="icon md-eye" aria-hidden="true"></i>查看</a>';
                        @endcan

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


            } else if (tabKey == 1) {

                var table = $('#locationApply-' + tabKey + '-' + tabStatus).DataTable({
                    "searching": false, // 顯示搜尋
                    "processing": true,
                    "serverSide": true,
                    "ordering": false,
                    "autoWidth": false,
                    "ajax": {
                        "url": "{{ route('admin.aed_management.places.getNewAedAndPlaceList') }}",
                        "data": {
                            "tabKey": tabKey,
                            "tabStatus": tabStatus,
                            "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,
                        },
                    },
                    "destroy": true, //Cannot reinitialise DataTable,解决重新加载表格内容问题
                    "columns": [{
                            "data": "id"
                        }, //第一欄使用data中的name
                        {
                            "data": "id"
                        },
                        {
                            "data": "places_name2"
                        },
                        {
                            "data": "name"
                        },
                        {
                            "data": "account"
                        },
                        {
                            "data": "status_chinese"
                        },
                        {
                            "data": "created_at2"
                        },
                    ],
                    createdRow: function(row, data, dataIndex, cells) {
                        var td = $(row).find('td:first-child');
                        var html = '';
                        @can('verifyPlace', App\Models\UserApply::class)
                            if (data.status == 1)
                                html += '<a href="' + data.urls.verify + '?isUser=true&staus=' + data.status +
                                '" class="btn btn-warning m-3"><i class="icon md-spellcheck" aria-hidden="true"></i>備查</a>';
                        @endcan
                        @can('showPlace', App\Models\UserApply::class)
                            html += '<a href="' + data.urls.show + '?isUser=true&staus=' + data.status +
                                '" class="btn btn-dark"><i class="icon md-eye" aria-hidden="true"></i>查看</a>';
                        @endcan

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

            } else {
                // AED管理員證書列表
                var table = $('#CertificateApply-' + tabKey + '-' + tabStatus).DataTable({
                    "searching": false, // 顯示搜尋
                    "processing": true,
                    "serverSide": true,
                    "ordering": false,
                    "autoWidth": false,
                    "ajax": {
                        "url": "{{ route('admin.aed_management.aed_administrators.getCertificateApplyList') }}",
                        "data": {
                            "tabKey": tabKey,
                            "tabStatus": tabStatus,
                            "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,
                        },
                    },
                    "destroy": true, //Cannot reinitialise DataTable,解决重新加载表格内容问题
                    "columns": [{
                            "data": "id"
                        }, //第一欄使用data中的name
                        {
                            "data": "id"
                        },
                        {
                            "data": "places_name"
                        },
                        {
                            "data": "name"
                        },
                        {
                            "data": "account"
                        },
                        {
                            "data": "status_chinese"
                        },
                        {
                            "data": "created_at2"
                        },
                    ],
                    createdRow: function(row, data, dataIndex, cells) {
                        var td = $(row).find('td:first-child');
                        var html = '';

                        @can('verify', App\Models\CertificateApply::class)
                            if (data.status == 1)
                                html += '<a href="' + data.verify +
                                '" class="btn btn-warning"><i class="icon md-spellcheck" aria-hidden="true"></i>備查</a>';
                        @endcan
                        @can('show', App\Models\CertificateApply::class)
                            html += ' <a href="' + data.show +
                                '" class="btn btn-dark"><i class="icon md-eye" aria-hidden="true"></i>查看</a>';
                        @endcan

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

            }

        }
        $(document).ready(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();

                    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;
                        }
                        //tab 預設顯示
                        $(".tab-list").each(function() {
                            $(this).find('li').find('a').first().addClass('active show');
                        })
                        $(".tab-content").each(function() {
                            $(this).find('div').first().addClass('active show');
                        })

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

                    var oTable;
                    $(".locationApply2").each(function() {
                        var tabKey = $(this).attr('data-tabKey');
                        var tabStatus = $(this).attr('data-tabStatus');
                        if (tabStatus !=