@extends('admins.layouts.main')
@section('content')
    @if($import['success'])
    <div class="form-group m-5">
            <div class="alert alert-success">
                <ul style="color:#000000;">
                    <span>設備匯入成功</span>
                    <span>共成功匯入： {{$import['successCount']}} 筆</span>
                </ul>
            </div>
    </div>
    @endif
    @include('errors')
    <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="s_supplier_id" class="form-control" name="s_supplier_id">
                                    <option value="all" selected="">全部</option>
                                    @foreach($suppliers as $k => $v)
                                        <option value="{{$v->id}}" {{ $sSupplierId == $v->id ? 'selected' : null }} >{{$v->name}}</option>
                                    @endforeach
                                </select>
                                {{--                            </div>--}}
                            </div>
                            <div class="col-md-4">
                                {{--                            <div class="example-wrap">--}}
                                <select id="s_aed_model_id" class="form-control" name="s_aed_model_id">
                                    <option supplierId="all" value="all" selected="">全部</option>
                                    @foreach($adeModels as $k => $v)
                                        <option supplierId="{{ $v->supplier_id }}" value="{{$v->id}}" {{ $sAedModelId == $v->id ? 'selected' : null }}>{{$v->name}}</option>
                                    @endforeach
                                </select>
                                {{--                            </div>--}}
                            </div>
                        </div>
                        <div class="form-group row" style="display: none;">
                            <label class="col-lg-4 col-form-label ">序號：</label>
                            <div class="col-md-8 ">
                                <input type="text" class="form-control" id="s_serial_number" name="s_serial_number"
                                       placeholder="" autocomplete="off" value="{{$sSerialNumber}}"
                                />
                            </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-8 ">
                                <input type="text" class="form-control" name="s_keyword" id="s_keyword"
                                       placeholder="置放場所、AED位置、id" autocomplete="off" value="{{$sKeyword}}"
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    
        <div class="panel">
        <header class="panel-heading">
            <h3 class="panel-title">登錄申請</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>編輯</th>
                            <th>id</th>
                            <th>AED型號</th>
                            <th>AED廠牌</th>
                            <th>狀態</th>
                            <th>新增日期</th>
                        </tr>
                        </thead>
                        <tbody>
                            
                                <tr>
                                    <td class="text-middle">
                                        
                                        
                                    </td>
                                    <td class="text-middle"></td>
                                    <td class="text-middle"></td>
                                    <td class="text-middle"></td>
                                    <td class="text-middle"></td>
                                    <td class="text-middle"></td>
                                </tr>
                               
                           
                        </tbody>
                    </table>
                </div>
                @endforeach
        </div>
    </div>
    </div>

        <div class="panel">
        <header class="panel-heading">
            <h3 class="panel-title">廢除申請</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>編輯</th>
                            <th>id</th>
                            <th>AED型號</th>
                            <th>AED廠牌</th>
                            <th>狀態</th>
                            <th>新增日期</th>
                        </tr>
                        </thead>
                        <tbody>
                            
                                <tr>
                                    <td class="text-middle">
                                        
                                        
                                    </td>
                                    <td class="text-middle"></td>
                                    <td class="text-middle"></td>
                                    <td class="text-middle"></td>
                                    <td class="text-middle"></td>
                                    <td class="text-middle"></td>
                                </tr>
                               
                           
                        </tbody>
                    </table>
                </div>
                @endforeach
        </div>
    </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="importModal" tabindex="9" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">匯入設備</h4>
                </div>
                <div class="modal-body">
                    <form id="importForm" action="{{$importForms['action']}}" method="post" class="form-horizontal" enctype="multipart/form-data">
                        @csrf
                        <input name="file" type="file">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button id="importFormBtn" type="button" class="btn btn-primary" data-dismiss="modal">匯入</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        var place_city_id = '';
        var place_town_id = '';
        
        var place_main_type = '';
        var place_sub_type_id = '';

        var tabKey = $(this).attr('data-tabKey');
        var s_supplier_id = $('#s_supplier_id').val();
        var s_aed_model_id = $('#s_aed_model_id').val();
        var s_serial_number = $('#s_serial_number').val();
        var s_keyword = $('#s_keyword').val();

    function getDataTableObj(tabKey,tabStatus) {
        
            var table=$('#locationApply-' + tabKey + '-' + tabStatus).DataTable({
                    "searching": false, // 顯示搜尋
                    "processing": true,
                    "serverSide": true,
                    "ordering": false,
                    "autoWidth": false,
                    "ajax": {
                        "url": "{{route('admin.aed_management.aedModels.getAedModelCourseList')}}",
                        "data": {
                            "tabKey": tabKey,
                            "tabStatus": tabStatus,
                            "s_aed_model_id": s_aed_model_id,
                            "s_supplier_id": s_supplier_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": "aed_model_name" },
                        { "data": "supplier_name" },
                        { "data": "status_chinese" },
                        { "data": "created_at" },
                    ],
                    createdRow:function(row,data,dataIndex,cells){
                        
                        var td = $(row).find('td:first-child');
                            var html = '';
                           
                            @can('edit', App\Models\AedModelCourse::class)
                                if(data.status==1){
                                    html += '<a href="' + data.urls_edit + '" class="btn btn-warning m-3"><i class="icon md-spellcheck" aria-hidden="true"></i>備查</a>';
                                }
                            @endcan

                            @can('show', App\Models\AedModelCourse::class)
                                html += '<a href="' + data.urls_show + '" class="btn btn-dark m-3"><i class="icon md-edit" 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 () {
            
            

            $("select[name=s_supplier_id]").change(function () {
                var supplier_id = $(this).val();
                $("select[name=s_aed_model_id] option").hide();
                $("select[name=s_aed_model_id] option[supplierId=all]").show();
                $("select[name=s_aed_model_id] option[supplierId=" + supplier_id + "]").show();
                $("select[name=s_aed_model_id] option[supplierId=all]:first").prop('selected', true);
                $('select[name=s_aed_model_id]').selectpicker('refresh');
                $("select[name=s_aed_model_id]").trigger("change");
            });

            //移除
            $('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();
                        return false;
                    }

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

                }, 'json');


                return false;
            });
            //移除
            $('body').on('click', '.model_delete_button', function(){

            if(confirm('確定送出刪除申請?') === false){
                return false;
            }

            let parameters = {
                _method:'delete'
            }

            let thisObjectTr = $(this).closest('tr');
            let id= $(this).attr('id');
            showLoading();
           
            $.post($(this).data('url'), parameters, function(response){
                hideLoading();

                if(response.status){
                    notie.alert({type: 'success', text: response.message, time: 2});
                    $("#"+id).remove();
                    
                    return false;
                }

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

            }, 'json');


            return false;
            });
            


            $('#importFormBtn').click(function(){
                $("#importForm").submit();
            });


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