<?php $__env->startSection('content'); ?>
    <div class="row mb-3">
        <div class="col-md-6">
            <h2>Data Jabatan</h2>
        </div>
        <div class="col-md-6 text-end">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createModal">
                Tambah Data
            </button>
        </div>
    </div>

    <div class="card shadow-sm border-0 rounded-4">
        <div class="card-body">
            <div class="table-responsive">
                <table id="datatable" class="table table-hover table-sm align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="d-none d-md-table-cell" style="width: 20px">No</th>
                            <th>Jabatan</th>
                            <th width="180" class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>

            <nav class="mt-3">
                <ul class="pagination pagination-sm justify-content-end" id="pagination"></ul>
            </nav>
        </div>
    </div>

    <div class="modal fade" id="editModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">Edit Jabatan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    </button>
                </div>

                <div class="modal-body">
                    <form method="POST" id="formEditJabatan">
                        <?php echo csrf_field(); ?>
                        <?php echo method_field('PUT'); ?>

                        <input type="hidden" name="id" id="edit_id">
                        <input type="hidden" id="old_jabatan">

                        <div class="form-group">
                            <label for="edit_jabatan">Jabatan</label>

                            <input type="text" name="jabatan" id="edit_jabatan"
                                class="form-control <?php $__errorArgs = ['jabatan'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" placeholder="Masukkan Jabatan"
                                autocomplete="off">

                            <span id="messageJabatan" class="text-danger"></span>

                            <?php $__errorArgs = ['jabatan'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                <div class="invalid-feedback">
                                    <?php echo e($message); ?>

                                </div>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>

                        <div class="modal-footer">
                            <button type="submit" id="buttonEditJabatan" class="btn btn-primary">
                                Simpan
                            </button>

                            <button type="reset" class="btn btn-secondary">
                                Batalkan
                            </button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>

    <div class="modal fade" id="createModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">Tambah Jabatan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    </button>
                </div>

                <div class="modal-body">
                    <form action="<?php echo e(route('jabatan.store')); ?>" method="POST" id="formCreateJabatan">
                        <?php echo csrf_field(); ?>

                        <div class="form-group">
                            <label for="jabatanCreate">Jabatan</label>

                            <input type="text" name="jabatan" id="jabatanCreate"
                                class="form-control <?php $__errorArgs = ['jabatan'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" placeholder="Masukkan Jabatan"
                                autocomplete="off">

                            <span id="messageJabatanCreate" class="text-danger"></span>

                            <?php $__errorArgs = ['jabatan'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                <div class="invalid-feedback">
                                    <?php echo e($message); ?>

                                </div>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>

                        <div class="modal-footer">
                            <button type="submit" id="buttonCreateJabatan" class="btn btn-primary">
                                Simpan
                            </button>

                            <button type="reset" class="btn btn-secondary">
                                Batalkan
                            </button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {

            var table = $('#datatable').DataTable({
                processing: false,
                ordering: false,
                serverSide: false,
                ajax: "<?php echo e(route('jabatan.getData')); ?>",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false,
                    },
                    {
                        data: 'jabatan',
                        name: 'jabatan'
                    },
                    {
                        data: 'id',
                        name: 'id',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            return `
                            <div class="d-flex gap-1">
                                <button
                                    type="button"
                                    class="btn btn-sm btn-warning btn-edit"
                                    data-id="${row.id}">
                                    <i class="bi bi-pencil"></i>
                                    <span class="d-none d-md-inline ms-1">
                                        Edit
                                    </span>
                                </button>

                                <form action="/jabatan/${row.id}"
                                    method="POST"
                                    onsubmit="return confirm('Yakin ingin menghapus data ini?')"
                                    style="display:inline;">
                                    <input type="hidden"
                                        name="_token"
                                        value="<?php echo e(csrf_token()); ?>">

                                    <input type="hidden"
                                        name="_method"
                                        value="DELETE">

                                    <button type="submit"
                                        class="btn btn-sm btn-danger">
                                         <i class="bi bi-trash"></i>
                                        <span class="d-none d-md-inline ms-1">
                                                        Hapus
                                                    </span>
                                    </button>
  
                                </form>
                            </div>
                        `;
                        }
                    }
                ]
            });

            // Edit
            $('#datatable tbody').on('click', '.btn-edit', function(e) {

                e.preventDefault();

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

                $.ajax({
                    url: `/jabatan/${id}`,
                    type: 'GET',
                    success: function(data) {

                        $('#edit_id').val(data.id);
                        $('#old_jabatan').val(data.jabatan);
                        $('#edit_jabatan').val(data.jabatan);

                        $('#formEditJabatan').attr(
                            'action',
                            `/jabatan/${data.id}`
                        );

                        $('#editModal').modal('show');
                    },
                    error: function(xhr) {
                        console.log(xhr.responseText);
                    }
                });
            });

            // Validasi Edit
            $(document).on('click', '#buttonEditJabatan', function(e) {

                e.preventDefault();

                const jabatan = $('#edit_jabatan')
                    .val()
                    .trim()
                    .toLowerCase();

                const old_jabatan = $('#old_jabatan')
                    .val()
                    .trim()
                    .toLowerCase();

                $('#messageJabatan').text('');

                let valid = true;

                if (!jabatan) {
                    $('#messageJabatan')
                        .text('Jabatan tidak boleh kosong.');
                    valid = false;
                }

                if (jabatan === old_jabatan) {
                    $('#messageJabatan')
                        .text('Jabatan tidak boleh sama.');
                    valid = false;
                }

                if (valid) {
                    $('#formEditJabatan').submit();
                }
            });

            $('#editModal').on('hidden.bs.modal', function() {
                $('#messageJabatan').text('');
            });

            // Validasi Create
            $(document).on('click', '#buttonCreateJabatan', function(e) {

                e.preventDefault();

                const jabatan = $('#jabatanCreate').val();

                $('#messageJabatanCreate').text('');

                if (!jabatan) {
                    $('#messageJabatanCreate')
                        .text('Jabatan tidak boleh kosong.');
                    return;
                }

                $('#formCreateJabatan').submit();
            });

            $('#createModal').on('hidden.bs.modal', function() {
                $('#messageJabatanCreate').text('');
            });

        });
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/u544939042/domains/mitracempaka.id/gl-asuh/resources/views/menu/jabatan/index.blade.php ENDPATH**/ ?>