184 lines
7.7 KiB
PHP
184 lines
7.7 KiB
PHP
{{-- resources/views/user/diagnosishasil.blade.php --}}
|
|
@extends('user.layouts.user')
|
|
|
|
@push('styles')
|
|
<style>
|
|
body {
|
|
background-color: #f5f5f5;
|
|
font-family: 'Segoe UI', sans-serif;
|
|
}
|
|
|
|
.card {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
padding: 1rem;
|
|
margin: 2rem auto;
|
|
max-width: 1200px;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.filter-bar {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.table-container {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: 0.75rem 1rem;
|
|
border-bottom: 1px solid #eee;
|
|
font-size: 0.9rem;
|
|
text-align: left;
|
|
}
|
|
|
|
thead th {
|
|
background-color: #2196F3;
|
|
color: #fff;
|
|
}
|
|
|
|
.badge-diagnosa {
|
|
background-color: #4ECDC4;
|
|
color: #fff;
|
|
padding: 0.2rem 0.6rem;
|
|
border-radius: 4px;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.badge-ahp {
|
|
background-color: #FF8A65;
|
|
color: #fff;
|
|
padding: 0.2rem 0.6rem;
|
|
border-radius: 4px;
|
|
font-size: 0.8rem;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
@include('user.partials.navbar')
|
|
|
|
<div class="container mx-auto px-4 py-8 bg-gray-100 min-h-screen">
|
|
<div class="bg-white shadow-lg rounded-lg overflow-hidden">
|
|
<!-- Header -->
|
|
<div class="flex justify-between items-center bg-blue-600 text-white px-6 py-4">
|
|
<h2 class="text-2xl font-semibold">Riwayat Diagnosa & AHP</h2>
|
|
<a href="{{ route('user.diagnosahasil.pdf') }}" target="_blank"
|
|
class="inline-flex items-center bg-red-500 hover:bg-red-600 px-4 py-2 rounded-md text-sm font-medium transition">
|
|
<i class="bi bi-file-earmark-pdf-fill mr-2"></i> Cetak PDF
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="flex flex-col md:flex-row items-center justify-between px-6 py-4 gap-4 bg-gray-50">
|
|
<select id="filterType"
|
|
class="block w-full md:w-1/4 py-2 px-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300">
|
|
<option value="All">Semua</option>
|
|
<option value="Diagnosa">Diagnosa</option>
|
|
<option value="AHP">AHP</option>
|
|
</select>
|
|
<div class="relative w-full md:w-1/3">
|
|
<svg class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5"
|
|
fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd"
|
|
d="M8 4a4 4 0 014 4v1h1a1 1 0 110 2h-1v1a4 4 0 11-8 0v-1H4a1 1 0 110-2h1V8a4 4 0 014-4zm2 4a2 2 0 10-4 0v1h4V8z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
<input id="searchJurusan" type="text" placeholder="Cari rekomendasi…"
|
|
class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="overflow-x-auto">
|
|
<table id="recordsTable" class="min-w-full table-auto divide-y divide-gray-200">
|
|
<thead class="bg-blue-600 sticky top-0">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">No</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Tanggal
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Jenis
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">
|
|
Rekomendasi</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Skor (%)
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
@forelse($records as $i => $r)
|
|
<tr data-type="{{ $r['type'] }}"
|
|
data-jurusan="{{ strtolower($r['kecerdasan'] ?? ($r['jurusan'] ?? '')) }}"
|
|
class="odd:bg-gray-50 hover:bg-gray-100 transition">
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{ $i + 1 }}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{ $r['tanggal'] }}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
@if ($r['type'] === 'Diagnosa')
|
|
<span
|
|
class="px-2 py-1 rounded-full text-xs font-semibold bg-teal-100 text-teal-800">Diagnosa</span>
|
|
@else
|
|
<span
|
|
class="px-2 py-1 rounded-full text-xs font-semibold bg-orange-100 text-orange-800">AHP</span>
|
|
@endif
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
|
|
{{ $r['kecerdasan'] ?? ($r['jurusan'] ?? '-') }}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{ $r['skor'] }}</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="5" class="px-6 py-4 text-center text-gray-500">Belum ada data.</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const filterType = document.getElementById('filterType');
|
|
const searchJurusan = document.getElementById('searchJurusan');
|
|
const tableRows = document.querySelectorAll('#recordsTable tbody tr');
|
|
|
|
function applyFilter() {
|
|
const typeVal = filterType.value;
|
|
const searchVal = searchJurusan.value.trim().toLowerCase();
|
|
tableRows.forEach(row => {
|
|
const rowType = row.getAttribute('data-type');
|
|
const rowText = row.getAttribute('data-jurusan');
|
|
const show = (typeVal === 'All' || rowType === typeVal) && rowText.includes(searchVal);
|
|
row.style.display = show ? '' : 'none';
|
|
});
|
|
}
|
|
filterType.addEventListener('change', applyFilter);
|
|
searchJurusan.addEventListener('input', applyFilter);
|
|
});
|
|
</script>
|
|
@endpush
|