@extends('layouts.public')

@section('title', 'Suivi en Direct - ' . $project->name)

@section('content')
<div class="space-y-6">
    <!-- Portal Banner -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 bg-white p-6 rounded-3xl border border-slate-200 shadow-sm">
        <div class="flex items-center space-x-4">
            <div class="w-12 h-12 rounded-2xl flex items-center justify-center text-white font-black text-base shadow-md" style="background-color: {{ $project->color }};">
                {{ strtoupper(substr($project->name, 0, 2)) }}
            </div>
            <div>
                <span class="text-[11px] font-bold uppercase tracking-wider text-slate-400">Portail Client en Direct</span>
                <h1 class="text-xl font-black text-slate-900">{{ $project->name }}</h1>
                <p class="text-xs text-slate-500 mt-0.5">{{ $project->description ?? 'Suivi du développement de votre application.' }}</p>
            </div>
        </div>

        @if($project->allow_guest_reports)
            <a href="{{ route('public.report.form', $project->public_token) }}" class="inline-flex items-center justify-center px-4 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold shadow-md shadow-indigo-100 transition-colors shrink-0">
                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
                Transmettre une remarque / un bug
            </a>
        @endif
    </div>

    <!-- Live Kanban Columns (Read Only for Guest Client) -->
    <div class="flex items-start space-x-4 overflow-x-auto pb-6 select-none">
        @foreach($columns as $col)
            <div class="min-w-[280px] sm:min-w-[320px] flex-1 max-w-[420px] shrink-0 flex flex-col bg-slate-100/90 rounded-2xl border border-slate-200 shadow-xs max-h-[calc(100vh-250px)]">
                <!-- Header -->
                <div class="p-3.5 flex items-center justify-between border-b border-slate-200/70 bg-white/70 rounded-t-2xl">
                    <div class="flex items-center space-x-2">
                        <span class="w-3 h-3 rounded-full" style="background-color: {{ $col->color }};"></span>
                        <h3 class="text-xs font-bold text-slate-800 uppercase tracking-wider truncate">{{ $col->name }}</h3>
                        <span class="px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-slate-200 text-slate-700 font-mono">
                            {{ $col->tickets->count() }}
                        </span>
                    </div>
                </div>

                <!-- Tickets List -->
                <div class="p-2.5 space-y-2.5 overflow-y-auto flex-1">
                    @forelse($col->tickets as $ticket)
                        <a href="{{ route('public.portal.ticket', [$project->public_token, $ticket->ticket_number]) }}" class="block bg-white p-3.5 rounded-xl border border-slate-200/80 shadow-xs space-y-2 hover:border-indigo-300 hover:shadow-sm transition-all">
                            <div class="flex items-center justify-between">
                                <span class="text-[11px] font-mono font-bold text-slate-400">{{ $ticket->formatted_number }}</span>
                                <span class="px-2 py-0.5 rounded text-[10px] font-bold {{ $ticket->type_badge['bg'] }}">
                                    {{ $ticket->type_badge['label'] }}
                                </span>
                            </div>

                            <h4 class="text-xs font-bold text-slate-800 leading-snug">
                                {{ $ticket->title }}
                            </h4>

                            @if($ticket->description)
                                <p class="text-[11px] text-slate-500 line-clamp-2 leading-relaxed">
                                    {{ $ticket->description }}
                                </p>
                            @endif

                            <div class="pt-2 border-t border-slate-100 flex items-center justify-between text-[11px] text-slate-400">
                                <span>{{ $ticket->created_at->diffForHumans() }}</span>
                                <span class="px-2 py-0.5 rounded text-[10px] font-bold {{ $ticket->priority_badge['bg'] }}">
                                    {{ $ticket->priority_badge['label'] }}
                                </span>
                            </a>
                        </a>
                    @empty
                        <div class="py-8 text-center text-xs text-slate-400 italic">
                            Aucune tâche à cette étape
                        </div>
                    @endforelse
                </div>
            </div>
        @endforeach
    </div>
</div>
@endsection