@extends('layout.dashboard.index')

@section('content')
    <div class="container-fluid">
        <div class="card">
            <div class="card-header border-0 pt-6">
                <div class="card-title">
                    <div class="d-flex align-items-center position-relative my-1">
                        <span class="svg-icon svg-icon-1 position-absolute ms-6">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none">
                                <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1"
                                    transform="rotate(45 17.0365 15.1223)" fill="black"></rect>
                                <path
                                    d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
                                    fill="black"></path>
                            </svg>
                        </span>
                        <input type="text" id="searchTable" data-kt-user-table-filter="search"
                            class="form-control form-control-solid w-250px ps-14" placeholder="Search data">
                    </div>
                </div>
                <div class="card-toolbar">
                    <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
                        <a href="{{ route('user.export') }}" type="button"
                            class="btn btn-success btn-active-success-primary me-3" id="test">
                            <span class="svg-icon svg-icon-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none">
                                    <rect opacity="0.3" x="12.75" y="4.25" width="12" height="2" rx="1"
                                        transform="rotate(90 12.75 4.25)" fill="black"></rect>
                                    <path
                                        d="M12.0573 6.11875L13.5203 7.87435C13.9121 8.34457 14.6232 8.37683 15.056 7.94401C15.4457 7.5543 15.4641 6.92836 15.0979 6.51643L12.4974 3.59084C12.0996 3.14332 11.4004 3.14332 11.0026 3.59084L8.40206 6.51643C8.0359 6.92836 8.0543 7.5543 8.44401 7.94401C8.87683 8.37683 9.58785 8.34458 9.9797 7.87435L11.4427 6.11875C11.6026 5.92684 11.8974 5.92684 12.0573 6.11875Z"
                                        fill="black"></path>
                                    <path
                                        d="M18.75 8.25H17.75C17.1977 8.25 16.75 8.69772 16.75 9.25C16.75 9.80228 17.1977 10.25 17.75 10.25C18.3023 10.25 18.75 10.6977 18.75 11.25V18.25C18.75 18.8023 18.3023 19.25 17.75 19.25H5.75C5.19772 19.25 4.75 18.8023 4.75 18.25V11.25C4.75 10.6977 5.19771 10.25 5.75 10.25C6.30229 10.25 6.75 9.80228 6.75 9.25C6.75 8.69772 6.30229 8.25 5.75 8.25H4.75C3.64543 8.25 2.75 9.14543 2.75 10.25V19.25C2.75 20.3546 3.64543 21.25 4.75 21.25H18.75C19.8546 21.25 20.75 20.3546 20.75 19.25V10.25C20.75 9.14543 19.8546 8.25 18.75 8.25Z"
                                        fill="#C4C4C4"></path>
                                </svg>
                            </span>Ekspor Data</a>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addModal">
                            <span class="svg-icon svg-icon-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none">
                                    <rect opacity="0.5" x="11.364" y="20.364" width="16" height="2" rx="1"
                                        transform="rotate(-90 11.364 20.364)" fill="black"></rect>
                                    <rect x="4.36396" y="11.364" width="16" height="2" rx="1"
                                        fill="black"></rect>
                                </svg>
                            </span>
                            Tambah Data</button>
                    </div>
                </div>
            </div>
            <div class="card-body pt-0">
                <div id="kt_table_users_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                    <div class="table-responsive">
                        <div id="custom-loading"
                            class="position-absolute top-0 start-0 w-100 h-100 
                                d-flex justify-content-center align-items-center"
                            style="background: rgba(255,255,255,0.8); z-index: 10;">

                            <div class="text-center">
                                <div class="spinner-border text-primary" style="width:1rem;height:1rem;"></div>
                                <div class="mt-3 fw-semibold text-gray-700">
                                    Memuat data...
                                </div>
                            </div>
                        </div>
                        <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer" id="table">
                            <thead>
                                <tr class="text-start text-muted fw-bolder fs-7 text-uppercase gs-0">
                                    <th class="w-10px pe-2 sorting_disabled" rowspan="1" colspan="1"
                                        style="width: 29.25px;">
                                        <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                                            <input class="form-check-input" type="checkbox" data-kt-check="true"
                                                data-kt-check-target="#table .form-check-input" value="1">
                                        </div>
                                    </th>
                                    <th class="min-w-125px sorting" tabindex="0" aria-controls="table" rowspan="1"
                                        colspan="1" aria-label="User: activate to sort column ascending"
                                        style="width: 257.672px;">
                                        Nama</th>
                                    <th class="min-w-125px sorting" tabindex="0" aria-controls="table" rowspan="1"
                                        colspan="1" aria-label="Role: activate to sort column ascending"
                                        style="width: 145.359px;">
                                        Email</th>
                                    <th class="min-w-125px sorting" tabindex="0" aria-controls="table" rowspan="1"
                                        colspan="1" aria-label="Role: activate to sort column ascending"
                                        style="width: 145.359px;">
                                        Divisi</th>
                                    <th class="min-w-125px sorting" tabindex="0" aria-controls="table" rowspan="1"
                                        colspan="1" aria-label="Role: activate to sort column ascending"
                                        style="width: 145.359px;">
                                        Role</th>
                                    <th class="min-w-125px sorting" tabindex="0" aria-controls="table" rowspan="1"
                                        colspan="1" aria-label="Last login: activate to sort column ascending"
                                        style="width: 145.359px;">Status</th>
                                    <th class="text-center min-w-100px sorting_disabled" rowspan="1" colspan="1"
                                        aria-label="Actions" style="width: 113.625px;">Aksi</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-600 fw-bold">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered mw-650px">
                <div class="modal-content rounded">
                    <div class="modal-header pb-0 border-0 justify-content-end">
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                            <span class="svg-icon svg-icon-1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="black" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="black" />
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15">
                        <form id="formEdit" class="form" action="#">
                            <div class="mb-13">
                                <h1 class="mb-3">Ubah Pengguna</h1>
                                <div class="text-muted fw-bold fs-5">Ubah pengguna untuk perusahaan anda.
                                </div>
                            </div>
                            <input type="hidden" id="edit_uid">
                            <div class="d-flex flex-column mb-8 fv-row">
                                <label class="d-flex align-items-center fs-6 fw-bold mb-2">
                                    <span class="required">Nama</span>
                                    <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                        title="Spesifikasi nama pengguna"></i>
                                </label>
                                <input type="text" class="form-control form-control-solid"
                                    placeholder="Masukan nama pengguna" id="edit_name" name="edit_name" />
                            </div>
                            <div class="d-flex flex-column mb-8 fv-row">
                                <label class="d-flex align-items-center fs-6 fw-bold mb-2">
                                    <span class="required">Email</span>
                                    <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                        title="Spesifikasi email pengguna"></i>
                                </label>
                                <input type="text" class="form-control form-control-solid"
                                    placeholder="Masukan email pengguna" id="edit_email" name="edit_email" />
                            </div>
                            <div class="d-flex flex-column mb-8 fv-row">
                                <label class="d-flex align-items-center fs-6 fw-bold mb-2">
                                    <span class="required">Username</span>
                                    <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                        title="Spesifikasi username"></i>
                                </label>
                                <input type="text" class="form-control form-control-solid"
                                    placeholder="Masukan username pengguna" id="edit_username" name="edit_username" />
                            </div>
                            <div class="d-flex flex-column mb-8 fv-row">
                                <label class="d-flex align-items-center fs-6 fw-bold mb-2">
                                    <span class="required">Role</span>
                                    <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                        title="Spesifikasi role pengguna"></i>
                                </label>
                                <select class="form-select form-select-solid form-select select2-hidden-accessible"
                                    name="role" data-control="select2" data-hide-search="true"
                                    data-select2-id="select2-data-19-9rgk" tabindex="-1" aria-hidden="true"
                                    id="roleSelectEdit">
                                    <option value="">-- Pilih Role --</option>
                                </select>
                            </div>
                            <div class="d-flex flex-column mb-8 fv-row">
                                <label class="d-flex align-items-center fs-6 fw-bold mb-2">
                                    <span class="required">Divisi</span>
                                    <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                        title="Spesifikasi divisi pengguna"></i>
                                </label>
                                <select class="form-select form-select-solid form-select select2-hidden-accessible"
                                    name="division" data-control="select2" data-hide-search="true"
                                    data-select2-id="select2-data-19-9rgk" tabindex="-1" aria-hidden="true"
                                    id="divisionSelectEdit">
                                    <option value="">-- Pilih Divisi --</option>
                                </select>
                            </div>
                            <div class="d-flex flex-column mb-8 fv-row">
                                <label class="d-flex align-items-center fs-6 fw-bold mb-2">
                                    <span class="required">Status</span>
                                    <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                        title="Spesifikasi status brand"></i>
                                </label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="edit_status">
                                    <label class="form-check-label" for="edit_status" id="labelStatus"></label>
                                </div>
                            </div>
                            <div class="text-end">
                                <button type="reset" id="kt_modal_new_target_cancel"
                                    class="btn btn-light me-3">Batal</button>
                                <button type="submit" id="buttonUpdate" class="btn btn-primary">
                                    <span class="indicator-label">Simpan</span>
                                    <span class="indicator-progress">Please wait...
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="addModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered mw-650px">
                <div class="modal-content rounded">
                    <div class="modal-header pb-0 border-0 justify-content-end">
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                            <span class="svg-icon svg-icon-1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="black" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="black" />
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15">
                        <form id="formAdd" class="form">
                            <div class="mb-13">
                                <h1 class="mb-3">Tambah Pengguna</h1>
                                <div class="text-muted fw-bold fs-5">Buat pengguna baru untuk perusahaan anda.
                                </div>
                            </div>
                            <div class="d-flex flex-column mb-8 fv-row">
                                <label class="d-flex align-items-center fs-6 fw-bold mb-2">
                                    <span class="required">Nama</span>
                                    <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                        title="Spesifikasi nama pengguna"></i>
                                </label>
                                <input type="text" class="form-control form-control-solid"
                                    placeholder="Masukan nama pengguna" id="name" name="name" />
                            </div>
                            <div class="d-flex flex-column mb-8 fv-row">
                                <label class="d-flex align-items-center fs-6 fw-bold mb-2">
                                    <span class="required">Email</span>
                                    <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                        title="Spesifikasi email pengguna"></i>
                                </label>
                                <input type="text" class="form-control form-control-solid"
                                    placeholder="Masukan email pengguna" id="email" name="email" />
                            </div>
                            <div class="d-flex flex-column mb-8 fv-row">
                                <label class="d-flex align-items-center fs-6 fw-bold mb-2">
                                    <span class="required">Username</span>
                                    <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                        title="Spesifikasi username"></i>
                                </label>
                                <input type="text" class="form-control form-control-solid"
                                    placeholder="Masukan username pengguna" id="username" name="username" />
                            </div>
                            <div class="d-flex flex-column mb-8 fv-row">
                                <label class="d-flex align-items-center fs-6 fw-bold mb-2">
                                    <span class="required">Role</span>
                                    <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                        title="Spesifikasi role pengguna"></i>
                                </label>
                                <select class="form-select form-select-solid form-select select2-hidden-accessible"
                                    name="role" data-control="select2" data-hide-search="true"
                                    data-select2-id="select2-data-19-9rgk" tabindex="-1" aria-hidden="true"
                                    id="roleSelectAdd">
                                    <option value="">-- Pilih Role --</option>
                                </select>
                            </div>
                            <div class="d-flex flex-column mb-8 fv-row">
                                <label class="d-flex align-items-center fs-6 fw-bold mb-2">
                                    <span class="required">Divisi</span>
                                    <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                        title="Spesifikasi divisi pengguna"></i>
                                </label>
                                <select class="form-select form-select-solid form-select select2-hidden-accessible"
                                    name="division" data-control="select2" data-hide-search="true"
                                    data-select2-id="select2-data-19-9rgk" tabindex="-1" aria-hidden="true"
                                    id="divisionSelectAdd">
                                    <option value="">-- Pilih Divisi --</option>
                                </select>
                            </div>
                            <div class="notes-box p-5 mb-8">
                                <p class="fw-bold">Catatan :</p>
                                <ul class="mb-0 ps-3">
                                    <li>Kata Sandi akan dibuat secara otomatis, yaitu : <strong>Marui!234</strong></li>
                                </ul>
                            </div>
                            <div class="text-end">
                                <button type="reset" id="kt_modal_new_target_cancel"
                                    class="btn btn-light me-3">Batal</button>
                                <button type="submit" id="buttonSave" class="btn btn-primary">
                                    <span class="indicator-label">Simpan</span>
                                    <span class="indicator-progress">Please wait...
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

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

            var table = $('#table').DataTable({
                processing: false,
                serverSide: true,
                dom: 'rtip',
                ajax: "{{ route('user.datatable') }}",
                language: {
                    processing: `...`
                },
                columns: [{
                        data: 'checkbox',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'role',
                        name: 'role'
                    },
                    {
                        data: 'division',
                        name: 'division'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },

                    {
                        data: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ],

                pageLength: 10,
                responsive: true
            });

            $.ajax({
                url: '/user/division',
                type: 'GET',
                beforeSend: function() {},
                success: function(response) {
                    if (response.success) {
                        let select = $('#divisionSelectAdd');
                        select.empty();
                        select.append('<option value="">-- Pilih Divisi --</option>');

                        $.each(response.data, function(index, division) {
                            select.append(
                                '<option value="' + division.id + '">' + division.name +
                                '</option>'
                            );
                        });

                        select.trigger('change');

                        let select2 = $('#divisionSelectEdit');
                        select2.empty();
                        select2.append('<option value="">-- Pilih Divisi --</option>');

                        $.each(response.data, function(index, division) {
                            select2.append(
                                '<option value="' + division.id + '">' + division.name +
                                '</option>'
                            );
                        });

                        select2.trigger('change');
                    }
                },
                error: function() {
                    showToast('Data tidak ditemukan', 'danger');
                }
            });

            $.ajax({
                url: '/user/role',
                type: 'GET',
                beforeSend: function() {},
                success: function(response) {
                    if (response.success) {
                        let select = $('#roleSelectAdd');
                        select.empty();
                        select.append('<option value="">-- Pilih Role --</option>');

                        $.each(response.data, function(index, role) {
                            select.append(
                                '<option value="' + role.id + '">' + role.name + '</option>'
                            );
                        });

                        select.trigger('change');

                        let select2 = $('#roleSelectEdit');
                        select2.empty();
                        select2.append('<option value="">-- Pilih Role --</option>');

                        $.each(response.data, function(index, role) {
                            select2.append(
                                '<option value="' + role.id + '">' + role.name + '</option>'
                            );
                        });

                        select2.trigger('change');
                    }
                },
                error: function() {
                    showToast('Data tidak ditemukan', 'danger');
                }
            });

            $('#searchTable').on('keyup', function() {
                table.search(this.value).draw();
            });

            table.on('processing.dt', function(e, settings, processing) {
                if (processing) {
                    $('#custom-loading').removeClass('d-none');
                } else {
                    $('#custom-loading').addClass('d-none');
                }
            });

            $('#buttonSave').on('click', function(e) {
                e.preventDefault();

                let name = $('#name').val();
                let email = $('#email').val();
                let username = $('#username').val();
                let role = $('#roleSelectAdd').val();
                let division = $('#divisionSelectAdd').val();

                $.ajax({
                    url: '/user',
                    type: 'POST',
                    data: {
                        name: name,
                        email: email,
                        username: username,
                        role: role,
                        division: division
                    },
                    beforeSend: function() {
                        $('#buttonSave').prop('disabled', true).text('Menyimpan...');
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#formAdd')[0].reset();

                            var modalEl = document.getElementById('addModal');
                            var modal = bootstrap.Modal.getInstance(modalEl);
                            modal.hide();

                            showToast('Data berhasil ditambahkan', 'success');
                            if ($.fn.DataTable.isDataTable('#table')) {
                                $('#table').DataTable().ajax.reload(null, false);
                            }
                        }
                    },
                    error: function(xhr) {
                        showToast('Terjadi kesalahan sistem', 'danger');
                    },
                    complete: function() {
                        $('#buttonSave').prop('disabled', false).text('Simpan');
                    }
                });
            });

            $(document).on('click', '#buttonEdit', function(e) {
                e.preventDefault();

                let id = $(this).data('user');

                $.ajax({
                    url: '/user/' + id,
                    type: 'GET',
                    beforeSend: function() {},
                    success: function(response) {
                        if (response.success) {
                            $('#edit_uid').val(response.data.slug);
                            $('#edit_name').val(response.data.name);
                            $('#edit_email').val(response.data.email);
                            $('#edit_username').val(response.data.username);
                            if (response.data.role) {
                                $('#roleSelectEdit').val(response.data.role.id).trigger(
                                    'change');
                            }
                            if (response.data.division) {
                                $('#divisionSelectEdit').val(response.data.division.id).trigger(
                                    'change');
                            }
                            if (response.data.status == 'active') {
                                $('#edit_status').prop('checked', true);
                                $('#labelStatus').text('Aktif');
                            } else {
                                $('#edit_status').prop('checked', false);
                                $('#labelStatus').text('Non Aktif');
                            }
                            let modal = new bootstrap.Modal(document.getElementById(
                                'editModal'));
                            modal.show();
                        }
                    },
                    error: function() {
                        showToast('Data tidak ditemukan', 'danger');
                    }
                });
            });

            $('#buttonUpdate').on('click', function(e) {
                e.preventDefault();

                let id = $('#edit_uid').val();
                let name = $('#edit_name').val();
                let email = $('#edit_email').val();
                let username = $('#edit_username').val();
                let role = $('#roleSelectEdit').val();
                let division = $('#divisionSelectEdit').val();
                let status = $('#edit_status').is(':checked') ? 'active' : 'nonactive';

                $.ajax({
                    url: '/user/' + id,
                    type: 'PUT',
                    data: {
                        name: name,
                        email: email,
                        username: username,
                        role: role,
                        division: division,
                        status: status
                    },
                    beforeSend: function() {
                        $('#buttonUpdate').prop('disabled', true).text('Menyimpan...');
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#formEdit')[0].reset();

                            let modal = bootstrap.Modal.getInstance(
                                document.getElementById('editModal')
                            );
                            modal.hide();

                            showToast('Data berhasil dirubah', 'success');
                            $('#table').DataTable().ajax.reload(null, false);
                        }
                    },
                    error: function(xhr) {
                        showToast('Terjadi kesalahan sistem', 'danger');
                    },
                    complete: function() {
                        $('#buttonUpdate').prop('disabled', false).text('Simpan');
                    }
                });
            });

            $(document).on('click', '#buttonDelete', function(e) {
                e.preventDefault();
                let id = $(this).data('user');

                Swal.fire({
                    title: 'Anda yakin ?',
                    text: "Data tidak akan ditemukan lagi!",
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, hapus!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '/user/' + id,
                            type: 'DELETE',
                            success: function(response) {
                                if (response.success) {
                                    showToast('Data berhasil dihapus', 'success');
                                    $('#table').DataTable().ajax.reload();
                                } else {
                                    showToast('Data gagal dihapus', 'danger');
                                }
                            },
                            error: function(xhr) {
                                showToast('Terjadi kesalahan sistem', 'danger');
                            }
                        });
                    }
                })
            });
        });
    </script>
@endsection