@extends('layouts.admin')

@section('title', 'Reports')

@section('content')
    <x-page-header
        title="Project Field Reports"
        :breadcrumbs="[
            ['label' => 'Admin', 'href' => route('admin.dashboard')],
            ['label' => 'Reports'],
        ]"
        subtitle="Visual updates and field documentation from site supervisors."
    />

    <x-table-wrapper>
        <table class="w-full table-fixed text-sm">
            <thead class="bg-slate-50 border-b border-slate-200">
                <tr>
                    <th class="text-left px-4 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Submission Date</th>
                    <th class="text-left px-4 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Project Reference</th>
                    <th class="text-left px-4 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Report Details</th>
                    <th class="text-left px-4 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-400 w-32">Field Photo</th>
                    <th class="text-left px-4 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Submitted By</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-zinc-100">
                @forelse ($reports as $r)
                    <tr class="group hover:bg-slate-50 transition-colors" x-data="{ photoModal: false }">
                        <td class="px-4 py-4 whitespace-nowrap">
                            <div class="text-sm font-bold text-slate-900 leading-none mb-1">{{ optional($r->created_at)->format('d M Y') }}</div>
                            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ optional($r->created_at)->format('H:i') }}</div>
                        </td>
                        <td class="px-4 py-4">
                            <div class="inline-flex items-center px-2.5 py-0.5 rounded-lg text-xs font-bold bg-blue-50 text-blue-600 border border-blue-100">
                                {{ $r->project?->code ?? '-' }}
                            </div>
                        </td>
                        <td class="px-4 py-4">
                            <div class="font-bold text-slate-800 leading-none mb-1">{{ $r->title }}</div>
                            <div class="text-xs text-slate-500 truncate max-w-xs" title="{{ $r->description }}">{{ $r->description ?? 'No additional details' }}</div>
                        </td>
                        <td class="px-4 py-4 w-32">
                            @if ($r->photo)
                                <button type="button" @click="photoModal = true" class="block group/photo relative overflow-hidden h-14 w-20 rounded-xl border border-slate-200 shadow-sm transition-all hover:ring-4 hover:ring-blue-500/10 focus:outline-none">
                                    <img src="{{ asset('storage/' . $r->photo) }}" alt="Report photo" class="h-full w-full object-cover transition-transform group-hover/photo:scale-110">
                                    <div class="absolute inset-0 bg-slate-900/40 flex items-center justify-center opacity-0 group-hover/photo:opacity-100 transition-opacity">
                                        <svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                    </div>
                                </button>
                                <div x-show="photoModal" style="display: none;" x-transition class="custom-photo-overlay" @click="photoModal = false" @keydown.escape.window="photoModal = false">
                                    <div class="custom-photo-container" @click.stop>
                                        <button type="button" @click="photoModal = false" class="custom-photo-close" aria-label="Close">
                                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                                        </button>
                                        <img src="{{ asset('storage/' . $r->photo) }}" class="custom-photo-img" alt="Report photo">
                                    </div>
                                </div>
                            @else
                                <div class="h-14 w-20 rounded-xl bg-slate-50 border border-slate-100 flex items-center justify-center">
                                    <svg class="h-5 w-5 text-slate-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                                        <circle cx="8.5" cy="8.5" r="1.5"/>
                                        <polyline points="21 15 16 10 5 21"/>
                                    </svg>
                                </div>
                            @endif
                        </td>
                        <td class="px-4 py-4">
                            <div class="flex items-center gap-2">
                                <div class="h-8 w-8 rounded-full bg-slate-100 flex items-center justify-center text-[10px] font-bold text-slate-500 border border-slate-200">
                                    {{ strtoupper(mb_substr($r->siteSupervisor?->name ?? '?', 0, 1)) }}
                                </div>
                                <span class="text-sm font-medium text-slate-700">{{ $r->siteSupervisor?->name ?? '-' }}</span>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="p-10 text-center text-slate-500 font-medium">No site reports available for review.</td></tr>
                @endforelse
            </tbody>
        </table>
    </x-table-wrapper>

    <style>
        .custom-photo-overlay {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            background-color: rgba(0, 0, 0, 0.85) !important;
            z-index: 999999 !important;
            display: flex;
            align-items: center !important;
            justify-content: center !important;
            padding: 20px !important;
        }
        .custom-photo-container {
            position: relative !important;
            background: #fff !important;
            padding: 10px !important;
            border-radius: 12px !important;
            max-width: 800px !important;
            width: 100% !important;
            max-height: 90vh !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
        }
        .custom-photo-close {
            position: absolute !important;
            top: -45px !important;
            right: 0 !important;
            background: transparent !important;
            border: none !important;
            color: #fff !important;
            cursor: pointer !important;
            padding: 5px !important;
        }
        .custom-photo-close:hover {
            color: #ff4444 !important;
        }
        .custom-photo-close svg {
            width: 32px !important;
            height: 32px !important;
        }
        .custom-photo-img {
            max-width: 100% !important;
            max-height: calc(90vh - 20px) !important;
            object-fit: contain !important;
            border-radius: 6px !important;
        }
    </style>

    <div class="mt-4">
        {{ $reports->links() }}
    </div>
@endsection