@extends('layouts.app')

@section('page_title', 'Pengguna')
@section('breadcrumb', $breadcrumb)
@section('breadcrumb_title', 'Pengguna')

@push('style')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />
    <style>
        #tabel-master-user thead th {
            text-align: center !important
        }
        #filter-area {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            gap: .5rem;
            margin-bottom: .5rem;
        }
        #filter-area>div {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
        }
        @media screen and (max-width: 500px) {
            #filter-area {
                flex-direction: column-reverse;
            }
            #filter-area>div:first-child {
                flex-direction: column;
            }
        }
    </style>
@endpush

@section('main')
    <div class="row" id="content-page">
        {{-- Start Proyek Data Table --}}
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Data User</div>
                </div>

                <div class="card-body">
                    <div class="table-responsive">
                        <table id="tabel-master-user" class="table table-bordered text-center text-nowrap w-100"></table>
                    </div>
                </div>
            </div>
        </div>
        {{-- END Proyek Data Table --}}

        {{-- MODAL CREATE PROJECT --}}
        <div class="modal fade effect-scale" id="modal-form-user" tabindex="-1" aria-modal="true" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title"><span preview="aksi">Tambah</span> User</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    {{-- Start::MODAL CREATE BODY --}}
                    <div class="modal-body">
                        <input type="hidden" name="id" id="form-id-user" />
                        <div class="mb-3">
                            <label for="form-nama-karyawan" class="form-label fs-14 text-dark">Nama Karyawan *<small>Mandatory</small></label>
                            <select class="form-select" data-input-type="select2" id="form-nama-karyawan" name="id_employee"></select>
                            <small class="text-danger" data-error-field="msg_id_employee"></small>
                        </div>

                        <div class="mb-3">
                            <label for="form-kata-sandi" class="form-label fs-14 text-dark">Kata Sandi *<small preview-sandi>Mandatory</small></label>
                            <input type="password" class="form-control" name="password" id="form-kata-sandi">
                            <small class="text-danger" data-error-field="msg_password"></small>
                        </div>
                    </div>
                    {{-- End::MODAL CREATE BODY --}}

                    <div class="modal-footer">
                        <button type="reset" class="btn btn-secondary" data-bs-dismiss="modal">Kembali</button>
                        <button type="submit" class="btn btn-primary">Simpan</button>
                    </div>
                </div>
            </div>
        </div>
        {{-- END MODAL CREATE PROJECT --}}
    </div>
@endsection


