MIF_E31230393/resources/views/history.blade.php

@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto py-12 px-6">
    
    <div class="flex flex-col md:flex-row justify-between items-center mb-10 gap-4 border-b pb-8">
        <div class="flex items-center gap-5">
            <a href="{{ url()->previous() }}" class="w-10 h-10 bg-white border border-gray-100 rounded-xl flex items-center justify-center shadow-sm hover:bg-orange-50 hover:border-orange-200 transition-all group" title="Kembali ke Dashboard">
                <svg class="w-5 h-5 text-gray-400 group-hover:text-orange-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
            </a>
            <div>
                <h1 class="text-4xl font-black text-gray-900 tracking-tight leading-none uppercase">RIWAYAT <span class="text-orange-700">KLASIFIKASI</span></h1>
                <p class="text-gray-500 mt-1 uppercase text-[10px] font-bold tracking-[0.2em]">Daftar hasil analisis biji kopi yang tersimpan</p>
            </div>
        </div>
        <div class="hidden md:block text-right">
            <span class="text-[10px] font-black uppercase text-gray-300 tracking-[0.3em]">Total Data: {{ count($histories) }} Sampel</span>
        </div>
    </div>

    <div class="bg-white border rounded-[2.5rem] overflow-hidden shadow-sm">
        <table class="w-full text-left border-collapse">
            <thead>
                <tr class="bg-gray-50 border-b">
                    <th class="px-8 py-5 text-[10px] font-black uppercase tracking-widest text-gray-400">Sampel</th>
                    <th class="px-6 py-5 text-[10px] font-black uppercase tracking-widest text-gray-400 text-center">Hasil Prediksi</th>
                    <th class="px-6 py-5 text-[10px] font-black uppercase tracking-widest text-gray-400 text-center">Akurasi</th>
                    <th class="px-6 py-5 text-[10px] font-black uppercase tracking-widest text-gray-400 text-center">Tanggal & Waktu</th>
                    <th class="px-8 py-5 text-[10px] font-black uppercase tracking-widest text-gray-400 text-right">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y">
                @forelse($histories as $data)
                <tr class="hover:bg-gray-50/50 transition-colors group">
                    <td class="px-8 py-4">
                        <div class="w-16 h-16 rounded-2xl overflow-hidden border-2 border-white shadow-sm ring-1 ring-gray-100">
                            <img src="{{ asset('storage/' . $data->image_path) }}" class="w-full h-full object-cover" alt="Sampel Biji Kopi">
                        </div>
                    </td>
                    
                    <td class="px-6 py-4 text-center">
                        <span class="px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-wider 
                            {{ $data->label == 'Dark Roast' ? 'bg-gray-900 text-white' : ($data->label == 'Medium Roast' ? 'bg-orange-100 text-orange-700' : 'bg-orange-50 text-orange-600') }}">
                            {{ $data->label }}
                        </span>
                    </td>
                    
                    <td class="px-6 py-4 text-center font-bold text-gray-900 text-sm italic">
                        {{ $data->confidence }}%
                    </td>
                    
                    <td class="px-6 py-4 text-center">
                        <p class="text-[11px] font-bold text-gray-600 uppercase">{{ \Carbon\Carbon::parse($data->created_at)->translatedFormat('d F Y') }}</p>
                        <p class="text-[10px] text-gray-400 font-bold uppercase tracking-tighter">{{ \Carbon\Carbon::parse($data->created_at)->format('H:i') }} WIB</p>
                    </td>
                    
                    <td class="px-8 py-4 text-right">
                        <button onclick="openDeleteModal('{{ $data->id }}')" class="text-[10px] font-bold text-gray-300 hover:text-red-600 transition uppercase tracking-widest">
                            Hapus
                        </button>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="px-8 py-20 text-center">
                        <p class="text-gray-400 font-medium italic">Belum ada data riwayat yang disimpan.</p>
                        <a href="{{ route('klasifikasi') }}" class="text-orange-700 font-bold text-xs hover:underline mt-2 inline-block">Mulai Klasifikasi Sekarang</a>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<div id="deleteModal" class="fixed inset-0 z-[60] hidden overflow-y-auto">
    <div class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity"></div>

    <div class="flex min-h-full items-center justify-center p-4 text-center">
        <div class="relative transform overflow-hidden rounded-[2.5rem] bg-white p-8 text-left shadow-2xl transition-all w-full max-w-md border border-gray-100 animate-fadeIn">
            <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-red-50 mb-6">
                <svg class="h-10 w-10 text-red-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                </svg>
            </div>

            <div class="text-center">
                <h3 class="text-xl font-black text-gray-900 uppercase tracking-tight mb-2">Hapus Riwayat?</h3>
                <p class="text-sm text-gray-500 leading-relaxed mb-8 text-balance">Data klasifikasi dan foto sampel ini akan dihapus permanen dari sistem. Tindakan ini tidak dapat dibatalkan.</p>
            </div>

            <div class="flex flex-col gap-3">
                <form id="deleteForm" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="w-full py-4 bg-red-600 text-white rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] shadow-lg shadow-red-200 hover:bg-red-700 transition-all">
                        Ya, Hapus
                    </button>
                </form>
                <button onclick="closeDeleteModal()" class="w-full py-4 bg-gray-100 text-gray-500 rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] border border-gray-200 hover:bg-gray-200 transition-all">
                    Batalkan
                </button>
            </div>
        </div>
    </div>
</div>

<style>
    .animate-fadeIn { animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
</style>
@endsection

@push('scripts')
<script>
    const modal = document.getElementById('deleteModal');
    const form = document.getElementById('deleteForm');

    function openDeleteModal(id) {
        form.action = `/classification/${id}`;
        
        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden'; 
    }

    function closeDeleteModal() {
        modal.classList.add('hidden');
        document.body.style.overflow = 'auto'; 
    }

    window.onclick = function(event) {
        if (event.target == modal) {
            closeDeleteModal();
        }
    }
</script>
@endpush