@extends('layouts.app')

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

@section('content')
<div class="space-y-4" x-data="kanbanBoard()" x-init="initKanban()">
    <!-- Top Project Bar -->
    <div class="bg-white rounded-2xl border border-slate-200 p-4 shadow-xs">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
            <!-- Project Title & Badges -->
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 rounded-xl flex items-center justify-center text-white font-bold text-sm shadow-sm shrink-0" style="background-color: {{ $project->color }};">
                    {{ strtoupper(substr($project->name, 0, 2)) }}
                </div>
                <div>
                    <div class="flex items-center space-x-2">
                        <h1 class="text-xl font-black text-slate-900 tracking-tight">{{ $project->name }}</h1>
                        @if(auth()->user()->isAdmin())
                            <a href="{{ route('projects.settings', $project) }}" title="Configurer les colonnes et paramètres" class="text-slate-400 hover:text-slate-700 p-1 rounded-lg hover:bg-slate-100 transition-colors">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg>
                            </a>
                        @endif
                    </div>
                    <div class="mt-1">@include('projects._nav')</div>
                    <div class="flex items-center space-x-3 text-xs text-slate-500 mt-0.5">
                        <span>{{ $totalTickets }} ticket(s)</span>
                        <span>&bull;</span>
                        <span class="text-rose-600 font-semibold">{{ $totalBugs }} bug(s)</span>
                        @if($urgentBugs > 0)
                            <span>&bull;</span>
                            <span class="text-red-600 font-black animate-pulse">⚡ {{ $urgentBugs }} urgent(s)</span>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Actions Bar -->
            <div class="flex flex-wrap items-center gap-2">
                <!-- AI Assistant Button -->
                @if(!auth()->user()->isClient())
                    <button @click="openAiModal()"
                        class="px-3.5 py-2 bg-gradient-to-r from-violet-600 to-indigo-600 hover:from-violet-700 hover:to-indigo-700 text-white text-xs font-bold rounded-xl shadow-xs transition-all flex items-center group">
                        <svg class="w-4 h-4 mr-1.5 text-amber-300 group-hover:rotate-12 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                        <span>Assistant IA</span>
                    </button>
                @endif

                <!-- Copy Public Bug Link -->
                @if($project->allow_guest_reports)
                    <div x-data="{ copied: false }">
                        <button @click="navigator.clipboard.writeText('{{ route('public.report.form', $project->public_token) }}'); copied = true; setTimeout(() => copied = false, 2500)"
                            class="px-3 py-2 bg-indigo-50 hover:bg-indigo-100 text-indigo-700 text-xs font-semibold rounded-xl border border-indigo-200 transition-colors flex items-center">
                            <svg class="w-3.5 h-3.5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
                            </svg>
                            <span x-show="!copied">Lien de signalement client</span>
                            <span x-show="copied" x-cloak class="text-emerald-700 font-bold">Lien copié !</span>
                        </button>
                    </div>
                @endif

                <!-- New Ticket Button -->
                <button @click="openNewTicketModal()" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold rounded-xl shadow-xs transition-colors flex items-center">
                    <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>
                    Nouveau Ticket / Bug
                </button>
            </div>
        </div>

        <!-- Filters Strip -->
        <div class="mt-4 pt-3 border-t border-slate-100 flex flex-wrap items-center justify-between gap-3 text-xs">
            <form action="{{ route('projects.kanban', $project) }}" method="GET" class="flex flex-wrap items-center gap-2 flex-1">
                <!-- Search -->
                <div class="relative min-w-[200px]">
                    <input type="text" name="search" value="{{ $search }}" placeholder="Rechercher un mot, #..."
                        class="w-full pl-8 pr-3 py-1.5 rounded-lg border border-slate-200 text-xs focus:ring-1 focus:ring-indigo-500">
                    <svg class="w-3.5 h-3.5 absolute left-2.5 top-2.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                </div>

                <!-- Type Filter -->
                <select name="type" onchange="this.form.submit()" class="px-2.5 py-1.5 rounded-lg border border-slate-200 text-xs bg-white text-slate-700 font-medium">
                    <option value="">Tous les types</option>
                    <option value="bug" {{ $typeFilter === 'bug' ? 'selected' : '' }}>🐞 Bugs uniquement</option>
                    <option value="feature" {{ $typeFilter === 'feature' ? 'selected' : '' }}>✨ Fonctionnalités</option>
                    <option value="improvement" {{ $typeFilter === 'improvement' ? 'selected' : '' }}>⚡ Améliorations</option>
                    <option value="task" {{ $typeFilter === 'task' ? 'selected' : '' }}>📋 Tâches techniques</option>
                </select>

                <!-- Priority Filter -->
                <select name="priority" onchange="this.form.submit()" class="px-2.5 py-1.5 rounded-lg border border-slate-200 text-xs bg-white text-slate-700 font-medium">
                    <option value="">Toutes priorités</option>
                    <option value="urgent" {{ $priorityFilter === 'urgent' ? 'selected' : '' }}>⚡ Urgent</option>
                    <option value="high" {{ $priorityFilter === 'high' ? 'selected' : '' }}>🔥 Haute</option>
                    <option value="normal" {{ $priorityFilter === 'normal' ? 'selected' : '' }}>Normale</option>
                    <option value="low" {{ $priorityFilter === 'low' ? 'selected' : '' }}>Basse</option>
                </select>

                <!-- Label Filter -->
                @if($project->labels->isNotEmpty())
                    <select name="label" onchange="this.form.submit()" class="px-2.5 py-1.5 rounded-lg border border-slate-200 text-xs bg-white text-slate-700 font-medium">
                        <option value="">Toutes les étiquettes</option>
                        @foreach($project->labels as $label)
                            <option value="{{ $label->id }}" {{ $labelFilter == $label->id ? 'selected' : '' }}>{{ $label->name }}</option>
                        @endforeach
                    </select>
                @endif

                <!-- Assignee Filter -->
                @if(!auth()->user()->isClient())
                    <select name="assignee" onchange="this.form.submit()" class="px-2.5 py-1.5 rounded-lg border border-slate-200 text-xs bg-white text-slate-700 font-medium">
                        <option value="">Tous les assignés</option>
                        <option value="unassigned" {{ $assigneeFilter === 'unassigned' ? 'selected' : '' }}>Non assigné</option>
                        @foreach($collaborators as $collab)
                            <option value="{{ $collab->id }}" {{ $assigneeFilter == $collab->id ? 'selected' : '' }}>{{ $collab->name }}</option>
                        @endforeach
                    </select>
                @endif

                @if($search || $typeFilter || $priorityFilter || $assigneeFilter || $labelFilter)
                    <a href="{{ route('projects.kanban', $project) }}" class="text-rose-600 hover:text-rose-800 font-semibold px-2 py-1">
                        ✕ Réinitialiser
                    </a>
                @endif
            </form>

            <span class="text-slate-400 hidden sm:inline text-[11px]">
                💡 Glissez-déposez les tuiles d'une colonne à l'autre pour mettre à jour l'avancement.
            </span>
        </div>
    </div>

    <!-- KANBAN BOARD COLUMNS CONTAINER -->
    <div class="flex items-start space-x-4 overflow-x-auto pb-6 pt-2 select-none min-h-[calc(100vh-260px)]">
        @foreach($columns as $col)
            <div class="min-w-[280px] sm:min-w-[320px] flex-1 max-w-[420px] shrink-0 flex flex-col max-h-[calc(100vh-250px)] bg-slate-100/90 rounded-2xl border border-slate-200 shadow-xs">
                <!-- Column 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" title="{{ $col->name }}">{{ $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>

                    <button @click="openNewTicketModal({{ $col->id }})" title="Ajouter dans cette colonne" class="text-slate-400 hover:text-indigo-600 p-1 rounded-lg hover:bg-slate-100 transition-colors">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                        </svg>
                    </button>
                </div>

                <!-- Column Cards List (Sortable container) -->
                <div class="kanban-column p-2.5 space-y-2.5 overflow-y-auto flex-1" data-column-id="{{ $col->id }}">
                    @foreach($col->tickets as $ticket)
                        <div class="kanban-card bg-white p-3.5 rounded-xl border border-slate-200/80 shadow-xs hover:shadow-md transition-all cursor-grab active:cursor-grabbing group relative"
                            data-ticket-id="{{ $ticket->id }}"
                            @click="openTicketDetailModal({{ $ticket->id }})">
                            
                            <!-- Card Header Badges -->
                            <div class="flex items-center justify-between gap-1 mb-2">
                                <div class="flex items-center space-x-1.5">
                                    <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>
                                <span class="px-2 py-0.5 rounded text-[10px] font-bold {{ $ticket->priority_badge['bg'] }}">
                                    {{ $ticket->priority_badge['label'] }}
                                </span>
                            </div>

                            <!-- Card Title -->
                            <h4 class="text-xs font-bold text-slate-800 group-hover:text-indigo-600 transition-colors line-clamp-2 leading-snug">
                                {{ $ticket->title }}
                            </h4>

                            @if($ticket->labels->isNotEmpty() || $ticket->version)
                                <div class="flex flex-wrap gap-1 mt-1.5">
                                    @foreach($ticket->labels as $label)
                                        <span class="px-1.5 py-0.5 rounded-full text-[9px] font-bold text-white" style="background-color: {{ $label->color }};">{{ $label->name }}</span>
                                    @endforeach
                                    @if($ticket->version)
                                        <span class="px-1.5 py-0.5 rounded-full text-[9px] font-bold bg-violet-100 text-violet-800">v{{ $ticket->version->name }}</span>
                                    @endif
                                </div>
                            @endif

                            <!-- Description Snippet -->
                            @if($ticket->description)
                                <p class="text-[11px] text-slate-500 mt-1 line-clamp-2 leading-relaxed">
                                    {{ Str::limit($ticket->description, 80) }}
                                </p>
                            @endif

                            <!-- Card Footer -->
                            <div class="mt-3 pt-2.5 border-t border-slate-100 flex items-center justify-between text-[11px] text-slate-400">
                                <div class="flex items-center space-x-2">
                                    @if($ticket->comments_count > 0)
                                        <span class="flex items-center text-slate-500 font-medium">
                                            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                                            </svg>
                                            {{ $ticket->comments_count }}
                                        </span>
                                    @endif

                                    @if($ticket->checklistProgress())
                                        <span class="flex items-center font-medium {{ $ticket->checklistItems->every('is_done') ? 'text-emerald-600' : 'text-slate-500' }}" title="Étapes cochées">
                                            <svg class="w-3 h-3 mr-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                            </svg>
                                            {{ $ticket->checklistProgress() }}
                                        </span>
                                    @endif

                                    @if($ticket->attachments->count() > 0)
                                        <span class="flex items-center text-slate-500">
                                            <svg class="w-3 h-3 mr-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
                                            </svg>
                                            {{ $ticket->attachments->count() }}
                                        </span>
                                    @endif

                                    @if(!$ticket->is_visible_to_client)
                                        <span class="text-[10px] text-amber-600 bg-amber-50 px-1 rounded font-semibold" title="Invisible pour le client">
                                            🔒 Interne
                                        </span>
                                    @endif
                                </div>

                                <!-- Assignee / Reporter Avatar -->
                                <div class="flex items-center space-x-1.5">
                                    @if($ticket->assignee)
                                        <span class="w-5 h-5 rounded-full bg-indigo-100 text-indigo-700 text-[10px] font-bold flex items-center justify-center border border-indigo-200" title="Assigné à : {{ $ticket->assignee->name }}">
                                            {{ strtoupper(substr($ticket->assignee->name, 0, 1)) }}
                                        </span>
                                    @else
                                        <span class="text-[10px] text-slate-400 italic">Libre</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>

    <!-- MODAL: NOUVEAU TICKET -->
    <div x-show="showCreateModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div @click="showCreateModal = false" class="fixed inset-0 bg-slate-900/60 backdrop-blur-xs transition-opacity"></div>

            <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full border border-slate-100">
                <form action="{{ route('tickets.store', $project) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="p-6 space-y-4">
                        <div class="flex items-center justify-between pb-3 border-b border-slate-100">
                            <h3 class="text-base font-bold text-slate-900">Nouveau Ticket ou Signalement</h3>
                            <button type="button" @click="showCreateModal = false" class="text-slate-400 hover:text-slate-600">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                            </button>
                        </div>

                        <div>
                            <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1">Titre du ticket <span class="text-rose-500">*</span></label>
                            <input type="text" name="title" required placeholder="Ex: Page blanche au paiement Stripe..." class="w-full px-3.5 py-2 rounded-xl border border-slate-300 text-xs font-semibold focus:ring-2 focus:ring-indigo-500">
                        </div>

                        <div class="grid grid-cols-2 gap-3">
                            <div>
                                <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1">Type <span class="text-rose-500">*</span></label>
                                <select name="type" required class="w-full px-3 py-2 rounded-xl border border-slate-300 text-xs font-medium bg-white">
                                    <option value="bug">🐞 Bug</option>
                                    <option value="feature">✨ Fonctionnalité</option>
                                    <option value="improvement">⚡ Amélioration</option>
                                    <option value="task">📋 Tâche technique</option>
                                </select>
                            </div>

                            <div>
                                <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1">Priorité <span class="text-rose-500">*</span></label>
                                <select name="priority" required class="w-full px-3 py-2 rounded-xl border border-slate-300 text-xs font-medium bg-white">
                                    <option value="urgent">⚡ Urgent / Bloquant</option>
                                    <option value="high">🔥 Haute</option>
                                    <option value="normal" selected>Normale</option>
                                    <option value="low">Basse</option>
                                </select>
                            </div>
                        </div>

                        <div class="grid grid-cols-2 gap-3">
                            <div>
                                <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1">Colonne Kanban</label>
                                <select name="column_id" x-model="selectedColumnId" class="w-full px-3 py-2 rounded-xl border border-slate-300 text-xs font-medium bg-white">
                                    @foreach($columns as $col)
                                        <option value="{{ $col->id }}">{{ $col->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            @if(!auth()->user()->isClient())
                                <div>
                                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1">Assigner à</label>
                                    <select name="assigned_to_id" class="w-full px-3 py-2 rounded-xl border border-slate-300 text-xs font-medium bg-white">
                                        <option value="">-- Personne (Libre) --</option>
                                        @foreach($collaborators as $collab)
                                            <option value="{{ $collab->id }}">{{ $collab->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            @endif
                        </div>

                        <div>
                            <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1">Description détaillée</label>
                            <textarea name="description" rows="3" placeholder="Étapes pour reproduire, message d'erreur ou besoin..." class="w-full px-3.5 py-2 rounded-xl border border-slate-300 text-xs focus:ring-2 focus:ring-indigo-500"></textarea>
                        </div>

                        <div>
                            <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1">Capture d'écran ou Fichier (Max 10 Mo)</label>
                            <input type="file" name="attachment" class="w-full text-xs text-slate-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-xl file:border-0 file:text-xs file:font-semibold file:bg-slate-100 file:text-slate-700 hover:file:bg-slate-200">
                        </div>

                        @if(!auth()->user()->isClient())
                            <div class="pt-2">
                                <label class="flex items-center space-x-2 cursor-pointer">
                                    <input type="hidden" name="is_visible_to_client" value="0">
                                    <input type="checkbox" name="is_visible_to_client" value="1" checked class="w-4 h-4 rounded text-indigo-600">
                                    <span class="text-xs text-slate-700 font-medium">Visible sur le suivi du client</span>
                                </label>
                            </div>
                        @endif
                    </div>

                    <div class="px-6 py-4 bg-slate-50 border-t border-slate-100 flex justify-end space-x-2">
                        <button type="button" @click="showCreateModal = false" class="px-4 py-2 border border-slate-300 rounded-xl text-xs font-semibold text-slate-700 hover:bg-white">
                            Annuler
                        </button>
                        <button type="submit" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold rounded-xl shadow-xs">
                            Créer la tuile
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- MODAL: DÉTAIL & ÉDITION TICKET -->
    <div x-show="showDetailModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div @click="showDetailModal = false" class="fixed inset-0 bg-slate-900/60 backdrop-blur-xs transition-opacity"></div>

            <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full border border-slate-100">
                <div x-show="loadingDetail" class="p-12 text-center text-slate-400">
                    <svg class="w-8 h-8 animate-spin mx-auto text-indigo-500 mb-2" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                    Chargement des informations du ticket...
                </div>

                <div x-show="!loadingDetail && currentTicket">
                    <!-- Form to update ticket -->
                    <form :action="'/projects/{{ $project->id }}/tickets/' + (currentTicket ? currentTicket.id : '')" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="p-6 space-y-4">
                            <!-- Header -->
                            <div class="flex items-start justify-between pb-3 border-b border-slate-100">
                                <div>
                                    <div class="flex items-center space-x-2">
                                        <span class="text-xs font-mono font-bold text-slate-400" x-text="'#' + String(currentTicket ? currentTicket.ticket_number : '').padStart(3, '0')"></span>
                                        <span class="text-xs text-slate-400">&bull; Rapporté par <strong class="text-slate-700" x-text="reporterLabel"></strong></span>
                                    </div>
                                    <input type="text" name="title" x-model="currentTicket.title" required
                                        class="mt-1 font-bold text-slate-900 text-base w-full border-b border-transparent hover:border-slate-300 focus:border-indigo-500 px-1 py-0.5 rounded focus:ring-0">
                                </div>
                                <div class="flex items-center space-x-1 shrink-0">
                                    <a :href="'/projects/{{ $project->id }}/tickets/' + (currentTicket ? currentTicket.id : '')" title="Ouvrir en pleine page" class="text-slate-400 hover:text-indigo-600 p-1">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                                    </a>
                                    <button type="button" @click="showDetailModal = false" class="text-slate-400 hover:text-slate-600 p-1">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                    </button>
                                </div>
                            </div>

                            <!-- Meta attributes grid -->
                            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 bg-slate-50 p-3 rounded-xl border border-slate-200">
                                <div>
                                    <label class="block text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-1">Colonne Statut</label>
                                    <select name="column_id" x-model="currentTicket.column_id" class="w-full px-2 py-1.5 rounded-lg border border-slate-300 text-xs font-semibold bg-white">
                                        @foreach($columns as $col)
                                            <option value="{{ $col->id }}">{{ $col->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div>
                                    <label class="block text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-1">Priorité</label>
                                    <select name="priority" x-model="currentTicket.priority" class="w-full px-2 py-1.5 rounded-lg border border-slate-300 text-xs font-semibold bg-white">
                                        <option value="urgent">⚡ Urgent</option>
                                        <option value="high">🔥 Haute</option>
                                        <option value="normal">Normale</option>
                                        <option value="low">Basse</option>
                                    </select>
                                </div>

                                <div>
                                    <label class="block text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-1">Type</label>
                                    <select name="type" x-model="currentTicket.type" class="w-full px-2 py-1.5 rounded-lg border border-slate-300 text-xs font-semibold bg-white">
                                        <option value="bug">🐞 Bug</option>
                                        <option value="feature">✨ Fonctionnalité</option>
                                        <option value="improvement">⚡ Amélioration</option>
                                        <option value="task">📋 Tâche</option>
                                    </select>
                                </div>

                                @if(!auth()->user()->isClient())
                                    <div class="sm:col-span-2">
                                        <label class="block text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-1">Assigné à</label>
                                        <select name="assigned_to_id" x-model="currentTicket.assigned_to_id" class="w-full px-2 py-1.5 rounded-lg border border-slate-300 text-xs font-medium bg-white">
                                            <option value="">-- Non assigné --</option>
                                            @foreach($collaborators as $collab)
                                                <option value="{{ $collab->id }}">{{ $collab->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div>
                                        <label class="block text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-1">Visibilité Client</label>
                                        <label class="flex items-center space-x-2 mt-2 cursor-pointer">
                                            <input type="hidden" name="is_visible_to_client" value="0">
                                            <input type="checkbox" name="is_visible_to_client" value="1" :checked="currentTicket.is_visible_to_client" class="w-4 h-4 rounded text-indigo-600">
                                            <span class="text-xs text-slate-700">Visible client</span>
                                        </label>
                                    </div>
                                @endif
                            </div>

                            <!-- Description -->
                            <div>
                                <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1">Description</label>
                                <textarea name="description" x-model="currentTicket.description" rows="3" class="w-full px-3 py-2 rounded-xl border border-slate-300 text-xs focus:ring-2 focus:ring-indigo-500 leading-relaxed"></textarea>
                            </div>

                            <!-- System Info if submitted by guest -->
                            <template x-if="currentTicket && currentTicket.system_info">
                                <div class="p-3 bg-slate-100 rounded-xl text-[11px] text-slate-600 space-y-1">
                                    <div class="font-bold text-slate-700">💻 Informations système transmises automatiquement :</div>
                                    <div class="grid grid-cols-2 gap-2 text-[10px] font-mono">
                                        <div>Navigateur/Agent : <span class="text-slate-800" x-text="currentTicket.system_info.user_agent ? currentTicket.system_info.user_agent.substring(0, 45) + '...' : 'N/A'"></span></div>
                                        <div>Résolution : <span class="text-slate-800" x-text="currentTicket.system_info.resolution || 'N/A'"></span></div>
                                    </div>
                                </div>
                            </template>

                            <!-- Attachments List -->
                            <div class="pt-2">
                                <h4 class="text-xs font-bold text-slate-700 mb-2">Pièces jointes & Captures d'écran</h4>
                                <div class="flex flex-wrap gap-2" x-show="ticketAttachments.length > 0">
                                    <template x-for="att in ticketAttachments" :key="att.id">
                                        <a :href="'/storage/' + att.path" target="_blank" class="flex items-center space-x-1.5 px-3 py-1.5 rounded-lg border border-slate-200 bg-slate-50 hover:bg-indigo-50 text-xs text-slate-700 hover:text-indigo-600 transition-colors">
                                            <svg class="w-3.5 h-3.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/></svg>
                                            <span class="truncate max-w-[150px]" x-text="att.original_name"></span>
                                        </a>
                                    </template>
                                </div>
                                <div x-show="ticketAttachments.length === 0" class="text-xs text-slate-400 italic">
                                    Aucune pièce jointe.
                                </div>
                            </div>

                            <!-- Save changes button -->
                            <div class="flex justify-between items-center pt-2">
                                @if(!auth()->user()->isClient())
                                    <button type="submit" formaction="{{ route('tickets.destroy', [$project, 'TICKET_ID']) }}"
                                        :formaction="'/projects/{{ $project->id }}/tickets/' + currentTicket.id"
                                        name="_method" value="DELETE"
                                        onclick="return confirm('Supprimer définitivement ce ticket ?')"
                                        class="text-xs text-rose-600 hover:text-rose-800 font-semibold">
                                        Supprimer ce ticket
                                    </button>
                                @else
                                    <div></div>
                                @endif

                                <button type="submit" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold rounded-xl shadow-xs">
                                    Enregistrer les modifications
                                </button>
                            </div>
                        </div>
                    </form>

                    <!-- Comments & History Section -->
                    <div class="p-6 bg-slate-50 border-t border-slate-200 space-y-4">
                        <h4 class="text-xs font-bold uppercase tracking-wider text-slate-700 flex items-center justify-between">
                            <span>Commentaires & Échanges (<span x-text="ticketComments.length"></span>)</span>
                            <span class="text-[11px] font-normal text-slate-400">Historique de la résolution</span>
                        </h4>

                        <!-- Comments Stream -->
                        <div class="space-y-3 max-h-60 overflow-y-auto pr-1">
                            <template x-for="comment in ticketComments" :key="comment.id">
                                <div class="p-3 rounded-xl border text-xs"
                                    :class="comment.is_internal_only ? 'bg-amber-50/70 border-amber-200' : 'bg-white border-slate-200'">
                                    <div class="flex items-center justify-between text-[11px] mb-1">
                                        <div class="flex items-center space-x-1.5 font-bold"
                                            :class="comment.is_internal_only ? 'text-amber-900' : 'text-slate-800'">
                                            <span x-text="comment.author_label"></span>
                                            <template x-if="comment.is_internal_only">
                                                <span class="px-1.5 py-0.2 rounded bg-amber-200 text-amber-900 text-[9px] uppercase tracking-wider">Note Interne</span>
                                            </template>
                                        </div>
                                        <span class="text-slate-400" x-text="new Date(comment.created_at).toLocaleDateString('fr-FR', {hour: '2-digit', minute:'2-digit'})"></span>
                                    </div>
                                    <p class="text-slate-700 whitespace-pre-line leading-relaxed" x-text="comment.content"></p>
                                </div>
                            </template>
                        </div>

                        <!-- Add comment form -->
                        <form :action="'/projects/{{ $project->id }}/tickets/' + currentTicket.id + '/comments'" method="POST" class="pt-2">
                            @csrf
                            <div class="space-y-2">
                                <textarea name="content" required rows="2" placeholder="Ajouter un commentaire ou une réponse..."
                                    class="w-full px-3 py-2 rounded-xl border border-slate-300 text-xs focus:ring-2 focus:ring-indigo-500"></textarea>

                                <div class="flex items-center justify-between">
                                    @if(!auth()->user()->isClient())
                                        <label class="flex items-center space-x-1.5 text-xs text-amber-700 cursor-pointer">
                                            <input type="checkbox" name="is_internal_only" value="1" class="w-3.5 h-3.5 rounded text-amber-600">
                                            <span class="font-medium">Note interne privée (invisible pour le client)</span>
                                        </label>
                                    @else
                                        <div></div>
                                    @endif

                                    <button type="submit" class="px-3.5 py-1.5 bg-slate-900 hover:bg-slate-800 text-white text-xs font-semibold rounded-lg">
                                        Envoyer le message
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- MODAL: ASSISTANT IA -->
    @if(!auth()->user()->isClient())
        <div x-show="showAiModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
            <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
                <div @click="showAiModal = false" class="fixed inset-0 bg-slate-900/60 backdrop-blur-xs transition-opacity"></div>

                <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full border border-slate-100">
                    <!-- Modal Header -->
                    <div class="p-6 bg-gradient-to-r from-slate-900 via-indigo-950 to-slate-900 text-white flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 rounded-xl bg-indigo-500/30 border border-indigo-400/40 flex items-center justify-center text-amber-300">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                                </svg>
                            </div>
                            <div>
                                <h3 class="text-base font-extrabold tracking-tight text-white flex items-center space-x-2">
                                    <span>Assistant IA & Suivi de Dév</span>
                                    <template x-if="aiStatus && aiStatus.configured">
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">
                                            ● <span class="ml-1" x-text="aiStatus.provider.toUpperCase() + ' (' + aiStatus.model + ')'"></span>
                                        </span>
                                    </template>
                                    <template x-if="aiStatus && !aiStatus.configured">
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-amber-500/20 text-amber-300 border border-amber-500/30">
                                            ⚠ Clé IA non configurée
                                        </span>
                                    </template>
                                </h3>
                                <p class="text-xs text-slate-300 mt-0.5">Pilotez et synchronisez l'avancement de votre projet avec l'intelligence artificielle.</p>
                            </div>
                        </div>
                        <button type="button" @click="showAiModal = false" class="text-slate-400 hover:text-white p-1 rounded-lg hover:bg-white/10 transition-colors">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                        </button>
                    </div>

                    <!-- Navigation Tabs -->
                    <div class="flex border-b border-slate-200 bg-slate-50 px-6 pt-3 space-x-4 text-xs font-bold">
                        <button type="button" @click="aiTab = 'sync'"
                            :class="aiTab === 'sync' ? 'border-b-2 border-indigo-600 text-indigo-600 pb-3' : 'text-slate-500 hover:text-slate-800 pb-3'">
                            ⚡ Synchronisation Note / Prompt
                        </button>
                        <button type="button" @click="aiTab = 'analyze'"
                            :class="aiTab === 'analyze' ? 'border-b-2 border-indigo-600 text-indigo-600 pb-3' : 'text-slate-500 hover:text-slate-800 pb-3'">
                            📊 Audit & Roadmap IA
                        </button>
                        <button type="button" @click="aiTab = 'api'"
                            :class="aiTab === 'api' ? 'border-b-2 border-indigo-600 text-indigo-600 pb-3' : 'text-slate-500 hover:text-slate-800 pb-3'">
                            🔌 Agent IA Externe (API)
                        </button>
                    </div>

                    <!-- Tab Content -->
                    <div class="p-6 space-y-4">
                        <!-- Error Banner -->
                        <div x-show="aiError" x-cloak class="p-3 bg-rose-50 border border-rose-200 text-rose-800 text-xs rounded-xl flex items-center justify-between">
                            <span x-text="aiError"></span>
                            <button @click="aiError = null" class="text-rose-500 hover:text-rose-700">✕</button>
                        </div>

                        <!-- TAB 1: PROMPT SYNC -->
                        <div x-show="aiTab === 'sync'" class="space-y-4">
                            <template x-if="aiStatus && !aiStatus.configured">
                                <div class="p-4 rounded-xl bg-amber-50 border border-amber-200 text-amber-900 text-xs flex items-center justify-between">
                                    <div>
                                        <strong>Aucune clé API IA configurée.</strong> Configurez votre clé Google Gemini ou Claude dans l'administration pour utiliser l'assistant intégré.
                                    </div>
                                    @if(auth()->user()->isAdmin())
                                        <a href="{{ route('admin.settings.ai') }}" class="ml-3 shrink-0 px-3 py-1.5 bg-amber-600 hover:bg-amber-700 text-white font-bold rounded-lg transition-colors">
                                            Configurer
                                        </a>
                                    @endif
                                </div>
                            </template>

                            <div>
                                <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">
                                    Consigne de développement ou extrait de changelog / commits
                                </label>
                                <textarea x-model="aiNote" rows="4"
                                    placeholder="Ex: J'ai fini le Lot 3 (briques du terrain, géocodage et OSRM). Tous les 302 tests passent. J'ai attaqué le Lot 4 sur les encombrants. Peux-tu passer les tickets correspondants en Terminé et En cours ?"
                                    class="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 text-xs focus:ring-2 focus:ring-indigo-500 leading-relaxed font-mono"></textarea>
                                <p class="text-[11px] text-slate-400 mt-1">L'IA compare votre texte avec les {{ $totalTickets }} tickets du projet et calcule les changements de statut.</p>
                            </div>

                            <div class="flex items-center justify-between pt-1">
                                <label class="flex items-center space-x-2 text-xs text-slate-700 cursor-pointer">
                                    <input type="checkbox" x-model="aiAutoApply" class="w-4 h-4 rounded text-indigo-600">
                                    <span class="font-medium">Appliquer automatiquement les déplacements sur le Kanban</span>
                                </label>

                                <button type="button" @click="runAiSync()" :disabled="aiLoading || !aiNote.trim()"
                                    class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white text-xs font-bold rounded-xl shadow-xs transition-colors flex items-center">
                                    <span x-show="!aiLoading">Analyser & Synchroniser</span>
                                    <span x-show="aiLoading" class="flex items-center">
                                        <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>
                                        IA en cours...
                                    </span>
                                </button>
                            </div>

                            <!-- Sync Results -->
                            <div x-show="aiSyncResults" x-cloak class="mt-4 p-4 rounded-xl bg-slate-50 border border-slate-200 space-y-3">
                                <div class="flex items-center justify-between pb-2 border-b border-slate-200">
                                    <span class="text-xs font-bold text-slate-800">Résultat de la synchronisation</span>
                                    <button type="button" onclick="window.location.reload()" class="text-xs text-indigo-600 font-bold hover:underline flex items-center">
                                        <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                                        Recharger la page pour voir les cartes
                                    </button>
                                </div>

                                <template x-if="aiSyncResults && aiSyncResults.applied_changes && aiSyncResults.applied_changes.length > 0">
                                    <div class="space-y-1.5">
                                        <p class="text-[11px] font-bold text-emerald-700">Tickets mis à jour :</p>
                                        <template x-for="item in aiSyncResults.applied_changes" :key="item.ticket_id">
                                            <div class="flex items-center justify-between bg-white p-2 rounded-lg border border-slate-200 text-xs">
                                                <div class="flex items-center space-x-2">
                                                    <span class="font-mono font-bold text-indigo-600" x-text="'#' + item.ticket_number"></span>
                                                    <span class="text-slate-800 truncate font-medium" x-text="item.title"></span>
                                                </div>
                                                <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-indigo-50 text-indigo-700 border border-indigo-100" x-text="item.column_name"></span>
                                            </div>
                                        </template>
                                    </div>
                                </template>

                                <template x-if="aiSyncResults && aiSyncResults.suggestions && aiSyncResults.suggestions.length > 0 && (!aiSyncResults.applied_changes || aiSyncResults.applied_changes.length === 0)">
                                    <div class="space-y-1.5">
                                        <p class="text-[11px] font-bold text-amber-700">Propositions de l'IA (Non appliquées) :</p>
                                        <template x-for="item in aiSyncResults.suggestions" :key="item.ticket_id">
                                            <div class="bg-white p-2 rounded-lg border border-slate-200 text-xs space-y-1">
                                                <div class="flex items-center justify-between">
                                                    <span class="font-mono font-bold text-slate-800" x-text="'Ticket #' + item.ticket_id"></span>
                                                    <span class="font-bold text-indigo-600" x-text="'Vers colonne ID ' + item.target_column_id"></span>
                                                </div>
                                                <p class="text-[11px] text-slate-500" x-text="item.comment"></p>
                                            </div>
                                        </template>
                                    </div>
                                </template>
                            </div>
                        </div>

                        <!-- TAB 2: AUDIT & ROADMAP -->
                        <div x-show="aiTab === 'analyze'" class="space-y-4">
                            <div class="flex items-center justify-between">
                                <p class="text-xs text-slate-600">L'IA analyse le backlog complet, les bugs prioritaires et vous synthétise l'état d'avancement.</p>
                                <button type="button" @click="runAiAnalyze()" :disabled="aiLoading"
                                    class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white text-xs font-bold rounded-xl shadow-xs transition-colors shrink-0 flex items-center">
                                    <span x-show="!aiLoading">Générer l'audit</span>
                                    <span x-show="aiLoading" class="flex items-center">
                                        <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>
                                        Génération...
                                    </span>
                                </button>
                            </div>

                            <div x-show="aiAnalysis" x-cloak class="p-4 rounded-xl bg-slate-900 text-slate-100 text-xs space-y-2 max-h-96 overflow-y-auto font-mono whitespace-pre-wrap leading-relaxed border border-slate-800" x-text="aiAnalysis">
                            </div>
                        </div>

                        <!-- TAB 3: API FOR EXTERNAL AGENTS -->
                        <div x-show="aiTab === 'api'" class="space-y-4">
                            <div class="bg-indigo-50/50 border border-indigo-100 rounded-xl p-4 text-xs text-slate-700 space-y-3">
                                <div class="font-bold text-indigo-950 flex items-center">
                                    <svg class="w-4 h-4 mr-1.5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                                    </svg>
                                    Connexion pour Claude Code, Antigravity, Cursor ou vos scripts CI/CD
                                </div>
                                <p class="text-slate-600">
                                    Vos agents de code peuvent consulter le backlog, inspecter les tickets et mettre à jour les statuts automatiquement lors de leurs sessions.
                                </p>

                                <div class="grid grid-cols-2 gap-2 text-[11px] pt-1 font-mono">
                                    <div class="bg-white p-2 rounded-lg border border-slate-200">
                                        <span class="text-slate-400 block font-sans font-bold">ID du Projet</span>
                                        <span class="font-bold text-slate-800">{{ $project->id }} ({{ $project->slug }})</span>
                                    </div>
                                    <div class="bg-white p-2 rounded-lg border border-slate-200">
                                        <span class="text-slate-400 block font-sans font-bold">Gestion des Clés API</span>
                                        <a href="{{ route('admin.settings.ai') }}" class="text-indigo-600 font-bold hover:underline font-sans">Gérer dans l'administration &rarr;</a>
                                    </div>
                                </div>
                            </div>

                            <div class="space-y-2">
                                <label class="block text-xs font-bold uppercase tracking-wider text-slate-700">Exemple d'appel Roadmap (cURL)</label>
                                <div class="p-3 bg-slate-900 rounded-xl text-slate-100 font-mono text-[11px] overflow-x-auto">
                                    curl -H "Authorization: Bearer VOTRE_TOKEN" {{ url('/api/v1/projects/' . $project->id . '/roadmap') }}
                                </div>
                            </div>

                            <div class="space-y-2">
                                <label class="block text-xs font-bold uppercase tracking-wider text-slate-700">Synchronisation automatique de statut</label>
                                <div class="p-3 bg-slate-900 rounded-xl text-slate-100 font-mono text-[11px] overflow-x-auto">
                                    curl -X POST -H "Authorization: Bearer VOTRE_TOKEN" -H "Content-Type: application/json" -d '{"note": "Terminé lot 3", "apply": true}' {{ url('/api/v1/projects/' . $project->id . '/ai-sync') }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="px-6 py-3 bg-slate-50 border-t border-slate-100 text-right">
                        <button type="button" @click="showAiModal = false" class="px-4 py-2 bg-slate-200 hover:bg-slate-300 text-slate-800 text-xs font-semibold rounded-xl">
                            Fermer
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
    function kanbanBoard() {
        return {
            showCreateModal: false,
            showDetailModal: false,
            showAiModal: false,
            loadingDetail: false,
            selectedColumnId: '{{ $columns->first()->id ?? 0 }}',
            currentTicket: null,
            ticketComments: [],
            reporterLabel: '',
            ticketAttachments: [],

            aiTab: 'sync',
            aiLoading: false,
            aiError: null,
            aiStatus: null,
            aiNote: '',
            aiAutoApply: true,
            aiSyncResults: null,
            aiAnalysis: null,

            async openAiModal() {
                this.showAiModal = true;
                this.aiError = null;
                if (!this.aiStatus) {
                    try {
                        const res = await fetch('{{ route('ai.status') }}');
                        this.aiStatus = await res.json();
                    } catch (e) {
                        console.error('Failed to load AI status', e);
                    }
                }
            },

            async runAiSync() {
                if (!this.aiNote.trim()) return;
                this.aiLoading = true;
                this.aiError = null;
                this.aiSyncResults = null;

                try {
                    const res = await fetch('{{ route('projects.ai.prompt_sync', $project) }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({
                            note: this.aiNote,
                            apply: this.aiAutoApply
                        })
                    });
                    const data = await res.json();
                    if (!res.ok || !data.success) {
                        this.aiError = data.error || 'Erreur lors de la synchronisation IA.';
                    } else {
                        this.aiSyncResults = data;
                    }
                } catch (e) {
                    this.aiError = 'Erreur réseau lors de la communication avec l\'IA.';
                } finally {
                    this.aiLoading = false;
                }
            },

            async runAiAnalyze() {
                this.aiLoading = true;
                this.aiError = null;
                this.aiAnalysis = null;

                try {
                    const res = await fetch('{{ route('projects.ai.analyze', $project) }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                            'Accept': 'application/json'
                        }
                    });
                    const data = await res.json();
                    if (!res.ok || !data.success) {
                        this.aiError = data.error || 'Erreur lors de l\'analyse IA.';
                    } else {
                        this.aiAnalysis = data.analysis;
                    }
                } catch (e) {
                    this.aiError = 'Erreur réseau lors de l\'analyse.';
                } finally {
                    this.aiLoading = false;
                }
            },

            openNewTicketModal(columnId = null) {
                if (columnId) {
                    this.selectedColumnId = columnId;
                }
                this.showCreateModal = true;
            },

            async openTicketDetailModal(ticketId) {
                this.showDetailModal = true;
                this.loadingDetail = true;
                this.currentTicket = null;

                try {
                    const res = await fetch(`/projects/{{ $project->id }}/tickets/${ticketId}`, {
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });
                    const data = await res.json();
                    this.currentTicket = data.ticket;
                    this.ticketComments = data.comments;
                    this.reporterLabel = data.reporter_label;
                    this.ticketAttachments = data.attachments;
                } catch (e) {
                    console.error('Failed to load ticket', e);
                } finally {
                    this.loadingDetail = false;
                }
            },

            initKanban() {
                @if(!auth()->user()->isClient())
                    // Initialize SortableJS on all columns
                    const columns = document.querySelectorAll('.kanban-column');
                    columns.forEach(colEl => {
                        new Sortable(colEl, {
                            group: 'kanban',
                            animation: 180,
                            ghostClass: 'ghost-card',
                            dragClass: 'drag-card',
                            onEnd: async (evt) => {
                                const ticketId = evt.item.dataset.ticketId;
                                const targetColumnId = evt.to.dataset.columnId;
                                const orderedCards = Array.from(evt.to.children).map(c => c.dataset.ticketId);

                                try {
                                    const response = await fetch('{{ route('kanban.move', $project) }}', {
                                        method: 'POST',
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                                            'Accept': 'application/json'
                                        },
                                        body: JSON.stringify({
                                            ticket_id: ticketId,
                                            target_column_id: targetColumnId,
                                            ordered_ids: orderedCards
                                        })
                                    });
                                    const result = await response.json();
                                    if (!result.success) {
                                        console.error('Move error', result);
                                    }
                                } catch (err) {
                                    console.error('Erreur lors du déplacement du ticket', err);
                                }
                            }
                        });
                    });
                @endif
            }
        }
    }
</script>
@endpush