@extends('layouts.master')

@section('title', 'Tenaga Kesehatan')

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

    .select2-container--default .select2-selection--single {
        border-color: #dee2e6;
        border-radius: 0.375rem;
        height: calc(1.5em + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 1.5;
        color: #212529;
        padding-left: 0;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 100%;
    }
    .select2-container--default.select2-container--focus .select2-selection--single,
    .select2-container--default.select2-container--open .select2-selection--single {
        border-color: #a15adf;
        box-shadow: 0 0 0 0.18rem rgba(161,90,223,.15);
        outline: 0;
    }
</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">Tenaga Kesehatan</p>
            <span class="fs-13 text-muted">Data Induk &rarr; Tenaga Kesehatan</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 Tenaga Kesehatan</div>
                    <div class="d-flex gap-2">
                        @can('nakes.view')
                        <a href="{{ route('data-induk.nakes.export-excel') }}" class="btn btn-success btn-sm">
                            <i class="bx bx-download me-1"></i> Unduh Excel
                        </a>
                        @endcan
                        @can('nakes.create')
                        <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modalImport">
                            <i class="bx bx-upload me-1"></i> Import
                        </button>
                        <button type="button" class="btn btn-primary btn-sm" onclick="openTambah()">
                            <i class="bx bx-plus me-1"></i> Tambah Nakes
                        </button>
                        @endcan
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="tblNakes" class="table table-hover table-bordered align-middle mb-0" style="width:100%">
                            <thead>
                                <tr>
                                    <th class="text-center" style="width:45px">No</th>
                                    <th class="text-center" style="width:120px">Aksi</th>
                                    <th>Nama</th>
                                    <th>Nama Lengkap</th>
                                    <th style="width:160px">Profesi</th>
                                    <th>Faskes</th>
                                    <th class="text-center" style="width:90px">Status</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

@include('data-induk._modal-import', [
    'label'         => 'Tenaga Kesehatan',
    'importRoute'   => 'data-induk.nakes.import',
    'templateRoute' => 'data-induk.nakes.template',
])

{{-- Modal Tambah / Edit --}}
<div class="modal fade" id="modalForm" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="modalFormTitle">Tambah Tenaga Kesehatan</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-3">
                    <label class="form-label fw-semibold">Nama <span class="text-danger">*</span></label>
                    <input type="text" id="formNama" class="form-control" maxlength="255" placeholder="Nama panggilan / singkat">
                    <div class="invalid-feedback" id="errNama"></div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Nama Lengkap</label>
                    <input type="text" id="formNamaLengkap" class="form-control" maxlength="255" placeholder="Nama lengkap beserta gelar (opsional)">
                    <div class="invalid-feedback" id="errNamaLengkap"></div>
                </div>

                <div class="row">
                    <div class="col-12 mb-3">
                        <label class="form-label fw-semibold">Profesi <span class="text-danger">*</span></label>
                        <select id="formProfesi" class="form-select">
                            <option value="">-- Pilih Profesi --</option>
                            @foreach($profesiOptions as $p)
                            <option value="{{ $p }}">{{ $p }}</option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback" id="errProfesi"></div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-8 mb-3">
                        <label class="form-label fw-semibold">Alamat</label>
                        <textarea id="formAlamat" class="form-control" rows="2" maxlength="500" placeholder="Alamat tempat praktek / tinggal (opsional)"></textarea>
                        <div class="invalid-feedback" id="errAlamat"></div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-semibold">No. Telp / HP</label>
                        <input type="text" id="formNoTelp" class="form-control" maxlength="20" placeholder="08xx...">
                        <div class="invalid-feedback" id="errNoTelp"></div>
                    </div>
                </div>
                <div class="mb-1">
                    <label class="form-label fw-semibold">Catatan</label>
                    <textarea id="formCatatan" class="form-control" rows="2" placeholder="Opsional"></textarea>
                    <div class="invalid-feedback" id="errCatatan"></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>

{{-- Modal Lihat --}}
<div class="modal fade" id="modalLihat" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Detail Tenaga Kesehatan</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <ul class="nav nav-tabs mb-3" id="tabsLihat">
                    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tabInfo">Info</a></li>
                    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tabFaskes" onclick="loadFaskes()">Fasilitas Kesehatan</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="tabInfo">
                        <table class="table table-sm table-borderless mb-0">
                            <tr><td class="text-muted" width="130">Kode</td><td id="vKode"></td></tr>
                            <tr><td class="text-muted">Nama</td><td id="vNama"></td></tr>
                            <tr><td class="text-muted">Nama Lengkap</td><td id="vNamaLengkap"></td></tr>
                            <tr><td class="text-muted">Profesi</td><td id="vProfesi"></td></tr>
                            <tr><td class="text-muted">No. Telp</td><td id="vNoTelp"></td></tr>
                            <tr><td class="text-muted">Alamat</td><td id="vAlamat"></td></tr>
                            <tr><td class="text-muted">Status</td><td id="vStatus"></td></tr>
                            <tr><td class="text-muted">Catatan</td><td id="vCatatan"></td></tr>
                        </table>
                        <hr class="my-2">
                        <div class="row text-muted" style="font-size:0.8rem">
                            <div class="col-6">
                                <i class="bx bx-user-plus me-1"></i>Dibuat oleh: <span id="vAuditCreatedBy">—</span><br>
                                <span id="vAuditCreatedAt" class="ms-3"></span>
                            </div>
                            <div class="col-6">
                                <i class="bx bx-edit me-1"></i>Diubah oleh: <span id="vAuditUpdatedBy">—</span><br>
                                <span id="vAuditUpdatedAt" class="ms-3"></span>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tabFaskes">
                        @can('nakes.edit')
                        <div class="d-flex gap-2 mb-3">
                            <select id="faskesAddSelect" class="form-select form-select-sm" style="max-width:320px">
                                <option value="">-- Pilih Faskes --</option>
                                @foreach($faskesList as $f)
                                <option value="{{ $f->id }}">{{ $f->nama }}</option>
                                @endforeach
                            </select>
                            <button class="btn btn-primary btn-sm" onclick="tambahFaskes()">
                                <i class="bx bx-plus me-1"></i> Tambah
                            </button>
                        </div>
                        @endcan
                        <div id="faskesTableWrap">
                            <table class="table table-sm table-bordered align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width:40px">No</th>
                                        <th style="width:120px">Kode</th>
                                        <th>Nama Faskes</th>
                                        @can('nakes.edit')<th style="width:60px" class="text-center">Hapus</th>@endcan
                                    </tr>
                                </thead>
                                <tbody id="faskesTableBody">
                                    <tr><td colspan="4" class="text-center text-muted">Memuat...</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>
@endsection

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

let dt;
let currentNakesId = null;
let faskesLoaded = false;

$(function () {
    $('#faskesAddSelect').select2({
        dropdownParent: $('#modalLihat'),
        allowClear: true,
        placeholder: '-- Pilih Faskes --',
        width: '100%',
    });

    $('#modalLihat').on('hidden.bs.modal', function () {
        faskesLoaded = false;
        $('#tabsLihat a[href="#tabInfo"]').tab('show');
    });

    dt = $('#tblNakes').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 = `<button class="btn btn-info btn-sm px-2 py-1 me-1" title="Lihat" onclick="openLihat(${row.id})"><i class="bx bx-show fs-14"></i></button>`;
                    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: 'nama_lengkap', defaultContent: '-' },
            { data: 'profesi' },
            { data: 'faskes', defaultContent: '-', render: function(d) {
                if (!d || !d.length) return '-';
                return d.map(f => `<span class="badge bg-primary-transparent text-primary me-1">${f.nama}</span>`).join('');
            }},
            {
                data: 'is_active', className: 'text-center',
                render: function (val) {
                    return 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();
            const 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() {
    ['Nama','NamaLengkap','Profesi','Alamat','NoTelp','Catatan'].forEach(f => {
        $('#form'+f).removeClass('is-invalid');
        $('#err'+f).text('');
    });
}

function showErrors(errors) {
    if (errors.nama)         { $('#formNama').addClass('is-invalid');         $('#errNama').text(errors.nama[0]); }
    if (errors.nama_lengkap) { $('#formNamaLengkap').addClass('is-invalid');  $('#errNamaLengkap').text(errors.nama_lengkap[0]); }
    if (errors.profesi)      { $('#formProfesi').addClass('is-invalid');       $('#errProfesi').text(errors.profesi[0]); }
    if (errors.alamat)       { $('#formAlamat').addClass('is-invalid');        $('#errAlamat').text(errors.alamat[0]); }
    if (errors.no_telp)      { $('#formNoTelp').addClass('is-invalid');        $('#errNoTelp').text(errors.no_telp[0]); }
    if (errors.catatan)      { $('#formCatatan').addClass('is-invalid');       $('#errCatatan').text(errors.catatan[0]); }
}

function openTambah() {
    clearErrors();
    $('#formId').val('');
    $('#modalFormTitle').text('Tambah Tenaga Kesehatan');
    $('#formNama').val('');
    $('#formNamaLengkap').val('');
    $('#formProfesi').val('');
    $('#formAlamat').val('');
    $('#formNoTelp').val('');
    $('#formCatatan').val('');
    new bootstrap.Modal('#modalForm').show();
}

function openEdit(id) {
    clearErrors();
    $.get(URL_BASE + '/' + id, function (res) {
        const d = res.data;
        $('#formId').val(d.id);
        $('#modalFormTitle').text('Edit Tenaga Kesehatan');
        $('#formNama').val(d.nama);
        $('#formNamaLengkap').val(d.nama_lengkap ?? '');
        $('#formProfesi').val(d.profesi);
        $('#formAlamat').val(d.alamat ?? '');
        $('#formNoTelp').val(d.no_telp ?? '');
        $('#formCatatan').val(d.catatan ?? '');
        new bootstrap.Modal('#modalForm').show();
    });
}

function openLihat(id) {
    currentNakesId = id;
    faskesLoaded   = false;
    $.get(URL_BASE + '/' + id, function (res) {
        const d = res.data;
        $('#vKode').text(d.kode ?? '-');
        $('#vNama').text(d.nama);
        $('#vNamaLengkap').text(d.nama_lengkap ?? '-');
        $('#vProfesi').text(d.profesi);
        $('#vNoTelp').text(d.no_telp ?? '-');
        $('#vAlamat').text(d.alamat ?? '-');
        $('#vStatus').html(d.is_active
            ? '<span class="badge bg-success-transparent text-success">Aktif</span>'
            : '<span class="badge bg-danger-transparent text-danger">Nonaktif</span>');
        $('#vCatatan').text(d.catatan ?? '-');
        $('#vAuditCreatedBy').text(d.audit_created_by ?? '—');
        $('#vAuditCreatedAt').text(d.audit_created_at ?? '');
        $('#vAuditUpdatedBy').text(d.audit_updated_by ?? '—');
        $('#vAuditUpdatedAt').text(d.audit_updated_at ?? '');
        new bootstrap.Modal('#modalLihat').show();
    });
}

function loadFaskes() {
    if (faskesLoaded) return;
    faskesLoaded = true;
    $('#faskesTableBody').html('<tr><td colspan="4" class="text-center text-muted">Memuat...</td></tr>');
    $.get(URL_BASE + '/' + currentNakesId + '/faskes', function (res) {
        renderFaskesTable(res.data);
    });
}

function renderFaskesTable(list) {
    if (!list.length) {
        $('#faskesTableBody').html('<tr><td colspan="4" class="text-center text-muted">Belum ada faskes terdaftar.</td></tr>');
        return;
    }
    let rows = '';
    list.forEach((f, i) => {
        rows += `<tr>
            <td class="text-center">${i + 1}</td>
            <td>${f.kode}</td>
            <td>${f.nama}</td>
            ${CAN_EDIT ? `<td class="text-center"><button class="btn btn-danger btn-sm px-2 py-1" onclick="hapusFaskes(${f.id})"><i class="bx bx-trash fs-14"></i></button></td>` : ''}
        </tr>`;
    });
    $('#faskesTableBody').html(rows);
}

function tambahFaskes() {
    const faskesId = $('#faskesAddSelect').val();
    if (!faskesId) return Swal.fire({ icon: 'warning', title: 'Pilih faskes terlebih dahulu.', timer: 1500, showConfirmButton: false });
    $.ajax({
        url: URL_BASE + '/' + currentNakesId + '/faskes',
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': CSRF },
        data: { faskes_id: faskesId },
        success: function (res) {
            if (res.success) {
                $('#faskesAddSelect').val('').trigger('change');
                faskesLoaded = false;
                loadFaskes();
                dt.ajax.reload(null, false);
                Swal.fire({ icon: 'success', title: 'Berhasil', text: res.message, timer: 1500, showConfirmButton: false });
            }
        },
        error: function (xhr) {
            Swal.fire({ icon: 'error', title: 'Gagal', text: xhr.responseJSON?.message ?? 'Terjadi kesalahan.' });
        }
    });
}

function hapusFaskes(faskesId) {
    Swal.fire({
        title: 'Hapus faskes ini?', icon: 'warning',
        showCancelButton: true, confirmButtonText: 'Ya, Hapus', cancelButtonText: 'Batal',
    }).then(result => {
        if (!result.isConfirmed) return;
        $.ajax({
            url: URL_BASE + '/' + currentNakesId + '/faskes/' + faskesId,
            method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': CSRF },
            success: function (res) {
                if (res.success) {
                    faskesLoaded = false;
                    loadFaskes();
                    dt.ajax.reload(null, false);
                    Swal.fire({ icon: 'success', title: 'Dihapus', text: res.message, timer: 1500, showConfirmButton: false });
                }
            }
        });
    });
}

function simpan() {
    clearErrors();
    const id     = $('#formId').val();
    const isEdit = !!id;
    const url    = isEdit ? URL_BASE + '/' + id : URL_STORE;
    const method = isEdit ? 'PUT' : 'POST';

    $.ajax({
        url, method,
        headers: { 'X-CSRF-TOKEN': CSRF },
        data: {
            nama:         $('#formNama').val(),
            nama_lengkap: $('#formNamaLengkap').val(),
            profesi:      $('#formProfesi').val(),
            alamat:       $('#formAlamat').val(),
            no_telp:      $('#formNoTelp').val(),
            catatan:      $('#formCatatan').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) showErrors(xhr.responseJSON.errors);
        }
    });
}

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 data 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 });
                }
            }
        });
    });
}

@include('data-induk._import-js')
</script>
@endpush