@push('script')
    <!-- Datatables Cdn -->
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.6/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

    <!-- Select2 -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {
            /* -------------------Start::Instantiate all page props----------------------------- */
            const modal_opts = {
                backdrop: 'static',
                keyboard: false,
            };
            const el_modal_form_user = `div#modal-form-user`;
            const modal_form_user = bootstrap.Modal.getOrCreateInstance($('#content-page').find(el_modal_form_user), modal_opts);
            /* -------------------End::Instantiate all page props----------------------------- */

            const id_table = `#tabel-master-user`;
            let datatable = $(id_table).on('error.dt', function(e, settings, techNote, message) {
                showToast(settings.jqXHR?.responseJSON || {
                    icon: settings.jqXHR?.responseJSON?.icon || 'error',
                    message: settings.jqXHR?.responseJSON?.message || 'Terjadi kesalahan pada tabel master kantor'
                });
            }).DataTable({
                dom: `<"#filter-area">rt<"mt-2 d-flex flex-column flex-md-row justify-content-md-between align-items-center"<i><p>>`,
                pageLength: 10,
                ordering: true,
                searching: false, // pakai kotak search custom sendiri
                responsive: true,
                data: [],
                // serverSide: true,
                // processing: true,
                // ajax: {
                //     url: `#`,
                //     type: 'POST',
                //     beforeSend: () => {
                //         // do something before sending ajax call
                //     },
                //     data: function(d) {
                //         d.custom_filter = [];
                //         $(`${ id_table }_wrapper div#filter-area`).find('input, select').each(function() {
                //             let key = $(this).attr('name');
                //             let operator = $(this).attr('operator') || "=";
                //             let val = $(this).val();

                //             if ($.trim(operator.toLowerCase()) === "like" && val != "") {
                //                 val = `%${ val }%`;
                //             }

                //             if (val != "") {
                //                 d.custom_filter.push([key, operator, val]);
                //             }
                //         });

                //         return d;
                //     },
                //     dataSrc: res => {
                //         // do something right after getting response from ajax call
                //         return res.data;
                //     },
                //     complete: () => {
                //         // do something after calling ajax and load all data
                //     },
                // },
                order: [
                    [0, 'desc']
                ],
                columns: [{
                        title: 'User ID',
                        data: 'id_user',
                    },
                    {
                        title: 'Nama',
                        data: 'nama',
                    },
                    {
                        title: 'Divisi',
                        data: 'divisi',
                    },
                    {
                        title: 'Is Owner',
                        data: 'is_owner_display',
                    },
                    {
                        title: 'Lokasi Kantor',
                        data: 'nama_kantor',
                    },
                    {
                        title: 'Is Active',
                        data: 'status',
                        render: (data, type, row) => {
                            @can('manage-user')
                            return `<div class="form-check form-switch cursor-pointer">
                                <input class="form-check-input" data-aksi="update-status-user" type="checkbox" ${(data === 'active') ? 'checked' : ''} role="switch">
                            </div>`;
                            @endcan

                            @cannot('manage-user')
                            return `<span class="badge text-bg-${ (data === 'active' ? 'success' : 'danger') } text-capitalize">${ data }</span>`;
                            @endcan
                        },
                    },
                    @can('manage-user')
                    {
                        title: 'Aksi',
                        data: 'id',
                        render: function(data, type, row) {
                            let html = `<div class="d-flex gap-1">`;
                            html += `<button class="btn btn-danger btn-sm" data-aksi="delete-user" data-bs-toggle="tooltip" title="Hapus user" data-bs-placement="right"><i class="bi bi-trash"></i></button>`;
                            html += `</div>`;
                            return html;
                        }
                    },
                    @endcan
                ],
                drawCallback: function(settings) {
                    $('[data-bs-toggle="tooltip"]').tooltip();
                }
            });

            let datatable_wrapper = $(`${ id_table }_wrapper`);
            let filter_fields = `<div>
                    <div class="form-floating">
                        <select class="form-select" operator="=" id="tipe_office" name="tipe">
                            <option value="" selected>-Pilih Jenis Kantor-</option>
                        </select>
                        <label for="tipe_office">Jenis Kantor</label>
                    </div>
                    <div class="form-floating">
                        <input type="text" class="form-control" operator="like" id="nama_kantor" name="nama" placeholder="">
                        <label for="nama_kantor">Nama Kantor</label>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <button class="btn btn-primary" type="submit">Ambil Data</button>
                        <button type="reset" class="btn btn-danger">Reset</button>
                    </div>
                </div>
                <div class="justify-content-end">
                    <div class="d-flex align-items-center">
                        @can('manage-user')
                        <button type="button" class="btn btn-outline-info">Tambah User</button>
                        @endcan
                    </div>
                </div>`;

            // handle event di filter area
            datatable_wrapper.find('#filter-area')
                .html(filter_fields)
                .on('click', 'button[type=submit]', () => {
                    datatable.ajax.reload();
                })
                .on('click', 'button[type=reset]', () => {
                    datatable_wrapper.find('#filter-area input, #filter-area select').each(function() {
                        $(this).val(null);
                        if ($(this).is('select')) {
                            $(this).val($(this).find('option:first').val());
                        }
                    });
                    datatable.ajax.reload();
                })
                .on('click', 'button[type=button].btn-outline-info', () => {
                    modal_form_user.show();
                });

            // event handler datatable
            $(`${id_table} tbody`)
                .on('click', 'button[data-aksi=edit-user]', function() {
                    const dt = datatable.row($(this).closest('tr')).data();
                    $(el_modal_form_user).trigger('form:fill', dt);
                    modal_form_user.show();
                })
                .on('click', 'button[data-aksi=delete-user]', async function() {
                    try {
                        const dt = datatable.row($(this).closest('tr')).data();
                        let delete_confirmation = await Swal.fire({
                            title: 'Apakah Anda yakin?',
                            text: "Anda akan menghapus data user ini.",
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: 'Ya, hapus!',
                            cancelButtonText: 'Batal',
                            reverseButtons: true
                        });

                        if (!delete_confirmation.isConfirmed) {
                            return; // skip pengerjaan karna ga jadi di hapus
                        }

                        let result = await $.ajax({
                            url: `#`,
                            type: 'DELETE',
                            data: {
                                id: dt.id,
                            },
                        });

                        showToast(result);
                        datatable.ajax.reload();
                    } catch (err) {
                        showToast({
                            icon: err?.responseJSON?.icon || 'error',
                            message: err?.responseJSON?.message || 'Gagal menghapus data user',
                        });
                    }
                })
                .on('click', 'input[type=checkbox][data-aksi=update-status-user]', async (e) => {
                    const checkbox = $(e.target);
                    const text = checkbox.attr('checked') ? 'Anda akan menonaktifkan akun ini.' : 'Anda akan mengaktifkan kembali akun ini';
                    const url = checkbox.attr('checked') ? `#` : `#`;
                    const default_error_message = checkbox.attr('checked') ? 'Penonaktifan akun gagal' : 'Pengaktifan akun gagal';

                    try {
                        e.preventDefault(); // prevent default behaviour

                        const dt = datatable.row(checkbox.closest('tr')).data();
                        let status_confirmation = await Swal.fire({
                            title: 'Apakah Anda yakin?',
                            text,
                            icon: 'info',
                            showCancelButton: true,
                            confirmButtonText: 'Proses',
                            cancelButtonText: 'Batal',
                            reverseButtons: true
                        });

                        if (!status_confirmation.isConfirmed) {
                            return; // skip pengerjaan karna ga jadi di hapus
                        }

                        let result = await $.ajax({
                            url,
                            type: 'PUT',
                            data: {
                                id: dt.id,
                            },
                        });

                        showToast(result);
                        datatable.ajax.reload();
                    } catch (err) {
                        showToast({
                            icon: err?.responseJSON?.icon || 'error',
                            message: err?.responseJSON?.message || default_error_message,
                        });
                    }
                });

            /* -------------------Start::JQuery untuk select2----------------------*/
            $('#form-nama-karyawan').select2({
                placeholder: "Cari nama karyawan...",
                allowClear: true,
                minimumInputLength: 3, // Mulai pencarian setelah 1 karakter diketik
                dropdownParent: $(el_modal_form_user),
                templateSelection: (data, container) => {
                    // Add custom attributes to the <option> tag for the selected option
                    $(data.element).attr('data-id', data.id);
                    return data.text;
                },
                ajax: {
                    url: `#`,
                    type: "GET",
                    dataType: "json",
                    delay: 1000,
                    data: function(params) {
                        return {
                            q: params.term,
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: data.data.items
                        };
                    }
                }
            });
            /* -------------------End::JQuery untuk select2----------------------*/

            /* -------------------Start::JQuery untuk modal tambah / ubah data user----------------------*/
            $(`${ el_modal_form_user }`)
                .on('form:fill', (e, data) => {
                    $(`${ el_modal_form_user} span[preview=aksi]`).html('Ubah');
                    $(`${ el_modal_form_user } div.modal-body`).find('input, select, textarea').each(function() {
                        let key = $(this).attr('name');

                        $(this).val(data[key]);
                    });
                })
                .on('error-message:fill', (e, errors) => {
                    $(el_modal_form_user).find(`input, select, textarea`).removeClass('border-warning');
                    $(el_modal_form_user).find(`small[data-error-field*=msg_]`).html('');
                    // console.log(err.confirm_password[0]);
                    for (err in errors) {
                        $(el_modal_form_user).find(`input[name=${err}], select[name=${err}], textarea[name=${err}]`).addClass('border-warning');
                        $(el_modal_form_user).find(`small[data-error-field=msg_${err}]`).html(errors[err][0]);
                    }
                })
                .on('input', 'div.modal-body input[type=text].number-formatted', function() {
                    $(this).val(formatRupiah($(this).val()));
                })
                .on('hidden.bs.modal', () => {
                    $(`${ el_modal_form_user } div.modal-footer button[type=reset]`).trigger('click');
                })
                .on('click', 'button[type=reset]', () => {
                    $(`${ el_modal_form_user } div.modal-body`).find('input, select').each(function() {
                        if ($(this).data('inputType') === "select2") {
                            $(this).val(null).trigger('change');
                            return true;
                        }
                        if ($(this).is('select')) {
                            $(this).val($(this).find('option:first').val());
                            return true; // untuk skip ke next each
                        }
                        $(this).val('');
                    });

                    $(`${ el_modal_form_user} span[preview=aksi]`).html('Tambah');
                })
                .on('click', 'button[type=submit]', async () => {
                    try {
                        // kunci biar ga spam click
                        $(`${ el_modal_form_user } div.modal-footer`).find('button[type=submit]').trigger('loading:set');
                        $(`${ el_modal_form_user } div.modal-header, ${ el_modal_form_user } div.modal-footer`).find('button:not([type=submit])').attr('disabled', true);
                        $(`${ el_modal_form_user } div.modal-body`).find('input, select, textarea').attr('readonly', true);

                        const is_update = $('input[type=hidden][name=id]').val() !== "";
                        let ajax_obj = {
                            type: 'POST',
                            url: `#`,
                            data: {},
                        };
                        $(`${ el_modal_form_user } div.modal-body`).find('input, select, textarea').each(function() {
                            let key = $(this).attr('name');
                            let val = $(this).val();

                            if ($(this).hasClass('number-formatted')) {
                                val = convertToAngka($(this).val());
                            }

                            if ($(this).data('inputType') === 'select2') {
                                val = $(this).find(':selected').data('id');
                            }

                            ajax_obj.data[key] = val;
                        });

                        let result = await $.ajax(ajax_obj);

                        showToast(result);
                        modal_form_user.hide();
                        datatable.ajax.reload();
                    } catch (err) {
                        showToast({
                            icon: err?.responseJSON?.icon || 'error',
                            message: err?.responseJSON?.message || 'Gagal menyimpan data office',
                        });
                    } finally {
                        // buka biar bisa click lagi
                        $(`${ el_modal_form_user } div.modal-footer`).find('button[type=submit]').trigger('loading:clear');
                        $(`${ el_modal_form_user } div.modal-header, ${ el_modal_form_user } div.modal-footer`).find('button:not([type=submit])').attr('disabled', false);
                        $(`${ el_modal_form_user } div.modal-body`).find('input, select, textarea').attr('readonly', false);
                    }
                });
            /* -------------------End::JQuery untuk modal tambah / ubah data user----------------------*/
        });
    </script>
@endpush