MIF_E31221244/resources/views/masterdata/data_penyakit.blade.php

261 lines
15 KiB
PHP

@extends('layout.app')
@section('content')
<div class="container">
<div class="page-inner">
<div class="page-header">
<h3 class="fw-bold mb-3">Data Penyakit</h3>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<a href="#" data-bs-toggle="modal" data-bs-target="#addModal"
class="btn btn-primary btn-icon-split mb-3">
<span class="icon text-white-50"><i class="fas fa-plus"></i></span>
<span class="text">Tambah Penyakit</span>
</a>
<table id="basic-datatables" class="display table table-striped table-hover">
<thead>
<tr>
<th style="width: 5%;" class="text-center">No</th>
<th style="width: 5%;" class="text-center">Kode</th>
<th style="width: 20%;">Nama Penyakit</th>
<th style="width: 25%;">Keterangan</th>
<th style="width: 20%;" class="text-center">Aksi</th>
</tr>
</thead>
<tfoot>
<tr>
<th style="width: 5%;" class="text-center">No</th>
<th style="width: 5%;" class="text-center">Kode</th>
<th style="width: 20%;">Nama Penyakit</th>
<th style="width: 20%;">Keterangan</th>
<th style="width: 20%;" class="text-center">Aksi</th>
</tr>
</tfoot>
<tbody>
@foreach ($penyakit as $item)
<tr>
<td class="text-center">{{ $loop->iteration }}</td>
<td class="text-center">{{ $item->kode_penyakit }}</td>
<td>{{ $item->nama_penyakit }}</td>
<td style="text-align: justify;">{{ $item->penjelasan }}</td>
<td class="text-center">
<a href="#" data-bs-toggle="modal" data-bs-target="#detailModal"
class="btn btn-success mb-3"
onclick="detailData({{ $item }})">
<i class="fas fa-eye"></i>
</a>
<a href="#" data-bs-toggle="modal" data-bs-target="#updateModal"
class="btn btn-warning mb-3"
onclick="updateData({{ $item }})">
<i class="fas fa-edit"></i>
</a>
<a class="btn btn-danger mb-3" href="#" data-bs-toggle="modal"
data-bs-target="#deleteModal"
onclick="deleteData({{ $item->id }})">
<i class="fas fa-trash"></i>
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Tambah Penyakit</h5>
<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="{{ route('penyakit.store') }}" method="POST" id="addForm"
enctype="multipart/form-data">
@csrf
<div class="mb-3">
<label for="addNamaPenyakit" class="form-label" style="font-weight: bold">Nama Penyakit</label>
<input type="text" class="form-control" id="addNamaPenyakit" name="nama_penyakit"
placeholder="Masukkan Nama Penyakit" value="{{ old('nama_penyakit') }}" required>
@error('nama_penyakit')
<small class="text-danger">{{ $message }}</small>
@enderror
</div>
<div class="mb-3">
<label for="addPenjelasan" class="form-label" style="font-weight: bold">Keterangan</label>
<textarea class="form-control" id="addPenjelasan" name="penjelasan" placeholder="Masukkan Keterangan" required>{{ old('penjelasan') }}</textarea>
@error('penjelasan')
<small class="text-danger">{{ $message }}</small>
@enderror
</div>
<div class="mb-3">
<label for="addPenanganan" class="form-label" style="font-weight: bold">Penanganan</label>
<textarea class="form-control" id="addPenanganan" name="penanganan" placeholder="Masukkan Penanganan" required>{{ old('penanganan') }}</textarea>
@error('penanganan')
<small class="text-danger">{{ $message }}</small>
@enderror
</div>
<div class="mb-3">
<label for="addGambar" class="form-label" style="font-weight: bold">Gambar Penyakit</label>
<input type="file" class="form-control" id="addGambar" name="gambar" accept="image/*">
@error('gambar')
<small class="text-danger">{{ $message }}</small>
@enderror
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-danger" type="button" data-bs-dismiss="modal">Batal</button>
<button class="btn btn-primary" type="submit" form="addForm">Tambah</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Update Data Penyakit</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="{{ route('penyakit.update', ':id') }}" method="POST" id="updateForm"
enctype="multipart/form-data">
@csrf
@method('PUT')
<div class="mb-3">
<label for="updateNamaPenyakit" class="form-label" style="font-weight: bold">Nama Penyakit</label>
<input type="text" class="form-control" id="updateNamaPenyakit" name="nama_penyakit"
placeholder="Enter Nama Penyakit" value="{{ old('nama_penyakit') }}" required>
@error('nama_penyakit')
<small class="text-danger">{{ $message }}</small>
@enderror
</div>
<div class="mb-3">
<label for="updatePenjelasan" class="form-label" style="font-weight: bold">Penjelasan</label>
<textarea class="form-control" id="updatePenjelasan" name="penjelasan" rows="8" placeholder="Enter Penjelasan" required>{{ old('penjelasan') }}</textarea>
@error('penjelasan')
<small class="text-danger">{{ $message }}</small>
@enderror
</div>
<div class="mb-3">
<label for="updatePenanganan" class="form-label" style="font-weight: bold">Pengendalian</label>
<textarea class="form-control" id="updatePenanganan" name="penanganan" rows="8" placeholder="Enter Penanganan" required>{{ old('penanganan') }}</textarea>
@error('penanganan')
<small class="text-danger">{{ $message }}</small>
@enderror
</div>
<div class="mb-3">
<label for="updateGambar" class="form-label" style="font-weight: bold">Gambar Penyakit</label>
<input type="file" class="form-control" id="updateGambar" name="gambar" accept="image/*">
@error('gambar')
<small class="text-danger">{{ $message }}</small>
@enderror
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Kembali</button>
<button type="submit" class="btn btn-primary" form="updateForm">Edit</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">Hapus Data Penyakit</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Apakah Anda yakin ingin menghapus data penyakit ini?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
<form id="deleteForm" action="" method="POST" style="display: inline;">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger">Hapus</button>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Detail Penyakit</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="penanganan" class="form-label" style="font-weight: bold">Pengendalian</label>
<textarea id="penanganan" class="form-control" rows="6" readonly></textarea>
</div>
<div class="mb-3">
<label class="form-label" style="font-weight: bold">Gambar Penyakit</label>
<img id="gambar_penyakit" src="" alt="Gambar Penyakit" class="img-thumbnail d-block"
style="max-width: 150px; height: auto;">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
</div>
</div>
</div>
</div>
@endsection
@section('script')
<script>
$(document).ready(function() {
$("#basic-datatables").DataTable({});
});
function deleteData(id) {
const form = document.getElementById('deleteForm');
form.action = "{{ route('penyakit.destroy', ':id') }}".replace(':id', id);
}
function updateData(data) {
const form = document.getElementById('updateForm');
form.action = "{{ route('penyakit.update', ':id') }}".replace(':id', data.id);
form.querySelector('#updateNamaPenyakit').value = data.nama_penyakit;
form.querySelector('#updatePenjelasan').value = data.penjelasan;
form.querySelector('#updatePenanganan').value = data.penanganan;
}
function detailData(data) {
// console.log("Data yang diterima:", data);
// console.log("Gambar:", data.gambar);
document.getElementById('penanganan').value = data.penanganan;
let gambarElement = document.getElementById('gambar_penyakit');
if (data.gambar) {
gambarElement.src = 'storage/' + data.gambar;
gambarElement.style.display = "block";
} else {
gambarElement.src = "";
gambarElement.style.display = "none";
}
}
</script>
@endsection