@extends('admin.layouts.admin')
@section('content')
<div class="page-content">
    <div class="card">
        <div class="card-body">
            <button class="btn btn-primary mb-2" id="addUser"><i class="bi bi-plus fw-bold"></i> Add</button>
            <div class="table-responsive">
                <table class="table table-bordered w-100" id="users-table">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th class="text-center">Pict</th>
                            <th>NIK</th>
                            <th>Name</th>
                            <th>Company</th>
                            <th>Email</th>
                            <th>Level</th>
                            <th>Department</th>
                            <th>Bank Account</th>
                            <th>Bank Number</th>
                            <th>Bank Name</th>
                            <th>Pay/Day</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="userModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <form id="userForm" enctype="multipart/form-data">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">User Form</h5></div>
            <div class="modal-body">
                <input type="hidden" name="id" id="user_id">
                <div class="mb-3 d-none">
                    <label>Company</label>
                    <select name="company_id" id="user_company_id" class="form-control form-select" required>
                        @foreach($company as $i)
                            <option value="{{ $i->id }}" class="uppercase">{{ $i->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="mb-3">
                    <label>NIK</label>
                    <input type="text" name="username" class="form-control" id="username" placeholder="NIK" required>
                </div>

                <div class="mb-3">
                    <label>Name</label>
                    <input type="text" name="name_account" class="form-control" id="name_account" placeholder="Full Name" required>
                </div>
                <div class="mb-3">
                    <label>Email</label>
                    <input type="email" name="email" class="form-control" id="user_email" placeholder="Email User">
                </div>
                <div class="mb-3">
                    <label for="password">Password</label>
                    <div class="input-group">
                        <input type="password" name="password" id="password" class="form-control toggle-password" placeholder="New password" autocomplete="new-password">
                        <span class="input-group-text toggle-password-icon cursor-pointer"><i class="bi bi-eye"></i></span>
                    </div>
                </div>
                <div class="mb-3">
                    <label>Level & Department</label>
                    <select name="level_id" id="user_level_id" class="form-control form-select" required>
                        <option value="">-- Select Level --</option>
                        @foreach($levels as $level)
                            <option value="{{ $level->id }}">{{ $level->name . ' - ' . $level->status_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label>Bank Account</label>
                    <input type="text" name="nama_rekening" class="form-control" id="nama_rekening" placeholder="Bank Account">
                </div>
                <div class="mb-3">
                    <label>Bank Number</label>
                    <input type="text" name="no_rekening" class="form-control" id="no_rekening" placeholder="Bank Number">
                </div>
                <div class="mb-3">
                    <label>Bank Name</label>
                    <input type="text" name="bank" class="form-control" id="bank" placeholder="Bank Name">
                </div>
                <div class="mb-3">
                    <label>Pay/Day</label>
                    <input type="text" name="gaji_harian" class="form-control rupiah" id="gaji_harian" placeholder="Pay/Day">
                </div>
                <div class="mb-3">
                    <label>Status Account</label>
                    <select name="status_account" class="form-control form-select">
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </select>
                </div>
                <div class="mb-3 d-grid">
                    <label>Profile Picture</label>
                    <input type="file" name="profile_picture" id="profile_picture" class="form-control" accept="image/*">
                    <img id="preview_image" src="" alt="" style="max-width:100px; margin-top:10px; display:none;">
                </div>

                <div class="mb-3">
                    <label>Permissions (Optional Override)</label>
                    <div class="table-responsive">
                    <table class="table table-bordered" id="permissions-table">
                        <thead>
                            <tr>
                                <th>Menu</th>
                                <th>
                                    Read<br>
                                    <input type="checkbox" class="check-all" data-type="read">
                                </th>
                                <th>
                                    Create<br>
                                    <input type="checkbox" class="check-all" data-type="create">
                                </th>
                                <th>
                                    Update<br>
                                    <input type="checkbox" class="check-all" data-type="update">
                                </th>
                                <th>
                                    Delete<br>
                                    <input type="checkbox" class="check-all" data-type="delete">
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($navigations as $nav)
                            <tr>
                                <td>{{ $nav->title }}</td>
                                <td><input type="checkbox" name="permissions[{{ $nav->key }}][read]" class="perm-checkbox read" value="1"></td>
                                <td><input type="checkbox" name="permissions[{{ $nav->key }}][create]" class="perm-checkbox create" value="1"></td>
                                <td><input type="checkbox" name="permissions[{{ $nav->key }}][update]" class="perm-checkbox update" value="1"></td>
                                <td><input type="checkbox" name="permissions[{{ $nav->key }}][delete]" class="perm-checkbox delete" value="1"></td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>

                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </div>
    </form>
  </div>
</div>

@endsection

@push('scripts')
<script>
initImagePreviewGlobal && initImagePreviewGlobal();

$(function(){
    let table = $('#users-table').DataTable({
        processing:true,
        serverSide:true,
        ajax: "{{ route('admin.users.index') }}",
        columns:[
            {data:'DT_RowIndex', name:'DT_RowIndex', orderable:false, searchable:false},
            {data:'pic', searchable:false, orderable:false},
            {data:'username'},
            {data:'name_account'},
            {data:'company_name'},
            {data:'email'},
            {data:'level_name'},
            {data:'status_name'},
            {data:'nama_rekening'},
            {data:'no_rekening'},
            {data:'bank'},
            {data:'gaji_harian'},
            {data:'status_account'},
            {data:'action', orderable:false, searchable:false}
        ],
        columnDefs: [
            { targets: 1, className: 'text-center align-middle' } 
        ]
    });

    let userModal = new bootstrap.Modal(document.getElementById('userModal'));

    $('#addUser').on('click', function(){
        $('#userForm')[0].reset();
        $('#user_id').val('');
        $('#preview_image').hide();
        $('.perm-checkbox').prop('checked', false);
        userModal.show();
    });

    $('#userModal').on('hidden.bs.modal', function () {
        $(this).find('form')[0].reset();
        $(this).find('select').val(null).trigger('change');
    });

    $(document).on('change','.check-all',function(){
        let type = $(this).data('type');
        let checked = $(this).is(':checked');
        $('.perm-checkbox.'+type).prop('checked', checked);
    });

    $('#users-table').on('click','.edit', function(){
        let id = $(this).data('id');
        $.get("{{ url('admin/users') }}/"+id, function(res){
            $('#user_id').val(res.user.id);
            $('#username').val(res.user.username);
            $('#name_account').val(res.user.name_account);
            $('#user_email').val(res.user.email);
            $('#nama_rekening').val(res.user.nama_rekening);
            $('#no_rekening').val(res.user.no_rekening);
            $('#bank').val(res.user.bank);
            $('#gaji_harian').val(res.user.gaji_harian);
            $('#user_level_id')
                .val(res.user.level_id)
                .trigger('change');
            $('#user_company_id')
                .val(res.user.company_id)
                .trigger('change');
            $('select[name="status_account"]')
                .val(res.user.status_account)
                .trigger('change');
            if(res.user.profile_picture){
                $('#preview_image').attr('src','/storage/'+res.user.profile_picture).show();
            } else {
                $('#preview_image').hide();
            }
            $('.perm-checkbox').prop('checked', false);
            if(res.permissions){
                for(let key in res.permissions){
                    let perms = res.permissions[key];
                    for(let action in perms){
                        if(perms[action]==1){
                            $('input[name="permissions['+key+']['+action+']"]').prop('checked',true);
                        }
                    }
                }
            }
            userModal.show();
        });
    });

    $('#profile_picture').on('change', function(){
        const [file] = this.files;
        if(file){
            $('#preview_image').attr('src', URL.createObjectURL(file)).show();
        } else {
            $('#preview_image').hide();
        }
    });

    $('#userForm').on('submit', function(e){
        e.preventDefault();
        ajaxFormSubmitAuto(this, function(res){
            userModal.hide();
            table.ajax.reload();
        });
    });

    $('#users-table').on('click', '.delete', function(){
        let id = $(this).data('id');

        showConfirm('Delete this user?', function(){
            $.ajax({
                url: `{{ url('admin/users') }}/${id}`,
                method: 'DELETE',
                data: { _token: "{{ csrf_token() }}" },
                success: function() {
                    table.ajax.reload();
                    showAlert('User berhasil dihapus', 'success');
                },
                error: function() {
                    showAlert('Gagal menghapus user', 'error');
                }
            });
        });
    });
});
</script>
@endpush