@extends('layouts.admin', ['title' => __('Projects').' | Nivex'])

@section('content')
    <div class="mb-8 flex items-end justify-between gap-4">
        <div>
            <p class="section-kicker">Leads</p>
            <h1 class="section-title text-4xl">{{ __('Projects') }}</h1>
        </div>
    </div>

    @if ($projects->isEmpty())
        <div class="admin-card">
            <p class="text-lg font-semibold">No project requests yet.</p>
            <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">Any form submission from the website contact page will appear here.</p>
        </div>
    @else
        <div class="grid gap-6 lg:grid-cols-2">
            @foreach ($projects as $project)
                <article class="admin-card border-brand-100/70 dark:border-brand-500/20">
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <p class="text-xs font-bold uppercase tracking-[0.2em] text-brand-500">Project</p>
                            <h2 class="mt-2 text-2xl font-bold">{{ $project->name }}</h2>
                        </div>
                        <div class="flex items-center gap-2">
                            @php($sentAt = $project->submitted_at ?? $project->created_at)
                            <span class="rounded-full bg-slate-200 px-3 py-1 text-xs font-semibold text-black dark:bg-slate-300 dark:text-black" title="{{ optional($sentAt)->format('Y-m-d H:i:s') }}">
                                {{ optional($sentAt)->diffForHumans() }}
                            </span>
                            <form method="POST" action="{{ route('admin.projects.destroy', $project) }}" onsubmit="return confirm('Delete this project request?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="rounded-full bg-slate-500 px-3 py-1 text-xs font-semibold text-white transition hover:bg-red-600">Delete</button>
                            </form>
                        </div>
                    </div>

                    <div class="mt-5 grid gap-3 rounded-2xl border border-slate-200/80 bg-transparent p-4 text-sm dark:border-slate-700/80 sm:grid-cols-2">
                        <div>
                            <p class="text-xs uppercase tracking-[0.2em] text-slate-400">Email</p>
                            <a href="mailto:{{ $project->email }}" class="mt-1 block font-semibold text-brand-600 hover:text-brand-500 dark:text-brand-300">{{ $project->email }}</a>
                        </div>
                        <div>
                            <p class="text-xs uppercase tracking-[0.2em] text-slate-400">Phone</p>
                            <a href="https://wa.me/{{ preg_replace('/\D+/', '', $project->phone) }}" target="_blank" class="mt-1 block font-semibold text-brand-600 hover:text-brand-500 dark:text-brand-300">{{ $project->phone }}</a>
                        </div>
                        <div class="sm:col-span-2">
                            <p class="text-xs uppercase tracking-[0.2em] text-slate-400">Service</p>
                            <p class="mt-1 font-semibold">{{ $project->service }}</p>
                        </div>
                    </div>

                    <div class="mt-4 rounded-2xl border border-slate-200 p-4 dark:border-slate-700">
                        <p class="text-xs uppercase tracking-[0.2em] text-slate-400">Details</p>
                        <p class="mt-2 whitespace-pre-line leading-7 text-slate-700 dark:text-slate-200">{{ $project->details }}</p>
                    </div>
                </article>
            @endforeach
        </div>

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