@extends('Layouts.main')
@section('container')
    <div class="row">
        <div class="col-12">
            <table id="dt-table" class="table table-bordered table-striped" width="100%">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Nama</th>
                        <th>Username</th>
                        <th>Role</th>
                        <th>Posisi</th>
                        <th>Aktif</th>
                        <th>Verifikator</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <div class="modal fade" id="modal-be-verifikator">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">

                </div>
                <div class="modal-footer justify-content-end">
                    <input type="hidden" id="mIdInput">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="mKembaliBtn">Kembali</button>
                    <button class="btn btn-primary" id="mSubmitBtn">Simpan</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            listData();

            // Verifikator checkbox klik
            $('#dt-table').on('click', '.be-verifikator', function() {
                var id = $(this).data('id');
                $('#mIdInput').val(id)
                if ($(this).is(":checked")) {
                    $('#modal-be-verifikator .modal-body').html(
                        'Jadikan pengguna ini sebagai verifikator?')

                    $('#mSubmitBtn').removeClass('btn-danger').addClass('btn-primary').text('Simpan')
                } else {
                    $('#mSubmitBtn').removeClass('btn-primary').addClass('btn-danger').text('Nonaktifkan')
                    $('#modal-be-verifikator .modal-body').html(
                        'Anda akan menghapus status verifikator kepada pengguna ini?')
                }
                $('#modal-be-verifikator').modal({
                    backdrop: false
                })

                $('#mSubmitBtn').removeAttr('disabled')
                $('#modal-be-verifikator').modal('show')
            })

            // Modal tombol kembali
            $('#mKembaliBtn').on('click', function() {
                var id = $(this).parents().eq(0).find('#mIdInput').val()
                $('.be-verifikator[data-id="' + id + '"]').trigger('click')
            })

            // Modal tombol simpan
            $('#mSubmitBtn').on('click', function() {

                var id = $(this).parents().eq(0).find('#mIdInput').val()
                var jenis = $(this).text()

                $(this).attr('disabled', '')
                $(this).text('Loading...')
                $.ajax({
                    url: "{{ url('/user/verifikator') }}",
                    type: 'post',
                    data: {
                        jenis: jenis,
                        id: id
                    },
                    success: function(data) {
                        $('.alert-jpost').html(data.status)
                        $('.alert-jpost').removeClass('hide-this')
                        setTimeout(function() {
                            $('.alert-jpost').addClass('hide-this')
                        }, 2000);
                    }
                })
                $('#modal-be-verifikator').modal('hide')

            })

        });

        function listData() {

            var table = $('#dt-table').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                destroy: true,
                language: {
                    search: "",
                    searchPlaceholder: "Cari data"
                },
                dom: "<'row'<'col-sm-12 col-md-6 d-flex justify-content-start pl-0'f><'col-sm-12 col-md-6 d-flex justify-content-end'B>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",

                buttons: {
                    dom: {
                        button: {
                            className: ''
                        }
                    },
                    buttons: [{
                        text: '<i class="fas fa-plus fa-sm mr-2"></i>Tambah',
                        titleAttr: 'Tambah Data',
                        className: 'btn btn-sm btn-primary',
                        action: function() {
                            window.location.href = "{{ url('/user/form') }}"
                        }

                    }]
                },
                ajax: {
                    url: "{{ url('/user/list') }}",
                    type: "POST"
                },
                order: [
                    [1, 'asc']
                ],
                columns: [{
                        data: 'DT_RowIndex'
                    },
                    {
                        data: 'name'
                    },
                    {
                        data: 'username'
                    },
                    {
                        data: 'role'
                    },
                    {
                        data: 'kode',
                        name: 'p.kode',
                        className: 'dt-body-center',
                    },
                    {
                        data: 'active',
                        className: 'dt-body-center',
                    },
                    {
                        data: 'verifikator',
                        className: 'dt-body-center',
                    },
                    {
                        data: 'action',
                        className: 'dt-body-center',
                        orderable: false,
                        searchable: false
                    },
                ],
                columnDefs: [{
                    searchable: false,
                    sortable: false,
                    targets: [0]
                }, {
                    className: 'dt-head-center',
                    targets: [0, 1, 2, 3, 4, 5]
                }]
            });

            $('#dt-table_wrapper .dt-buttons').removeClass('btn-group')
            $('#dt-table_filter, #dt-table_filter label,#dt-table_filter input').css({
                'width': '100%',
                'display': 'inline-block'
            });
        }

        function validateForm() {

            function hasExtension(inputID, exts) {
                var fileName = document.getElementById(inputID).value;
                return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$')).test(fileName);
            }

            if (!hasExtension('import', ['.xlsx'])) {
                alert("Hanya file excel yang diizinkan.");
                return false;
            }
        }
    </script>
@endsection