@extends('layouts.master')
@section('title', 'Fasilitas Kesehatan')

@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">Fasilitas Kesehatan</p>
            <span class="fs-13 text-muted">Data Induk &rarr; Fasilitas 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 Fasilitas Kesehatan</div>
                    <div class="d-flex gap-2 flex-wrap">
                        @can('faskes.view')
                        <a href="{{ route('data-induk.faskes.export-excel') }}" class="btn btn-success btn-sm">
                            <i class="bx bx-download me-1"></i> Unduh Excel
                        </a>
                        @endcan
                        @can('faskes.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 Faskes
                        </button>
                        @endcan
                    </div>
                </div>
                <div class="card-body">
            <table id="tblFaskes" class="table table-sm table-bordered table-hover w-100">
                <thead class="table-light">
                    <tr>
                        <th width="40">No</th>
                        <th width="120">Aksi</th>
                        <th width="80">Kode</th>
                        <th>Nama</th>
                        <th width="90">Tipe</th>
                        <th width="120">Kota</th>
                        <th width="130">Telepon</th>
                        <th width="75" class="text-center">Status</th>
                    </tr>
                </thead>
            </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- MODAL TAMBAH --}}
<div class="modal fade" id="modalTambah" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tambah Fasilitas Kesehatan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <ul class="nav nav-tabs mb-3" id="tabTambah">
                    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tabTambahUmum">Umum</a></li>
                    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tabTambahTagih">Penagihan</a></li>
                    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tabTambahKirim">Pengiriman</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="tabTambahUmum">
                        @include('data-induk._faskes-form', ['prefix' => 'tambah'])
                    </div>
                    <div class="tab-pane fade" id="tabTambahTagih">
                        @include('data-induk._faskes-form-tagih', ['prefix' => 'tambah'])
                    </div>
                    <div class="tab-pane fade" id="tabTambahKirim">
                        @include('data-induk._faskes-form-kirim', ['prefix' => 'tambah'])
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary" onclick="submitTambah()">Simpan</button>
            </div>
        </div>
    </div>
</div>

{{-- MODAL EDIT --}}
<div class="modal fade" id="modalEdit" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Fasilitas Kesehatan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <ul class="nav nav-tabs mb-3" id="tabEdit">
                    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tabEditUmum">Umum</a></li>
                    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tabEditTagih">Penagihan</a></li>
                    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tabEditKirim">Pengiriman</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="tabEditUmum">
                        @include('data-induk._faskes-form', ['prefix' => 'edit'])
                    </div>
                    <div class="tab-pane fade" id="tabEditTagih">
                        @include('data-induk._faskes-form-tagih', ['prefix' => 'edit'])
                    </div>
                    <div class="tab-pane fade" id="tabEditKirim">
                        @include('data-induk._faskes-form-kirim', ['prefix' => 'edit'])
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary" onclick="submitEdit()">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">
                <h5 class="modal-title">Detail Fasilitas Kesehatan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-sm table-borderless mb-0">
                            <tr><td class="text-muted" width="140">Kode</td><td id="vKode"></td></tr>
                            <tr><td class="text-muted">Nama</td><td id="vNama"></td></tr>
                            <tr><td class="text-muted">Tipe</td><td id="vTipe"></td></tr>
                            <tr><td class="text-muted">Alamat</td><td id="vAlamat"></td></tr>
                            <tr><td class="text-muted">Kota</td><td id="vKota"></td></tr>
                            <tr><td class="text-muted">Provinsi</td><td id="vProvinsi"></td></tr>
                            <tr><td class="text-muted">Telepon</td><td id="vTelepon"></td></tr>
                            <tr><td class="text-muted">Email</td><td id="vEmail"></td></tr>
                            <tr><td class="text-muted">Gudang KSO</td><td id="vKso"></td></tr>
                            <tr><td class="text-muted">Status</td><td id="vStatus"></td></tr>
                        </table>
                    </div>
                    <div class="col-md-6 border-start">
                        <p class="fw-semibold text-muted mb-2 small">DATA PENAGIHAN</p>
                        <table class="table table-sm table-borderless mb-0">
                            <tr><td class="text-muted" width="160">Nama Perusahaan</td><td id="vNamaPerusahaan"></td></tr>
                            <tr><td class="text-muted">NPWP</td><td id="vNpwp"></td></tr>
                            <tr><td class="text-muted">Contact Person</td><td id="vContactPerson"></td></tr>
                            <tr><td class="text-muted">HP Contact</td><td id="vHpContact"></td></tr>
                            <tr><td class="text-muted">Alamat Penagihan</td><td id="vAlamatPenagihan"></td></tr>
                        </table>
                        <p class="fw-semibold text-muted mb-2 mt-3 small">DATA PENGIRIMAN</p>
                        <table class="table table-sm table-borderless mb-0">
                            <tr><td class="text-muted" width="160">Nama Tujuan</td><td id="vNamaTujuanPengiriman"></td></tr>
                            <tr><td class="text-muted">Telp Pengiriman</td><td id="vTelpPengiriman"></td></tr>
                            <tr><td class="text-muted">Alamat Pengiriman</td><td id="vAlamatPengiriman"></td></tr>
                        </table>
                    </div>
                </div>
                <hr class="my-2">
                <div class="row text-muted" style="font-size:0.8rem">
                    <div class="col-md-6">
                        <i class="bx bx-user-plus me-1"></i>Dibuat oleh: <span id="vAuditCreatedBy">—</span> &nbsp;·&nbsp; <span id="vAuditCreatedAt"></span>
                    </div>
                    <div class="col-md-6">
                        <i class="bx bx-edit me-1"></i>Diubah oleh: <span id="vAuditUpdatedBy">—</span> &nbsp;·&nbsp; <span id="vAuditUpdatedAt"></span>
                    </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>
