@extends('admin.layouts.admin')
@section('content')
<div class="page-content">
    <div class="card">
        <div class="card-body">

            <button class="btn btn-primary mb-3" id="addStatus"><i class="bi bi-plus fw-bold"></i>  Tambah</button>

            <div class="table-responsive">
                <table class="table table-bordered w-100" id="statusTable">
                    <thead>
                        <tr>
                            <th rowspan="2">Kode</th>
                            <th rowspan="2">Name</th>
                            <th rowspan="2">Alias</th>
                            <th rowspan="2">Modul</th>
                            <th rowspan="2">Keterangan</th>
                            <th colspan="2" class="text-center">Status</th>
                            <th rowspan="2" width="120">Action</th>
                        </tr>
                        <tr>
                            <th>Aktif</th>
                            <th>Flag</th>
                        </tr>
                    </thead>
                </table>
            </div>

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

<div class="modal fade" id="statusModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Form Status</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="formTable">
                            <thead>
                                <tr>
                                    <th rowspan="2">Kode</th>
                                    <th rowspan="2">Name</th>
                                    <th rowspan="2">Alias</th>
                                    <th rowspan="2">Modul</th>
                                    <th rowspan="2">Keterangan</th>
                                    <th colspan="2">Status</th>
                                    <th width="50" class="action">
                                        <button class="btn btn-success btn-sm" id="addRow">+</button>
                                    </th>
                                </tr>
                                <tr>
                                    <th>Aktif</th>
                                    <th>Flag</th>
                                    <th class="action">Hapus</th>
                                </tr>
                            </thead>
                            <form id="statusForm">
                                <input type="hidden" id="editId">
                            <tbody></tbody>
                            </form>
                        </table>
                    </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveStatus">Save</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let table = $('#statusTable').DataTable({
    processing:true,
    serverSide:true,
    ajax:"{{ route('admin.status.index') }}",
    columns:[
        {data:'kode'},
        {data:'name'},
        {data:'alias'},
        {data:'modul'},
        {data:'keterangan'},
        {data:'status'},
        {data:'status_flag'},
        {data:'action',orderable:false,searchable:false}
    ]
})

function rowTemplate(data = {}) {
    return `
    <tr>
        <td><input type="text" class="form-control kode" value="${data.kode ?? ''}"></td>
        <td><input type="text" class="form-control name" required value="${data.name ?? ''}"></td>
        <td><input type="text" class="form-control alias" value="${data.alias ?? ''}"></td>
        <td><input type="text" class="form-control modul" value="${data.modul ?? ''}"></td>
        <td><input type="text" class="form-control keterangan" value="${data.keterangan ?? ''}"></td>
        <td>
            <select class="form-select is_active">
                <option value="1" ${data.is_active == 1 ? 'selected':''}>Active</option>
                <option value="0" ${data.is_active == 0 ? 'selected':''}>Inactive</option>
            </select>
        </td>
        <td>
            <select class="form-select status_flag">
                <option value="1" ${data.status_flag == 1 ? 'selected':''}>True</option>
                <option value="0" ${data.status_flag !== 1 ? 'selected':''}>False</option>
            </select>
        </td>
        <td class="action"><button type="button" class="btn btn-danger btn-sm removeRow">x</button></td>
    </tr>`
}

function getLastRowData() {
    let last = $('#formTable tbody tr:last')
    if(!last.length) return {}

    let data = {
        kode: last.find('.kode').val(),
        name: last.find('.name').val(),
        alias: last.find('.alias').val(),
        modul: last.find('.modul').val(),
        keterangan: last.find('.keterangan').val(),
        is_active: last.find('.is_active').val(),
        status_flag: last.find('.status_flag').val()
    }

    let hasValue = Object.values(data).some(v => v !== '')
    return hasValue ? data : {}
}

$('#addStatus').click(function(){
    $('.action').show();
    $('#editId').val('')
    $('#formTable tbody').html(rowTemplate())
    $('#statusModal').modal('show')
})

function initSelect2(scope = document) {
    $(scope).find('.form-select').each(function () {

        if ($(this).hasClass('select2-hidden-accessible')) return;

        $(this)
            .select2({
                width: '100%',
                dropdownParent: $('#statusModal')
            })
            .on('select2:open', function () {
                setTimeout(() => {
                    const searchField = document.querySelector('.select2-container--open .select2-search__field');
                    if (searchField) searchField.focus();
                }, 50);
            });
    });
}

$('#addRow').click(function(){
    let lastData = getLastRowData()
    let row = rowTemplate(lastData)

    $('#formTable tbody').append(row)

    initSelect2($('#formTable tbody tr:last'))
})

$(document).on('click','.removeRow',function(){
    $(this).closest('tr').remove()
})

$('#saveStatus').click(function(e){
    e.preventDefault()

    let editId = $('#editId').val()
    let data = []

    const btn = $(this);
    if(btn.data('processing')) return;

    btn.data('processing', true)
       .data('original-html', btn.html())
       .prop('disabled', true)
       .html('<span class="spinner-border spinner-border-sm"></span> Loading');

    $('#formTable tbody tr').each(function(){
        data.push({
            kode: $(this).find('.kode').val(),
            name: $(this).find('.name').val(),
            alias: $(this).find('.alias').val(),
            modul: $(this).find('.modul').val(),
            keterangan: $(this).find('.keterangan').val(),
            is_active: $(this).find('.is_active').val(),
            status_flag: $(this).find('.status_flag').val(),
        })
    })

    let url = editId 
        ? `{{ url('admin/status') }}/${editId}`
        : "{{ route('admin.status.store') }}"

    let method = editId ? 'PUT' : 'POST'

    $.ajax({
        url:url,
        method:method,
        data:{
            _token:"{{ csrf_token() }}",
            data:data
        },
        beforeSend: function(xhr){
            xhr._btn = btn;
        },
        success: (res) => { 
            if (res.success) {
                $('#statusModal').modal('hide'); 
                table.ajax.reload()
            } else {
                showAlert(res.message || 'Gagal Hapus', 'error');
            }
        }
    })
})

$(document).on('click','.edit',function(){
    let id = $(this).data('id')

    $.get(`{{ url('admin/status') }}/${id}`, function(res){
        $('#editId').val(res.id)
        $('#formTable tbody').html(rowTemplate(res))
        $('.action').hide();
        $('#statusModal').modal('show')
    })
})

$(document).on('click', '.delete', function(){
    let id = $(this).data('id');

    showConfirm('Apakah Anda yakin ingin menghapus data ini?', function(){
        $.ajax({
            url: `{{ url('admin/status') }}/${id}`,
            method: 'DELETE',
            data: { _token: "{{ csrf_token() }}" },
            success: function() {
                table.ajax.reload();
                showAlert('Data berhasil dihapus', 'success');
            },
            error: function() {
                showAlert('Gagal menghapus data', 'error');
            }
        });
    });
});
</script>
@endpush