FiFreshChecker/resources/views/history/history.blade.php

<x-app-layout>

<div class="w-full max-w-5xl mx-auto">

    {{-- Header --}}
    <div class="flex justify-between items-center mb-6 md:mb-10 px-2">
        <div>
            <h1 class="text-2xl sm:text-3xl font-heading font-bold text-gray-900">Riwayat Analisis</h1>
            <p class="text-gray-500 text-sm mt-1">Daftar hasil klasifikasi insang ikan yang pernah kamu lakukan.</p>
        </div>
        <a href="{{ route('klasifikasi') }}"
            class="flex-shrink-0 inline-flex items-center gap-2 bg-primary hover:bg-primary-dark text-white text-sm font-semibold px-5 py-2.5 rounded-xl transition-all shadow-sm hover:shadow-md">
            <i class="bi bi-cpu"></i>
            <span class="hidden sm:inline">Analisis Baru</span>
            <span class="sm:hidden">Analisis Baru</span>
        </a>
    </div>

    {{-- MOBILE: Card list --}}
    <div class="space-y-4 md:hidden">
        @forelse($histories as $history)
        <div class="bg-white border border-gray-100 rounded-2xl p-4 shadow-sm">
            <div class="flex gap-4">
                <div class="flex-shrink-0">
                    <img src="{{ asset('storage/'.$history->image_path) }}"
                        class="w-20 h-20 object-cover rounded-xl border border-gray-100">
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex justify-between items-start mb-2">
                        @if($history->classification->kelas == 'fresh')
                            <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-green-50 text-green-700 border border-green-200 rounded-lg text-xs font-semibold">
                                <i class="bi bi-check-circle-fill"></i>
                                {{ $history->classification->tingkat_kesegaran }}
                            </span>
                        @else
                            <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-red-50 text-red-600 border border-red-200 rounded-lg text-xs font-semibold">
                                <i class="bi bi-x-circle-fill"></i>
                                {{ $history->classification->tingkat_kesegaran }}
                            </span>
                        @endif
                        <span class="text-xs text-gray-400 font-medium">
                            #{{ method_exists($histories, 'currentPage') ? ($histories->currentPage() - 1) * $histories->perPage() + $loop->iteration : $loop->iteration }}
                        </span>
                    </div>

                    {{-- Progress bar probabilitas --}}
                    <div class="mt-2">
                        <div class="flex justify-between items-center mb-1">
                            <span class="text-xs text-gray-500">Skor Tingkat Kesegaran</span>
                            <span class="text-xs font-semibold text-primary">
                                {{ number_format($history->classification->prob_fresh * 100, 1) }}%
                            </span>
                        </div>
                        <div class="w-full bg-gray-100 rounded-full h-1.5 overflow-hidden">
                            <div class="bg-primary h-1.5 rounded-full"
                                style="width: {{ number_format($history->classification->prob_fresh * 100, 1) }}%">
                            </div>
                        </div>
                    </div>

                    <div class="mt-2 text-xs text-gray-400 flex items-center gap-1">
                        <i class="bi bi-clock"></i>
                        {{ $history->created_at->timezone('Asia/Jakarta')->format('d M Y, H:i') }} WIB
                    </div>
                </div>
            </div>
        </div>
        @empty
        <div class="text-center py-20">
            <div class="w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <i class="bi bi-clock-history text-gray-400 text-2xl"></i>
            </div>
            <p class="text-gray-500 font-medium">Belum ada riwayat analisis</p>
            <p class="text-gray-400 text-sm mt-1">Mulai analisis ikan pertamamu sekarang!</p>
            <a href="{{ route('klasifikasi') }}"
                class="inline-flex items-center gap-2 mt-4 bg-primary text-white text-sm font-semibold px-5 py-2.5 rounded-xl hover:bg-primary-dark transition">
                <i class="bi bi-cpu"></i> Mulai Analisis
            </a>
        </div>
        @endforelse
    </div>

    {{-- DESKTOP: Table --}}
    <div class="hidden md:block bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">

        {{-- Table header info --}}
        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
            <div class="flex items-center gap-2 text-sm text-gray-500">
                <i class="bi bi-table text-primary/60"></i>
                <span>Total: <strong class="text-gray-700">{{ $histories->total() ?? $histories->count() }}</strong> analisis</span>
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-gray-50 border-b border-gray-100">
                        <th class="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">No</th>
                        <th class="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Gambar</th>
                        <th class="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Tingkat Kesegaran</th>
                        <th class="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Skor Tingkat Kesegaran</th>
                        <th class="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Tanggal</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse($histories as $history)
                    <tr class="hover:bg-blue-50/30 transition-colors">
                        <td class="px-6 py-4 text-gray-400 font-medium text-xs">
                            #{{ method_exists($histories, 'currentPage') ? ($histories->currentPage() - 1) * $histories->perPage() + $loop->iteration : $loop->iteration }}
                        </td>
                        <td class="px-6 py-4">
                            <img src="{{ asset('storage/'.$history->image_path) }}"
                                class="w-14 h-14 object-cover rounded-xl border border-gray-100 shadow-sm">
                        </td>
                        <td class="px-6 py-4">
                            @if($history->classification->kelas == 'fresh')
                                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-green-50 text-green-700 border border-green-200 rounded-xl text-xs font-semibold">
                                    <i class="bi bi-check-circle-fill text-green-500"></i>
                                    {{ $history->classification->tingkat_kesegaran }}
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-red-50 text-red-600 border border-red-200 rounded-xl text-xs font-semibold">
                                    <i class="bi bi-x-circle-fill text-red-500"></i>
                                    {{ $history->classification->tingkat_kesegaran }}
                                </span>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-3">
                                <div class="flex-1 w-24 bg-gray-100 rounded-full h-1.5 overflow-hidden">
                                    <div class="bg-primary h-1.5 rounded-full transition-all"
                                        style="width: {{ number_format($history->classification->prob_fresh * 100, 1) }}%">
                                    </div>
                                </div>
                                <span class="text-primary font-semibold text-xs min-w-[40px]">
                                    {{ number_format($history->classification->prob_fresh * 100, 1) }}%
                                </span>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="text-gray-700 text-xs font-medium">
                                {{ $history->created_at->timezone('Asia/Jakarta')->format('d M Y') }}
                            </div>
                            <div class="text-gray-400 text-xs mt-0.5">
                                {{ $history->created_at->timezone('Asia/Jakarta')->format('H:i') }} WIB
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="text-center py-20">
                            <div class="w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                                <i class="bi bi-clock-history text-gray-400 text-2xl"></i>
                            </div>
                            <p class="text-gray-500 font-medium">Belum ada riwayat analisis</p>
                            <p class="text-gray-400 text-sm mt-1">Mulai analisis ikan pertamamu sekarang!</p>
                            <a href="{{ route('klasifikasi') }}"
                                class="inline-flex items-center gap-2 mt-4 bg-primary text-white text-sm font-semibold px-5 py-2.5 rounded-xl hover:bg-primary-dark transition">
                                <i class="bi bi-cpu"></i> Mulai Analisis
                            </a>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Pagination --}}
    @if(method_exists($histories, 'links') && $histories->hasPages())
    <div class="mt-6 px-2">
        {{ $histories->links() }}
    </div>
    @endif

</div>

</x-app-layout>