@extends('layouts.app')

@section('title', 'Notes : ' . $project->name . ' - ' . app_setting('app_name', 'Dev App'))

@section('content')
<div class="max-w-5xl mx-auto space-y-6">
    @include('projects._header', ['subtitle' => 'Ce qu\'il ne faut pas oublier : décisions et leur raison, règles, liens utiles. Réservé à l\'équipe.'])

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 space-y-4">
            @forelse($notes as $note)
                <article id="note-{{ $note->id }}" x-data="{ editing: false }" class="bg-white rounded-2xl border {{ $note->is_pinned ? 'border-amber-300' : 'border-slate-200' }} p-5 shadow-xs space-y-3 scroll-mt-24">
                    <div x-show="!editing" class="space-y-2">
                        <div class="flex items-start justify-between gap-3">
                            <div class="flex flex-wrap items-center gap-2">
                                <span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-slate-100 text-slate-700">{{ $note->categoryLabel() }}</span>
                                @if($note->is_pinned)
                                    <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-amber-100 text-amber-800">Épinglée</span>
                                @endif
                                <h2 class="text-sm font-extrabold text-slate-900">{{ $note->title }}</h2>
                            </div>
                            <button type="button" @click="editing = true" class="text-xs font-semibold text-indigo-600 hover:text-indigo-800 shrink-0">Modifier</button>
                        </div>
                        @if($note->content)
                            <div class="text-sm text-slate-700 whitespace-pre-line leading-relaxed">{{ $note->content }}</div>
                        @endif
                        <p class="text-[11px] text-slate-400">
                            @php($suffix = $note->originSuffixFor(auth()->user()))
                            {{ $note->user?->name ?? 'Équipe' }}{{ $suffix ? ' · '.$suffix : '' }}
                            &bull; {{ $note->created_at->format('d/m/Y') }}
                            @if($note->updated_at->gt($note->created_at)) &bull; modifiée le {{ $note->updated_at->format('d/m/Y à H:i') }} @endif
                        </p>
                    </div>

                    <form x-show="editing" x-cloak action="{{ route('projects.notes.update', [$project, $note]) }}" method="POST" class="space-y-2">
                        @csrf
                        @method('PUT')
                        @include('projects._note-fields', ['note' => $note])
                        <div class="flex items-center justify-between pt-1">
                            <button type="submit" form="delete-note-{{ $note->id }}" class="text-xs font-semibold text-rose-600 hover:text-rose-800">Supprimer</button>
                            <div class="flex items-center gap-2">
                                <button type="button" @click="editing = false" class="px-3 py-1.5 text-xs font-semibold text-slate-600">Annuler</button>
                                <button type="submit" class="px-3.5 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold rounded-lg">Enregistrer</button>
                            </div>
                        </div>
                    </form>
                    <form id="delete-note-{{ $note->id }}" action="{{ route('projects.notes.destroy', [$project, $note]) }}" method="POST" onsubmit="return confirm('Supprimer cette note ? Elle restera citée dans l\'historique.')">
                        @csrf
                        @method('DELETE')
                    </form>
                </article>
            @empty
                <div class="bg-white rounded-2xl border border-dashed border-slate-300 p-10 text-center text-sm text-slate-500">
                    Aucune note pour l'instant. Notez ici les décisions importantes et leur raison, pour ne jamais les perdre.
                </div>
            @endforelse
        </div>

        <form action="{{ route('projects.notes.store', $project) }}" method="POST" class="bg-white rounded-2xl border border-slate-200 p-5 shadow-xs space-y-3 h-fit lg:sticky lg:top-24">
            @csrf
            <h2 class="text-xs font-bold uppercase tracking-wider text-slate-700">Nouvelle note</h2>
            @include('projects._note-fields', ['note' => null])
            <button type="submit" class="w-full px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold rounded-xl">Ajouter la note</button>
        </form>
    </div>
</div>
@endsection