@extends('layouts.master')

@section('title', 'Jenis Pasien')

@section('styles')
<style>
    #tblJenisPasien_wrapper .dataTables_filter input {
        border-color: #c8c8c8 !important;
        border-radius: 6px;
        padding: 4px 10px;
    }
    #tblJenisPasien_wrapper .dataTables_filter input:focus {
        border-color: #a15adf !important;
        box-shadow: 0 0 0 0.18rem rgba(161,90,223,.15) !important;
    }
    #tblJenisPasien_wrapper .dataTables_length select {
        border-color: #c8c8c8 !important;
        border-radius: 6px;
        padding: 4px 8px;
        min-width: 70px;
    }
    #tblJenisPasien_wrapper .dataTables_filter label,
    #tblJenisPasien_wrapper .dataTables_length label { font-size:.875rem; color:#6c757d; }
    #tblJenisPasien_wrapper .dataTables_info { font-size:.8rem; color:#6c757d; }
    #tblJenisPasien td.aksi-col { white-space:nowrap; }
</style>
@endsection

@section('content')
<div class="container-fluid">

    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <p class="fw-semibold fs-18 mb-0">Jenis Pasien</p>
            <span class="fs-13 text-muted">Data Induk &rarr; Jenis Pasien</span>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card custom-card">
                <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <div class="card-title mb-0">Daftar Jenis Pasien</div>
                    @can('jenis_pasien.create')
                    <button type="button" class="btn btn-primary btn-sm" onclick="openTambah()">
                        <i class="bx bx-plus me-1"></i> Tambah Jenis Pasien
                    </button>
                    @endcan
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="tblJenisPasien" class="table table-hover table-bordered align-middle mb-0" style="width:100%">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-center" style="width:45px">No</th>
                                    <th class="text-center" style="width:120px">Aksi</th>
                                    <th>Nama Jenis Pasien</th>
                                    <th class="text-center" style="width:100px">Status</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

{{-- Modal Tambah / Edit --}}
<div class="modal fade" id="modalForm" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="modalFormTitle">Tambah Jenis Pasien</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="formId">
                <div class="mb-0">
                    <label class="form-label fw-semibold">Nama Jenis Pasien <span class="text-danger">*</span></label>
                    <input type="text" id="formNama" class="form-control" maxlength="100" placeholder="Contoh: BPJS, Umum, Asuransi">
                    <div class="invalid-feedback" id="errNama"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary btn-sm" onclick="simpan()">
                    <i class="bx bx-save me-1"></i> Simpan
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const URL_DATA  = '{{ route("data-induk.jenis-pasien.data") }}';
const URL_STORE = '{{ route("data-induk.jenis-pasien.store") }}';
const URL_BASE  = '{{ url("data-induk/jenis-pasien") }}';
const CSRF      = '{{ csrf_token() }}';
const CAN_EDIT   = {{ Auth::guard('internal')->user()->can('jenis_pasien.edit')   ? 'true' : 'false' }};
const CAN_DELETE = {{ Auth::guard('internal')->user()->can('jenis_pasien.delete') ? 'true' : 'false' }};

let dt;

