E31230190_Bintang-Rizki-Sap.../resources/views/admin/edukasi.blade.php

81 lines
2.2 KiB
PHP

@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