@extends('layouts.app')

@section('title', 'Mes tickets')

@section('content')
<div class="max-w-3xl mx-auto space-y-8">

    <div class="flex items-center justify-between">
        <h1 class="text-3xl font-bold text-[#161616]">Mes tickets</h1>
        <a href="{{ route('tickets.create') }}"
           class="px-5 py-2.5 bg-[#000091] text-white font-bold rounded-sm hover:bg-blue-800 shadow-md transition-all text-sm uppercase tracking-widest">
            + Nouvelle demande
        </a>
    </div>

    @if (session('success'))
        <div class="p-4 bg-green-50 border border-green-200 rounded-lg">
            <p class="text-green-700 font-semibold">✅ {{ session('success') }}</p>
        </div>
    @endif

    @forelse ($tickets as $ticket)
        <a href="{{ route('tickets.show', $ticket->gitea_number) }}"
           class="block bg-white p-5 border border-slate-200 shadow-sm hover:border-[--fr-blue] transition-colors">
            <div class="flex items-center justify-between gap-4">
                <div class="min-w-0">
                    <p class="font-bold text-slate-900 truncate">{{ $ticket->title }}</p>
                    <p class="text-xs text-slate-500 mt-1">
                        #{{ $ticket->gitea_number }} · {{ $ticket->type }} · {{ $ticket->created_at->format('d/m/Y') }}
                        @if ($ticket->milestone)
                            · 🎯 {{ $ticket->milestone }}
                        @endif
                    </p>
                </div>
                @php($state = $ticket->state)
                <span class="shrink-0 text-xs font-bold px-3 py-1 rounded-full
                    {{ $state === 'closed' ? 'bg-green-100 text-green-700' : ($state === 'open' ? 'bg-blue-100 text-blue-700' : 'bg-slate-100 text-slate-500') }}">
                    {{ $state === 'closed' ? 'Résolu' : ($state === 'open' ? 'En cours' : 'Inconnu') }}
                </span>
            </div>
        </a>
    @empty
        <div class="bg-white p-8 border border-slate-200 shadow-sm text-center text-slate-500">
            Vous n'avez pas encore de ticket.
            <a href="{{ route('tickets.create') }}" class="text-[--fr-blue] font-bold hover:underline">Créer une demande</a>.
        </div>
    @endforelse
</div>
@endsection