$(function () {
    dt = $('#tblJenisPasien').DataTable({
        ajax: { url: URL_DATA, dataSrc: 'data' },
        columns: [
            { data: null, orderable: false, searchable: false, className: 'text-center' },
            {
                data: null, orderable: false, searchable: false, className: 'text-center aksi-col',
                render: function (data, type, row) {
                    let btns = '';
                    if (CAN_EDIT) {
                        const toggleIcon  = row.is_active ? 'bx-toggle-right' : 'bx-toggle-left';
                        const toggleClass = row.is_active ? 'btn-success' : 'btn-danger';
                        const toggleTitle = row.is_active ? 'Nonaktifkan' : 'Aktifkan';
                        btns += `<button class="btn ${toggleClass} btn-sm px-2 py-1 me-1" title="${toggleTitle}" onclick="toggleStatus(${row.id})"><i class="bx ${toggleIcon} fs-14"></i></button>`;
                        btns += `<button class="btn btn-warning btn-sm px-2 py-1 me-1" title="Edit" onclick="openEdit(${row.id})"><i class="bx bx-pencil fs-14"></i></button>`;
                    }
                    if (CAN_DELETE) btns += `<button class="btn btn-danger btn-sm px-2 py-1" title="Hapus" onclick="hapus(${row.id})"><i class="bx bx-trash fs-14"></i></button>`;
                    return btns || '-';
                }
            },
            { data: 'nama' },
            {
                data: 'is_active', className: 'text-center',
                render: val => val
                    ? '<span class="badge bg-success-transparent text-success">Aktif</span>'
                    : '<span class="badge bg-danger-transparent text-danger">Nonaktif</span>',
            },
        ],
        drawCallback: function () {
            const api = this.api(), start = api.page.info().start;
            api.rows({ page: 'current', order: 'applied' }).nodes().each(function (row, i) {
                $('td:first-child', row).html(start + i + 1);
            });
        },
        language: { url: '//cdn.datatables.net/plug-ins/1.12.1/i18n/id.json' },
        pageLength: 25,
        order: [[2, 'asc']],
    });
});

function clearErrors() {
    $('#formNama').removeClass('is-invalid');
    $('#errNama').text('');
}

function openTambah() {
    clearErrors();
    $('#formId').val('');
    $('#modalFormTitle').text('Tambah Jenis Pasien');
    $('#formNama').val('');
    new bootstrap.Modal('#modalForm').show();
    setTimeout(() => $('#formNama').focus(), 300);
}

function openEdit(id) {
    clearErrors();
    $.get(URL_BASE + '/' + id, function (res) {
        const d = res.data;
        $('#formId').val(d.id);
        $('#modalFormTitle').text('Edit Jenis Pasien');
        $('#formNama').val(d.nama);
        new bootstrap.Modal('#modalForm').show();
        setTimeout(() => $('#formNama').focus(), 300);
    });
}

function simpan() {
    clearErrors();
    const id = $('#formId').val();
    const isEdit = !!id;

    $.ajax({
        url:    isEdit ? URL_BASE + '/' + id : URL_STORE,
        method: isEdit ? 'PUT' : 'POST',
        headers: { 'X-CSRF-TOKEN': CSRF },
        data: { nama: $('#formNama').val() },
        success: function (res) {
            if (res.success) {
                bootstrap.Modal.getInstance('#modalForm').hide();
                dt.ajax.reload(null, false);
                Swal.fire({ icon: 'success', title: 'Berhasil', text: res.message, timer: 1800, showConfirmButton: false });
            }
        },
        error: function (xhr) {
            if (xhr.status === 422 && xhr.responseJSON.errors?.nama) {
                $('#formNama').addClass('is-invalid');
                $('#errNama').text(xhr.responseJSON.errors.nama[0]);
            }
        }
    });
}

function toggleStatus(id) {
    $.ajax({
        url: URL_BASE + '/' + id + '/toggle-status',
        method: 'PATCH',
        headers: { 'X-CSRF-TOKEN': CSRF },
        success: function (res) {
            if (res.success) {
                dt.ajax.reload(null, false);
                Swal.fire({ icon: 'success', title: 'Berhasil', text: res.message, timer: 1500, showConfirmButton: false });
            }
        }
    });
}

function hapus(id) {
    Swal.fire({
        title: 'Hapus jenis pasien ini?',
        text: 'Data yang sudah dihapus tidak bisa dikembalikan.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Ya, Hapus',
        cancelButtonText: 'Batal',
    }).then(result => {
        if (!result.isConfirmed) return;
        $.ajax({
            url: URL_BASE + '/' + id,
            method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': CSRF },
            success: function (res) {
                if (res.success) {
                    dt.ajax.reload(null, false);
                    Swal.fire({ icon: 'success', title: 'Dihapus', text: res.message, timer: 1500, showConfirmButton: false });
                }
            }
        });
    });
}
</script>
@endpush