@extends('layouts.app')

@section('mobile-title', 'Projects')
@section('mobile-subtitle', 'Sites and progress')
@can('create', \App\Models\Project::class)
    @section('mobile-action-url', route('projects.create'))
    @section('mobile-action-icon', 'add')
    @section('mobile-action-label', 'New project')
@endcan

@section('content')
    @php
        $visibleProjects = collect($projects->items());
        $activeCount = $visibleProjects->where('status', 'active')->count();
        $onHoldCount = $visibleProjects->where('status', 'on_hold')->count();
        $teamCount = $visibleProjects->sum(fn ($project) => ($project->technicians_count ?? 0) + ($project->supervisors_count ?? 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">Projects Overview</h1>
            <p class="mt-1 text-sm text-zinc-600">Manage and monitor active construction sites.</p>
        </div>
        @if (auth()->user()->isAdmin())
            <div class="flex flex-wrap gap-2">
                <a href="{{ route('exports.projects', 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>
                <a href="{{ route('projects.create') }}" class="inline-flex rounded bg-emerald-900 px-4 py-2.5 text-sm font-bold text-white hover:bg-emerald-800">New project</a>
            </div>
        @endif
    </div>

    <section class="mb-6 grid gap-4 md:grid-cols-4">
        <div class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <div class="flex items-start justify-between gap-3">
                <div class="text-xs font-bold uppercase text-zinc-600">Active projects</div>
                <span class="material-symbols-outlined text-emerald-800">domain</span>
            </div>
            <div class="mt-3 text-3xl font-bold">{{ $activeCount }}</div>
            <div class="mt-1 text-sm text-emerald-800">In current view</div>
        </div>
        <div class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <div class="flex items-start justify-between gap-3">
                <div class="text-xs font-bold uppercase text-zinc-600">Total reports</div>
                <span class="material-symbols-outlined text-blue-700">summarize</span>
            </div>
            <div class="mt-3 text-3xl font-bold">{{ $visibleProjects->sum('reports_count') }}</div>
            <div class="mt-1 text-sm text-zinc-600">Across visible sites</div>
        </div>
        <div class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <div class="flex items-start justify-between gap-3">
                <div class="text-xs font-bold uppercase text-zinc-600">Teams on-site</div>
                <span class="material-symbols-outlined text-zinc-700">groups</span>
            </div>
            <div class="mt-3 text-3xl font-bold">{{ $teamCount }}</div>
            <div class="mt-1 text-sm text-zinc-600">Assigned users</div>
        </div>
        <div class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <div class="flex items-start justify-between gap-3">
                <div class="text-xs font-bold uppercase text-zinc-600">Urgent compliance</div>
                <span class="material-symbols-outlined text-red-700">warning</span>
            </div>
            <div class="mt-3 text-3xl font-bold text-red-700">{{ $onHoldCount }}</div>
            <div class="mt-1 text-sm text-red-700">Requires attention</div>
        </div>
    </section>

    <form method="GET" action="{{ route('projects.index') }}" class="mb-6 grid gap-3 rounded border border-zinc-200 bg-white p-4 shadow-sm lg:grid-cols-[1fr_220px_auto]">
        <label class="block">
            <span class="text-xs font-bold uppercase text-zinc-600">Search by name or Site ID</span>
            <input name="q" value="{{ request('q') }}" placeholder="Search projects" class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm">
        </label>
        <label class="block">
            <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 (['active' => 'Active', 'on_hold' => 'On hold', 'complete' => 'Complete', 'archived' => 'Archived'] as $value => $label)
                    <option value="{{ $value }}" @selected(request('status') === $value)>{{ $label }}</option>
                @endforeach
            </select>
        </label>
        <div class="flex items-end">
            <button class="w-full rounded bg-zinc-900 px-4 py-2 text-sm font-bold text-white">Filter</button>
        </div>
    </form>

    <div class="grid gap-5 lg:grid-cols-3">
        @forelse ($projects as $project)
            @php
                $completion = ($project->reports_count ?? 0) > 0 ? min(100, max(8, ($project->reports_count * 12) % 100)) : 0;
                $barColor = $project->status === 'on_hold' ? 'bg-amber-700' : ($project->status === 'complete' ? 'bg-blue-700' : 'bg-emerald-800');
            @endphp
            <article class="overflow-hidden rounded border border-zinc-200 bg-white shadow-sm">
                <div class="h-36 border-b border-zinc-200 bg-zinc-100">
                    <div class="flex h-full items-start justify-between bg-[linear-gradient(135deg,#dbe7dd_0%,#f7f8f8_48%,#c8d6cf_100%)] p-4">
                        @include('partials.status-badge', ['status' => $project->status])
                        <span class="material-symbols-outlined text-emerald-900">construction</span>
                    </div>
                </div>
                <div class="p-5">
                    <h2 class="text-xl font-bold">{{ $project->name }}</h2>
                    <p class="mt-1 text-sm text-zinc-600">{{ $project->code }} · {{ $project->client_name }}</p>
                    <div class="mt-5 flex items-center justify-between text-sm">
                        <span>Overall Progress</span>
                        <span class="font-bold">{{ $completion }}%</span>
                    </div>
                    <div class="mt-2 h-2 overflow-hidden rounded bg-zinc-100">
                        <div class="h-full rounded {{ $barColor }}" style="width: {{ $completion }}%"></div>
                    </div>
                    <div class="mt-4 grid gap-3 border-t border-zinc-200 pt-4 sm:grid-cols-2">
                        <div class="text-sm">
                            <div class="flex items-center gap-2 text-zinc-600"><span class="material-symbols-outlined text-base">location_on</span> Location</div>
                            <div class="mt-1 font-semibold">{{ $project->location }}</div>
                        </div>
                        <div class="text-sm">
                            <div class="flex items-center gap-2 text-zinc-600"><span class="material-symbols-outlined text-base">fact_check</span> Reports</div>
                            <div class="mt-1 font-semibold">{{ $project->reports_count }} total</div>
                        </div>
                    </div>
                    <div class="mt-5 flex gap-2">
                        <a href="{{ route('projects.show', $project) }}" class="inline-flex flex-1 rounded border border-zinc-300 px-4 py-2 text-center text-sm font-bold text-zinc-800">View Details</a>
                        @if (auth()->user()->isAdmin())
                            <a href="{{ route('projects.edit', $project) }}" class="inline-flex rounded border border-zinc-300 px-3 py-2 text-sm font-bold text-zinc-800" aria-label="Edit {{ $project->name }}">
                                <span class="material-symbols-outlined text-base">more_vert</span>
                            </a>
                        @endif
                    </div>
                </div>
            </article>
        @empty
            <div class="rounded border border-zinc-200 bg-white px-4 py-8 text-sm text-zinc-600 shadow-sm lg:col-span-3">No projects yet.</div>
        @endforelse
    </div>

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