<x-app-layout>
<x-module-hero :title="'Ticket #' . $ticket->unique_identifier" :description="$ticket->title" icon="fa-ticket">
    <x-slot name="backButton">
        <a href="{{ route('tickets.index') }}" class="inline-flex items-center gap-1 text-sm text-[#475569] hover:text-[#1e293b] transition-colors">
            <i class="fas fa-arrow-left text-xs"></i> Back to Tickets
        </a>
    </x-slot>
    <x-slot name="tabs">
        @can('view tickets')
        <a href="{{ route('tickets.index') }}"
           class="module-hero-tab {{ request()->routeIs('tickets.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
            <i class="fas fa-list text-sm"></i> All Tickets
        </a>
        @endcan
        @can('create tickets')
        <a href="{{ route('tickets.create') }}"
           class="module-hero-tab {{ request()->routeIs('tickets.create') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
            <i class="fas fa-plus text-sm"></i> New Ticket
        </a>
        @endcan
    </x-slot>
    @can('edit tickets')
    <x-slot name="actions">
        <a href="{{ route('tickets.edit', $ticket) }}"
           class="inline-flex items-center gap-2 px-4 py-2 bg-[#1e293b] text-white text-sm font-semibold rounded-lg hover:bg-[#334155] transition">
            <i class="fas fa-edit"></i> Edit Ticket
        </a>
    </x-slot>
    @endcan
</x-module-hero>

