@extends('layouts.app')

@section('mobile-title', $report->reference_number)
@section('mobile-subtitle', $report->project->name)
@section('mobile-back', route('reports.index'))
@if ($report->status === \App\Models\Report::STATUS_DRAFT || $report->status === \App\Models\Report::STATUS_REJECTED)
    @can('update', $report)
        @section('mobile-action-url', route('reports.edit', $report))
        @section('mobile-action-icon', 'edit')
        @section('mobile-action-label', 'Edit report')
    @endcan
@endif

@section('content')
    @php
        $canReview = (auth()->user()->isSupervisor() || auth()->user()->isAdmin()) && $report->status === \App\Models\Report::STATUS_SUBMITTED;
        $resourceTotal = max(0, (int) $report->manpower_count);
    @endphp

    <div class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
        <div>
            <div class="mb-2 text-sm text-zinc-600">Reports / {{ $report->reference_number }}</div>
            <div class="flex flex-wrap items-center gap-3">
                <h1 class="text-3xl font-bold">{{ $report->title }}</h1>
                @include('partials.status-badge', ['status' => $report->status])
            </div>
            <p class="mt-1 text-sm text-zinc-600">{{ $report->project->name }} · {{ $report->work_date->format('M j, Y') }} · {{ $report->technician->name }}</p>
        </div>
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('reports.print', $report) }}" target="_blank" class="rounded border border-zinc-300 px-4 py-2.5 text-sm font-bold text-zinc-700">Print</a>
            @if ($report->status === \App\Models\Report::STATUS_APPROVED)
                <a href="{{ route('reports.pdf', $report) }}" class="rounded bg-zinc-900 px-4 py-2.5 text-sm font-bold text-white hover:bg-zinc-800">Download PDF</a>
            @endif
            @if (auth()->user()->isAdmin() && ! $report->archived_at)
                <form method="POST" action="{{ route('reports.archive', $report) }}">@csrf<button class="rounded border border-zinc-300 px-4 py-2.5 text-sm font-bold text-zinc-700">Archive</button></form>
            @endif
            @can('delete', $report)
                <form method="POST" action="{{ route('reports.destroy', $report) }}" onsubmit="return confirm('Delete this report permanently? Uploaded files and photos will also be deleted.')">
                    @csrf
                    @method('DELETE')
                    <button class="rounded border border-red-200 px-4 py-2.5 text-sm font-bold text-red-700">Delete</button>
                </form>
            @endcan
            @if ($report->canBeEditedBy(auth()->user()))
                <a href="{{ route('reports.edit', $report) }}" class="rounded border border-zinc-300 px-4 py-2.5 text-sm font-bold text-zinc-700">Edit</a>
                <form method="POST" action="{{ route('reports.submit', $report) }}">@csrf<button class="rounded bg-emerald-900 px-4 py-2.5 text-sm font-bold text-white hover:bg-emerald-800">Submit</button></form>
            @endif
        </div>
    </div>

    <div class="grid gap-6 lg:grid-cols-[1fr_360px]">
        <section class="space-y-6">
            <section class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
                <dl class="grid gap-5 sm:grid-cols-4">
                    <div>
                        <dt class="text-xs font-bold uppercase text-zinc-600">Author</dt>
                        <dd class="mt-2 flex items-center gap-2 text-sm font-semibold"><span class="flex h-8 w-8 items-center justify-center rounded bg-zinc-100 text-xs">{{ collect(explode(' ', $report->technician->name))->map(fn ($part) => substr($part, 0, 1))->take(2)->join('') }}</span>{{ $report->technician->name }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs font-bold uppercase text-zinc-600">Project</dt>
                        <dd class="mt-2 text-sm font-semibold">{{ $report->project->name }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs font-bold uppercase text-zinc-600">Reporting date</dt>
                        <dd class="mt-2 text-sm font-semibold">{{ $report->work_date->format('M j, Y') }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs font-bold uppercase text-zinc-600">Created at</dt>
                        <dd class="mt-2 text-sm font-semibold">{{ $report->created_at->format('M j, Y g:i A') }}</dd>
                    </div>
                </dl>
            </section>

            <section class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
                <h2 class="text-lg font-bold">Site Observations</h2>
                <div class="mt-4 space-y-4 text-sm leading-6 text-zinc-700">
                    <p class="whitespace-pre-line">{{ $report->work_completed ?: 'Not recorded' }}</p>
                    @if ($report->issues)
                        <p class="whitespace-pre-line">{{ $report->issues }}</p>
                    @endif
                    @if ($report->safety_notes)
                        <p class="whitespace-pre-line">{{ $report->safety_notes }}</p>
                    @endif
                </div>
            </section>

            <section class="overflow-hidden rounded border border-zinc-200 bg-white shadow-sm">
                <div class="border-b border-zinc-200 bg-zinc-50 px-5 py-3">
                    <h2 class="text-lg font-bold">Construction checklist</h2>
                    <p class="mt-1 text-sm text-zinc-600">Safety Checklist Results</p>
                </div>
                <div class="divide-y divide-zinc-100">
                    @foreach ($report->checklistFlags() as $label => $checked)
                        <div class="flex items-center justify-between gap-4 px-5 py-4 {{ $checked ? '' : 'bg-red-50/60 text-red-700' }}">
                            <div class="font-semibold">{{ $label }}</div>
                            <div class="inline-flex items-center gap-2 text-sm font-bold {{ $checked ? 'text-emerald-800' : 'text-red-700' }}">
                                <span class="material-symbols-outlined text-base">{{ $checked ? 'check_circle' : 'flag' }}</span>{{ $checked ? 'Pass' : 'Fail' }}
                            </div>
                        </div>
                    @endforeach
                </div>
            </section>

            @if (count($report->customChecklistFlags()) > 0)
                <section class="overflow-hidden rounded border border-zinc-200 bg-white shadow-sm">
                    <div class="border-b border-zinc-200 bg-zinc-50 px-5 py-3">
                        <h2 class="text-lg font-bold">Custom checklist</h2>
                    </div>
                    <div class="divide-y divide-zinc-100">
                        @foreach ($report->customChecklistFlags() as $label => $checked)
                            <div class="flex items-center justify-between gap-4 px-5 py-4">
                                <div class="font-semibold">{{ $label }}</div>
                                <div class="text-sm font-bold {{ $checked ? 'text-emerald-800' : 'text-zinc-600' }}">{{ $checked ? 'Yes' : 'No' }}</div>
                            </div>
                        @endforeach
                    </div>
                </section>
            @endif

            <section class="overflow-hidden rounded border border-zinc-200 bg-white shadow-sm">
                <div class="flex items-center justify-between border-b border-zinc-200 bg-zinc-50 px-5 py-3">
                    <h2 class="text-lg font-bold">Resource Tracking</h2>
                    <span class="text-sm text-zinc-600">Daily Labor Logs</span>
                </div>
                <table class="min-w-full divide-y divide-zinc-200 text-sm">
                    <thead class="bg-zinc-50 text-left text-xs font-bold uppercase text-zinc-600">
                        <tr><th class="px-5 py-3">Trade / Role</th><th class="px-5 py-3 text-right">Headcount</th><th class="px-5 py-3 text-right">Total hours</th></tr>
                    </thead>
                    <tbody class="divide-y divide-zinc-100">
                        <tr><td class="px-5 py-3">Site Team</td><td class="px-5 py-3 text-right">{{ $resourceTotal }}</td><td class="px-5 py-3 text-right">{{ $resourceTotal * 8 }}</td></tr>
                        <tr><td class="px-5 py-3 font-bold">Total Daily Resource</td><td class="px-5 py-3 text-right font-bold">{{ $resourceTotal }}</td><td class="px-5 py-3 text-right font-bold">{{ $resourceTotal * 8 }}</td></tr>
                    </tbody>
                </table>
            </section>

            @foreach ([
                'Incident details' => $report->incident_details,
                'Delay details' => $report->delay_details,
                'Materials used or delivered' => $report->materials_used,
                'Quality notes' => $report->quality_notes,
                'Client instructions' => $report->client_instructions,
                'Snag items' => $report->snag_items,
                'Next steps' => $report->next_steps,
            ] as $label => $value)
                @if ($value)
                    <section class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
                        <h2 class="text-lg font-bold">{{ $label }}</h2>
                        <p class="mt-3 whitespace-pre-line text-sm leading-6 text-zinc-700">{{ $value }}</p>
                    </section>
                @endif
            @endforeach

            <section class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
                <h2 class="text-lg font-bold">Uploads</h2>
                <div class="mt-4 grid gap-5 md:grid-cols-2">
                    <div>
                        <div class="text-sm font-bold">Photos</div>
                        <div class="mt-3 grid gap-3">
                            @forelse ($report->photos as $photo)
                                <div class="overflow-hidden rounded border border-zinc-200 bg-zinc-50">
                                    <a href="{{ route('reports.photos.show', [$report, $photo]) }}" target="_blank" class="group block">
                                        <img src="{{ route('reports.photos.thumbnail', [$report, $photo]) }}" alt="{{ $photo->original_name }}" class="aspect-[4/3] w-full object-cover">
                                        <div class="px-3 py-2 text-sm font-medium text-zinc-700 group-hover:text-emerald-800">{{ $photo->original_name }}</div>
                                    </a>
                                    @if ($photo->caption)<div class="px-3 pb-2 text-sm text-zinc-600">{{ $photo->caption }}</div>@endif
                                    @if ($photo->taken_at || $photo->latitude || $photo->longitude)
                                        <div class="px-3 pb-2 text-xs text-zinc-500">
                                            @if ($photo->taken_at)
                                                Taken {{ $photo->taken_at->format('M j, Y g:i A') }}
                                            @endif
                                            @if ($photo->latitude && $photo->longitude)
                                                · <a href="https://www.google.com/maps/search/?api=1&query={{ $photo->latitude }},{{ $photo->longitude }}" target="_blank" rel="noopener" class="font-semibold text-emerald-800">{{ $photo->latitude }}, {{ $photo->longitude }}</a>
                                            @endif
                                        </div>
                                    @endif
                                    @if ($report->canBeEditedBy(auth()->user()))
                                        <div class="border-t border-zinc-200 p-3">
                                            <form method="POST" action="{{ route('reports.photos.update', [$report, $photo]) }}" class="space-y-2">
                                                @csrf @method('PATCH')
                                                <input name="caption" value="{{ $photo->caption }}" placeholder="Photo caption" class="w-full rounded border border-zinc-300 px-3 py-2 text-sm">
                                                <button class="rounded bg-zinc-900 px-3 py-2 text-xs font-bold text-white">Save caption</button>
                                            </form>
                                            <form method="POST" action="{{ route('reports.photos.destroy', [$report, $photo]) }}" class="mt-2">@csrf @method('DELETE')<button class="text-xs font-bold text-red-700">Delete photo</button></form>
                                        </div>
                                    @endif
                                </div>
                            @empty
                                <div class="text-sm text-zinc-600">No photos uploaded.</div>
                            @endforelse
                        </div>
                    </div>
                    <div>
                        <div class="text-sm font-bold">Documents</div>
                        <div class="mt-3 space-y-2">
                            @forelse ($report->files as $file)
                                <div class="rounded border border-zinc-200">
                                    <a href="{{ route('reports.files.download', [$report, $file]) }}" class="block px-3 py-2 text-sm font-medium text-zinc-700 hover:text-emerald-800">{{ $file->original_name }}</a>
                                    @if ($report->canBeEditedBy(auth()->user()))
                                        <form method="POST" action="{{ route('reports.files.destroy', [$report, $file]) }}" class="border-t border-zinc-200 px-3 py-2">@csrf @method('DELETE')<button class="text-xs font-bold text-red-700">Delete file</button></form>
                                    @endif
                                </div>
                            @empty
                                <div class="text-sm text-zinc-600">No documents uploaded.</div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </section>
        </section>

        <aside class="space-y-6">
            @if ($canReview)
                <section class="overflow-hidden rounded border border-zinc-200 bg-white shadow-sm">
                    <div class="border-b border-zinc-200 bg-zinc-50 px-5 py-4">
                        <h2 class="text-lg font-bold">Review & Action</h2>
                    </div>
                    <div class="p-5">
                        <form method="POST" action="{{ route('reports.approve', $report) }}">
                            @csrf
                            <label class="text-sm font-semibold" for="approve_note">Review Comments</label>
                            <textarea id="approve_note" name="note" rows="4" class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm" placeholder="Add notes regarding this report...">Approved.</textarea>
                            <div class="mt-4 rounded border border-zinc-200 bg-zinc-50 p-3 text-sm text-zinc-700">Approving this report will finalize the daily log and notify the project management team.</div>
                            <button class="mt-5 w-full rounded bg-emerald-900 px-4 py-2.5 text-sm font-bold text-white hover:bg-emerald-800">Approve Report</button>
                        </form>
                        <form method="POST" action="{{ route('reports.reject', $report) }}" class="mt-3">
                            @csrf
                            <textarea name="note" rows="3" required class="w-full rounded border border-zinc-300 px-3 py-2 text-sm" placeholder="Reason for rejection"></textarea>
                            <button class="mt-3 w-full rounded border border-red-300 px-4 py-2.5 text-sm font-bold text-red-700">Reject Report</button>
                        </form>
                    </div>
                </section>
            @endif

            @can('share', $report)
                <section class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
                    <h2 class="text-lg font-bold">Client sharing</h2>
                    <form method="POST" action="{{ route('reports.shares.store', $report) }}" class="mt-4 space-y-3">
                        @csrf
                        <div><label class="text-sm font-semibold" for="client_email">Client email</label><input id="client_email" name="client_email" type="email" placeholder="client@example.com" class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm"></div>
                        <div><label class="text-sm font-semibold" for="expires_days">Expires after days</label><input id="expires_days" name="expires_days" type="number" min="1" max="365" value="30" class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm"></div>
                        <button class="rounded bg-zinc-900 px-4 py-2 text-sm font-bold text-white hover:bg-zinc-800">Create share link</button>
                    </form>
                    <div class="mt-5 space-y-3">
                        @forelse ($report->shares->sortByDesc('created_at') as $share)
                            <div class="rounded border border-zinc-200 p-3">
                                <div class="text-sm font-semibold">{{ $share->client_email ?: 'Manual link' }}</div>
                                <a href="{{ route('report-shares.show', $share) }}" target="_blank" class="mt-1 block break-all text-xs font-semibold text-emerald-800">{{ route('report-shares.show', $share) }}</a>
                                @if (! $share->revoked_at)
                                    <form method="POST" action="{{ route('reports.shares.revoke', $share) }}" class="mt-2">@csrf @method('DELETE')<button class="text-xs font-bold text-red-700">Revoke link</button></form>
                                @endif
                            </div>
                        @empty
                            <div class="text-sm text-zinc-600">No client share links yet.</div>
                        @endforelse
                    </div>
                </section>
            @endcan

            <section class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
                <h2 class="text-lg font-bold">Comments</h2>
                <div class="mt-4 space-y-3">
                    @forelse ($report->comments as $comment)
                        <div class="rounded border border-zinc-200 p-3">
                            <div class="text-sm font-semibold">{{ $comment->user->name }}</div>
                            <p class="mt-1 text-sm leading-6 text-zinc-700">{{ $comment->body }}</p>
                            <div class="mt-2 text-xs text-zinc-500">{{ $comment->created_at->diffForHumans() }}</div>
                        </div>
                    @empty
                        <div class="text-sm text-zinc-600">No comments yet.</div>
                    @endforelse
                </div>
                <form method="POST" action="{{ route('reports.comments.store', $report) }}" class="mt-4">@csrf<textarea name="body" rows="3" required class="w-full rounded border border-zinc-300 px-3 py-2 text-sm" placeholder="Add a comment"></textarea><button class="mt-2 rounded bg-zinc-900 px-4 py-2 text-sm font-bold text-white hover:bg-zinc-800">Add comment</button></form>
            </section>

            <section class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
                <h2 class="text-lg font-bold">Status history</h2>
                <div class="mt-4 space-y-3">
                    @foreach ($report->statusLogs->sortByDesc('created_at') as $log)
                        <div class="border-l-2 border-emerald-800 pl-3">
                            <div class="text-sm font-semibold">{{ str_replace('_', ' ', $log->to_status) }}</div>
                            <div class="mt-1 text-xs text-zinc-600">{{ $log->user->name }} · {{ $log->created_at->format('M j, Y g:i A') }}</div>
                            @if ($log->note)<p class="mt-1 text-sm text-zinc-700">{{ $log->note }}</p>@endif
                        </div>
                    @endforeach
                </div>
            </section>
        </aside>
    </div>
@endsection