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

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

@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 Gejala</h2>
            <p>Total {{ $gejala->count() }} gejala klinis terdaftar.</p>
        </div>
        <button type="button" class="btn btn-admin-primary" data-bs-toggle="modal" data-bs-target="#modalTambahGejala">
            <i class="fas fa-plus me-2"></i>Tambah Gejala
        </button>
    </div>

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

<div class="modal fade modal-admin" id="modalTambahGejala" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="{{ route('admin.gejala.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 Gejala</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 Gejala</label><input type="text" name="nama_gejala" class="form-control" maxlength="200" required></div>
                        <div class="col-12"><label class="form-label">Deskripsi Gejala</label><textarea name="deskripsi_gejala" rows="3" 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="modalEditGejala" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="formEditGejala" 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 Gejala</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="editKodeGejala" class="form-control" maxlength="10" required></div>
                        <div class="col-md-8"><label class="form-label">Nama Gejala</label><input type="text" name="nama_gejala" id="editNamaGejala" class="form-control" maxlength="200" required></div>
                        <div class="col-12"><label class="form-label">Deskripsi Gejala</label><textarea name="deskripsi_gejala" id="editDeskripsiGejala" rows="3" 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="formHapusGejala" method="POST" style="display:none;">@csrf @method('DELETE')</form>
@endsection

@section('scripts')
<script>
document.querySelectorAll('.btn-edit-gejala').forEach(btn => {
    btn.addEventListener('click', () => {
        const d = btn.dataset;
        document.getElementById('formEditGejala').action = '{{ url("admin/gejala") }}/' + d.id;
        document.getElementById('editKodeGejala').value = d.kode;
        document.getElementById('editNamaGejala').value = d.nama;
        document.getElementById('editDeskripsiGejala').value = d.deskripsi;
        new bootstrap.Modal(document.getElementById('modalEditGejala')).show();
    });
});
document.querySelectorAll('.btn-hapus-gejala').forEach(btn => {
    btn.addEventListener('click', () => {
        Swal.fire({
            title: 'Hapus Gejala?',
            html: 'Gejala <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('formHapusGejala');
                form.action = '{{ url("admin/gejala") }}/' + btn.dataset.id;
                form.submit();
            }
        });
    });
});
</script>
@endsection