@extends('layouts.app')

@section('title', $project->name . ' — ' . config('app.name'))

@section('content')
    <div class="mb-1 flex items-center gap-2 text-sm text-gray-500">
        <a href="{{ route('projects.index') }}" class="hover:underline">Projects</a>
        <span>/</span>
        <span class="font-medium text-gray-900">{{ $project->name }}</span>
    </div>
    <div class="mb-1 flex items-center justify-between">
        <h1 class="text-2xl font-bold">{{ $project->name }}</h1>
        @can('update', $project)
            <a href="{{ route('projects.edit', $project) }}"
               class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-900 hover:bg-gray-50">Edit project</a>
        @endcan
    </div>
    <p class="mb-4 text-sm text-gray-500">
        @if ($project->team || $project->category)
            {{ $project->team?->name ?? 'No Team' }} / {{ $project->category?->name ?? 'Uncategorized' }}
            @if ($project->description) · @endif
        @endif
        {{ $project->description }}
    </p>

    {{-- Add entry --}}
    @can('update', $project)
    <details class="mb-6 rounded-lg border border-gray-200 bg-white" {{ $entries->isEmpty() ? 'open' : '' }}>
        <summary class="cursor-pointer px-4 py-3 text-sm font-semibold uppercase tracking-wide text-gray-500">Add status entry</summary>
        <form method="POST" action="{{ route('projects.entries.store', $project) }}" class="border-t border-gray-200 p-4">
            @csrf
            @include('projects._entry-fields')
            <button type="submit" class="cursor-pointer rounded-md bg-primary px-4 py-2 font-medium text-white hover:bg-primary-hover">Add entry</button>
        </form>
    </details>
    @endcan

    {{-- Entries, reverse chronological --}}
    @if ($entries->isEmpty())
        <div class="rounded-lg border border-gray-200 bg-white px-6 py-10 text-center text-gray-500">
            No entries yet. Add the first status entry above.
        </div>
    @else
        <div class="space-y-4">
            @foreach ($entries as $entry)
                <div class="rounded-lg border border-gray-200 bg-white p-4">
                    <div class="mb-2 flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <span class="font-semibold">{{ $entry->entry_date->format('Y-m-d') }}</span>
                            @include('partials.status-badge', ['status' => $entry->status])
                        </div>
                        <div class="whitespace-nowrap">
                            @can('update', $project)
                                <a href="{{ route('project-entries.edit', $entry) }}"
                                   class="mr-1 inline-block rounded-md border border-gray-300 bg-white px-2.5 py-1 text-sm text-gray-900 hover:bg-gray-50">Edit</a>
                                <form method="POST" action="{{ route('project-entries.destroy', $entry) }}" class="js-confirm inline"
                                      data-confirm="Delete the {{ $entry->entry_date->format('Y-m-d') }} entry?">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                            class="cursor-pointer rounded-md border border-red-600 px-2.5 py-1 text-sm text-red-700 hover:bg-red-50">Delete</button>
                                </form>
                            @endcan
                        </div>
                    </div>

                    @if ($entry->notes)
                        <p class="mb-2 text-gray-700">{{ $entry->notes }}</p>
                    @endif

                    @php($sections = array_filter([
                        'Headwinds' => $entry->headwinds,
                        'Tailwinds' => $entry->tailwinds,
                        'Highlights' => $entry->highlights,
                        'Blockers' => $entry->blockers,
                    ]))
                    @if ($sections)
                        <dl class="grid gap-x-6 gap-y-2 text-sm sm:grid-cols-2">
                            @foreach ($sections as $label => $text)
                                <div>
                                    <dt class="font-semibold text-gray-500">{{ $label }}</dt>
                                    <dd class="text-gray-700">{{ $text }}</dd>
                                </div>
                            @endforeach
                        </dl>
                    @endif
                </div>
            @endforeach
        </div>
    @endif

    @include('partials.confirm-script')
@endsection