@extends('layouts.app')

@section('title', 'Kanban : ' . $project->name . ' - DevDev')

@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="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">
                <!-- 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>

                <!-- 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)
                    <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-280px)]">
        @foreach($columns as $col)
            <div class="w-80 shrink-0 flex flex-col max-h-[calc(100vh-270px)] 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>

                            <!-- 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->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="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="currentTicket && currentTicket.author ? currentTicket.author.name : (currentTicket && currentTicket.guest_name ? currentTicket.guest_name + ' (Sans compte)' : 'Client')"></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>
                                <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>

                            <!-- 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="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.user ? comment.user.name : (comment.guest_author_name || 'Client')"></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>
</div>
@endsection

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

            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.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