@extends('layouts.admin')

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

@section('content')

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

<!-- TABLE -->
<div id="tableEdukasi">
    <table class="table table-bordered">
        <tr>
            <th>No</th>
            <th>Judul</th>
            <th>Deskripsi</th>
            <th>Aksi</th>
        </tr>

        <tr>
            <td>1</td>
            <td>Bahaya Hipertensi</td>
            <td>Hipertensi dapat menyebabkan stroke dan gagal ginjal...</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="formEdukasi" style="display:none;">

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

    <form>
        <div class="mb-3">
            <label>Judul Edukasi</label>
            <input type="text" class="form-control" id="judul">
        </div>

        <div class="mb-3">
            <label>Deskripsi Edukasi</label>
            <textarea class="form-control" id="deskripsi" rows="4"></textarea>
        </div>

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

</div>

<!-- SCRIPT -->
<script>
function showForm() {
    document.getElementById('tableEdukasi').style.display = 'none';
    document.getElementById('formEdukasi').style.display = 'block';
    document.getElementById('formTitle').innerText = 'Tambah Edukasi';

    // reset form
    document.getElementById('judul').value = '';
    document.getElementById('deskripsi').value = '';
}

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

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

    // dummy data
    document.getElementById('judul').value = 'Bahaya Hipertensi';
    document.getElementById('deskripsi').value = 'Hipertensi dapat menyebabkan stroke dan gagal ginjal...';
}
</script>

@endsection