@csrf
@if ($report->exists)
    @method('PUT')
    <input type="hidden" name="original_updated_at" value="{{ optional($report->updated_at)->toIso8601String() }}">
@endif

@php
    $checklistFields = [
        'safety_briefing_completed' => 'Safety briefing',
        'ppe_compliant' => 'PPE compliant',
        'incidents_reported' => 'Incident reported',
        'delays_reported' => 'Delay reported',
        'materials_delivered' => 'Materials delivered',
        'quality_check_completed' => 'Quality check done',
        'client_instruction_received' => 'Client instruction',
        'snag_items_reported' => 'Snag items',
    ];
    $completedChecklist = collect($checklistFields)->keys()->filter(fn ($field) => (bool) old($field, $report->{$field}))->count();
    $completionScore = round(($completedChecklist / count($checklistFields)) * 100);
@endphp

<div data-offline-draft-status class="mb-5 hidden rounded border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950">
    <div class="font-semibold">Offline draft saved in this browser.</div>
    <div class="mt-2 flex flex-wrap gap-2">
        <button type="button" data-offline-draft-restore class="rounded bg-amber-900 px-3 py-2 text-xs font-bold text-white">Restore draft</button>
        <button type="button" data-offline-draft-clear class="rounded border border-amber-300 px-3 py-2 text-xs font-bold text-amber-900">Clear draft</button>
    </div>
</div>

<div data-offline-sync-status class="mb-5 hidden rounded border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-950">
    <div class="font-semibold">Report queued for sync.</div>
    <div class="mt-1">This report, including selected files, will submit automatically when the browser is back online.</div>
</div>

<div class="mb-5 grid gap-4 md:hidden">
    <section class="rounded border border-zinc-200 bg-white p-4 shadow-sm">
        <h2 class="text-2xl font-bold">Report Details</h2>
        <div class="mt-4 grid grid-cols-2 gap-4">
            <div>
                <label class="text-sm font-semibold" for="mobile_work_date">Date</label>
                <input id="mobile_work_date" type="text" value="{{ old('work_date', optional($report->work_date)->format('Y-m-d') ?? now()->format('Y-m-d')) }}" disabled class="mt-2 w-full rounded border border-zinc-300 bg-zinc-50 px-3 py-2 text-sm">
            </div>
            <div>
                <label class="text-sm font-semibold">Status</label>
                <div class="mt-2 rounded border border-zinc-300 bg-zinc-50 px-3 py-2 text-sm">{{ ucfirst($report->status ?: 'draft') }}</div>
            </div>
        </div>
        <div class="mt-4 text-sm text-zinc-600">Complete the sections below, then tap Save in the top bar.</div>
    </section>
    <section class="rounded border border-zinc-200 bg-white p-4 shadow-sm">
        <div class="flex items-start justify-between gap-4">
            <div>
                <h2 class="text-xl font-bold">Progress Status</h2>
                <div class="mt-3 rounded bg-emerald-50 px-3 py-2 text-sm font-bold uppercase tracking-wide text-emerald-900">Field Report</div>
            </div>
            <div class="text-right text-2xl font-bold text-emerald-900">{{ $completionScore }}%</div>
        </div>
        <div class="mt-4 h-2 overflow-hidden rounded bg-zinc-200"><div class="h-full rounded bg-emerald-800" style="width: {{ $completionScore }}%"></div></div>
    </section>
</div>

