{{-- 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 &amp; 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