@extends('system.layouts.app')

@section('title', '區間設備設定')
@section('name', 'interval.equipment')

@section('css')
    @parent
    <link rel="stylesheet" href="{{ asset('css/v2/datatables.min.css') }}">
    <style>
        label>.form-select {
            display: inline;
            width: auto;
        }
    </style>
@stop

@section('content')
    <div class="container-fluid mt-2" style="min-height:calc(100vh-60px) !important">
        @include('system.popup.interval.unitCreate')
        @include('system.popup.interval.deviceEdit', ['custodyunit' => $custodyunit, 'assetownership' => $assetownership])
        @include('system.popup.interval.deviceCreate', ['custodyunit' => $custodyunit, 'assetownership' => $assetownership])
        <div class="col-12 mt-3 d-flex justify-content-between">
            <h2 class="title">區間設備設定 </h2>
            @can('itl-device-setting')
                <button onclick="EquipmentCreatePopUp()" type="button" href="#" class="btn btn-sm btn-primary">新增設備</button>
            @endcan
        </div>
        <div>
            <!-- Date Filter -->
            <div class="row justify-content-center">
                <div class="col-12">
                    <table id="equipmentTable" class="table table-striped table-bordered" style="width:100%">
                        <thead>
                            <tr>
                                <th width='50'>選擇</th>
                                <th width='80'>廠牌</th>
                                <th width='90'>型號</th>
                                <th width='120'>攝影機器號</th>
                                <th width='120'>設備編號</th>
                                <th width='100'>地點編號</th>
                                <th>設置地點</th>
                                <th width='200'>保管單位</th>
                                <th class="text-center" width='200'>財產所屬單位</th>
                                <th width='80'>編輯</th>
                            </tr>
                        </thead>
                        <tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('js')
    @parent
    <script src="{{ asset('js/v2/datatables.min.js') }}"></script>

    <script>
        let equipmentTable = $('#equipmentTable')
        let lastModal = null;
        // DataTable 初始化
        $(document).ready(function() {
            $.fn.dataTableExt.sErrMode = 'throw';

            equipmentTable = $('#equipmentTable').DataTable({
                "dom": "<'row'<'d-flex justify-content-start mt-2 mb-2' lf>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-12'<'d-flex justify-content-between' ip>>>",
                // 語系設定 UI介面中文化
                "language": {
                    "processing": "處理中...",
                    "loadingRecords": "載入中...",
                    "lengthMenu": "顯示 _MENU_ 項結果",
                    "zeroRecords": "沒有符合的結果",
                    "info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
                    "infoEmpty": "顯示第 0 至 0 項結果，共 0 項",
                    "infoFiltered": "(從 _MAX_ 項結果中過濾)",
                    "infoPostFix": "",
                    "search": "搜尋:",
                    "paginate": {
                        "first": "第一頁",
                        "previous": "上一頁",
                        "next": "下一頁",
                        "last": "最後一頁"
                    },
                    "aria": {
                        "sortAscending": ": 升冪排列",
                        "sortDescending": ": 降冪排列"
                    }
                },
                // 搜尋欄位 是否顯示
                searching: false,
                // searching: true,
                // 處理中 是否顯示
                processing: true,
                //
                serverSide: true,
                // Ajax 取資料
                ajax: {
                    //processcheckStatus =0 未審
                    'url': "{{ route('api.itl.device.index') }}",
                    'data': function(data) {
                        // data.processcheckStatus = 0;
                    },
                    'error': function() {
                        // equipmentTable.draw();
                    },
                },
                // 設定不提供排序條件的欄位(例如圖片)
                columnDefs: [{
                        orderable: false,
                        targets: [4, 5, 6]
                    }, {
                        visible: false,
                        targets: []
                    },
                    {
                        className: "dt-center",
                        targets: [0, 1, 2, 3, 4, 5, 6]
                    }
                ],
                order: [
                    [1, "desc"]
                ],
                // 設定 顯示在Table上的欄位
                columns: [
                    // 格式 data: 後端傳遞過來的 欄位名稱
                    {
                        data: 'id'
                    },
                    {
                        data: 'brand'
                    },
                    {
                        data: 'model'
                    },
                    {
                        data: 'videonumber'
                    },
                    {
                        data: 'serialnumber'
                    },
                    // 特殊格式 除了單純的資料 可能還需要其他HTML TAG去搭配使用 例如img video 之類的
                    {
                        data: 'locationid',
                        render: function(data, type, JsonResultRow, meta) {
                            if (JsonResultRow.locationid == null) {
                                return `N/A`;
                            } else {
                                return `${JsonResultRow.locationid}`;
                            }
                        },
                    },
                    {
                        data: 'location',
                        render: function(data, type, JsonResultRow, meta) {
                            return `${JsonResultRow.location}`;
                        },
                    },
                    {
                        data: 'custodyunit_id',
                        render: function(data, type, JsonResultRow, meta) {
                            return `${JsonResultRow.custodyunit_name}`;
                        },
                    },
                    {
                        data: 'assetownership_id',
                        render: function(data, type, JsonResultRow, meta) {
                            return `${JsonResultRow.assetownership_name}`;
                        },
                    },
                    {
                        data: 'id',
                        "render": function(data, type, JsonResultRow, meta) {
                            let editBtn = '';
                            let deleteBtn = '';

                            @can('itl-device-setting')
                                editBtn =
                                    `<button onclick="EquipmentEditPopUp(${JsonResultRow.id})" type="button" href="#" class="btn btn-sm btn-primary">編輯</button>`;
                            @endcan

                            @can('itl-device-setting')
                                deleteBtn =
                                    `<button type="button" onclick="EquipmentDelete(${JsonResultRow.id})" href="#" class="btn btn-sm btn-danger">刪除</button>`;
                            @endcan
                            return `${editBtn} ${deleteBtn}`;
                        },
                    },
                ],
                initComplete: function() {
                    $('.selectpicker').selectpicker();

                },
                drawCallback: function(settings) {
                    $('.selectpicker').selectpicker();
                }
                // stripeClasses:['striped-odd','striped-even']
            });

        });
        function EquipmentDelete(id){
            Swal.fire({
                title: '確定要刪除此設備嗎?',
                text: "刪除後將無法復原此設備資料!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#8c8c8c',
                confirmButtonText: '刪除',
                cancelButtonText: '取消'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: "DELETE",
                        url: `/api/itl/device/${id}`,
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    title: '刪除成功!',
                                    icon: 'success',
                                    confirmButtonColor: '#8c8c8c',
                                    confirmButtonText: '確定'
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        equipmentTable.draw();
                                    }
                                })
                            } else {
                                Swal.fire({
                                    title: '刪除失敗!',
                                    icon: 'error',
                                    confirmButtonColor: '#8c8c8c',
                                    confirmButtonText: '確定'
                                })
                            }
                        }
                    });
                }
            })

        }
    </script>
@stop