@extends('layout_dashboard')
@section('title', $title ?? '')
@section('content')
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper">
        <div class="content-body">
            <!-- Zero configuration table -->
            <section id="">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">{{ $title }}</h4>
                                <div>
                                    <button type="button" class="float-right btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#modal_form_input"><i class="feather icon-plus"></i> Baru</button>
                                </div>
                            </div>
                            <div class="card-content">
                                <div class="card-body card-dashboard">
                                    <div class="table-responsive">
                                        <table id="datatable" style="width: 100%;" class="table nowrap">
                                            <thead class="table-light">
                                                <tr>
                                                    <th width="20px">No</th>
                                                    <th>NIK</th>
                                                    <th>Nama</th>
                                                    <th>Email</th>
                                                    <th>Regional Entity</th>
                                                    <th>Hak Akses</th>
                                                    <th>Jabatan</th>
                                                    <th>Verifikasi</th>
                                                    <th width="50px">Pilihan</th>
                                                </tr>
                                            </thead>
                                            <tbody class="table-border-bottom-0">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!--/ Zero configuration table -->
        </div>
    </div>
</div>

<!-- Modal Input -->
<div class="modal fade text-left" id="modal_form_input" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title text-primary">Input {{ $title }}</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="form_input" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="form-group">
                        <label>NIK<span class="text-danger">*</span></label>
                        <div class="controls">
                            <input id="nik" name="nik" type="text" class="form-control" autocomplete="off" maxlength="225" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Nama<span class="text-danger">*</span></label>
                        <div class="controls">
                            <input id="name" name="name" type="text" class="form-control" autocomplete="off" maxlength="225" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Phone<span class="text-danger">*</span></label>
                        <div class="">
                            <input id="phone" name="phone" type="text" class="form-control" autocomplete="off" maxlength="225">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Email<span class="text-danger">*</span></label>
                        <div class="controls">
                            <input id="email" name="email" type="email" class="form-control" autocomplete="off" maxlength="225" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Hak Akses<span class="text-danger">*</span></label>
                        <select name="role_id" class="select2 form-control" style="width:100%" required>
                            <option value="">Pilih Hak Akses</option>
                            @foreach ($role as $r)
                                <option value="{{ $r->id }}">{{ $r->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Regional Entity<span class="text-danger">*</span></label>
                        <select id="id_regional_entity" name="id_regional_entity" class="select2 form-control" style="width:100%" required>
                            <option value="">Pilih Regional Entity</option>
                            @foreach ( $list_regional_entity ?? [] as $d)
                                <option value="{{ $d->id }}">{{ $d->nama }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Jabatan</label>
                        <div class="controls">
                            <input id="jabatan" name="jabatan" type="text" class="form-control" autocomplete="off" maxlength="225">
                        </div>
                    </div>                 
                    <div class="form-group">
                        <label>Password<span class="text-danger">*</span></label>
                        <div class="controls">
                            <input id="password" name="password" type="password" class="form-control" autocomplete="off" maxlength="20" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="text-danger">*) Wajib diisi</label>
                    </div><br>
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-outline-danger" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Edit -->
<div class="modal fade text-left" id="modal_form_edit" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title text-primary">Edit {{ $title }}</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="form_edit" enctype="multipart/form-data">
                <div class="modal-body">
                    <input type="hidden" name="_method" value="PUT">
                    <input id="edit_id" name="id" type="hidden">
                    <div class="form-group">
                        <label>NIK<span class="text-danger">*</span></label>
                        <div class="">
                            <input id="edit_nik" name="nik" type="text" class="form-control" autocomplete="off" maxlength="225" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Nama<span class="text-danger">*</span></label>
                        <div class="">
                            <input id="edit_name" name="name" type="text" class="form-control" autocomplete="off" maxlength="225" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Phone<span class="text-danger">*</span></label>
                        <div class="">
                            <input id="edit_phone" name="phone" type="text" class="form-control" autocomplete="off" maxlength="225">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Email<span class="text-danger">*</span></label>
                        <div class="">
                            <input id="edit_email" name="email" type="email" class="form-control" autocomplete="off" maxlength="225" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Hak Akses<span class="text-danger">*</span></label>
                        <select id="edit_role_id" name="role_id" class="select2 form-control" style="width:100%" required>
                            <option value="">Pilih Hak Akses</option>
                            @foreach ($role as $r)
                                <option value="{{ $r->id }}">{{ $r->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Posisi<span class="text-danger">*</span></label>
                        <select id="edit_id_regional_entity" name="id_regional_entity" class="select2 form-control" style="width:100%" required>
                            <option value="">Pilih Regional Entity</option>
                            @foreach ( $list_regional_entity ?? [] as $d)
                                <option value="{{ $d->id }}">{{ $d->nama }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Jabatan</label>
                        <div class="controls">
                            <input id="edit_jabatan" name="jabatan" type="text" class="form-control" autocomplete="off" maxlength="225">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <div class="">
                            <input name="password" type="password" class="form-control" autocomplete="off" maxlength="20">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="text-danger">*) Wajib diisi</label>
                    </div><br>
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-outline-danger" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- CRUD -->
<script type="text/javascript">
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')}
        });

        // read
        $('#datatable').dataTable({
            processing: true,
            serverSide: true,
            ajax:{
                url: "/dashboard/master/user",
                dataSrc: 'data'
            },
            columns: [
                { data: null, sortable: false,
                    render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                { data: 'nik', sortable: false },
                { data: 'name', sortable: false },
                { data: 'email', sortable: false },
                { data: 'regional_entity.nama', defaultContent: '', sortable: false },
                { data: 'role.name', defaultContent: '', sortable: false },
                { data: 'jabatan', sortable: false },
                { data: null, 'sortable': false,
                    render: function ( data, type, row ) {
                        var isChecked = '';
                        if (data.is_verified == 1) {
                            isChecked = 'checked';
                        }
                        return `<div data-id="`+data.id+`" data-value="`+data.is_verified+`" class="active-button custom-control custom-switch custom-switch-success custom-control-inline"><input type="checkbox" name="" `+isChecked+` class="custom-control-input"><label class="custom-control-label"></label></div>`;
                    }
                },
                { data: null, sortable: false,
                    render: function ( data, type, row ) {
                        return '<button type="button" data-id="'+data.id+'" class="edit-button btn btn-icon btn-icon rounded-circle btn-primary btn-sm waves-effect waves-light"><i class="feather icon-edit-1"></i></button>&nbsp;'+
                        '<button type="button" data-id="'+data.id+'" class="delete-button btn btn-icon btn-icon rounded-circle btn-danger btn-sm waves-effect waves-light"><i class="feather icon-trash"></i></button>';
                    }
                }
            ],
            order: [],
            language: {
                search: '', // Remove the search input label
                searchPlaceholder: 'Search...', // Remove the search input placeholder
                lengthMenu: '', // Remove the "Show [entries]" label
                info: 'Showing _START_ to _END_ of _TOTAL_ entries', // Optionally customize the information text
                infoEmpty: 'No entries to show', // Optionally customize the empty table text
                infoFiltered: '(filtered from _MAX_ total entries)', // Optionally customize the filtered information text
                paginate: {
                    first: 'First', // Optionally customize the pagination "First" button text
                    last: 'Last', // Optionally customize the pagination "Last" button text
                    next: '&rarr;', // Optionally customize the pagination "Next" button text
                    previous: '&larr;' // Optionally customize the pagination "Previous" button text
                }
            },
        });

        $('#datatable_filter').hide();

        // create
        $('#form_input').on('submit', function() {
            $.ajax({
                type: "POST",
                url: "/dashboard/master/user",
                data: new FormData($('#form_input')[0]),
                processData: false,
                contentType: false,
                dataType: "JSON",
                beforeSend: function() {
                    xLoaderShow();
                },
                success: function(data) {
                    xLoaderHide();
                    $('#modal_form_input').modal('hide');
                    $("#form_input")[0].reset();
                    $('#datatable').DataTable().ajax.reload();
                    const Toast = Swal.mixin({
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 3000,
                        timerProgressBar: true,
                        onOpen: (toast) => {
                            toast.addEventListener('mouseenter', Swal.stopTimer)
                            toast.addEventListener('mouseleave', Swal.resumeTimer)
                        }
                    })
                    Toast.fire({
                        icon: 'success',
                        title: 'Menambahkan {{ strtolower($title) }}'
                    })
                },
                error: function(xhr, status, error) {
                    xLoaderHide();
                    console.error(error);
                }
            })
            return false;
        });
        // edit
        $('#datatable').on('click', '.edit-button', function() {
            var id = $(this).data('id');
            $.ajax({
                type: "GET",
                url: "/dashboard/master/user/"+id+"/edit",
                success: function(row) {
                    $('#modal_form_edit').modal('show');
                    $('#edit_id').val(row.data.id);
                    $('#edit_nik').val(row.data.nik);
                    $('#edit_name').val(row.data.name);
                    $('#edit_phone').val(row.data.phone);
                    $('#edit_email').val(row.data.email);
                    $('#edit_role_id').val(row.data.role_id).prop('selected', true).trigger('change');
                    $('#edit_id_regional_entity').val(row.data.id_regional_entity).prop('selected', true).trigger('change');
                    $('#edit_jabatan').val(row.data.jabatan);

                    $('#form_edit').off('submit');
                    $('#form_edit').on('submit', function() {
                        $.ajax({
                            type: "POST",
                            url: "/dashboard/master/user/"+id,
                            data: new FormData($('#form_edit')[0]),
                            processData: false,
                            contentType: false,
                            dataType: "JSON",
                            success: function(data) {
                                $('#modal_form_edit').modal('hide');
                                $("#form_edit")[0].reset();
                                $('#datatable').DataTable().ajax.reload();
                                const Toast = Swal.mixin({
                                    toast: true,
                                    position: 'top-end',
                                    showConfirmButton: false,
                                    timer: 3000,
                                    timerProgressBar: true,
                                    onOpen: (toast) => {
                                        toast.addEventListener('mouseenter', Swal.stopTimer)
                                        toast.addEventListener('mouseleave', Swal.resumeTimer)
                                    }
                                })
                                Toast.fire({
                                    icon: 'success',
                                    title: 'Menyunting {{ strtolower($title) }}'
                                })
                            }
                        })
                        return false;
                    });
                }
            });
        });
        $('#datatable').on('click', '.active-button', function() {
            var activeId = $(this).data('id');
            var activeValue = $(this).data('value');

            $.ajax({
                type: "PUT",
                url: "/dashboard/master/user/"+activeId,
                data: {
                    is_verified: activeValue !== 1 ? 1 : 0
                },
                success: function(data) {
                    $('#datatable').DataTable().ajax.reload();
                    const Toast = Swal.mixin({
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 3000,
                        timerProgressBar: true,
                        onOpen: (toast) => {
                            toast.addEventListener('mouseenter', Swal.stopTimer)
                            toast.addEventListener('mouseleave', Swal.resumeTimer)
                        }
                    })
                    Toast.fire({
                        icon: 'success',
                        title: 'Ubah status verifikasi {{ strtolower($title) }}'
                    })
                }
            })
        });

        // delete
        $('#datatable').on('click', '.delete-button', function() {
            var idd = $(this).data('id');
            Swal.fire({
                title: 'Konfirmasi',
                text: "Anda yakin menghapus data {{ strtolower($title) }}?",
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Hapus',
                confirmButtonColor: '#ff5e5e',
                cancelButtonColor: '#3085d6',
                cancelButtonText: 'Batal',
                reverseButtons: true
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                        type: "DELETE",
                        url: "/dashboard/master/user/"+idd,
                        success: function(data) {
                            $('#datatable').DataTable().ajax.reload();
                            const Toast = Swal.mixin({
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false,
                                timer: 3000,
                                timerProgressBar: true,
                                onOpen: (toast) => {
                                    toast.addEventListener('mouseenter', Swal.stopTimer)
                                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                                }
                            })
                            Toast.fire({
                                icon: 'success',
                                title: 'Menghapus {{ strtolower($title) }}'
                            })
                        }
                    })
                } else if (result.dismiss === swal.DismissReason.cancel) {
                    const Toast = Swal.mixin({
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 3000,
                        timerProgressBar: true,
                        onOpen: (toast) => {
                            toast.addEventListener('mouseenter', Swal.stopTimer)
                            toast.addEventListener('mouseleave', Swal.resumeTimer)
                        }
                    })
                    Toast.fire({
                        icon: 'error',
                        title: 'Batal menghapus {{ strtolower($title) }}'
                    })
                }
            })
        });

    });
</script>
@endsection