@extends('layout.master')

@push('plugin-styles')
<link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/@mdi/css/materialdesignicons.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Akses</a></li>
        <li class="breadcrumb-item active" aria-current="page">User</li>
    </ol>
</nav>

<div class="row">
    <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <h6 class="card-title">Data User</h6>
                <div class="table-responsive">
                    <table id="datatable-serverside" class="table" style="width: 100%;">
                        <thead>
                            <tr>
                                <th class="kolomNomor">No.</th>
                                <th>Nomor User</th>
                                <th>Nama</th>
                                <th>Email</th>
                                <th>Telepon</th>
                                <th>Username</th>
                                <th>ID Card</th>
                                <th>NPWP</th>
                                <th>Alamat</th>
                                <th>Status</th>
                                <th>Role</th>
                                <th class="kolomAksi">Aksi</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <div class="card-footer" style="text-align: right;">
                <button class="btn btn-info btn-custom1" id="tambahKaryawan">Tambah Data</button>
            </div>
        </div>
    </div>
</div>

{{-- Modal --}}
<div id="modalKaryawan" class="modal fade bd-example-modal-lg" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Form User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_karyawan" class="forms-sample">
                    <div class="row">
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Nomor User</label>
                                <input type="text" class="form-control" name="nomor_pegawai" autocomplete="off" placeholder="Nomor User">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Nama</label>
                                <input type="text" class="form-control required" name="name" autocomplete="off" placeholder="Nama">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Email</label>
                                <input type="text" class="form-control" name="email" autocomplete="off" placeholder="Email">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Telepon</label>
                                <input type="text" class="form-control" name="telepon" autocomplete="off" placeholder="Telepon">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Username</label>
                                <input type="text" class="form-control required" name="username" autocomplete="off" placeholder="Username">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Password</label>
                                <input type="text" class="form-control required" id="password" name="password" autocomplete="off" placeholder="Password">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">ID Card</label>
                                <select name="id_card" id="id_card" class="form-control">
                                    <option value="">Silahkan Pilih</option>
                                    <option value="ktp">KTP</option>
                                    <option value="sim">SIM</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Nomor ID Card</label>
                                <input type="text" class="form-control" id="nomor_id_card" name="nomor_id_card" autocomplete="off" placeholder="Nomor ID Card" disabled="disabled">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">File ID Card</label>
                                <input type="file" class="form-control" id="file_id_card" name="file_id_card" autocomplete="off" placeholder="ID Card" disabled="disabled">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">NPWP</label>
                                <input type="text" class="form-control" name="npwp" autocomplete="off" placeholder="NPWP">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Alamat</label>
                                <textarea class="form-control" name="alamat" placeholder="Alamat"></textarea>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Status</label>
                                <select name="status" id="status" class="form-control">
                                    <option value="">Silahkan Pilih</option>
                                    <option value="active">Aktif</option>
                                    <option value="inactive">Tidak Aktif</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="button" id="btnSimpanKaryawan" class="btn btn-primary btn-custom1">Simpan</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="modalKaryawanRole" class="modal fade bd-example-modal-lg" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Setting Role Karyawan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_karyawan_role" class="forms-sample">
                    <input type="hidden" name="user_id">
                    <div class="row">
                        @foreach ($roles as $role)
                            <div class="col-6 col-md-4">
                                <div class="form-check form-switch mb-2">
                                    <input type="checkbox" class="form-check-input checkRole" value="{{ $role->id }}" onchange="assignRole(this)" >
                                    <label class="form-check-label" for="checkDefault">
                                        {{ $role->name }}
                                    </label>
                                </div>
                            </div>
                        @endforeach
                        <div class="col-12" style="text-align: right;">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{{-- Akhiran Modal --}}
@endsection

@push('plugin-scripts')
<script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
<script src="{{ asset('assets/js/data-table.js') }}"></script>
<script src="{{ asset('assets/js/sweet-alert.js') }}"></script>