@include('data-induk._modal-import', [
    'label'         => 'Faskes',
    'importRoute'   => 'data-induk.faskes.import',
    'templateRoute' => 'data-induk.faskes.template-excel',
])
@endsection

@push('styles')
<style>
    #tblFaskes td.aksi-col { white-space: nowrap; }
</style>
@endpush

@push('scripts')
<script>
const URL_BASE = '{{ route("data-induk.faskes.index") }}';
const CSRF     = '{{ csrf_token() }}';
@include('data-induk._import-js')
let editId = null;

const tbl = $('#tblFaskes').DataTable({
    ajax: { url: URL_BASE + '/data', dataSrc: 'data' },
    columns: [
        { data: null, orderable: false, searchable: false, width: '40px',
          render: (d, t, r, m) => m.row + 1 },
        { data: null, orderable: false, searchable: false, className: 'aksi-col', width: '140px',
          render: (d, t, row) => {
            let btns = `<button class="btn btn-sm btn-info me-1" title="Lihat" onclick="openLihat(${row.id})"><i class="bx bx-show"></i></button>`;
            @can('faskes.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 btn-sm ${toggleClass} me-1" title="${toggleTitle}" onclick="toggleStatus(${row.id}, ${row.is_active})"><i class="bx ${toggleIcon}"></i></button>`;
            btns += `<button class="btn btn-sm btn-warning me-1" title="Edit" onclick="openEdit(${row.id})"><i class="bx bx-edit"></i></button>`;
            @endcan
            @can('faskes.delete')
            btns += `<button class="btn btn-sm btn-danger" title="Hapus" onclick="hapus(${row.id})"><i class="bx bx-trash"></i></button>`;
            @endcan
            return btns;
          }
        },
        { data: 'kode', width: '80px' },
        { data: null, render: (d, t, row) => {
            let html = '';
            if (row.has_gudang_kso) html += '<span class="badge bg-primary-transparent me-1">KSO</span>';
            html += row.nama;
            return html;
          }
        },
        { data: 'tipe', width: '90px' },
        { data: 'kota', width: '120px' },
        { data: 'telepon', width: '130px' },
        { data: 'is_active', width: '75px', className: 'text-center',
          render: v => v
            ? '<span class="badge bg-success-transparent">Aktif</span>'
            : '<span class="badge bg-danger-transparent">Nonaktif</span>'
        },
    ],
    drawCallback: function() {
        const api = this.api();
        const start = api.page.info().start;
        api.column(0).nodes().each((cell, i) => { cell.innerHTML = start + i + 1; });
    },
    order: [[2, 'asc']],
    pageLength: 25,
    language: { url: '//cdn.datatables.net/plug-ins/1.12.1/i18n/id.json' },
});

function getFormData(prefix) {
    return {
        kode:             $(`#${prefix}_kode`).val().toUpperCase(),
        nama:             $(`#${prefix}_nama`).val().toUpperCase(),
        tipe:             $(`#${prefix}_tipe`).val(),
        alamat:           $(`#${prefix}_alamat`).val(),
        kota:             $(`#${prefix}_kota`).val(),
        provinsi:         $(`#${prefix}_provinsi`).val(),
        telepon:          $(`#${prefix}_telepon`).val(),
        email:            $(`#${prefix}_email`).val(),
        nama_perusahaan:  $(`#${prefix}_nama_perusahaan`).val(),
        npwp:             $(`#${prefix}_npwp`).val(),
        contact_person:   $(`#${prefix}_contact_person`).val(),
        hp_contact:       $(`#${prefix}_hp_contact`).val(),
        alamat_penagihan:         $(`#${prefix}_alamat_penagihan`).val(),
        nama_tujuan_pengiriman:   $(`#${prefix}_nama_tujuan_pengiriman`).val(),
        telp_pengiriman:          $(`#${prefix}_telp_pengiriman`).val(),
        alamat_pengiriman:        $(`#${prefix}_alamat_pengiriman`).val(),
        has_gudang_kso:           $(`#${prefix}_has_gudang_kso`).is(':checked') ? 1 : 0,
        mode_pengiriman:          $(`#${prefix}_mode_pengiriman`).val(),
        mode_penjualan:           $(`#${prefix}_mode_penjualan`).val(),
        mode_pemakaian:           $(`#${prefix}_mode_pemakaian`).val(),
    };
}

function fillForm(prefix, d) {
    $(`#${prefix}_kode`).val(d.kode);
    $(`#${prefix}_nama`).val(d.nama);
    $(`#${prefix}_tipe`).val(d.tipe);
    $(`#${prefix}_alamat`).val(d.alamat);
    $(`#${prefix}_kota`).val(d.kota);
    $(`#${prefix}_provinsi`).val(d.provinsi);
    $(`#${prefix}_telepon`).val(d.telepon);
    $(`#${prefix}_email`).val(d.email);
    $(`#${prefix}_nama_perusahaan`).val(d.nama_perusahaan);
    $(`#${prefix}_npwp`).val(d.npwp);
    $(`#${prefix}_contact_person`).val(d.contact_person);
    $(`#${prefix}_hp_contact`).val(d.hp_contact);
    $(`#${prefix}_alamat_penagihan`).val(d.alamat_penagihan);
    $(`#${prefix}_nama_tujuan_pengiriman`).val(d.nama_tujuan_pengiriman);
    $(`#${prefix}_telp_pengiriman`).val(d.telp_pengiriman);
    $(`#${prefix}_alamat_pengiriman`).val(d.alamat_pengiriman);
    $(`#${prefix}_has_gudang_kso`).prop('checked', !!d.has_gudang_kso);
    $(`#${prefix}_mode_pengiriman`).val(d.mode_pengiriman ?? 'normal');
    $(`#${prefix}_mode_penjualan`).val(d.mode_penjualan ?? 'normal');
    $(`#${prefix}_mode_pemakaian`).val(d.mode_pemakaian ?? 'normal');
}

function clearForm(prefix) {
    $(`#${prefix}_nama, #${prefix}_alamat, #${prefix}_kota, #${prefix}_provinsi,
       #${prefix}_telepon, #${prefix}_email, #${prefix}_nama_perusahaan, #${prefix}_npwp,
       #${prefix}_contact_person, #${prefix}_hp_contact, #${prefix}_alamat_penagihan,
       #${prefix}_nama_tujuan_pengiriman, #${prefix}_telp_pengiriman, #${prefix}_alamat_pengiriman`).val('');
    $(`#${prefix}_tipe`).val('RS');
    $(`#${prefix}_has_gudang_kso`).prop('checked', false);
    $(`#${prefix}_mode_pengiriman`).val('normal');
    $(`#${prefix}_mode_penjualan`).val('normal');
    $(`#${prefix}_mode_pemakaian`).val('normal');
    $(`#${prefix}_nama`).removeClass('is-invalid');
    $('[id^="err_' + prefix + '"]').text('');
    $(`#tabTambah a[href="#tabTambahUmum"], #tabEdit a[href="#tabEditUmum"]`).tab('show');
}

function openLihat(id) {
    $.get(URL_BASE + '/' + id, function(res) {
        const d = res.data;
        $('#vKode').text(d.kode);
        $('#vNama').text(d.nama);
        $('#vTipe').text(d.tipe ?? '-');
        $('#vAlamat').text(d.alamat ?? '-');
        $('#vKota').text(d.kota ?? '-');
        $('#vProvinsi').text(d.provinsi ?? '-');
        $('#vTelepon').text(d.telepon ?? '-');
        $('#vEmail').text(d.email ?? '-');
        $('#vKso').html(d.has_gudang_kso
            ? '<span class="badge bg-primary-transparent">Ya</span>'
            : '<span class="badge bg-secondary-transparent">Tidak</span>');
        $('#vStatus').html(d.is_active
            ? '<span class="badge bg-success-transparent">Aktif</span>'
            : '<span class="badge bg-danger-transparent">Nonaktif</span>');
        $('#vNamaPerusahaan').text(d.nama_perusahaan ?? '-');
        $('#vNpwp').text(d.npwp ?? '-');
        $('#vContactPerson').text(d.contact_person ?? '-');
        $('#vHpContact').text(d.hp_contact ?? '-');
        $('#vAlamatPenagihan').text(d.alamat_penagihan || '(sama dengan alamat operasional)');
        $('#vNamaTujuanPengiriman').text(d.nama_tujuan_pengiriman ?? '-');
        $('#vTelpPengiriman').text(d.telp_pengiriman ?? '-');
        $('#vAlamatPengiriman').text(d.alamat_pengiriman || '(sama dengan alamat operasional)');
        $('#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 openTambah() {
    clearForm('tambah');
    $('#modalTambah').modal('show');
}

function openEdit(id) {
    editId = id;
    clearForm('edit');
    $.get(URL_BASE + '/' + id, function(res) {
        fillForm('edit', res.data);
        $('#modalEdit').modal('show');
    });
}

function showErrors(prefix, errors) {
    $('[id^="err_' + prefix + '"]').text('');
    $(`#${prefix}_nama`).removeClass('is-invalid');
    $.each(errors, function(field, msgs) {
        $(`#${prefix}_${field}`).addClass('is-invalid');
        $(`#err_${prefix}_${field}`).text(msgs[0]);
    });
    const tagihanFields = ['nama_perusahaan','npwp','contact_person','hp_contact','alamat_penagihan'];
    const kirimFields   = ['nama_tujuan_pengiriman','telp_pengiriman','alamat_pengiriman'];
    const hasKirimErr   = kirimFields.some(f => errors[f]);
    const hasTagihanErr = tagihanFields.some(f => errors[f]);
    if (hasKirimErr) {
        const tabSuffix = prefix === 'tambah' ? 'TambahKirim' : 'EditKirim';
        $(`#tab${tabSuffix}`).tab('show');
    } else if (hasTagihanErr) {
        const tabSuffix = prefix === 'tambah' ? 'TambahTagih' : 'EditTagih';
        $(`#tab${tabSuffix}`).tab('show');
    }
}

function submitTambah() {
    $.ajax({
        url: URL_BASE, method: 'POST',
        data: { ...getFormData('tambah'), _token: '{{ csrf_token() }}' },
        success: res => {
            if (res.success) {
                $('#modalTambah').modal('hide');
                tbl.ajax.reload();
                Swal.fire({ icon: 'success', title: res.message, timer: 1500, showConfirmButton: false });
            }
        },
        error: xhr => {
            if (xhr.status === 422) showErrors('tambah', xhr.responseJSON.errors);
        }
    });
}

function submitEdit() {
    $.ajax({
        url: URL_BASE + '/' + editId, method: 'POST',
        data: { ...getFormData('edit'), _token: '{{ csrf_token() }}', _method: 'PUT' },
        success: res => {
            if (res.success) {
                $('#modalEdit').modal('hide');
                tbl.ajax.reload(null, false);
                Swal.fire({ icon: 'success', title: res.message, timer: 1500, showConfirmButton: false });
            }
        },
        error: xhr => {
            if (xhr.status === 422) showErrors('edit', xhr.responseJSON.errors);
        }
    });
}

function toggleStatus(id, isActive) {
    const label = isActive ? 'nonaktifkan' : 'aktifkan';
    Swal.fire({
        title: `${label.charAt(0).toUpperCase() + label.slice(1)} faskes ini?`,
        icon: 'question', showCancelButton: true,
        confirmButtonText: 'Ya', cancelButtonText: 'Batal',
    }).then(r => {
        if (!r.isConfirmed) return;
        $.ajax({
            url: URL_BASE + '/' + id + '/toggle-status', method: 'POST',
            data: { _token: '{{ csrf_token() }}', _method: 'PATCH' },
            success: res => {
                tbl.ajax.reload(null, false);
                Swal.fire({ icon: 'success', title: res.message, timer: 1500, showConfirmButton: false });
            }
        });
    });
}

function hapus(id) {
    Swal.fire({
        title: 'Hapus faskes ini?', text: 'Data tidak dapat dikembalikan.',
        icon: 'warning', showCancelButton: true,
        confirmButtonText: 'Hapus', cancelButtonText: 'Batal',
        confirmButtonColor: '#d33',
    }).then(r => {
        if (!r.isConfirmed) return;
        $.ajax({
            url: URL_BASE + '/' + id, method: 'POST',
            data: { _token: '{{ csrf_token() }}', _method: 'DELETE' },
            success: res => {
                tbl.ajax.reload(null, false);
                Swal.fire({ icon: 'success', title: res.message, timer: 1500, showConfirmButton: false });
            }
        });
    });
}
</script>
@endpush