TTK_E32222585_laravel/resources/views/dashboard/user.blade.php

@extends('dashboard.base')

@section('title', 'Manajemen User')

@section('content')
<div class="content-wrapper">
    <div class="row">
        <div class="col-md-12 grid-margin">
            <div class="row">
                <div class="col-12 col-xl-8 mb-4 mb-xl-0">
                    <h3 class="font-weight-bold">Manajemen User</h3>
                    <h6 class="font-weight-normal mb-0">Kelola data user sistem</h6>
                </div>
                <div class="col-12 col-xl-4">
                    <button type="button" class="btn btn-primary btn-sm float-right" data-toggle="modal" data-target="#addUserModal">
                        <i class="mdi mdi-plus"></i> Tambah User
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Filter Role:</label>
                                <select class="form-control" id="roleFilter">
                                    <option value="">Semua Role</option>
                                    <option value="admin">Admin</option>
                                    <option value="karyawan">Karyawan</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-striped" id="usersTable">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Foto</th>
                                    <th>Nama</th>
                                    <th>Email</th>
                                    <th>NIP</th>
                                    <th>Jabatan</th>
                                    <th>Role</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tambah User Baru</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="addUserForm" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Nama Lengkap <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Email <span class="text-danger">*</span></label>
                                <input type="email" class="form-control" name="email" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Password <span class="text-danger">*</span></label>
                                <input type="password" class="form-control" name="password" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Role <span class="text-danger">*</span></label>
                                <select class="form-control" name="role" required>
                                    <option value="">Pilih Role</option>
                                    <option value="admin">Admin</option>
                                    <option value="karyawan">Karyawan</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>NIP <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="nip" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Jabatan <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="position" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>No. Telepon <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="phone_number" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Foto Profil</label>
                                <input type="file" class="form-control" name="profile_photo" accept="image/*">
                                <small class="text-muted">Format: JPG, PNG, JPEG. Max: 2MB</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit User</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="editUserForm" enctype="multipart/form-data">
                <input type="hidden" name="user_id" id="editUserId">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Nama Lengkap <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="name" id="editName" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Email <span class="text-danger">*</span></label>
                                <input type="email" class="form-control" name="email" id="editEmail" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Password Baru</label>
                                <input type="password" class="form-control" name="password" id="editPassword">
                                <small class="text-muted">Kosongkan jika tidak ingin mengubah password</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Role <span class="text-danger">*</span></label>
                                <select class="form-control" name="role" id="editRole" required>
                                    <option value="admin">Admin</option>
                                    <option value="karyawan">Karyawan</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>NIP <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="nip" id="editNip" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Jabatan <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="position" id="editPosition" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>No. Telepon <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="phone_number" id="editPhone" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Foto Profil</label>
                                <input type="file" class="form-control" name="profile_photo" accept="image/*">
                                <small class="text-muted">Format: JPG, PNG, JPEG. Max: 2MB</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('script')
<script>
let usersTable;

$(document).ready(function() {
    initDataTable();

    $('#roleFilter').change(function() {
        usersTable.ajax.reload();
    });
});

function initDataTable() {
    usersTable = $('#usersTable').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ajax: {
            url: '/api/admin/users',
            headers: {
                'Authorization': getAuthorizationHeader(),
                'Accept': 'application/json'
            },
            data: function(d) {
                d.role = $('#roleFilter').val();
            }
        },
        columns: [
            {
                data: null,
                orderable: false,
                searchable: false,
                render: function(data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                data: 'profile.profile_photo',
                name: 'profile.profile_photo',
                orderable: false,
                searchable: false,
                render: function(data, type, row) {
                    if (data) {
                        return `<img src="/storage/profiles/${data}" class="rounded-circle" width="40" height="40">`;
                    }
                    return `<div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">${row.name.charAt(0).toUpperCase()}</div>`;
                }
            },
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'profile.nip', name: 'profile.nip'},
            {data: 'profile.position', name: 'profile.position'},
            {
                data: 'role',
                name: 'role',
                render: function(data) {
                    return data === 'admin' ?
                        '<span class="badge badge-success">Admin</span>' :
                        '<span class="badge badge-info">Karyawan</span>';
                }
            },
            {
                data: 'id',
                name: 'id',
                orderable: false,
                searchable: false,
                render: function(data, type, row) {
                    return `
                        <button class="btn btn-sm btn-info" onclick="editUser(${data})">
                            <i class="ti ti-pencil"></i>
                        </button>
                        <button class="btn btn-sm btn-danger" onclick="deleteUser(${data}, '${row.name}')">
                            <i class="ti ti-trash"></i>
                        </button>
                    `;
                }
            }
        ]
    });
}

$('#addUserForm').submit(function(e) {
    e.preventDefault();

    const formData = new FormData(this);

    $.ajax({
        url: '/api/admin/users',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        headers: {
            'Authorization': getAuthorizationHeader(),
            'Accept': 'application/json'
        },
        success: function(response) {
            $('#addUserModal').modal('hide');
            $('#addUserForm')[0].reset();
            usersTable.ajax.reload();

            Swal.fire({
                icon: 'success',
                title: 'Berhasil!',
                text: response.message
            });
        },
        error: function(xhr) {
            const errors = xhr.responseJSON.message;
            Swal.fire({
                icon: 'error',
                title: 'Gagal!',
                text: errors
            });
        }
    });
});

function editUser(id) {
    $.ajax({
        url: `/api/admin/users/${id}`,
        type: 'GET',
        headers: {
            'Authorization': getAuthorizationHeader(),
            'Accept': 'application/json'
        },
        success: function(response) {
            const user = response.data;

            $('#editUserId').val(user.id);
            $('#editName').val(user.name);
            $('#editEmail').val(user.email);
            $('#editRole').val(user.role);
            $('#editNip').val(user.profile.nip);
            $('#editPosition').val(user.profile.position);
            $('#editPhone').val(user.profile.phone_number);

            $('#editUserModal').modal('show');
        },
        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Gagal!',
                text: 'Gagal mengambil data user'
            });
        }
    });
}

$('#editUserForm').submit(function(e) {
    e.preventDefault();

    const userId = $('#editUserId').val();
    const formData = new FormData(this);

    $.ajax({
        url: `/api/admin/users/${userId}`,
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        headers: {
            'Authorization': getAuthorizationHeader(),
            'Accept': 'application/json',
            'X-HTTP-Method-Override': 'PUT'
        },
        success: function(response) {
            $('#editUserModal').modal('hide');
            usersTable.ajax.reload();

            Swal.fire({
                icon: 'success',
                title: 'Berhasil!',
                text: response.message
            });
        },
        error: function(xhr) {
            const errors = xhr.responseJSON.message;
            Swal.fire({
                icon: 'error',
                title: 'Gagal!',
                text: errors
            });
        }
    });
});

function deleteUser(id, name) {
    Swal.fire({
        title: 'Konfirmasi Hapus',
        text: `Apakah Anda yakin ingin menghapus user ${name}?`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Ya, Hapus!',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: `/api/admin/users/${id}`,
                type: 'DELETE',
                headers: {
                    'Authorization': getAuthorizationHeader(),
                    'Accept': 'application/json'
                },
                success: function(response) {
                    usersTable.ajax.reload();

                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: response.message
                    });
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal!',
                        text: xhr.responseJSON.message
                    });
                }
            });
        }
    });
}
</script>
@endpush