@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="addLevel"><i class="bi bi-plus fw-bold"></i> Tambah</button>
            <div class="table-responsive">
                <table class="table table-bordered w-100" id="levels-table">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Name</th>
                            <th>Department</th>
                            <th>Description</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="levelModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <form id="levelForm">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">Level Form</h5></div>
            <div class="modal-body">
                <input type="hidden" name="id" id="level_id">
                <div class="mb-3">
                    <label>Name</label>
                    <input type="text" name="name" class="form-control" id="level_name" placeholder="Input Name Level ..." required>
                </div>
                <div class="mb-3">
                    <label>Department</label>
                    <select name="kategori" id="kategori" class="form-select">
                        <option value="">Department</option>
                                            </select>
                </div>
                <div class="mb-3">
                    <label>Description</label>
                    <textarea name="description" class="form-control" id="level_description" placeholder="Input Description ..."></textarea>
                </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>
$(function(){
    let table = $('#levels-table').DataTable({
        processing:true,
        serverSide:true,
        ajax: "{{ route('admin.levels.index') }}",
        columns:[
            {data:'DT_RowIndex', name:'DT_RowIndex', orderable:false, searchable:false},
            {data:'name'},
            {data:'status_name'},
            {data:'description'},
            {data:'action', orderable:false, searchable:false}
        ]
    });

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

    $('#addLevel').on('click', function(){
        $('#levelForm')[0].reset();
        $('#level_id').val('');
        levelModal.show();
    });

    $('#levels-table').on('click','.edit', function(){
        let id = $(this).data('id');
        $.get("{{ url('admin/levels') }}/"+id, function(res){
            $('#level_id').val(res.level.id);
            $('#level_name').val(res.level.name);
            $('#level_description').val(res.level.description);
            $('#kategori').val(res.level.kategori).trigger('change');
            
            levelModal.show();
        });
    });

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

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

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