@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">
                <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" id="s_keyword" class="form-control" name="s_keyword"
                                   placeholder="" 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">
        @foreach($tableTypeName as $tabKey => $tabName)
         @if($tabKey==8) 
            @continue;
            {{--隱藏復原申請區塊 併入維修申請區塊--}}
         @endif
            <div class="col-lg-12">
                <div class="panel panel-bordered">
                    <div class="panel-body">

                        <h3 class="panel-title">{{$tabName}}</h3>
                        <ul class="nav nav-pills tab-list" id="tab-list" role="tablist">
                            @foreach($tabOrder[$tabKey] as $status)
                                <li class="nav-item">
{{--                                    <a class="nav-link" id="status-{{$tabKey}}-{{ $status }}-count" data-toggle="tab" href="#status-{{$tabKey}}-{{ $status }}"--}}
{{--                                       role="tab">{{ $aedLocationMap[$status] }} {{ " (".sizeof($aedLocationByStatus[$tabKey][$status]).")" }}</a>--}}
                                    <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" >{{ $aedLocationMap[$status] }} {{ " (".($aedLocationByStatusCount[$tabKey][$status] ?? 0).")" }}</span></a>
                                </li>
                            @endforeach
                        </ul>
                        <div class="tab-content" id="tab-content">
                            @foreach($tabOrder[$tabKey] as $status)
                                <div class="tab-pane fade" id="status-{{$tabKey}}-{{ $status }}" role="tabpanel">
                                    <table id="locationApply-{{$tabKey}}-{{ $status }}" class="table 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%">AED位置</th>
                                            <th style="width:10%">狀態</th>
                                            <th style="width:10%">備註</th>
                                            <th style="width:10%">新增時間</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                            
                                        </tbody>
                                    </table>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </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 reviewableStatusMap = null
        function getDataTable(tabKey,tabStatus) {
            
            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 table=$('#locationApply-' + tabKey + '-' + tabStatus).DataTable({
                    "searching": false, // 顯示搜尋
                    "processing": true,
                    "serverSide": true,
                    "ordering": false,
                    "autoWidth": false,
                    "destroy": true, //Cannot reinitialise DataTable,解决重新加载表格内容问题
                    "ajax": {
                        "url": "{{route('admin.aed_management.unreviewed_devices.getReviewLocationList')}}",
                        "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,
                        },
                    },
                    "columns": [
                        { "data": "place_id" }, //第一欄使用data中的name
                        { "data": "place_id" },
                        { "data": "place_name" },
                        { "data": "placement" },
                        { "data": "statusName" },
                        { "data": "memo" },
                        { "data": "created_at" },
                    ],
                    createdRow:function(row,data,dataIndex,cells){
                        var td = $(row).find('td:first-child');
                        var html = '';

                        @can('verify', App\Models\AedLocationApply::class)
                            if(reviewableStatusMap.indexOf(data.status) > -1){
                                html += '<a href="' + data.urls_verify + '" class="btn btn-warning m-3"><i class="icon md-spellcheck" aria-hidden="true"></i>備查</a>';
                            }
                        @endcan

                        @can('show', App\Models\AedLocationApply::class)
                            html += '<a href="' + data.urls_show + '" class="btn btn-dark m-3"><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 oTable ;
            //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');
            })


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

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