@extends('layouts.admin')

@section('title', 'Project Reports')

@section('content')
    <x-page-header
        title="Reports — {{ $project->code }}"
        :breadcrumbs="[
            ['label' => 'Admin', 'href' => route('admin.dashboard')],
            ['label' => 'Projects', 'href' => route('admin.projects.index')],
            ['label' => $project->code, 'href' => route('admin.projects.show', $project)],
            ['label' => 'Reports'],
        ]"
        subtitle="Reports only for this project."
    />

    @include('projects._tabs', ['project' => $project, 'active' => 'reports'])

    <div class="bg-white border rounded">
        <table class="w-full text-sm">
            <thead class="text-gray-500">
                <tr>
                    <th class="text-left p-3">ID</th>
                    <th class="text-left p-3">Title</th>
                    <th class="text-left p-3">Description</th>
                    <th class="text-left p-3">Photo</th>
                    <th class="text-left p-3">Author</th>
                    <th class="text-left p-3">Created</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($reports as $r)
                    <tr class="border-t" x-data="{ photoModal: false }">
                        <td class="p-3">#{{ $r->id }}</td>
                        <td class="p-3">{{ $r->title }}</td>
                        <td class="p-3">{{ $r->description ?? '-' }}</td>
                        <td class="p-3">
                            @if ($r->photo)
                                <button type="button" @click="photoModal = true" class="inline-flex items-center gap-2 cursor-pointer focus:outline-none">
                                    <img src="{{ asset('storage/'.$r->photo) }}" alt="Report photo" class="h-10 w-10 rounded object-cover border" />
                                </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
                                <span class="text-xs text-zinc-500">-</span>
                            @endif
                        </td>
                        <td class="p-3">{{ $r->siteSupervisor?->name ?? '-' }}</td>
                        <td class="p-3">{{ optional($r->created_at)->format('d M Y, H:i') ?? '-' }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="p-8 text-center text-gray-500">No reports found for this project.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <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