@extends('layouts.panel')

@section('title', 'User')

@push('styles')
    <link rel="stylesheet" href="{{ asset('plugins/sweetalert2/sweetalert2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/toastr/toastr.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
@endpush

@push('scripts')
    <script src="{{ asset('plugins/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ asset('plugins/toastr/toastr.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/select2/js/select2.min.js') }}"></script>
    <script>
        $(function() {
            const $teleport = $('#teleport')
            const $table = $('table#dataTableUser');

            const dataTable = $table.DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('user.index') }}",
                order: [
                    [2, 'asc']
                ],
                columns: [{
                        data: null,
                        orderable: false,
                        searchable: false,
                        render: function(_, __, ___, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        data: 'nip',
                        className: 'text-center',
                        render: function(data, __, row) {
                            return data || '-'
                        }
                    },
                    {
                        data: 'name',
                        className: 'text-nowrap',
                        render: function(data, __, row) {
                            if (row.is_protected) {
                                return `
                                    <span class="badge badge-primary">Terproteksi</span>
                                    <div>${data}</div>
                                `
                            }
                            return data
                        }
                    },
                    {
                        data: 'username',
                        render: function(data, __, row) {
                            return data
                        }
                    },
                    {
                        data: 'email',
                        className: 'text-center',
                        render: function(data, __, row) {
                            if (row.email_verified_at) {
                                return `
                                    <span class="badge badge-success">Terverifikasi</span>
                                    <div>${data}</div>
                                `
                            }
                            return data || '-'
                        }
                    },
                    {
                        data: 'phone',
                        className: 'text-center',
                        render: function(data, __, row) {
                            if (row.phone_verified_at) {
                                return `
                                    <span class="badge badge-success">Terverifikasi</span>
                                    <div>${data}</div>
                                `
                            }
                            return data || '-'
                        }
                    },
                    {
                        data: 'role.name',
                        render: function(data, __, row) {
                            return `<span class="badge badge-danger">${data}</span>`
                        }
                    },
                    {
                        data: null,
                        orderable: false,
                        searchable: false,
                        render: function(data, __, row) {
                            const items = row.business_units || []
                            if (!items.length) return '-'
                            let html = ''
                            html += '<div class="mr-n2 mb-n2">';
                            items.forEach(item => {
                                html +=
                                    `<span class="badge badge-info mr-2 mb-2">${item.name}</span>`
                            });
                            html += '</div>'
                            return html
                        }
                    },
                    {
                        data: 'is_active',
                        className: 'text-center',
                        render: function(data, __, row) {
                            const checked = data ? 'checked' : '';
                            const disabled = row.is_protected ? 'disabled' : '';

                            return `
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input toggle-status" id="switchUpdateStatusUser-${row.id}" ${checked} ${disabled} data-id="${row.id}">
                                    <label class="custom-control-label" for="switchUpdateStatusUser-${row.id}"></label>
                                </div>
                            `;
                        }
                    },
                    {
                        data: 'id',
                        orderable: false,
                        searchable: false,
                        className: 'text-center',
                        render: function(data, __, row) {
                            const disabled = row.is_protected ? 'disabled' : '';

                            return `
                                <div class="dropdown">
                                    <button type="button" class="btn btn-sm btn-light" data-toggle="dropdown">
                                        <i class="fas fa-ellipsis-v" style="min-width: 14px;"></i>
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-right">
                                        <button type="button" class="dropdown-item edit" data-id="${data}">
                                            <i class="fas fa-edit mr-2 text-warning"></i>
                                            Edit
                                        </button>
                                        <button type="button" class="dropdown-item reset-password" data-id="${data}">
                                            <i class="fas fa-key mr-2 text-info"></i>
                                            Reset Password
                                        </button>
                                        <div class="dropdown-divider"></div>
                                        <button type="button" class="dropdown-item text-danger delete" data-id="${data}" ${disabled}>
                                            <i class="fas fa-trash mr-2"></i>
                                            Hapus
                                        </button>
                                    </div>
                                </div>
                            `;
                        }
                    }
                ],
                responsive: true,
                autoWidth: false
            });

            $('#btnCreateUser').on('click', function() {
                const $this = $(this);
                const url = "{{ route('user.create') }}";

                $this.prop('disabled', true)

                $.get(url, function(html) {
                    $teleport.html(html);
                    $('#modalCreateUser').modal({
                        backdrop: 'static',
                        keyboard: false,
                        show: true
                    });
                }).fail(function(err) {
                    const response = err.responseJSON || {}

                    Swal.fire({
                        icon: 'error',
                        title: 'Oops!',
                        text: response.message,
                    });
                }).always(function() {
                    $this.prop('disabled', false);
                });
            });

            $table.on('click', '.edit', function() {
                const $this = $(this);
                const id = $this.data('id');
                const url = "{{ route('user.edit', ':id') }}".replace(':id', id);

                $this.prop('disabled', true)

                $.get(url, function(html) {
                    $teleport.html(html);
                    $('#modalEditUser').modal({
                        backdrop: 'static',
                        keyboard: false,
                        show: true
                    });
                }).fail(function(err) {
                    const response = err.responseJSON || {}

                    Swal.fire({
                        icon: 'error',
                        title: 'Oops!',
                        text: response.message,
                    });
                }).always(function() {
                    $this.prop('disabled', false);
                });
            });

            $table.on('change', '.toggle-status', function() {
                const $this = $(this);
                const id = $this.data('id');
                const url = "{{ route('user.updateStatus', ':id') }}".replace(':id', id);
                const checked = $this.is(':checked')

                $this.prop('disabled', true)

                $.ajax({
                    type: "put",
                    url: url,
                    data: {
                        _token: '{{ csrf_token() }}',
                        is_active: checked ? 1 : 0
                    },
                    success: function(response) {
                        toastr.success(response.message)
                    },
                    error: function(err) {
                        const response = err.responseJSON || {}

                        $this.prop('checked', !checked);

                        Swal.fire({
                            icon: 'error',
                            title: 'Oops!',
                            text: response.message,
                        });
                    },
                }).always(function() {
                    $this.prop('disabled', false);
                });
            });

            $table.on('click', '.reset-password', function() {
                const $this = $(this);
                const id = $this.data('id');
                const url = "{{ route('user.resetPassword', ':id') }}".replace(':id', id);

                Swal.fire({
                    icon: 'warning',
                    title: 'Reset Password',
                    html: `
                        <p>Tindakan ini akan mengembalikan password user ke pengaturan bawaan. Apakah anda yakin?</p>
                        <div class="d-flex flex-column">
                            <div class="form-group mb-0">
                                <label for="inputResetPasswordUserPassword" class="small font-weight-bold">Password</label>
                                <input type="text" name="name" id="inputResetPasswordUserPassword" class="form-control text-center mx-auto"
                                    value="{{ $defaultPassword }}" style="max-width: 240px;" readonly>
                            </div>
                        </div>
                    `,
                    showCancelButton: true,
                    confirmButtonText: 'Ya, reset password',
                    cancelButtonText: 'Batal',
                    reverseButtons: true,
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    preConfirm: () => {
                        Swal.showLoading();

                        const cancelBtn = Swal.getCancelButton();
                        if (cancelBtn) cancelBtn.style.display = 'none';

                        return $.ajax({
                            type: 'put',
                            url: url,
                            data: {
                                _token: '{{ csrf_token() }}',
                            }
                        }).then(
                            (response) => response,
                            (error) => {
                                const response = error.responseJSON || {}

                                const cancelBtn = Swal.getCancelButton();
                                if (cancelBtn) cancelBtn.style.display = '';

                                Swal.showValidationMessage(response.message);
                            }
                        );
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: result.value.message
                        });

                        dataTable.ajax.reload(null, false);
                    }
                });
            });

            $table.on('click', '.delete', function() {
                const $this = $(this);
                const id = $this.data('id');
                const url = "{{ route('user.destroy', ':id') }}".replace(':id', id);

                Swal.fire({
                    icon: 'warning',
                    title: 'Hapus User',
                    text: 'Data yang dihapus tidak dapat dikembalikan lagi. Apakah anda yakin?',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, hapus',
                    cancelButtonText: 'Batal',
                    reverseButtons: true,
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    preConfirm: () => {
                        Swal.showLoading();

                        const cancelBtn = Swal.getCancelButton();
                        if (cancelBtn) cancelBtn.style.display = 'none';

                        return $.ajax({
                            type: 'delete',
                            url: url,
                            data: {
                                _token: '{{ csrf_token() }}',
                            }
                        }).then(
                            (response) => response,
                            (error) => {
                                const response = error.responseJSON || {}

                                const cancelBtn = Swal.getCancelButton();
                                if (cancelBtn) cancelBtn.style.display = '';

                                Swal.showValidationMessage(response.message);
                            }
                        );
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: result.value.message
                        });

                        dataTable.ajax.reload(null, false);
                    }
                });
            });

            $teleport.on(
                'submit',
                '#formCreateUser',
                function(e) {
                    e.preventDefault()

                    const $this = $(this)
                    const $message = $this.find('#message')
                    const $btnSubmit = $this.find('button[type="submit"]')
                    const $btnDismissModal = $this.find('button[data-dismiss="modal"]')

                    $message.empty()
                    $btnSubmit.prop('disabled', true)
                    $btnDismissModal.prop('disabled', true)

                    $.ajax({
                        type: $this.prop('method'),
                        url: $this.prop('action'),
                        data: $this.serializeArray(),
                        success: function(response) {
                            toastr.success(response.message)
                            $('#modalCreateUser').modal('hide');
                            dataTable.ajax.reload(null, false)
                        },
                        error: function(err) {
                            $message.html(buildErrorAlertHTML(err))
                        }
                    }).always(function() {
                        $btnSubmit.prop('disabled', false);
                        $btnDismissModal.prop('disabled', false);
                    });
                }
            )

            $teleport.on(
                'submit',
                '#formEditUser',
                function(e) {
                    e.preventDefault()

                    const $this = $(this)
                    const $message = $this.find('#message')
                    const $btnSubmit = $this.find('button[type="submit"]')
                    const $btnDismissModal = $this.find('button[data-dismiss="modal"]')

                    $message.empty()
                    $btnSubmit.prop('disabled', true)
                    $btnDismissModal.prop('disabled', true)

                    $.ajax({
                        type: $this.prop('method'),
                        url: $this.prop('action'),
                        data: $this.serializeArray(),
                        success: function(response) {
                            toastr.success(response.message)
                            $('#modalEditUser').modal('hide');
                            dataTable.ajax.reload(null, false)
                        },
                        error: function(err) {
                            $message.html(buildErrorAlertHTML(err))
                        }
                    }).always(function() {
                        $btnSubmit.prop('disabled', false);
                        $btnDismissModal.prop('disabled', false);
                    });
                }
            )

            $teleport.on(
                'show.bs.modal',
                '#modalCreateUser,#modalEditUser',
                function() {
                    $('#selectCreateUserRoleId,#selectEditUserRoleId').select2({
                        placeholder: 'Pilih Role',
                        allowClear: true,
                        ajax: {
                            url: "{{ route('role.list') }}",
                            dataType: 'json',
                            delay: 250,
                            data: function(params) {
                                return {
                                    search: params.term,
                                    page: params.page || 1
                                }
                            },
                            processResults: function(response, params) {
                                params.page = params.page || 1

                                return {
                                    results: response.data.map(item => ({
                                        id: item.id,
                                        text: item.name
                                    })),
                                    pagination: {
                                        more: response.current_page < response.last_page
                                    }
                                }
                            }
                        }
                    })

                    $('#selectCreateUserBusinessUnitId,#selectEditUserBusinessUnitId').select2({
                        placeholder: 'Pilih Unit Usaha',
                        allowClear: true,
                        ajax: {
                            url: "{{ route('businessUnit.list') }}",
                            dataType: 'json',
                            delay: 250,
                            data: function(params) {
                                return {
                                    search: params.term,
                                    page: params.page || 1
                                }
                            },
                            processResults: function(response, params) {
                                params.page = params.page || 1

                                return {
                                    results: response.data.map(item => ({
                                        id: item.id,
                                        text: item.name
                                    })),
                                    pagination: {
                                        more: response.current_page < response.last_page
                                    }
                                }
                            }
                        }
                    })
                }
            );

            $teleport.on(
                'hidden.bs.modal',
                '#modalCreateUser,#modalEditUser',
                function() {
                    $(this).remove();
                }
            );
        });
    </script>
@endpush


@section('content')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">@yield('title')</h1>
                    </div>
                    <div class="col-sm-6"></div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="container-fluid">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-auto">
                                <button type="button" class="btn btn-primary text-nowrap" id="btnCreateUser">
                                    <i class="fas fa-plus"></i>
                                    Tambah baru
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="dataTableUser" class="table table-striped table-bordered table-hover w-100">
                                <thead>
                                    <tr>
                                        <th width="1" class="text-center">#</th>
                                        <th width="1">NIP</th>
                                        <th>Nama</th>
                                        <th width="1">Username</th>
                                        <th width="1" class="text-center">Email</th>
                                        <th width="1" class="text-center text-nowrap">No. Tlp</th>
                                        <th width="1">Role</th>
                                        <th style="min-width: 128px;">Unit Usaha</th>
                                        <th width="1" class="text-center">Status</th>
                                        <th width="1" class="text-center">Aksi</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection