@extends('layout.main')
@section('content')
    <section>

        <div class="container-fluid"><span id="general_result"></span></div>

        <div class="container-fluid mb-3">
            <div class="d-flex flex-row">
                @can('store-user')
                    <button
                        @if (isset($isAllowToCreateUser) && !$isAllowToCreateUser) disabled
                        title="Disabled | Limit Exceeded" @endif
                        id="create_record" class="btn btn-primary fs-7 fw-bolder rounded-1" type="button"
                        data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-plus"></i>
                        {{ __('Add Device') }}
                    </button>
                @endcan
                @can('delete-user')
                    <button type="button" class="btn btn-danger fs-7 mx-2 rounded-1 fw-bolder" name="bulk_delete"
                            id="bulk_delete"><i class="fa fa-minus-circle"></i> {{ __('Bulk delete') }}
                    </button>
                @endcan
            </div>
        </div>

        <div class="table-responsive">
            <table id="device-table" class="table ">
                <thead>
                <tr>
                    <th class="not-exported border bg-light"></th>
                    <th class="border bg-light px-3">{{ __('IP Address') }}</th>
                    <th class="border bg-light px-3">{{ __('Port') }}</th>
                    <th class="border bg-light">{{ trans('Serial Number') }}</th>
                    <th class="border bg-light">{{ trans('Type') }}</th>
                    <th class="border bg-light text-center">{{ trans('Name') }}</th>
                    <th class="border bg-light text-center">{{ trans('file.Company') }}</th>
                    <th class="border bg-light text-center">{{ trans('file.Department') }}</th>
                    <th class="border bg-light text-center">{{ trans('Status') }}</th>
                    <th class="not-exported border bg-light text-center">{{ trans('file.Action') }}</th>
                </tr>
                </thead>
            </table>
        </div>

        <div id="formModal" class="modal fade" role="dialog">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 id="exampleModalLabel" class="modal-title">{{ __('Add Device') }}</h5>
                        <button type="button" data-bs-dismiss="modal" id="close" aria-label="Close"
                                class="btn-close"></button>
                    </div>

                    <div class="modal-body">
                        <span id="form_result"></span>
                        <form method="post" id="sample_form" class="form-horizontal" enctype="multipart/form-data">

                            <fieldset class="scheduler-border">
                                <legend class="scheduler-border">{{ __('Basic Information') }}</legend>
                                @csrf
                                <div class="row w-100">

                                    <div class="col-md-6 form-group">
                                        <label>{{ __('IP Address') }} <span class="text-danger">*</span></label>
                                        <input type="text" name="ip" id="ip"
                                               placeholder="{{ __('IP Address') }}" required class="form-control">
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <label>{{ __('Port') }} <span class="text-danger">*</span></label>
                                        <input type="number" name="port" id="port" placeholder="{{ __('Port') }}"
                                               required class="form-control">
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <label>{{ __('Serial Number') }} <span class="text-danger">*</span></label>
                                        <input type="text" name="sn" id="sn"
                                               placeholder="{{ __('Serial Number') }}" required class="form-control">
                                    </div>

                                    <div class="col-md-6 form-group">
                                        <label>{{ trans('Type') }} <span class="text-danger">*</span></label>
                                        <select name="type" id="type" class="selectpicker form-control"
                                                data-live-search="true" data-live-search-style="contains"
                                                title="{{ __('Selecting', ['key' => trans('Type')]) }}..." required>
                                            <option value="1">{{ trans('GPS') }}</option>
                                            <option value="2">{{ trans('Fingerprint') }}</option>
                                        </select>
                                    </div>

                                    <div class="col-md-6 form-group">
                                        <label>{{ trans('Name') }}</label>
                                        <input type="text" name="name" id="name" placeholder="{{ __('Name') }}"
                                               class="form-control">
                                    </div>


                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>{{trans('file.Company')}}</label>
                                            <select name="company_id" id="company_id" class="form-control selectpicker dynamic"
                                                    data-live-search="true" data-live-search-style="contains"
                                                    data-dependent="department_name"
                                                    title='{{__('Selecting',['key'=>trans('file.Company')])}}...'>
                                                @foreach($companies as $company)
                                                    <option value="{{$company->id}}">{{$company->company_name}}</option>
                                                @endforeach

                                            </select>
                                        </div>
                                    </div>


                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>{{trans('file.Department')}}</label>
                                            <select name="department_id" id="department_id" class="selectpicker form-control"
                                                    data-live-search="true" data-live-search-style="contains"
                                                    title='{{__('Selecting',['key'=>trans('file.Department')])}}...'>
                                            </select>
                                        </div>
                                    </div>


                                    <div class="col-md-6 form-group pt-4">
                                        <div class="form-group custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" name="is_active"
                                                   id="is_active"
                                                   value="1" checked>
                                            <label class="custom-control-label"
                                                   for="is_active">{{ trans('file.Active') }}</label>
                                        </div>
                                    </div>


                                    <div class="registrationFormAlert" id="divCheckPasswordMatch"></div>
                                </div>
                            </fieldset>
                            <div class="col-md-12">
                                <input type="hidden" name="action" id="action"/>
                                <input type="hidden" name="hidden_id" id="hidden_id"/>
                                <button type="submit" name="action_button" id="action_button"
                                        class="btn btn-outline-primary btn-block">{{ __('Add Device') }}</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>

        <div id="editModal" class="modal fade" role="dialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 id="exampleModalLabel" class="modal-title">{{ trans('file.Edit') }}</h5>
                        <button type="button" data-bs-dismiss="modal" id="close" aria-label="Close"
                                class="btn-close"></button>
                    </div>

                    <div class="modal-body">
                        <span id="form_result_edit"></span>
                        <form method="post" id="form_edit" class="form-horizontal" enctype="multipart/form-data">
                            <fieldset class="scheduler-border">
                                <legend class="scheduler-border">{{ __('Basic Information') }}</legend>
                                @csrf
                                <div class="row w-100">

                                    <div class="col-md-6 form-group">
                                        <label>{{ __('IP Address') }} <span class="text-danger">*</span></label>
                                        <input type="text" name="ip" id="ip_edit"
                                               placeholder="{{ __('IP Address') }}" required class="form-control">
                                    </div>

                                    <div class="col-md-6 form-group">
                                        <label>{{ __('Port') }} <span class="text-danger">*</span></label>
                                        <input type="number" name="port" id="port_edit"
                                               placeholder="{{ __('Port') }}" required class="form-control">
                                    </div>

                                    <div class="col-md-6 form-group">
                                        <label>{{ __('Serial Number') }} <span class="text-danger">*</span></label>
                                        <input type="text" name="sn" id="sn_edit"
                                               placeholder="{{ __('Serial Number') }}" required class="form-control">
                                    </div>

                                    <div class="col-md-6 form-group">
                                        <label>{{ trans('Type') }} <span class="text-danger">*</span></label>
                                        <select name="type" id="type_edit" class="selectpicker form-control"
                                                data-live-search="true" data-live-search-style="contains"
                                                title="{{ __('Selecting', ['key' => trans('Type')]) }}..." required>
                                            <option value="1">{{ trans('GPS') }}</option>
                                            <option value="2">{{ trans('Fingerprint') }}</option>
                                        </select>
                                    </div>

                                    <div class="col-md-6 form-group">
                                        <label>{{ trans('Name') }}</label>
                                        <input type="text" name="name" id="name_edit"
                                               placeholder="{{ __('Name') }}" class="form-control">
                                    </div>


                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>{{trans('file.Company')}}</label>
                                            <select name="company_id" id="company_edit" class="form-control selectpicker dynamic"
                                                    data-live-search="true" data-live-search-style="contains"
                                                    data-dependent="department_name"
                                                    title='{{__('Selecting',['key'=>trans('file.Company')])}}...' required>
                                                @foreach($companies as $company)
                                                    <option value="{{$company->id}}">{{$company->company_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>


                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>{{trans('file.Department')}}</label>
                                            <select name="department_id" id="department_edit" class="selectpicker form-control"
                                                    data-live-search="true" data-live-search-style="contains"
                                                    title='{{__('Selecting',['key'=>trans('file.Department')])}}...'>
                                            </select>
                                        </div>
                                    </div>


                                    <div class="col-md-6 form-group">
                                        <div class="form-group custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" name="is_active_edit"
                                                   id="is_active_edit" value="1" checked>
                                            <label class="custom-control-label"
                                                   for="is_active_edit">{{ trans('file.Active') }}</label>
                                        </div>
                                    </div>


                                    <div class="registrationFormAlert" id="divCheckPasswordMatch"></div>
                                </div>
                            </fieldset>
                            <div class="col-md-12">
                                <input type="hidden" name="action" id="action"/>
                                <input type="hidden" name="hidden_id" id="hidden_id_edit"/>
                                <button type="submit" name="action_button" id="action_button"
                                        class="btn btn-outline-primary btn-block">{{ __('file.Edit') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div id="confirmModal" class="modal fade" role="dialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2 class="modal-title">{{ trans('file.Confirmation') }}</h2>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>

                    </div>
                    <div class="modal-body">
                        <h4 class="">{{ __('Are you sure you want to remove this data?') }}</h4>
                    </div>
                    <div class="modal-footer">
                        <button type="button" name="ok_button" id="ok_button"
                                class="btn btn-danger">{{ trans('file.OK') }}</button>
                        <button type="button" class="btn btn-dark"
                                data-bs-dismiss="modal">{{ trans('file.Cancel') }}</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection


@push('scripts')
    <script>
        (function ($) {
            "use strict";

            $(document).ready(function () {
                var table_table = $('#device-table').DataTable({
                    initComplete: function () {
                        this.api().columns([1, 5]).every(function () {
                            var column = this;
                            var select = $('<select><option value=""></option></select>')
                                .appendTo($(column.footer()).empty())
                                .on('change', function () {
                                    var val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val()
                                    );

                                    column
                                        .search(val ? '^' + val + '$' : '', true, false)
                                        .draw();
                                });

                            column.data().unique().sort().each(function (d, j) {
                                select.append('<option value="' + d + '">' + d +
                                    '</option>');
                                $('select').selectpicker('refresh');
                            });
                        });
                    },
                    responsive: true,
                    fixedHeader: {
                        header: true,
                        footer: true
                    },
                    processing: true,
                    serverSide: true,
                    searchDelay: "400",
                    ajax: {
                        url: "{{ route('devices.index') }}",
                    },

                    columns: [{
                        data: 'id',
                        orderable: true,
                        searchable: true
                    },

                        {
                            data: 'ip',
                            name: 'ip'
                        },
                        {
                            data: 'port',
                            name: 'port'
                        },
                        {
                            data: 'sn',
                            name: 'sn',
                        },
                        {
                            data: 'type',
                            name: 'type'
                        },
                        {
                            data: 'name',
                            name: 'name'
                        },
                        {
                            data: 'company',
                            name: 'company'
                        }, {
                            data: 'department',
                            name: 'department'
                        },
                        {
                            data: 'is_active',
                            name: 'is_active',
                            render: function (data) {
                                if (data == '1') {
                                    return "<div class='text-center'><div class = 'text-nowrap  vc border border-success rounded-pill d-inline px-3 py-1 fw-semibold text-success'> <span>•</span> {{ trans('file.Active') }}</div></div>"
                                } else {
                                    return "<div class='text-center'><div class = 'text-nowrap  vc border border-danger rounded-pill d-inline px-3 py-1 fw-semibold text-danger'> <span>•</span> {{ trans('file.Inactive') }}</div></div>"
                                }
                            }
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false
                        }
                    ],

                    "order": [],
                    'language': {
                        select: {
                            rows: {
                                _: "{{ __('file.Selected %d rows') }}",
                                0: "{{ __('file.Click a row to select it') }}",
                                1: "{{ __('file.Selected 1 row') }}"
                            }
                        },
                        'zeroRecords': '{{ __('No data available in table') }}',
                        "infoEmpty": '{{ trans('file.Showing') }} 0 - 0 (0)',
                        "infoFiltered": "",
                        'lengthMenu': '_MENU_ {{ __('records per page') }}',
                        "info": '{{ trans('file.Showing') }} _START_ - _END_ (_TOTAL_)',
                        "search": '{{ trans('file.Search') }}',
                        'paginate': {
                            'previous': '{{ trans('file.Previous') }}',
                            'next': '{{ trans('file.Next') }}'
                        }
                    },
                    'columnDefs': [{
                        "orderable": false,
                        'targets': [0],
                        "className": "text-left"
                    },
                        {
                            'render': function (data, type, row, meta) {
                                if (type == 'display') {
                                    data =
                                        '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label class="text-bold"></label></div>';
                                }

                                return data;
                            },
                            'checkboxes': {
                                'selectRow': true,
                                'selectAllRender': '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label class="text-bold"></label></div>'
                            },
                            'targets': [0]
                        }
                    ],

                    'select': {
                        style: 'multi',
                        selector: 'td:first-child'
                    },
                    'lengthMenu': [
                        [25, 50, 100],
                        [25, 50, 100]
                    ],
                    dom: '<"row"lfB>rtip',
                    buttons: [{
                        extend: 'pdf',
                        text: '<i title="export to pdf" class="fa-regular fa-file-pdf"></i>',
                        exportOptions: {
                            columns: ':visible:Not(.not-exported)',
                            rows: ':visible'
                        },
                    },
                        {
                            extend: 'csv',
                            text: '<i title="export to csv" class="fa-regular fa-file-csv"></i>',
                            exportOptions: {
                                columns: ':visible:Not(.not-exported)',
                                rows: ':visible'
                            },
                        },
                        {
                            extend: 'print',
                            text: '<i title="print" class="fa-regular fa-print"></i>',
                            exportOptions: {
                                columns: ':visible:Not(.not-exported)',
                                rows: ':visible'
                            },
                        },
                        {
                            extend: 'colvis',
                            text: '<i title="column visibility" class="fa-regular fa-eye"></i>',
                            columns: ':gt(0)'
                        },
                    ],
                });
                new $.fn.dataTable.FixedHeader(table_table);
            });

            $('#create_record').on('click', function () {
                $('#action_button').val('{{ trans('file.Add') }}');
                $('#action').val('{{ trans('file.Add') }}');
                $('select').selectpicker('refresh');
                $('#formModal').modal('show');
            });

            $('#sample_form').on('submit', function (event) {
                event.preventDefault();

                $.ajax({
                    url: "{{ route('devices.store') }}",
                    method: "POST",
                    data: new FormData(this),
                    contentType: false,
                    cache: false,
                    processData: false,
                    dataType: "json",
                    success: function (data) {
                        let html = '';
                        if (data.errors) {
                            html = '<ul class="">';
                            for (let count = 0; count < data.errors.length; count++) {
                                html += '<li>' + data.errors[count] + '</li>';
                            }
                            html += '</ul>';
                            displayErrorMessage(html);
                        }
                        if (data.success) {
                            html = '<div>' + data.success + '</div>';
                            $('#sample_form')[0].reset();
                            $('#device-table').DataTable().ajax.reload();
                            $('#formModal').modal('hide');
                            displaySuccessMessage(html);
                        }
                        // $('#form_result').html(html);
                        // $(".alert").slideDown(300).delay(5000).slideUp(300);
                    }
                })
            });

            $('#form_edit').on('submit', function (event) {
                event.preventDefault();
                $.ajax({
                    url: "{{ route('devices.update') }}",
                    method: "POST",
                    data: new FormData(this),
                    contentType: false,
                    cache: false,
                    processData: false,
                    dataType: "json",
                    success: function (data) {
                        let html = '';
                        if (data.errors) {
                            html = '<div class="">';
                            for (let count = 0; count < data.errors.length; count++) {
                                html += '<p>' + data.errors[count] + '</p>';
                            }
                            html += '</div>';
                            displayErrorMessage(html)
                        }
                        if (data.success) {
                            html = '<div>' + data.success + '</div>';
                            setTimeout(function () {
                                $('#editModal').modal('hide');
                                $('#device-table').DataTable().ajax.reload();
                                $('#form_edit')[0].reset();
                                $('.selectpicker').selectpicker('refresh');
                                displaySuccessMessage(html);
                            }, 2000);
                        }
                    }
                });
            });


            $(document).on('click', '.edit', function () {

                let id = $(this).attr('id');
                $('#form_result_edit').html('');

                let target = "{{ url('/devices/edit') }}/" + id;


                $.ajax({
                    url: target,
                    dataType: "json",
                    success: function (html) {
                        $('#ip_edit').val(html.data.ip);
                        $('#port_edit').val(html.data.port);
                        $('#sn_edit').val(html.data.sn);
                        $('#type_edit').val(html.data.type);
                        $('#company_edit').val(html.data.company);
                        $('#name_edit').val(html.data.name);
                        $('#type_edit').selectpicker('refresh');
                        $('#company_edit').selectpicker('refresh');


                        let value = $("#company_edit").val();
                        let dependent = $("#company_edit").data('dependent');
                        let _token = $('input[name="_token"]').val();
                        $.ajax({
                            url: "{{ route('dynamic_department') }}",
                            method: "POST",
                            data: {value: value, _token: _token, dependent: dependent},
                            success: function (result) {
                                $('#department_edit').empty().append(result);
                                $('#department_edit').selectpicker('refresh');
                                $('#department_edit').selectpicker('val', html.data.department);
                                $('#department_edit').selectpicker('refresh');

                                // $('select').selectpicker("destroy");
                                // $('#department_edit').html(result);
                                // $('select').selectpicker();

                            }
                        });


                        if (html.data.is_active == 1) {
                            $('#is_active_edit').prop('checked', true);
                        } else {
                            $('#is_active_edit').prop('checked', false);
                        }

                        $('#hidden_id_edit').val(html.data.id);
                        $('#action_button_edit').val('{{ trans('file.Edit') }}');
                        $('#action_edit').val('{{ trans('file.Edit') }}');
                        $('#editModal').modal('show');
                    }
                })

            });

            let lid;

            $(document).on('click', '.delete', function () {
                lid = $(this).attr('id');
                $('#confirmModal').modal('show');
                $('.modal-title').text('{{ __('DELETE Record') }}');
                $('#ok_button').text('{{ trans('file.OK') }}');
            });

            $(document).on('click', '#bulk_delete', function () {
                let table = $('#device-table').DataTable();
                let id = [];
                id = table.rows({
                    selected: true
                }).ids().toArray();
                if (id.length > 0) {
                    if (confirm('{{ __('Delete Selection', ['key' => trans('file.User')]) }}')) {
                        $.ajax({
                            url: '{{ route('devices.bulkDelete') }}',
                            method: 'POST',
                            data: {
                                deviceIdArray: id
                            },
                            success: function (data) {
                                let html;
                                if (data.success) {
                                    html = '<div class="">' + data.success +
                                        '</div>';
                                    displaySuccessMessage(html);
                                }
                                if (data.error) {
                                    html = '<div class="">' + data.error +
                                        '</div>';
                                    displayErrorMessage(html);
                                }
                                let table = $('#device-table').DataTable();
                                table.ajax.reload();
                                table.rows('.selected').deselect();
                                if (data.error) {
                                    html = '<div class="">' + data.error +
                                        '</div>';
                                    displayErrorMessage(html);
                                }
                            }

                        });
                    }
                } else {
                    alert('{{ __('Please select atleast one checkbox') }}');
                }


            });


            $('.close').on('click', function () {
                $('#form_edit')[0].reset();
                $('#device-table').DataTable().ajax.reload();
                $('#sample_form')[0].reset();
            });

            $('#ok_button').on('click', function () {
                let target = "{{ url('/devices/delete') }}/" + lid;
                $.ajax({
                    url: target,
                    beforeSend: function () {
                        $('#ok_button').text('{{ trans('file.Deleting...') }}');
                    },
                    success: function (data) {
                        let html;
                        if (data.success) {
                            html = '<div class="">' + data.success + '</div>';
                            displaySuccessMessage(html);
                        }
                        if (data.error) {
                            html = '<div class="">' + data.error + '</div>';
                            displayErrorMessage(html);
                        }
                        setTimeout(function () {
                            $('#confirmModal').modal('hide');
                            $('#device-table').DataTable().ajax.reload();
                            displaySuccessMessage(html)
                        }, 2000);
                    }
                })
            });


            $('#confirm_pass').on('input', function () {

                if ($('input[name="password"]').val() != $('input[name="password_confirmation"]').val())
                    $("#divCheckPasswordMatch").html('{{ __('Password does not match! please type again') }}');
                else
                    $("#divCheckPasswordMatch").html('{{ __('Password matches!') }}');
                ``

            });

            $('#toggle').on('click', function (e) {
                e.preventDefault();
                $('#show_hide').toggle();
            });

            {{-- Restart --}}
            $(document).on("click", ".restart_device", function () {
                let device_id = $(this).attr("id");
                if (confirm('{{__("Are you sure you want to restart the device?")}}')) {
                    $.ajax({
                        url: "{{ route('devices.restartDevice') }}",
                        method: "POST",
                        data: {
                            device_id: device_id,
                        },
                        success: function (data) {
                            var html = "";
                            html = '<div class="">' + data.success + "</div>";
                            displaySuccessMessage(html);
                            $("#employee_devices-table").DataTable().ajax.reload();
                        },
                    });
                }
            });


            $('.dynamic').change(function () {
                if ($(this).val() !== '') {
                    let value = $(this).val();
                    let dependent = $(this).data('dependent');
                    let _token = $('input[name="_token"]').val();
                    $.ajax({
                        url: "{{ route('dynamic_department') }}",
                        method: "POST",
                        data: {value: value, _token: _token, dependent: dependent},
                        success: function (result) {

                            $('select').selectpicker("destroy");
                            $('#department_edit').html(result);
                            $('#department_id').html(result);
                            $('select').selectpicker();

                        }
                    });
                }
            });

        })(jQuery);
    </script>
@endpush