@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8 space-y-8 bg-slate-950 min-h-screen text-slate-200 rounded-[3rem] font-sans relative overflow-hidden">
    {{-- Glow Effects --}}
    <div class="absolute -top-24 -left-24 w-96 h-96 bg-indigo-600/10 rounded-full blur-[120px]"></div>

    {{-- Header --}}
    <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 bg-slate-900/50 p-8 rounded-[2.5rem] border border-slate-800 backdrop-blur-xl">
        <div>
            <h2 class="text-3xl font-black text-white uppercase italic tracking-tighter">Operational Archives</h2>
            <p class="text-[10px] font-bold text-emerald-500 uppercase tracking-widest mt-1">Transmission History & Productivity Logs</p>
        </div>
        <a href="{{ route('dashboard') }}" class="bg-slate-800 text-slate-400 border border-slate-700 px-6 py-3 rounded-2xl text-[10px] font-black uppercase hover:bg-indigo-600 hover:text-white transition-all">
            Return to Ops
        </a>
    </div>

    {{-- Reports Table --}}
    <div class="bg-slate-900/30 rounded-[3rem] border border-slate-800 overflow-hidden shadow-2xl">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-slate-800/50">
                        <th class="px-8 py-6 text-[10px] uppercase text-slate-500 font-black">Report Date</th>
                        <th class="px-8 py-6 text-[10px] uppercase text-slate-500 font-black">Total Duration</th>
                        <th class="px-8 py-6 text-[10px] uppercase text-slate-500 font-black">Work Summary</th>
                        <th class="px-8 py-6 text-[10px] uppercase text-slate-500 font-black text-right">Status</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800">
                    @forelse($reports as $report)
                    <tr class="group hover:bg-slate-800/30 transition-all">
                        <td class="px-8 py-6">
                            <span class="text-sm font-black text-white italic">{{ \Carbon\Carbon::parse($report->report_date)->format('d M, Y') }}</span>
                            <p class="text-[9px] text-slate-500 uppercase font-bold mt-1">{{ \Carbon\Carbon::parse($report->report_date)->format('l') }}</p>
                        </td>
                        <td class="px-8 py-6">
                            <div class="flex items-center gap-2">
                                <span class="w-2 h-2 bg-indigo-500 rounded-full shadow-[0_0_8px_rgba(79,70,229,0.6)]"></span>
                                <span class="text-sm font-bold text-slate-200">
                                    {{ floor($report->total_seconds / 3600) }}h 
                                    {{ floor(($report->total_seconds % 3600) / 60) }}m
                                </span>
                            </div>
                        </td>
                        <td class="px-8 py-6">
                            <p class="text-[11px] text-slate-400 italic max-w-md line-clamp-1 group-hover:line-clamp-none transition-all">
                                "{{ $report->summary ?? 'No summary transmitted for this session.' }}"
                            </p>
                        </td>
                        <td class="px-8 py-6 text-right">
                            <span class="text-[9px] font-black px-4 py-1.5 rounded-full bg-emerald-900/20 text-emerald-400 border border-emerald-500/20 uppercase tracking-widest">
                                Logged
                            </span>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="px-8 py-20 text-center">
                            <p class="text-slate-600 font-black uppercase italic tracking-[0.5em]">Archives Empty</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Pagination --}}
    <div class="py-6 flex justify-center">
        {{ $reports->links() }}
    </div>
</div>

<style>
    .pagination { display: flex; gap: 8px; }
    .page-item .page-link { 
        background: #0f172a; 
        border: 1px solid #1e293b; 
        color: #64748b; 
        border-radius: 12px; 
        padding: 8px 16px; 
        font-size: 11px; 
        font-weight: 800;
        text-transform: uppercase;
    }
    .page-item.active .page-link { 
        background: #4f46e5; 
        color: white; 
        border-color: #4f46e5;
        box-shadow: 0 0 15px rgba(79,70,229,0.4);
    }
</style>
@endsection