@extends('layouts.admin')

@section('title', 'Data Gejala')

@section('content')

<!-- BUTTON -->
<button class="btn btn-primary mb-3" onclick="showForm()">+ Tambah Gejala</button>

<!-- TABLE -->
<div id="tableGejala">
    <table class="table table-bordered">
        <tr>
            <th>No</th>
            <th>Kode</th>
            <th>Nama Gejala</th>
            <th>Aksi</th>
        </tr>

        <tr>
            <td>1</td>
            <td>G01</td>
            <td>Sakit kepala</td>
            <td>
                <button class="btn btn-warning btn-sm" onclick="editData()">Edit</button>
                <button class="btn btn-danger btn-sm">Hapus</button>
            </td>
        </tr>
    </table>
</div>

<!-- FORM -->
<div id="formGejala" style="display:none;">

    <h5 id="formTitle">Tambah Gejala</h5>

    <form>
        <div class="mb-3">
            <label>Kode Gejala</label>
            <input type="text" class="form-control" id="kode">
        </div>

        <div class="mb-3">
            <label>Nama Gejala</label>
            <input type="text" class="form-control" id="nama">
        </div>

        <button class="btn btn-success">Simpan</button>
        <button type="button" class="btn btn-secondary" onclick="showTable()">Kembali</button>
    </form>

</div>

<script>
function showForm() {
    document.getElementById('tableGejala').style.display = 'none';
    document.getElementById('formGejala').style.display = 'block';
    document.getElementById('formTitle').innerText = 'Tambah Gejala';
}

function showTable() {
    document.getElementById('tableGejala').style.display = 'block';
    document.getElementById('formGejala').style.display = 'none';
}

function editData() {
    showForm();
    document.getElementById('formTitle').innerText = 'Edit Gejala';

    // isi dummy
    document.getElementById('kode').value = 'G01';
    document.getElementById('nama').value = 'Sakit kepala';
}
</script>

@endsection