<div class="p-6">
    @if(session('success'))
        <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-center gap-2">
            <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
        </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {{-- Main Content --}}
        <div class="lg:col-span-2 space-y-6">

            {{-- Ticket Description --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 bg-gray-50 flex items-center justify-between">
                    <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                        <i class="fas fa-file-alt text-blue-600"></i> Ticket Description
                    </h3>
                    <div class="flex items-center gap-2">
                        {!! $ticket->status_badge !!}
                        {!! $ticket->priority_badge !!}
                    </div>
                </div>
                <div class="p-6">
                    <div class="text-gray-700 text-sm leading-relaxed whitespace-pre-wrap">{{ $ticket->description }}</div>
                </div>
            </div>

            {{-- Conversation Thread --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 bg-gray-50">
                    <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                        <i class="fas fa-comments text-purple-600"></i>
                        Conversation
                        <span class="ml-1 px-2 py-0.5 text-xs bg-gray-200 text-gray-600 rounded-full">{{ $ticket->replies->count() }}</span>
                    </h3>
                </div>
                <div class="divide-y divide-gray-100">
                    @forelse($ticket->replies as $reply)
                        <div class="p-6 {{ $reply->is_internal ? 'bg-yellow-50' : '' }}">
                            <div class="flex items-start gap-4">
                                <div class="flex-shrink-0 w-9 h-9 rounded-full bg-gradient-to-br from-green-500 to-green-700 flex items-center justify-center text-white font-semibold text-sm">
                                    {{ strtoupper(substr($reply->user->name ?? 'U', 0, 1)) }}
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center justify-between mb-2">
                                        <div class="flex items-center gap-2">
                                            <span class="font-medium text-gray-800 text-sm">{{ $reply->user->name ?? 'Unknown' }}</span>
                                            @if($reply->is_internal)
                                                <span class="px-2 py-0.5 text-xs bg-yellow-200 text-yellow-800 rounded-full font-medium">Internal Note</span>
                                            @endif
                                        </div>
                                        <span class="text-xs text-gray-400">{{ $reply->created_at->diffForHumans() }}</span>
                                    </div>
                                    <div class="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap">{{ $reply->message }}</div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="p-8 text-center text-gray-500">
                            <i class="fas fa-comment-slash text-3xl mb-3 block opacity-40"></i>
                            <p class="text-sm">No replies yet. Be the first to respond!</p>
                        </div>
                    @endforelse
                </div>
            </div>

            {{-- Reply Form --}}
            @can('reply tickets')
                @if($ticket->isOpen())
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                        <div class="px-6 py-4 border-b border-gray-100 bg-gray-50">
                            <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                                <i class="fas fa-reply text-green-600"></i> Add Reply
                            </h3>
                        </div>
                        <form action="{{ route('tickets.reply', $ticket) }}" method="POST" class="p-6">
                            @csrf
                            <div class="mb-4">
                                <textarea name="message" rows="4" required
                                    placeholder="Type your response here..."
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500 @error('message') border-red-400 @enderror">{{ old('message') }}</textarea>
                                @error('message')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                            </div>
                            @if(auth()->user()->hasAnyRole(['Super Manager', 'Manager']))
                                <div class="mb-4">
                                    <label class="flex items-center gap-2 cursor-pointer">
                                        <input type="checkbox" name="is_internal" value="1"
                                            class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                                        <span class="text-sm text-gray-600">Mark as internal note (only visible to staff)</span>
                                    </label>
                                </div>
                            @endif
                            <div class="flex justify-end">
                                <button type="submit"
                                    class="px-6 py-2 bg-[#1e293b] text-white text-sm font-semibold rounded-lg hover:bg-[#334155] transition flex items-center gap-2">
                                    <i class="fas fa-paper-plane"></i> Send Reply
                                </button>
                            </div>
                        </form>
                    </div>
                @else
                    <div class="bg-gray-50 border border-gray-200 rounded-lg p-6 text-center">
                        <i class="fas fa-lock text-3xl text-gray-400 mb-3 block"></i>
                        <p class="text-gray-600 text-sm">This ticket is <strong>{{ str_replace('_', ' ', $ticket->status) }}</strong>. Replies are not allowed.</p>
                        @if(auth()->user()->hasAnyRole(['Super Manager', 'Manager']))
                            <form action="{{ route('tickets.update-status', $ticket) }}" method="POST" class="mt-3 inline-block">
                                @csrf @method('PUT')
                                <input type="hidden" name="status" value="in_progress">
                                <button type="submit" class="px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition">
                                    <i class="fas fa-redo mr-1"></i> Reopen Ticket
                                </button>
                            </form>
                        @endif
                    </div>
                @endif
            @endcan
        </div>

        {{-- Sidebar --}}
        <div class="space-y-6">

            {{-- Quick Actions (Admin) --}}
            @if(auth()->user()->hasAnyRole(['Super Manager', 'Manager']))
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-5 py-4 border-b border-gray-100 bg-gray-50">
                        <h4 class="font-semibold text-gray-800 flex items-center gap-2">
                            <i class="fas fa-cog text-blue-600"></i> Quick Actions
                        </h4>
                    </div>
                    <div class="p-5 space-y-4">
                        {{-- Status Update --}}
                        <form action="{{ route('tickets.update-status', $ticket) }}" method="POST">
                            @csrf @method('PUT')
                            <label class="block text-xs font-medium text-gray-600 mb-1">Update Status</label>
                            <div class="flex gap-2">
                                <select name="status" class="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                                    <option value="pending" {{ $ticket->status == 'pending' ? 'selected' : '' }}>Pending</option>
                                    <option value="in_progress" {{ $ticket->status == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                                    <option value="resolved" {{ $ticket->status == 'resolved' ? 'selected' : '' }}>Resolved</option>
                                    <option value="closed" {{ $ticket->status == 'closed' ? 'selected' : '' }}>Closed</option>
                                </select>
                                <button type="submit" class="px-3 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 transition">
                                    <i class="fas fa-check"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            @endif

            {{-- Ticket Details --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-5 py-4 border-b border-gray-100 bg-gray-50">
                    <h4 class="font-semibold text-gray-800 flex items-center gap-2">
                        <i class="fas fa-info-circle text-teal-600"></i> Ticket Details
                    </h4>
                </div>
                <div class="divide-y divide-gray-100 text-sm">
                    <div class="px-5 py-3 flex justify-between">
                        <span class="text-gray-500">Ticket ID</span>
                        <span class="font-mono font-medium text-gray-800">{{ $ticket->unique_identifier }}</span>
                    </div>
                    <div class="px-5 py-3 flex justify-between">
                        <span class="text-gray-500">Created By</span>
                        <span class="font-medium text-gray-800">{{ $ticket->user->name ?? 'Unknown' }}</span>
                    </div>
                    <div class="px-5 py-3 flex justify-between">
                        <span class="text-gray-500">Created</span>
                        <span class="font-medium text-gray-800">{{ $ticket->created_at->format('M d, Y H:i') }}</span>
                    </div>
                    @if($ticket->assignee)
                        <div class="px-5 py-3 flex justify-between">
                            <span class="text-gray-500">Assigned To</span>
                            <span class="font-medium text-gray-800">{{ $ticket->assignee->name }}</span>
                        </div>
                    @endif
                    @if($ticket->category)
                        <div class="px-5 py-3 flex justify-between">
                            <span class="text-gray-500">Category</span>
                            <span class="font-medium text-gray-800">{{ $ticket->category }}</span>
                        </div>
                    @endif
                    <div class="px-5 py-3 flex justify-between">
                        <span class="text-gray-500">Last Activity</span>
                        <span class="font-medium text-gray-800">{{ $ticket->last_activity_at?->diffForHumans() ?? $ticket->updated_at->diffForHumans() }}</span>
                    </div>
                    @if($ticket->resolved_at)
                        <div class="px-5 py-3 flex justify-between">
                            <span class="text-gray-500">Resolved</span>
                            <span class="font-medium text-green-700">{{ $ticket->resolved_at->format('M d, Y') }}</span>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Action Buttons --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5 space-y-3">
                @can('edit tickets')
                    <a href="{{ route('tickets.edit', $ticket) }}"
                       class="w-full px-4 py-2.5 bg-amber-500 text-white rounded-lg flex items-center justify-center gap-2 hover:bg-amber-600 transition text-sm font-medium">
                        <i class="fas fa-edit"></i> Edit Ticket
                    </a>
                @endcan
                @can('delete tickets')
                    @if(auth()->user()->hasAnyRole(['Super Manager', 'Manager']))
                        <form action="{{ route('tickets.destroy', $ticket) }}" method="POST">
                            @csrf @method('DELETE')
                            <button type="submit"
                                class="w-full px-4 py-2.5 bg-red-600 text-white rounded-lg flex items-center justify-center gap-2 hover:bg-red-700 transition text-sm font-medium"
                                onclick="return confirm('Delete this ticket permanently?')">
                                <i class="fas fa-trash"></i> Delete Ticket
                            </button>
                        </form>
                    @endif
                @endcan
            </div>
        </div>
    </div>
</div>
</x-app-layout>