<div class="grid gap-6 lg:grid-cols-[1fr_320px]">
    <div class="space-y-6">
        <section class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <h2 class="text-lg font-bold">General Information</h2>
            <div class="mt-5 grid gap-5 sm:grid-cols-2">
                <div class="sm:col-span-2">
                    <label class="text-sm font-semibold" for="title">Report Title</label>
                    <input id="title" name="title" value="{{ old('title', $report->title) }}" required placeholder="e.g. Daily Progress - Sector B" 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="project_id">Project</label>
                    <select id="project_id" name="project_id" required class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm">
                        @foreach ($projects as $project)
                            <option value="{{ $project->id }}" @selected((int) old('project_id', request('project_id', $report->project_id)) === $project->id)>{{ $project->name }} ({{ $project->code }})</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="text-sm font-semibold" for="work_date">Reporting Date</label>
                    <input id="work_date" name="work_date" type="date" value="{{ old('work_date', optional($report->work_date)->format('Y-m-d') ?? now()->format('Y-m-d')) }}" required 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="weather">Weather</label>
                    <input id="weather" name="weather" value="{{ old('weather', $report->weather) }}" 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="manpower_count">Manpower count</label>
                    <input id="manpower_count" name="manpower_count" type="number" min="0" value="{{ old('manpower_count', $report->manpower_count) }}" required class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm">
                </div>
                <div class="sm:col-span-2">
                    <label class="text-sm font-semibold" for="equipment">Equipment</label>
                    <input id="equipment" name="equipment" value="{{ old('equipment', $report->equipment) }}" class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm">
                </div>
            </div>
        </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-5 grid gap-5">
                <div>
                    <label class="text-sm font-semibold" for="work_completed">Work completed</label>
                    <textarea id="work_completed" name="work_completed" rows="5" required class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm">{{ old('work_completed', $report->work_completed) }}</textarea>
                </div>
                <div class="grid gap-5 sm:grid-cols-2">
                    <div>
                        <label class="text-sm font-semibold" for="issues">Issues</label>
                        <textarea id="issues" name="issues" rows="3" class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm">{{ old('issues', $report->issues) }}</textarea>
                    </div>
                    <div>
                        <label class="text-sm font-semibold" for="safety_notes">Safety notes</label>
                        <textarea id="safety_notes" name="safety_notes" rows="3" class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm">{{ old('safety_notes', $report->safety_notes) }}</textarea>
                    </div>
                </div>
            </div>
        </section>

        <section class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <h2 class="text-lg font-bold">Safety Checklist</h2>
            <div class="mt-5 overflow-hidden rounded border border-zinc-200">
                <div class="grid grid-cols-[1fr_auto] bg-zinc-50 px-4 py-3 text-xs font-bold uppercase text-zinc-600">
                    <div>Checklist item</div>
                    <div>Status</div>
                </div>
                <div class="divide-y divide-zinc-100">
                    @foreach ($checklistFields as $field => $label)
                        <label for="{{ $field }}" class="grid grid-cols-[1fr_auto] items-center gap-4 px-4 py-3 text-sm">
                            <span>{{ $label }}</span>
                            <span class="inline-flex items-center gap-2">
                                <input type="hidden" name="{{ $field }}" value="0">
                                <input id="{{ $field }}" name="{{ $field }}" type="checkbox" value="1" @checked((bool) old($field, $report->{$field})) class="h-4 w-4 rounded border-zinc-300 text-emerald-900">
                                <span class="rounded border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-bold text-emerald-900">Pass</span>
                            </span>
                        </label>
                    @endforeach
                </div>
            </div>

            <div class="mt-5 grid gap-4 lg:grid-cols-2">
                <div>
                    <label class="text-sm font-semibold" for="incident_details">Incident details</label>
                    <textarea id="incident_details" name="incident_details" rows="3" class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm">{{ old('incident_details', $report->incident_details) }}</textarea>
                </div>
                <div>
                    <label class="text-sm font-semibold" for="delay_details">Delay details</label>
                    <textarea id="delay_details" name="delay_details" rows="3" class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm">{{ old('delay_details', $report->delay_details) }}</textarea>
                </div>
                <div>
                    <label class="text-sm font-semibold" for="materials_used">Materials used or delivered</label>
                    <textarea id="materials_used" name="materials_used" rows="3" class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm">{{ old('materials_used', $report->materials_used) }}</textarea>
                </div>
                <div>
                    <label class="text-sm font-semibold" for="quality_notes">Quality notes</label>
                    <textarea id="quality_notes" name="quality_notes" rows="3" class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm">{{ old('quality_notes', $report->quality_notes) }}</textarea>
                </div>
                <div>
                    <label class="text-sm font-semibold" for="client_instructions">Client instructions</label>
                    <textarea id="client_instructions" name="client_instructions" rows="3" class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm">{{ old('client_instructions', $report->client_instructions) }}</textarea>
                </div>
                <div>
                    <label class="text-sm font-semibold" for="snag_items">Snag items</label>
                    <textarea id="snag_items" name="snag_items" rows="3" class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm">{{ old('snag_items', $report->snag_items) }}</textarea>
                </div>
            </div>
        </section>

        @if (count(\App\Models\AppSetting::customChecklistFields()) > 0)
            <section class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
                <h2 class="text-lg font-bold">Custom checklist</h2>
                <div class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
                    @foreach (\App\Models\AppSetting::customChecklistFields() as $field)
                        <label for="custom_checklist_{{ $field['key'] }}" class="flex min-h-12 items-center gap-3 rounded border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm font-semibold">
                            <input type="hidden" name="custom_checklist[{{ $field['key'] }}]" value="0">
                            <input id="custom_checklist_{{ $field['key'] }}" name="custom_checklist[{{ $field['key'] }}]" type="checkbox" value="1" @checked((bool) old('custom_checklist.'.$field['key'], data_get($report->custom_checklist, $field['key']))) class="h-4 w-4 rounded border-zinc-300 text-emerald-900">
                            <span>{{ $field['label'] }}</span>
                        </label>
                    @endforeach
                </div>
            </section>
        @endif

        <section class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <h2 class="text-lg font-bold">Resource Tracking & Next Steps</h2>
            <div class="mt-5">
                <label class="text-sm font-semibold" for="next_steps">Next steps</label>
                <textarea id="next_steps" name="next_steps" rows="3" class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm">{{ old('next_steps', $report->next_steps) }}</textarea>
            </div>
        </section>

        <section class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <h2 class="text-lg font-bold">Media & Attachments</h2>
            <div class="mt-5 grid gap-5 sm:grid-cols-2">
                <div>
                    <label class="text-sm font-semibold" for="photos">Photos</label>
                    <div class="mt-2 rounded border border-dashed border-zinc-300 bg-zinc-50 p-4">
                        <input id="photos" name="photos[]" type="file" multiple accept="image/*" capture="environment" class="w-full rounded border border-zinc-300 bg-white px-3 py-2 text-sm">
                        <p class="mt-2 text-xs text-zinc-500">Images only, up to 5 MB each.</p>
                    </div>
                    <textarea name="photo_captions_text" rows="3" placeholder="Photo captions, one per photo" class="mt-3 w-full rounded border border-zinc-300 px-3 py-2 text-sm">{{ old('photo_captions_text') }}</textarea>
                    <div class="mt-3 grid gap-3 sm:grid-cols-3">
                        <input name="photo_taken_at[]" type="datetime-local" class="rounded border border-zinc-300 px-3 py-2 text-sm">
                        <input name="photo_latitude[]" type="number" step="0.0000001" min="-90" max="90" placeholder="Latitude" class="rounded border border-zinc-300 px-3 py-2 text-sm">
                        <input name="photo_longitude[]" type="number" step="0.0000001" min="-180" max="180" placeholder="Longitude" class="rounded border border-zinc-300 px-3 py-2 text-sm">
                    </div>
                </div>
                <div>
                    <label class="text-sm font-semibold" for="files">Documents</label>
                    <div class="mt-2 rounded border border-dashed border-zinc-300 bg-zinc-50 p-4">
                        <input id="files" name="files[]" type="file" multiple class="w-full rounded border border-zinc-300 bg-white px-3 py-2 text-sm">
                        <p class="mt-2 text-xs text-zinc-500">PDF, Office, CSV, text, or image files up to 10 MB each.</p>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <aside class="space-y-6">
        <section class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <h2 class="text-lg font-bold">Report Details</h2>
            <dl class="mt-4 space-y-3 text-sm">
                <div class="flex justify-between gap-3"><dt class="text-zinc-600">Author</dt><dd class="font-semibold">{{ auth()->user()->name }}</dd></div>
                <div class="flex justify-between gap-3"><dt class="text-zinc-600">Status</dt><dd>@include('partials.status-badge', ['status' => $report->status ?: 'draft'])</dd></div>
                <div class="flex justify-between gap-3"><dt class="text-zinc-600">Created</dt><dd class="font-semibold">{{ optional($report->created_at)->format('M j, Y g:i A') ?: now()->format('M j, Y g:i A') }}</dd></div>
                <div class="flex justify-between gap-3"><dt class="text-zinc-600">Last saved</dt><dd class="font-semibold">{{ $report->exists ? $report->updated_at->diffForHumans() : 'Not saved' }}</dd></div>
            </dl>
        </section>

        <section class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <h2 class="text-lg font-bold">Compliance Preview</h2>
            <div class="mt-4 rounded border border-zinc-200 bg-zinc-50 p-5 text-center">
                <div class="text-4xl font-bold text-emerald-800">{{ $completionScore }}%</div>
                <p class="mt-2 text-sm text-zinc-600">Estimated completion score based on required fields.</p>
            </div>
            <div class="mt-4 rounded border border-zinc-200 bg-zinc-50 p-3 text-sm text-zinc-700">Complete the safety checklist before submitting for review.</div>
        </section>

        <div class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <button class="w-full rounded bg-emerald-900 px-4 py-2.5 text-sm font-bold text-white hover:bg-emerald-800">{{ $report->exists ? 'Save changes' : 'Create draft' }}</button>
            <a href="{{ $report->exists ? route('reports.show', $report) : route('reports.index') }}" class="mt-3 inline-flex w-full rounded border border-zinc-300 px-4 py-2.5 text-sm font-bold text-zinc-700">Cancel</a>
        </div>

        <div data-upload-progress class="hidden rounded border border-emerald-200 bg-emerald-50 p-3">
            <div class="text-sm font-semibold text-emerald-900">Uploading files...</div>
            <div class="mt-2 h-2 overflow-hidden rounded bg-emerald-100">
                <div class="h-full w-1/2 animate-pulse rounded bg-emerald-800"></div>
            </div>
        </div>
    </aside>
</div>