@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">
                            <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">
            <div class="col-lg-12 p-4">
                @can('create', App\Models\Aed::class)
                <a href="{{ $urls['create'] }}" class="btn btn-primary"><i class="icon md-plus" aria-hidden="true"></i>新增AED</a>
                <button type="button" class="btn btn-primary waves-effect waves-classic" onclick="$('#importModal').modal('show');"><i class="icon md-plus"aria-hidden="true"></i>
                    批次匯入
                </button>
                <a href="{{ url('importTemplate/aed.xlsx') }}" class="btn btn-outline-danger" download="匯入設備範例.xlsx">下載匯入設備範例</a>
                    <a href="{{ $urls['importAedList'] }}" class="btn btn-primary"><i class="icon fa-list" aria-hidden="true"></i>匯入紀錄</a>
                @endcan
            </div>
            <table class="table table-hover dataTable table-striped w-full jsgrid" data-tabKey="1">
                <thead>
                    <tr>
                        <th>編輯</th>
                        <th>id</th>
                        <th>AED型號</th>
                        <th>AED序號</th>
                        <th>AED廠牌</th>
                        <th>置放場所</th>
                        <th>AED位置</th>
                        <th>新增日期</th>
                    </tr>
                </thead>
                </tbody>
            </table>
        </div>
    </div>
    @if(in_array($user->user_role_id,[1,10,11]))
    <div class="panel">
        <header class="panel-heading">
            <h3 class="panel-title">AED型號管理列表</h3>
        </header>
        <div class="panel-body">
            <div class="col-lg-12 p-4">
                @can('create', App\Models\Aed::class)
                <a href="{{ $urls['createAedModel'] }}" class="btn btn-primary"><i class="icon md-plus" aria-hidden="true"></i>新型號</a>
                @endcan
            </div>
            <table id='DataTables_Table_1' class="table table-hover dataTable table-striped w-full jsgrid" data-tabKey="2">
                <thead>
                    <tr>
                        <th>編輯</th>
                        <th>id</th>
                        <th>AED型號</th>
                        <th>AED廠牌</th>
                        <th>新增日期</th>
                    </tr>
                </thead>

                <tbody>

                </tbody>
            </table>
        </div>
    </div>
    <div class="panel">
        <header class="panel-heading">
            <h3 class="panel-title">AED型號申請列表</h3>
        </header>
        <div class="panel-body">
        
            <table class="table table-hover dataTable table-striped w-full jsgrid" data-tabKey="3">
                <thead>
                    <tr>
                        <th>編輯</th>
                        <th>id</th>
                        <th>AED型號</th>
                        <th>AED廠牌</th>
                        <th>申請者</th>
                        <th>申請類型</th>
                        <th>狀態</th>
                        <th>新增日期</th>
                    </tr>
                </thead>

                <tbody>

                </tbody>
            </table>
        </div>
    </div>
    @endif
    <!-- 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>
            function getDataTableObj(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();
                    
                    $('#DataTables_Table_1').DataTable( {
                        "searching": false, // 顯示搜尋
                        "processing": true,
                        "serverSide": true,
                        "ordering": false,
                        "autoWidth": false,
                        "ajax": {
                            "url": "{{route('admin.aed_management.aeds.getAedSerialModelsList')}}",
                            "data": {
                                "s_supplier_id": s_supplier_id,
                                "s_aed_model_id": s_aed_model_id,
                                "s_serial_number": s_serial_number,
                                "s_keyword": s_keyword,
                                "tabKey": tabKey ,
                            },
                        },
                        "columns": [
                            { "data": "id" }, //第一欄使用data中的name
                            { "data": "id" },
                            { "data": "aed_model_name" },
                            { "data": "supplier_name" },
                            { "data": "created_at" },
                        ],
                        createdRow:function(row,data,dataIndex,cells){
                            var td = $(row).find('td:first-child');
                            var html = '';
                         

                            @can('show', App\Models\Aed::class)
                                html += '<a href="' + data.urls_show + '" class="btn btn-dark m-3"><i class="icon md-eye" aria-hidden="true"></i>查看</a>';
                            @endcan

                            @can('delete', App\Models\Aed::class)
                                if(empty(data.urls_delete) === false){
                                    html += `<button id="model_delete_button${data.id}" data-url="${data.urls_delete}" class="btn btn-danger m-3 model_delete_button"><i class="icon md-delete" aria-hidden="true"></i>刪除申請</button>`;
                                }
                            @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'
                                }
                            }
                        }
                    } );
            }
        $(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();
            });

            $(".dataTable").each(function(){
                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();
                if(tabKey == 1){   
                    $(this).DataTable( {
                        "searching": false, // 顯示搜尋
                        "processing": true,
                        "serverSide": true,
                        "ordering": false,
                        "autoWidth": false,
                        "ajax": {
                            "url": "{{route('admin.aed_management.aeds.getAedDeviceList')}}",
                            "data": {
                                "s_supplier_id": s_supplier_id,
                                "s_aed_model_id": s_aed_model_id,
                                "s_serial_number": s_serial_number,
                                "s_keyword": s_keyword,
                            },
                        },
                        "columns": [
                            { "data": "id" }, //第一欄使用data中的name
                            { "data": "id" },
                            { "data": "aed_model_name" },
                            { "data": "serial_number" },
                            { "data": "supplier_name" },
                            { "data": "place" },
                            { "data": "placement" },
                            { "data": "created_at" },
                        ],
                        createdRow:function(row,data,dataIndex,cells){
                            var td = $(row).find('td:first-child');
                            var html = '';
                            @can('edit', App\Models\Aed::class)
                                html += '<a href="' + data.urls_edit + '" class="btn btn-success m-3"><i class="icon md-edit" aria-hidden="true"></i>編輯</a>';
                            @endcan

                            @can('show', App\Models\Aed::class)
                                html += '<a href="' + data.urls_show + '" class="btn btn-dark m-3"><i class="icon md-eye" aria-hidden="true"></i>查看</a>';
                            @endcan

                            @can('delete', App\Models\Aed::class)
                                if(empty(data.urls_delete) === false){
                                    html += `<button data-url="${data.urls_delete}" class="btn btn-danger m-3 delete_button"><i class="icon md-delete" aria-hidden="true"></i>刪除</button>`;
                                }
                            @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'
                                }
                            }
                        }
                    } );
            }else if(tabKey == 2){ 
                getDataTableObj(tabKey);
            }else if(tabKey == 3){ 
                $(this).DataTable( {
                        "searching": false, // 顯示搜尋
                        "processing": true,
                        "serverSide": true,
                        "ordering": false,
                        "autoWidth": false,
                        "ajax": {
                            "url": "{{route('admin.aed_management.aeds.getAedSerialModelsList')}}",
                            "data": {
                                "s_supplier_id": s_supplier_id,
                                "s_aed_model_id": s_aed_model_id,
                                "s_serial_number": s_serial_number,
                                "s_keyword": s_keyword,
                                "tabKey": tabKey ,
                            },
                        },
                        "columns": [
                            { "data": "id" }, //第一欄使用data中的name
                            { "data": "id" },
                            { "data": "aed_model_name" },
                            { "data": "supplier_name" },
                            { "data": "userName" },
                            { "data": "applyType" },
                            { "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\Aed::class)
                                if(data.status==3&&data.applyStatus==0){
                                    html += '<a href="' + data.urls_edit + '" class="btn btn-success m-3"><i class="icon md-edit" aria-hidden="true"></i>編輯</a>';
                                }
                            @endcan

                            @can('show', App\Models\Aed::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'
                                }
                            }
                        }
                    } );
            }  
            })

        });
    </script>
@endsection