271 lines
12 KiB
PHP
271 lines
12 KiB
PHP
@extends('layout.app')
|
|
@section('content')
|
|
<style>
|
|
.card {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
button {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
table thead th {
|
|
background-color: #87CEEB !important;
|
|
color: rgb(12, 12, 12) !important;
|
|
border-color: #eaeaea !important;
|
|
padding: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
table tbody tr:nth-child(odd) {
|
|
background-color: #f2f2f2 !important;
|
|
}
|
|
|
|
table tbody tr:nth-child(even) {
|
|
background-color: #ffffff !important;
|
|
}
|
|
|
|
table tbody tr:hover {
|
|
background-color: #d1ecf1 !important;
|
|
}
|
|
|
|
table,
|
|
th,
|
|
td {
|
|
border: 2px solid #eaeaea !important;
|
|
padding: 10px;
|
|
}
|
|
|
|
table tbody td {
|
|
text-align: left;
|
|
}
|
|
</style>
|
|
|
|
<div class="container">
|
|
<div class="page-inner">
|
|
<div class="page-header">
|
|
<h3 class="fw-bold mb-3">Riwayat Diagnosa</h3>
|
|
</div>
|
|
|
|
{{-- Tampilan Mobile --}}
|
|
<div id="mobileDiagnosisContainer" class="d-block d-md-none" style="background-color: #F5F7FD;">
|
|
@forelse($diagnosa as $data)
|
|
<div class="card shadow-sm rounded-4 border-0 mb-4 mobile-card" data-id="{{ $data->id }}"
|
|
style="background-color: #f9f9f9;">
|
|
<div class="card-body p-3 shadow" style="border-radius: 10px;">
|
|
<div class="d-flex justify-content-between align-items-center mb-1">
|
|
<div class="d-flex align-items-center">
|
|
<i class="bi bi-calendar-check-fill text-primary me-2"></i>
|
|
<span class="fw-bold">{{ $data->tanggal_diagnosa }}</span>
|
|
</div>
|
|
<a href="#" class="text-danger fw-bold btn-hapus" data-id="{{ $data->id }}"
|
|
data-token="{{ csrf_token() }}" style="text-decoration: none;">
|
|
Hapus
|
|
</a>
|
|
</div>
|
|
<hr class="my-3">
|
|
<div class="d-flex justify-content-between mb-1">
|
|
<span class="fw-bold">Nilai CF:</span>
|
|
<span class="badge bg-success"><strong>{{ number_format($data->cf * 100) }}%</strong></span>
|
|
</div>
|
|
<div class="mb-1">
|
|
<span class="fw-bold">Indikasi Penyakit:</span>
|
|
<p class="mb-0">{{ $data->penyakit->nama_penyakit }}</p>
|
|
</div>
|
|
<div>
|
|
<span class="fw-bold">Penanganan:</span>
|
|
<p class="mb-0 text-justify d-none penanganan" id="penanganan-{{ $data->id }}">
|
|
{{ $data->penanganan }}
|
|
</p>
|
|
</div>
|
|
<button class="btn btn-link p-0 mt-2 text-primary fw-bold lihat-selengkapnya"
|
|
style="text-decoration: none;" data-id="{{ $data->id }}">
|
|
Lihat Selengkapnya...
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<p class="text-center py-3">Tidak ada data riwayat diagnosa.</p>
|
|
@endforelse
|
|
</div>
|
|
|
|
|
|
{{-- Tampilan Desktop --}}
|
|
<div class="col-xl-12 col-md-12 mt-4">
|
|
<div class="card border-0 shadow-sm rounded-4">
|
|
<div class="card-body d-none d-md-block">
|
|
<div class="table-responsive">
|
|
<table id='diagnosisTable' class="table table-bordered" width="100%" cellspacing="0"
|
|
style="border-width: 2px;">
|
|
<thead>
|
|
<tr>
|
|
<th class="text-center" style="width: 5%;">No</th>
|
|
<th class="text-center" style="width: 20%;">Tanggal</th>
|
|
<th style="width: 20%;">Indikasi Penyakit</th>
|
|
<th style="width: 10%;">Nilai CF</th>
|
|
<th class="text-center" style="width: 15%;">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($diagnosa as $data)
|
|
<tr>
|
|
<td class="text-center">{{ $loop->iteration }}</td>
|
|
<td>{{ $data->tanggal_diagnosa }}</td>
|
|
<td>{{ $data->penyakit->nama_penyakit }}</td>
|
|
<td class="text-center">{{ number_format($data->cf * 100) }}%</td>
|
|
<td class="text-center">
|
|
<a href="#" data-bs-toggle="modal" data-bs-target="#detailModal"
|
|
class="btn btn-success mb-3" onclick="detailData({{ $data }})">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
<a href="#" class="btn btn-danger mb-3 btn-hapus"
|
|
data-id="{{ $data->id }}">
|
|
<i class="fas fa-trash"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="5" class="text-center">Tidak ada data riwayat diagnosa.</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-md">
|
|
<div class="modal-content" style="border-radius: 10px; overflow: hidden;">
|
|
<div class="modal-header bg-white">
|
|
<h5 class="modal-title text-dark" id="detailModalLabel">Detail Penanganan</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body" style="background-color: #f8f9fa; padding: 20px;">
|
|
<div class="row">
|
|
<div class="col-12 text-start">
|
|
<h6 class="fw-bold text-dark">Penanganan:</h6>
|
|
<p id="modalPenanganan" class="text-muted mb-0 text-start"></p>
|
|
</div>
|
|
<div class="col-12 text-start mt-3">
|
|
<h6 class="fw-bold text-dark">Gambar Penyakit:</h6>
|
|
<img id="modalGambar" src="" alt="Gambar Penyakit" class="img-fluid rounded shadow-lg"
|
|
style="max-height: 180px; object-fit: cover;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer justify-content-end" style="background-color: #e9ecef;">
|
|
<button type="button" class="btn btn-dark" data-bs-dismiss="modal">Tutup</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@section('script')
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
let table = $('#diagnosisTable').DataTable({
|
|
responsive: true,
|
|
paging: true,
|
|
lengthChange: false,
|
|
searching: true,
|
|
ordering: true,
|
|
info: false,
|
|
autoWidth: false,
|
|
pageLength: 5
|
|
});
|
|
|
|
// Fungsi untuk menampilkan detail data pada modal
|
|
window.detailData = function(data) {
|
|
console.log(data.gambar);
|
|
|
|
$('#modalGambar').attr('src', '/storage/' + data.gambar);
|
|
$('#modalPenanganan').text(data.penanganan);
|
|
}
|
|
|
|
// Toggle tampilan penanganan
|
|
$(document).on('click', '.lihat-selengkapnya', function() {
|
|
let id = $(this).data('id');
|
|
let penanganan = $('#penanganan-' + id);
|
|
let button = $(this);
|
|
|
|
penanganan.toggleClass('d-none');
|
|
button.text(penanganan.hasClass('d-none') ? 'Lihat Selengkapnya' : 'Tutup');
|
|
});
|
|
|
|
// Hapus riwayat diagnosa tanpa konfirmasi
|
|
$(document).on('click', '.btn-hapus', function(e) {
|
|
e.preventDefault();
|
|
let id = $(this).data('id');
|
|
let row = $(this).closest('tr');
|
|
let card = $('.mobile-card[data-id="' + id + '"]'); // Untuk tampilan mobile
|
|
|
|
$.ajax({
|
|
url: '{{ route('diagnosa.destroy', '') }}/' + id,
|
|
type: 'DELETE',
|
|
data: {
|
|
_token: '{{ csrf_token() }}'
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
table.row(row).remove().draw(false);
|
|
|
|
card.fadeOut(500, function() {
|
|
$(this).remove();
|
|
checkMobileEmptyState();
|
|
});
|
|
|
|
updateTableNumbers();
|
|
|
|
if (table.rows().count() === 0) {
|
|
$('#diagnosisTable tbody').html(
|
|
'<tr><td colspan="6" class="text-center">Tidak ada riwayat diagnosa</td></tr>'
|
|
);
|
|
}
|
|
|
|
Swal.fire({
|
|
toast: true,
|
|
position: 'top-end',
|
|
icon: 'success',
|
|
title: 'Riwayat berhasil dihapus!',
|
|
showConfirmButton: false,
|
|
timer: 3000
|
|
});
|
|
|
|
setTimeout(checkMobileEmptyState, 500);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Fungsi untuk memperbarui nomor urut di tabel setelah penghapusan
|
|
function updateTableNumbers() {
|
|
$('#diagnosisTable tbody tr').each(function(index) {
|
|
$(this).find('td:first').text(index + 1);
|
|
});
|
|
}
|
|
|
|
// Fungsi untuk menampilkan pesan "Tidak ada riwayat diagnosa" jika semua data terhapus (Mobile)
|
|
function checkMobileEmptyState() {
|
|
if ($('.mobile-card').length === 0) {
|
|
$('#mobileDiagnosisContainer').html('<p class="text-center">Tidak ada riwayat diagnosa</p>');
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
@endsection
|
|
|
|
@endsection
|