@extends('layouts.app')
@section('title', 'Projects')
@section('content')
<div class="flex flex-wrap items-end justify-between gap-4">
    <div><h2 class="text-2xl font-bold">Projects</h2><p class="mt-1 text-slate-400">Product aggregates: revisions, files, listing mappings and costing.</p></div>
    <a href="{{ route('projects.create') }}" class="rounded-xl bg-brand px-4 py-3 text-sm font-semibold text-slate-950 hover:bg-brand/90">New project</a>
</div>
<form method="get" action="{{ route('projects.index') }}" class="flex flex-wrap items-center gap-3 rounded-2xl border border-slate-800 bg-slate-900 p-4">
    <input type="search" name="search" value="{{ request('search') }}" placeholder="Search title or reference" class="flex-1 rounded-xl border border-slate-700 bg-slate-950 px-4 py-2 text-sm">
    <select name="stage" class="rounded-xl border border-slate-700 bg-slate-950 px-4 py-2 text-sm">
        <option value="">All stages</option>
        @foreach($stages as $stage)<option value="{{ $stage }}" @selected(request('stage') === $stage)>{{ ucfirst($stage) }}</option>@endforeach
    </select>
    <button class="rounded-xl border border-slate-700 px-4 py-2 text-sm text-slate-300 hover:border-brand hover:text-white">Filter</button>
</form>
<section class="overflow-x-auto rounded-2xl border border-slate-800 bg-slate-900">
    <table class="w-full min-w-[720px] text-left text-sm">
        <thead class="border-y border-slate-800 text-slate-400"><tr><th class="p-4">Reference</th><th class="p-4">Title</th><th class="p-4">Stage</th><th class="p-4">Revisions</th><th class="p-4">Listings</th></tr></thead>
        <tbody class="divide-y divide-slate-800">
            @forelse($projects as $project)
            <tr class="hover:bg-slate-800/40">
                <td class="p-4 font-medium"><a class="text-brand hover:underline" href="{{ route('projects.show', $project) }}">{{ $project->reference }}</a></td>
                <td class="p-4">{{ $project->title }}</td>
                <td class="p-4"><span class="rounded-full bg-slate-800 px-2 py-1 text-xs capitalize">{{ $project->stage }}</span>@if($project->isArchived())<span class="ml-2 rounded-full bg-rose-500/10 px-2 py-1 text-xs text-rose-300">Archived</span>@endif</td>
                <td class="p-4">{{ $project->revisions_count }}</td>
                <td class="p-4">{{ $project->listing_links_count }}</td>
            </tr>
            @empty
            <tr><td colspan="5" class="p-6 text-slate-400">No projects yet.</td></tr>
            @endforelse
        </tbody>
    </table>
</section>
{{ $projects->links() }}
@endsection