<script>
    var URLs = "{{ url('user/data-user') }}";

    let datatable = $('#datatable-serverside').DataTable({
        lengthMenu: lengthMenuDatatable(),
        processing: true,
        serverSide: true,
        ajax: URLs + '/get-data',
        columns: [{
                data: 'DT_RowIndex',
                name: 'id'
            },
            {
                data: 'nomor_pegawai',
                name: 'nomor_pegawai'
            },
            {
                data: 'name',
                name: 'name'
            },
            {
                data: 'email',
                name: 'email'
            },
            {
                data: 'telepon',
                name: 'telepon'
            },
            {
                data: 'username',
                name: 'username'
            },
            {
                data: 'id_card',
                name: 'id_card'
            },
            {
                data: 'npwp',
                name: 'npwp'
            },
            {
                data: 'alamat',
                name: 'alamat'
            },
            {
                data: 'status',
                name: 'status'
            },
            {
                data: 'role',
                name: 'role',
                searchable: false,
                orderable: false,
                class: 'text-center'
            },
            {
                data: 'aksi',
                name: 'aksi',
                searchable: false,
                orderable: false,
                class: 'text-center'
            },
        ],
    });

    $('#id_card').on('change', function(e) {
        var isian = $(this).val();

        if (isian != null && isian != '') {
            $('#nomor_id_card').removeAttr('disabled').addClass('required');
            $('#file_id_card').removeAttr('disabled');
        } else {
            $('#nomor_id_card').attr('disabled', true).removeClass('required').val('');
            $('#file_id_card').attr('disabled', true).val('');
        }
    });

    $('#tambahKaryawan').on('click', function(e) {
        stat = "add";
        $('#modalKaryawan').modal('show');
    });

    $('#btnSimpanKaryawan').on('click', function(e) {
        if (cekForm('form_karyawan') == true) {
            var data = new FormData();
            data.append('_token', "{{ csrf_token() }}");
            data.append('nomor_pegawai', $('[name="nomor_pegawai"]').val());
            data.append('name', $('[name="name"]').val());
            data.append('email', $('[name="email"]').val());
            data.append('telepon', $('[name="telepon"]').val());
            data.append('username', $('[name="username"]').val());
            data.append('password', $('[name="password"]').val());
            data.append('id_card', $('[name="id_card"]').val());
            data.append('nomor_id_card', $('[name="nomor_id_card"]').val());
            data.append('npwp', $('[name="npwp"]').val());
            data.append('alamat', $('[name="alamat"]').val());
            data.append('status', $('[name="status"]').val());

            if ($('#file_id_card').val() != null && $('#file_id_card').val() != '') {
                var file_id_card = $('#file_id_card')[0].files;
                data.append('file_id_card', file_id_card[0]);
            }

            if (stat == "add") {
                uploads(URLs + "/add", data, rSends);
            } else {
                data.append('id', IDs);
                uploads(URLs + "/update", data, rSends);
            }
        }
    });

    function readDataRole(id) {
        $('#form_karyawan_role input[name="user_id"]').val(id);
        var data = {
            id: id,
            _token: "{{ csrf_token() }}"
        };
        reads(URLs + "/read-role", data, rReadsRole);
    }

    function rReadsRole(data) {
        swal.close();
        $('#modalKaryawanRole').modal('show');
        $.each(data, function(i, v) {
            $('.checkRole[value="' + v.id + '"]').prop('checked', true);
        });
    }

    function readData(id) {
        stat = "update";
        IDs = id;
        var data = {
            act: "read",
            id: id,
            _token: "{{ csrf_token() }}"
        };
        reads(URLs + "/read", data, rReads);
    }

    function rReads(data) {
        swal.close();
        $('#password').removeClass('required');
        $('#modalKaryawan').modal("show");
        var idCard = '';
        $.each(data, function(idx, vals) {
            if (idx != 'password' && idx != 'file_id_card') {
                if (idx == 'id_card') {
                    idCard = vals;
                }

                $('[name=' + idx + ']').val(vals);
            }
        });

        if (idCard != null && idCard != '') {
            $('#nomor_id_card').removeAttr('disabled').addClass('required');
            $('#file_id_card').removeAttr('disabled');
        }
    }

    function hapusData(id) {
        swal({
            title: "Konfirmasi",
            text: "Apakah anda ingin menghapus data ?",
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "Batal",
            confirmButtonText: "Lanjutkan"
        }).then(function() {
            var data = {
                act: "delete",
                id: id,
                _token: '{{ csrf_token() }}'
            };
            sendJson(URLs + "/delete", data, rSends);
        })
    }

    $('#modalKaryawan').on('hidden.bs.modal', function(e) {
        $('#form_karyawan input, #form_karyawan select').val('');
        $('#password').addClass('required');
        $('#nomor_id_card').attr('disabled', true).removeClass('required').val('');
        $('#file_id_card').attr('disabled', true).val('');
        IDs = '';
        stat = '';
    });

    $('#modalKaryawanRole').on('hidden.bs.modal', function(e) {
        $('.checkRole').each(function(i, v) {
            $(this).prop('checked', false);
        });
        IDs = '';
        stat = '';
    });

    const assignRole = (e) => {
        let user_id = $('#form_karyawan_role input[name="user_id"]').val();
        $.ajax({
            url: '/user/data-user/' + user_id + '/assign-role/' + event.target.value,
            type: 'PUT',
            data: {
                _token: '{{ csrf_token() }}',
                checked: event.target.checked
            },
            success: function(data) {
                if (data.type != 'success'){
                    swal({
                        title: data.type,
                        text: data.response,
                        type: data.type,
                        confirmButtonText: "OK"
                    });

                    $(e).prop('checked', !$(e).prop('checked'));
                }
            },
            error: function(data) {
                swal({
                    title: 'error',
                    text: 'Terjadi kesalahan',
                    type: 'error',
                    confirmButtonText: "OK"
                });

                $(e).prop('checked', !$(e).prop('checked'));
            },
        });
    }
</script>
@endpush