@extends('layouts.app')
@section('title','Nexus Studio Dashboard')
@section('content')
<main class="mx-auto max-w-7xl px-5 py-8 lg:px-8">
    <section class="card relative overflow-hidden p-7 lg:p-9">
        <div class="absolute -right-24 -top-24 h-72 w-72 rounded-full bg-sky-500/10 blur-3xl"></div>
        <div class="relative flex flex-col gap-7 lg:flex-row lg:items-center lg:justify-between">
            <div>
                <div class="text-xs font-bold uppercase tracking-[.18em] text-sky-400">Aircraft Design Workspace</div>
                <h1 class="mt-2 text-3xl font-black lg:text-4xl">Welcome to Nexus Studio, {{ explode(' ', auth()->user()->name)[0] }}.</h1>
                <p class="mt-3 max-w-2xl text-slate-400">Create an aircraft project, open the 3D studio and paint directly on the aircraft surface.</p>
            </div>
            <a class="btn-primary shrink-0" href="{{ route('projects.create') }}">+ New Project</a>
        </div>
    </section>

    <div class="mt-6 grid gap-4 sm:grid-cols-3">
        <div class="card p-5"><div class="text-xs font-bold uppercase tracking-widest text-slate-500">Projects</div><div class="mt-2 text-3xl font-black">{{ $projectCount }}</div></div>
        <div class="card p-5"><div class="text-xs font-bold uppercase tracking-widest text-slate-500">Aircraft Profiles</div><div class="mt-2 text-3xl font-black">{{ $aircraftCount }}</div></div>
        <div class="card p-5"><div class="text-xs font-bold uppercase tracking-widest text-slate-500">Exports</div><div class="mt-2 text-3xl font-black">{{ $exportCount }}</div></div>
    </div>

    <section class="mt-8">
        <div class="mb-4 flex items-center justify-between"><h2 class="text-xl font-black">Recent Projects</h2><a href="{{ route('projects.index') }}" class="text-sm font-bold text-sky-400">View all</a></div>
        @if($projects->isEmpty())
            <div class="card p-10 text-center"><div class="text-5xl">🎨</div><div class="mt-4 text-lg font-black">Your first aircraft is waiting.</div><p class="mt-2 text-sm text-slate-400">Create a project to launch the built-in 3D paint test airframe.</p><a class="btn-primary mt-5" href="{{ route('projects.create') }}">Create First Project</a></div>
        @else
            <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                @foreach($projects as $project)
                <a href="{{ route('projects.editor',$project) }}" class="card group overflow-hidden p-5 transition hover:-translate-y-1 hover:border-sky-400/30">
                    <div class="grid h-32 place-items-center rounded-xl bg-gradient-to-br from-slate-800 to-slate-950 text-5xl transition group-hover:scale-[1.01]">✈</div>
                    <div class="mt-4 flex items-start justify-between gap-3"><div><div class="font-black">{{ $project->name }}</div><div class="mt-1 text-xs text-slate-500">{{ $project->aircraftProfile->name }}</div></div><span class="rounded-full bg-sky-400/10 px-2 py-1 text-[10px] font-bold uppercase text-sky-300">{{ $project->status }}</span></div>
                </a>
                @endforeach
            </div>
        @endif
    </section>
</main>
@endsection