@extends('layouts.app', ['title' => 'Manajemen Penyakit - TB Expert'])

@section('page_title', 'Manajemen Penyakit')

@section('content')
<section class="admin-page">
    @if($errors->any())
        <div class="alert-admin danger"><i class="fas fa-circle-exclamation"></i><span>{{ $errors->first() }}</span></div>
    @endif

    <div class="admin-page-header">
        <div>
            <h2>Manajemen Penyakit</h2>
            <p>Total {{ $penyakit->count() }} penyakit terdaftar di sistem.</p>
        </div>
        <button type="button" class="btn btn-admin-primary" data-bs-toggle="modal" data-bs-target="#modalTambahPenyakit">
            <i class="fas fa-plus me-2"></i>Tambah Penyakit
        </button>
    </div>

    <div class="admin-panel">
        <div class="panel-header">
            <h3 class="panel-title">Daftar Penyakit</h3>
            <span class="admin-badge accent">{{ $penyakit->count() }} data</span>
        </div>
        <div class="table-responsive p-3">
            <table class="table-admin">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Kode</th>
                        <th>Nama Penyakit</th>
                        <th>Deskripsi</th>
                        <th class="text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($penyakit as $i => $p)
                    <tr>
                        <td class="text-muted small">{{ $i + 1 }}</td>
                        <td><span class="admin-badge accent">{{ $p->kode }}</span></td>
                        <td class="fw-bold">{{ $p->nama }}</td>
                        <td class="small text-muted"><span class="d-inline-block text-truncate" style="max-width:360px;">{{ $p->deskripsi ?? '-' }}</span></td>
                        <td class="text-center">
                            <button type="button" class="btn-action primary btn-edit-penyakit"
                                data-id="{{ $p->id }}"
                                data-kode="{{ $p->kode }}"
                                data-nama="{{ $p->nama }}"
                                data-deskripsi="{{ $p->deskripsi ?? '' }}"
                                data-gejala-umum="{{ $p->gejala_umum ?? '' }}"
                                data-saran="{{ $p->saran_penanganan ?? '' }}">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button type="button" class="btn-action danger btn-hapus-penyakit" data-id="{{ $p->id }}" data-nama="{{ $p->nama }}">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="5" class="admin-empty">Belum ada data penyakit.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</section>

<div class="modal fade modal-admin" id="modalTambahPenyakit" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <form action="{{ route('admin.penyakit.store') }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title fw-bold"><i class="fas fa-plus me-2 text-accent"></i>Tambah Penyakit</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="row g-3">
                        <div class="col-md-4"><label class="form-label">Kode</label><input type="text" name="kode" class="form-control" maxlength="10" required></div>
                        <div class="col-md-8"><label class="form-label">Nama Penyakit</label><input type="text" name="nama" class="form-control" maxlength="100" required></div>
                        <div class="col-12"><label class="form-label">Deskripsi</label><textarea name="deskripsi" rows="2" class="form-control"></textarea></div>
                        <div class="col-12"><label class="form-label">Gejala Umum</label><textarea name="gejala_umum" rows="2" class="form-control"></textarea></div>
                        <div class="col-12"><label class="form-label">Saran Penanganan</label><textarea name="saran_penanganan" rows="2" class="form-control"></textarea></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-admin-outline" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-admin-primary"><i class="fas fa-save me-2"></i>Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade modal-admin" id="modalEditPenyakit" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <form id="formEditPenyakit" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title fw-bold"><i class="fas fa-edit me-2 text-accent"></i>Edit Penyakit</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="row g-3">
                        <div class="col-md-4"><label class="form-label">Kode</label><input type="text" name="kode" id="editKodePenyakit" class="form-control" maxlength="10" required></div>
                        <div class="col-md-8"><label class="form-label">Nama Penyakit</label><input type="text" name="nama" id="editNamaPenyakit" class="form-control" maxlength="100" required></div>
                        <div class="col-12"><label class="form-label">Deskripsi</label><textarea name="deskripsi" id="editDeskripsiPenyakit" rows="2" class="form-control"></textarea></div>
                        <div class="col-12"><label class="form-label">Gejala Umum</label><textarea name="gejala_umum" id="editGejalaUmum" rows="2" class="form-control"></textarea></div>
                        <div class="col-12"><label class="form-label">Saran Penanganan</label><textarea name="saran_penanganan" id="editSaranPenyakit" rows="2" class="form-control"></textarea></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-admin-outline" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-admin-primary"><i class="fas fa-save me-2"></i>Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

<form id="formHapusPenyakit" method="POST" style="display:none;">@csrf @method('DELETE')</form>
@endsection

@section('scripts')
<script>
document.querySelectorAll('.btn-edit-penyakit').forEach(btn => {
    btn.addEventListener('click', () => {
        const d = btn.dataset;
        document.getElementById('formEditPenyakit').action = '{{ url("admin/penyakit") }}/' + d.id;
        document.getElementById('editKodePenyakit').value = d.kode;
        document.getElementById('editNamaPenyakit').value = d.nama;
        document.getElementById('editDeskripsiPenyakit').value = d.deskripsi;
        document.getElementById('editGejalaUmum').value = d.gejalaUmum;
        document.getElementById('editSaranPenyakit').value = d.saran;
        new bootstrap.Modal(document.getElementById('modalEditPenyakit')).show();
    });
});
document.querySelectorAll('.btn-hapus-penyakit').forEach(btn => {
    btn.addEventListener('click', () => {
        Swal.fire({
            title: 'Hapus Penyakit?',
            html: 'Data <strong>' + btn.dataset.nama + '</strong> akan dihapus permanen.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#F85149',
            cancelButtonColor: '#7D8590',
            confirmButtonText: 'Ya, Hapus',
            cancelButtonText: 'Batal'
        }).then(result => {
            if (result.isConfirmed) {
                const form = document.getElementById('formHapusPenyakit');
                form.action = '{{ url("admin/penyakit") }}/' + btn.dataset.id;
                form.submit();
            }
        });
    });
});
</script>
@endsection