@extends('system.layouts.app')

@section('title', '區間路段設定')
@section('name', 'interval.equipment_dis')

@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.disCreate', ['location' => $location])
    @include('system.popup.interval.disEdit', ['location' => $location])
    <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>
                        </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;
                        data.dis = 1
                    },
                    '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: [
                    [0, "desc"]
                ],
                // 設定 顯示在Table上的欄位
                columns: [
                    // 格式 data: 後端傳遞過來的 欄位名稱
                    {
                        data: 'id',
                        title: ''
                    },
                    {
                        data: 'start_serialnumber',
                        title: '入口處編號',
                        render: function(data, type, JsonResultRow, meta) {
                            return `${JsonResultRow.start_num}`;
                        }
                    },
                    {
                        data: 'end_serialnumber',
                        title: '出口處編號',
                        render: function(data, type, JsonResultRow, meta) {
                            return `${JsonResultRow.end_num}`;
                        }
                    },
                    {
                        data: 'distance',
                        title: '距離',
                        render: function(data, type, JsonResultRow, meta) {
                            return `${JsonResultRow.distance}`;
                        }
                    },
                    {
                        data: 'limit_speed',
                        title: '限速',
                        render: function(data, type, JsonResultRow, meta) {
                            return `${JsonResultRow.limit_speed}`;
                        }
                    },
                    {
                        data: 'outlaw_speed',
                        title: '取締限速',
                        render: function(data, type, JsonResultRow, meta) {
                            return `${JsonResultRow.outlaw_speed}`;
                        }
                    },
                    {
                        data: 'count_alert',
                        title: '違規數異常警示',
                        render: function(data, type, JsonResultRow, meta) {
                            return `${JsonResultRow.count_alert}`;
                        }
                    },
                    {
                        data: 'speed_alert',
                        title: '超速異常警示',
                        render: function(data, type, JsonResultRow, meta) {
                            return `${JsonResultRow.speed_alert}`;
                        }
                    },
                    {
                        data: 'location_id',
                        title: '地點代碼',
                        render: function(data, type, JsonResultRow, meta) {
                            return `${JsonResultRow.location_id}`;
                        }
                    },
                    {
                        data: 'certificatenumber',
                        title: '合格證書',
                        render: function(data, type, JsonResultRow, meta) {
                            return `${JsonResultRow.certificatenumber}`;
                        }
                    },
                    {
                        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/road/${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