@extends('layouts.app')

@section('content')
<div class="w-full border border-[#E5EEF8] p-6 md:p-8 rounded-[18px] bg-white text-left shadow-lg shadow-slate-100/40 hover:-translate-y-0.5 transition-all duration-300">
    <div class="mb-6 flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-slate-100 pb-4">
        <div>
            <h2 class="text-2xl font-bold text-slate-800 flex items-center gap-2">
                <i data-lucide="clock" class="w-6 h-6 text-primary"></i>
                Riwayat Deteksi
            </h2>
            <p class="text-sm text-slate-500 mt-1 font-semibold">Daftar lengkap hasil identifikasi awal penyakit kulit sistem Anda.</p>
        </div>
        <a href="{{ route('scan.index') }}" class="btn-ripple inline-flex items-center gap-1.5 px-5 py-2.5 bg-primary hover:bg-[#0057D8] text-white rounded-full text-xs font-bold transition shadow-md shadow-blue-500/10 hover:shadow-blue-500/20 transform hover:-translate-y-0.5 active:translate-y-0 relative overflow-hidden shrink-0">
            <i data-lucide="plus" class="w-3.5 h-3.5 stroke-[2.5]"></i>
            Deteksi Baru
        </a>
    </div>

    <!-- Form Pencarian & Filter Dinamis -->
    <form action="{{ route('scan.history') }}" method="GET" class="mb-6 grid grid-cols-1 md:grid-cols-3 gap-4 p-4 bg-slate-50 border border-[#E5EEF8] rounded-xl">
        <!-- Cari Nama Pasien -->
        <div>
            <label for="search" class="block text-xs font-bold text-slate-500 uppercase mb-1">Cari Pasien</label>
            <div class="relative">
                <input type="text" name="search" id="search" value="{{ request('search') }}" placeholder="Nama pasien..." class="w-full pl-9 pr-4 py-2 border border-[#DDE7F3] focus:border-primary focus:outline-none rounded-lg text-xs font-semibold text-slate-700 bg-white">
                <i data-lucide="search" class="absolute left-3 top-2.5 w-4 h-4 text-slate-400"></i>
            </div>
        </div>
        <!-- Tanggal Deteksi -->
        <div>
            <label for="date" class="block text-xs font-bold text-slate-500 uppercase mb-1">Tanggal Deteksi</label>
            <input type="date" name="date" id="date" value="{{ request('date') }}" class="w-full px-3 py-2 border border-[#DDE7F3] focus:border-primary focus:outline-none rounded-lg text-xs font-semibold text-slate-700 bg-white">
        </div>
        <!-- Jenis Penyakit -->
        <div>
            <label for="disease" class="block text-xs font-bold text-slate-500 uppercase mb-1">Jenis Penyakit</label>
            <div class="flex gap-2">
                <select name="disease" id="disease" class="w-full px-3 py-2 border border-[#DDE7F3] focus:border-primary focus:outline-none rounded-lg text-xs font-semibold text-slate-700 bg-white">
                    <option value="">Semua</option>
                    <option value="Scabies" {{ request('disease') == 'Scabies' ? 'selected' : '' }}>Scabies</option>
                    <option value="Impetigo" {{ request('disease') == 'Impetigo' ? 'selected' : '' }}>Impetigo</option>
                    <option value="Tinea" {{ request('disease') == 'Tinea' ? 'selected' : '' }}>Tinea</option>
                    <option value="Tidak Teridentifikasi" {{ request('disease') == 'Tidak Teridentifikasi' ? 'selected' : '' }}>Tidak Teridentifikasi</option>
                </select>
                <button type="submit" class="px-4 py-2 bg-primary hover:bg-[#0057D8] text-white text-xs font-bold rounded-lg transition shrink-0 shadow-md shadow-blue-500/10">
                    Filter
                </button>
            </div>
        </div>
    </form>

    <div class="overflow-x-auto rounded-xl border border-[#DDE7F3] shadow-sm">
        <table class="w-full text-sm text-left text-slate-650">
            <thead class="bg-secondary/40 text-xs font-extrabold uppercase tracking-wider text-slate-700 border-b border-[#DDE7F3]">
                <tr>
                    <th class="px-6 py-4.5">ID Pasien</th>
                    <th class="px-6 py-4.5">Nama Lengkap</th>
                    <th class="px-6 py-4.5">Tanggal Deteksi</th>
                    <th class="px-6 py-4.5">Hasil Prediksi</th>
                    <th class="px-6 py-4.5">Tingkat Keyakinan</th>
                    <th class="px-6 py-4.5 text-center">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse($histories as $history)
                <tr class="hover:bg-slate-50/40 transition duration-150">
                    <td class="px-6 py-4 font-bold text-primary">#{{ $history->patient_id }}</td>
                    <td class="px-6 py-4 font-bold text-slate-800">{{ $history->patient_name }}</td>
                    <td class="px-6 py-4 text-slate-500 font-semibold">{{ $history->created_at->format('d M Y') }}</td>
                    <td class="px-6 py-4">
                        <span class="px-3.5 py-1.5 text-xs font-extrabold rounded-full border shadow-sm inline-block
                            {{ $history->diagnosis == 'Impetigo' ? 'bg-red-50 text-red-700 border-red-200/80 shadow-red-100/30' : '' }}
                            {{ $history->diagnosis == 'Scabies' ? 'bg-emerald-50 text-emerald-700 border-emerald-200/80 shadow-emerald-100/30' : '' }}
                            {{ $history->diagnosis == 'Tinea' ? 'bg-blue-50 text-blue-700 border-blue-200/80 shadow-blue-100/30' : '' }}
                            {{ $history->diagnosis == 'Tidak Teridentifikasi' ? 'bg-slate-50 text-slate-700 border-slate-200 shadow-slate-100/30' : '' }}">
                            {{ $history->diagnosis }}
                        </span>
                    </td>
                    <td class="px-6 py-4 font-black text-slate-800">{{ $history->confidence_score }}%</td>
                    <td class="px-6 py-4 text-center">
                        <!-- Lihat -->
                        <a href="{{ route('scan.result', $history->id) }}" class="inline-flex items-center gap-1.5 px-3.5 py-2 bg-slate-50 hover:bg-secondary border border-[#DDE7F3] text-slate-650 hover:text-primary rounded-lg text-xs font-bold transition shadow-sm" title="Lihat Detail">
                            <i data-lucide="eye" class="w-4 h-4 text-primary"></i>
                            Lihat
                        </a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-6 py-12 text-center text-slate-400 font-bold">Belum ada riwayat identifikasi data pasien.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination Links -->
    <div class="mt-6 flex flex-col sm:flex-row justify-between items-center gap-4 text-xs font-semibold text-slate-500">
        <div>
            Menampilkan {{ $histories->firstItem() ?? 0 }} - {{ $histories->lastItem() ?? 0 }} dari {{ $histories->total() }} data
        </div>
        <div>
            {{ $histories->links() }}
        </div>
    </div>
</div>
@endsection