@extends('layouts.app')

@section('mobile-title', 'Reports')
@section('mobile-subtitle', 'Field report register')
@can('create', \App\Models\Report::class)
    @section('mobile-action-url', route('reports.create'))
    @section('mobile-action-icon', 'add')
    @section('mobile-action-label', 'New report')
@endcan

@section('content')
    @php
        $visibleReports = collect($reports->items());
        $pendingCount = $visibleReports->where('status', \App\Models\Report::STATUS_SUBMITTED)->count();
        $approvedCount = $visibleReports->where('status', \App\Models\Report::STATUS_APPROVED)->count();
        $complianceScore = $visibleReports->count() > 0 ? round(($approvedCount / $visibleReports->count()) * 100, 1) : 0;
    @endphp

    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
            <h1 class="text-3xl font-bold">System Reports</h1>
            <p class="mt-1 text-sm text-zinc-600">Manage, analyze, and export operational data.</p>
        </div>
        <div class="flex flex-wrap gap-2">
            @if (auth()->user()->isAdmin())
                <a href="{{ route('exports.reports', request()->query()) }}" class="inline-flex rounded border border-zinc-300 px-4 py-2.5 text-sm font-bold text-zinc-700">Export CSV</a>
            @endif
            <a href="{{ route('reports.create') }}" class="inline-flex rounded bg-emerald-900 px-4 py-2.5 text-sm font-bold text-white hover:bg-emerald-800">New report</a>
        </div>
    </div>

    <section class="mb-6 grid gap-4 md:grid-cols-3">
        <div class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <div class="flex items-start justify-between">
                <div class="text-xs font-bold uppercase text-zinc-600">Total reports</div>
                <span class="material-symbols-outlined text-emerald-800">analytics</span>
            </div>
            <div class="mt-3 text-3xl font-bold">{{ $reports->total() }}</div>
            <div class="mt-1 text-sm text-emerald-800">Current result set</div>
        </div>
        <div class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <div class="flex items-start justify-between">
                <div class="text-xs font-bold uppercase text-zinc-600">Pending approvals</div>
                <span class="material-symbols-outlined text-blue-700">approval_delegation</span>
            </div>
            <div class="mt-3 text-3xl font-bold">{{ $pendingCount }}</div>
            <div class="mt-1 text-sm text-red-700">Action Required</div>
        </div>
        <div class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <div class="flex items-start justify-between">
                <div class="text-xs font-bold uppercase text-zinc-600">Avg compliance score</div>
                <span class="material-symbols-outlined text-emerald-800">verified_user</span>
            </div>
            <div class="mt-3 text-3xl font-bold">{{ $complianceScore }}%</div>
            <div class="mt-1 text-sm text-zinc-600">Target: 95%</div>
        </div>
    </section>

    <form method="GET" action="{{ route('reports.index') }}" class="mb-5 grid gap-3 rounded border border-zinc-200 bg-white p-4 shadow-sm xl:grid-cols-[1.2fr_1fr_1fr_1fr_1fr_auto_auto]">
        <label>
            <span class="text-xs font-bold uppercase text-zinc-600">Search ID or title</span>
            <input name="q" value="{{ request('q') }}" placeholder="e.g. RPT-001" class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm">
        </label>
        <label>
            <span class="text-xs font-bold uppercase text-zinc-600">Status</span>
            <select name="status" class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm">
                <option value="">All statuses</option>
                @foreach (['draft' => 'Draft', 'submitted' => 'Submitted', 'approved' => 'Approved', 'rejected' => 'Rejected', 'archived' => 'Archived'] as $value => $label)
                    <option value="{{ $value }}" @selected(request('status') === $value)>{{ $label }}</option>
                @endforeach
            </select>
        </label>
        <label>
            <span class="text-xs font-bold uppercase text-zinc-600">Project</span>
            <select name="project_id" class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm">
                <option value="">All projects</option>
                @foreach ($projects as $project)
                    <option value="{{ $project->id }}" @selected((string) request('project_id') === (string) $project->id)>{{ $project->name }}</option>
                @endforeach
            </select>
        </label>
        <label>
            <span class="text-xs font-bold uppercase text-zinc-600">From</span>
            <input name="date_from" type="date" value="{{ request('date_from') }}" class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm">
        </label>
        <label>
            <span class="text-xs font-bold uppercase text-zinc-600">To</span>
            <input name="date_to" type="date" value="{{ request('date_to') }}" class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm">
        </label>
        <div class="flex items-end"><a href="{{ route('reports.index') }}" class="w-full rounded border border-zinc-300 px-4 py-2 text-center text-sm font-bold text-zinc-700">Reset</a></div>
        <div class="flex items-end"><button class="w-full rounded bg-zinc-900 px-4 py-2 text-sm font-bold text-white">Apply</button></div>
    </form>

    @if (auth()->user()->isAdmin())
        <form method="POST" action="{{ route('reports.bulk') }}">
            @csrf
            <div class="mb-3 flex flex-col gap-3 rounded border border-zinc-200 bg-white p-3 shadow-sm sm:flex-row sm:items-center">
                <select name="action" required class="rounded border border-zinc-300 px-3 py-2 text-sm">
                    <option value="">Bulk action</option>
                    <option value="archive">Archive selected</option>
                    <option value="pdf_zip">Download selected PDFs</option>
                </select>
                <button class="rounded bg-zinc-900 px-4 py-2 text-sm font-bold text-white">Apply</button>
                <div class="text-xs text-zinc-500">PDF ZIP includes approved reports only.</div>
            </div>
    @endif

        <div class="overflow-hidden rounded border border-zinc-200 bg-white shadow-sm">
            <div class="divide-y divide-zinc-100 md:hidden">
                @forelse ($reports as $report)
                    <article class="p-4 {{ $report->status === \App\Models\Report::STATUS_REJECTED ? 'bg-red-50/60' : '' }}">
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <div class="text-sm font-semibold text-zinc-700">{{ $report->reference_number }}</div>
                                <a href="{{ route('reports.show', $report) }}" class="mt-1 block text-lg font-bold text-zinc-950">{{ $report->project->name }}</a>
                            </div>
                            @include('partials.status-badge', ['status' => $report->status])
                        </div>
                        <div class="mt-3 flex items-center gap-3 text-sm text-zinc-600">
                            <span class="flex h-8 w-8 items-center justify-center rounded bg-zinc-100 text-xs font-bold text-zinc-700">{{ collect(explode(' ', $report->technician->name))->map(fn ($part) => substr($part, 0, 1))->take(2)->join('') }}</span>
                            <span>{{ $report->technician->name }} · {{ $report->work_date->format('M j, Y') }}</span>
                        </div>
                        <div class="mt-3 text-sm text-zinc-700">{{ $report->title }}</div>
                        <div class="mt-4 flex items-center justify-between gap-3">
                            @if (auth()->user()->isAdmin())
                                <label class="inline-flex items-center gap-2 text-sm text-zinc-600">
                                    <input type="checkbox" name="report_ids[]" value="{{ $report->id }}" class="h-4 w-4 rounded border-zinc-300 text-emerald-900">
                                    Select
                                </label>
                            @endif
                            <a href="{{ route('reports.show', $report) }}" class="ml-auto rounded bg-emerald-900 px-4 py-2 text-sm font-bold text-white">Review</a>
                        </div>
                    </article>
                @empty
                    <div class="px-4 py-8 text-sm text-zinc-600">No reports yet.</div>
                @endforelse
            </div>

            <div class="hidden overflow-x-auto md:block">
                <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>
                            @if (auth()->user()->isAdmin())
                                <th class="px-5 py-3"><span class="sr-only">Select</span></th>
                            @endif
                            <th class="px-5 py-3">Report ID</th>
                            <th class="px-5 py-3">Type</th>
                            <th class="px-5 py-3">Project name</th>
                            <th class="px-5 py-3">Author</th>
                            <th class="px-5 py-3">Date</th>
                            <th class="px-5 py-3">Status</th>
                            <th class="px-5 py-3 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-zinc-100 bg-white">
                @forelse ($reports as $report)
                    <tr class="{{ $report->status === \App\Models\Report::STATUS_REJECTED ? 'bg-red-50/60' : '' }}">
                        @if (auth()->user()->isAdmin())
                            <td class="px-5 py-4"><input type="checkbox" name="report_ids[]" value="{{ $report->id }}" class="h-4 w-4 rounded border-zinc-300 text-emerald-900"></td>
                        @endif
                        <td class="px-5 py-4 font-semibold"><a href="{{ route('reports.show', $report) }}" class="text-zinc-900 hover:text-emerald-800">{{ $report->reference_number }}</a></td>
                        <td class="px-5 py-4">{{ $report->title }}</td>
                        <td class="px-5 py-4 font-semibold text-emerald-900">{{ $report->project->name }}</td>
                        <td class="px-5 py-4">{{ $report->technician->name }}</td>
                        <td class="px-5 py-4">{{ $report->work_date->format('M j, Y') }}</td>
                        <td class="px-5 py-4">@include('partials.status-badge', ['status' => $report->status])</td>
                        <td class="px-5 py-4 text-right"><a href="{{ route('reports.show', $report) }}" class="font-semibold text-emerald-800">Review</a></td>
                    </tr>
                @empty
                    <tr><td colspan="{{ auth()->user()->isAdmin() ? 8 : 7 }}" class="px-5 py-8 text-sm text-zinc-600">No reports yet.</td></tr>
                @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    @if (auth()->user()->isAdmin())
        </form>
    @endif

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