@extends('layouts.app')

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="max-w-7xl mx-auto p-6 space-y-8 bg-slate-50 min-h-screen font-sans">
    
    {{-- ✅ HEADER & ADVANCED INTELLIGENCE FILTERS --}}
    <div class="flex flex-col space-y-6 bg-white p-8 rounded-[2.5rem] shadow-sm border border-slate-100">
        <div class="flex justify-between items-center">
            <div>
                <h2 class="text-3xl font-black text-slate-900 uppercase italic tracking-tighter leading-none">Visual Archive: {{ $employee->name }}</h2>
                <p class="text-[10px] font-bold text-indigo-600 uppercase tracking-widest mt-2 flex items-center gap-2">
                    <span class="w-2 h-2 bg-indigo-500 rounded-full animate-ping"></span>
                    Operational Intelligence Timeline
                </p>
            </div>
            <a href="{{ route('admin.employees.show', $employee->user_id) }}" class="bg-slate-100 text-slate-900 px-6 py-3 rounded-2xl text-[10px] font-black uppercase border border-slate-200 hover:bg-white transition-all shadow-sm no-underline">Exit Gallery</a>
        </div>

        {{-- ✅ QUICK TIMELINE SELECTOR (Today, Week, Month, Year) --}}
        <div class="flex flex-wrap gap-2 pt-2 border-t border-slate-100 mt-4">
            @php 
                $currentUrl = url()->current();
                $today = \Carbon\Carbon::today()->toDateString();
                $startOfWeek = \Carbon\Carbon::now()->startOfWeek()->toDateString();
                $startOfMonth = \Carbon\Carbon::now()->startOfMonth()->toDateString();
                $startOfYear = \Carbon\Carbon::now()->startOfYear()->toDateString();
            @endphp
            <a href="{{ $currentUrl }}?start_date={{ $today }}&end_date={{ $today }}" class="no-underline px-4 py-2 rounded-xl text-[9px] font-black uppercase {{ request('start_date') == $today ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-200' : 'bg-slate-100 text-slate-600 hover:bg-slate-200' }}">Today</a>
            <a href="{{ $currentUrl }}?start_date={{ $startOfWeek }}&end_date={{ $today }}" class="no-underline px-4 py-2 rounded-xl text-[9px] font-black uppercase {{ request('start_date') == $startOfWeek ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-200' : 'bg-slate-100 text-slate-600 hover:bg-slate-200' }}">This Week</a>
            <a href="{{ $currentUrl }}?start_date={{ $startOfMonth }}&end_date={{ $today }}" class="no-underline px-4 py-2 rounded-xl text-[9px] font-black uppercase {{ request('start_date') == $startOfMonth ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-200' : 'bg-slate-100 text-slate-600 hover:bg-slate-200' }}">This Month</a>
            <a href="{{ $currentUrl }}?start_date={{ $startOfYear }}&end_date={{ $today }}" class="no-underline px-4 py-2 rounded-xl text-[9px] font-black uppercase {{ request('start_date') == $startOfYear ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-200' : 'bg-slate-100 text-slate-600 hover:bg-slate-200' }}">This Year</a>
        </div>

        {{-- ✅ CUSTOM DATE & CATEGORY SEARCH --}}
        <form action="{{ url()->current() }}" method="GET" class="flex flex-wrap items-center gap-3 bg-slate-50 p-4 rounded-3xl border border-slate-200">
            <div class="flex items-center gap-2 px-3 border-r border-slate-200">
                <span class="text-[8px] font-black uppercase text-slate-400">Range</span>
                <input type="date" name="start_date" value="{{ $startDate }}" class="bg-transparent border-none text-[10px] font-black outline-none text-slate-700">
                <span class="text-slate-300">/</span>
                <input type="date" name="end_date" value="{{ $endDate }}" class="bg-transparent border-none text-[10px] font-black outline-none text-slate-700">
            </div>

            <div class="px-3 border-r border-slate-200">
                <select name="category" class="bg-transparent border-none text-[10px] font-black outline-none text-indigo-600 uppercase cursor-pointer">
                    <option value="">All Streams</option>
                    <option value="work" {{ request('category') == 'work' ? 'selected' : '' }}>💻 Work Nodes</option>
                    <option value="ai_tool" {{ request('category') == 'ai_tool' ? 'selected' : '' }}>🤖 AI Signals</option>
                    <option value="social_media" {{ request('category') == 'social_media' ? 'selected' : '' }}>📱 Social Traffic</option>
                </select>
            </div>

            <button type="submit" class="bg-slate-900 text-white px-5 py-2.5 rounded-xl hover:bg-emerald-600 transition-all shadow-md border-none flex items-center gap-2 cursor-pointer">
                <i class="fas fa-sync-alt text-[10px]"></i>
                <span class="text-[9px] font-black uppercase">Sync View</span>
            </button>

            <button id="delete-btn" type="button" onclick="deleteSelected()" class="hidden bg-rose-600 text-white px-5 py-2.5 rounded-xl text-[9px] font-black uppercase shadow-lg transition-all flex items-center gap-2 border-none cursor-pointer ml-auto">
                <i class="fas fa-trash-alt"></i> Purge Selected (<span id="selected-count">0</span>)
            </button>
        </form>
    </div>

    {{-- ✅ GALLERY GRID --}}
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        @forelse($screenshots as $sc)
            <div class="group relative bg-white p-2.5 rounded-[2.2rem] shadow-sm border {{ $sc->app_category == 'ai_tool' ? 'border-amber-200' : ($sc->app_category == 'social_media' ? 'border-rose-200' : 'border-slate-100') }} hover:shadow-xl transition-all duration-500 overflow-hidden border-solid">
                
                <div class="absolute top-4 left-4 z-50">
                    <input type="checkbox" class="screenshot-checkbox w-6 h-6 rounded-lg accent-indigo-600 cursor-pointer" value="{{ $sc->id }}" onchange="updateSelection()">
                </div>

                <div class="absolute top-4 right-4 z-50">
                    @if($sc->app_category == 'ai_tool')
                        <span class="bg-amber-500 text-white text-[7px] font-black px-2 py-1 rounded-lg uppercase shadow-lg">🤖 AI ALERT</span>
                    @elseif($sc->app_category == 'social_media')
                        <span class="bg-rose-500 text-white text-[7px] font-black px-2 py-1 rounded-lg uppercase shadow-lg">📱 SOCIAL</span>
                    @else
                        <span class="bg-emerald-500 text-white text-[7px] font-black px-2 py-1 rounded-lg uppercase shadow-lg">💻 WORK</span>
                    @endif
                </div>

                <div class="aspect-video overflow-hidden rounded-[1.8rem] bg-slate-950 relative">
                    <img src="{{ asset('storage/' . str_replace(['public/', 'storage/'], '', $sc->image_path)) }}" 
                         class="w-full h-full object-cover cursor-zoom-in group-hover:scale-110 transition-all duration-700"
                         onclick="window.open(this.src)" loading="lazy">
                </div>

                <div class="p-4 space-y-1">
                    <p class="text-[9px] font-black text-slate-400 uppercase italic">
                        {{ \Carbon\Carbon::parse($sc->created_at)->format('d M, Y • H:i') }}
                    </p>
                    <p class="text-[9px] font-bold text-slate-800 uppercase truncate group-hover:text-indigo-600 transition-colors">
                        "{{ $sc->window_title ?? 'Operational Sync' }}"
                    </p>
                </div>
            </div>
        @empty
            <div class="col-span-full py-40 text-center bg-white rounded-[3rem] border-2 border-dashed border-slate-100 border-solid">
                <i class="fas fa-ghost text-4xl text-slate-200 mb-4"></i>
                <p class="text-slate-400 font-black uppercase italic tracking-widest text-sm">No Visual Signals Recorded in this Range</p>
            </div>
        @endforelse
    </div>

    {{-- ✅ PAGINATION --}}
    @if($screenshots->hasPages())
    <div class="py-8 flex flex-col items-center">
        {{ $screenshots->appends(request()->input())->links() }}
    </div>
    @endif
</div>

<script>
    function updateSelection() {
        const checked = document.querySelectorAll('.screenshot-checkbox:checked');
        const btn = document.getElementById('delete-btn');
        const countSpan = document.getElementById('selected-count');
        if(countSpan) countSpan.innerText = checked.length;
        if(btn) {
            if(checked.length > 0) btn.classList.remove('hidden');
            else btn.classList.add('hidden');
        }
    }

    async function deleteSelected() {
        const checked = document.querySelectorAll('.screenshot-checkbox:checked');
        if (!confirm(`PURGE DATA: Permanently remove ${checked.length} selected frames?`)) return;
        
        const ids = Array.from(checked).map(c => c.value);
        fetch('{{ route("admin.screenshots.delete") }}', {
            method: 'POST',
            headers: { 
                'Content-Type': 'application/json', 
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({ ids: ids })
        })
        .then(res => res.json())
        .then(data => { if(data.success) location.reload(); })
        .catch(err => alert("Purge Failed: Storage protection active."));
    }
</script>

<style>
    .no-underline { text-decoration: none !important; }
</style>
@endsection