@extends('layouts.app')

@section('title', 'Ticket #' . $ticket->id . ' - TicketHub Central')

@section('content')
<!-- Summernote CSS -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.css" rel="stylesheet">

<!-- Site Info Bar with Site Switcher -->
<div class="bg-white border-b border-slate-200 sticky top-16 z-40">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-14">
            <div class="flex items-center gap-4">
                <a href="{{ $backUrl ?? route('sites.tickets.index', $site) }}" class="p-1.5 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-colors" title="Back to Tickets">
                    <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="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                </a>
                <div class="flex items-center gap-2">
                    <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                        <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"></path>
                        </svg>
                    </div>
                    <div>
                        <h2 class="font-heading font-semibold text-slate-900 text-sm">{{ $currentSite->name }}</h2>
                        <p class="text-xs text-slate-500 font-mono">{{ $currentSite->code }}</p>
                    </div>
                </div>
                <span class="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full {{ $currentSite->is_active ? 'status-open' : 'status-closed' }}">
                    {{ $currentSite->is_active ? 'Connected' : 'Offline' }}
                </span>
            </div>
            
            <!-- Site Switcher Dropdown -->
            <div class="flex items-center gap-3" x-data="{ siteSwitcherOpen: false }">
                <div class="relative">
                    <button 
                        @click="siteSwitcherOpen = !siteSwitcherOpen"
                        class="flex items-center gap-2 px-3 py-1.5 bg-slate-100 hover:bg-slate-200 rounded-lg transition-colors text-sm font-medium text-slate-700"
                    >
                        <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="M8 9l4-4 4 4m0 6l-4 4-4-4"></path>
                        </svg>
                        Switch Site
                    </button>
                    
                    <div 
                        x-show="siteSwitcherOpen" 
                        @click.away="siteSwitcherOpen = false"
                        x-cloak
                        x-transition:enter="transition ease-out duration-150"
                        x-transition:enter-start="opacity-0 scale-95"
                        x-transition:enter-end="opacity-100 scale-100"
                        x-transition:leave="transition ease-in duration-100"
                        x-transition:leave-start="opacity-100 scale-100"
                        x-transition:leave-end="opacity-0 scale-95"
                        class="absolute right-0 mt-2 w-64 bg-white rounded-lg shadow-lg border border-slate-200 py-1 z-50 max-h-80 overflow-y-auto"
                    >
                        <div class="px-3 py-2 border-b border-slate-100">
                            <p class="text-xs font-medium text-slate-500 uppercase tracking-wider">Available Sites</p>
                        </div>
                        @foreach($allSites as $s)
                            <a 
                                href="{{ route('sites.tickets.index', $s->code) }}"
                                class="flex items-center gap-3 px-3 py-2 hover:bg-slate-50 transition-colors {{ $s->code === $currentSite->code ? 'bg-blue-50' : '' }}"
                            >
                                <div class="w-6 h-6 {{ $s->code === $currentSite->code ? 'bg-blue-100' : 'bg-slate-100' }} rounded flex items-center justify-center flex-shrink-0">
                                    <svg class="w-3 h-3 {{ $s->code === $currentSite->code ? 'text-blue-600' : 'text-slate-500' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"></path>
                                    </svg>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="text-sm font-medium text-slate-900 truncate">{{ $s->name }}</p>
                                    <p class="text-xs text-slate-500 font-mono">{{ $s->code }}</p>
                                </div>
                                @if($s->code === $currentSite->code)
                                    <svg class="w-4 h-4 text-blue-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                @endif
                            </a>
                        @endforeach
                        <div class="border-t border-slate-100 mt-1 pt-1">
                            <a 
                                href="{{ route('sites.index') }}"
                                class="flex items-center gap-2 px-3 py-2 text-sm text-slate-600 hover:bg-slate-50 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="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
                                </svg>
                                View All Sites
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="p-8 animate-fadeIn" x-data="{ 
    modalOpen: false, 
    modalFile: null,
    modalType: 'image',
    openModal(file, type) {
        this.modalFile = file;
        this.modalType = type;
        this.modalOpen = true;
    },
    closeModal() {
        this.modalOpen = false;
        this.modalFile = null;
    },
    isImage(filename) {
        if (!filename) return false;
        const ext = filename.split('.').pop().toLowerCase();
        return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg'].includes(ext);
    },
    isPdf(filename) {
        if (!filename) return false;
        return filename.split('.').pop().toLowerCase() === 'pdf';
    },
    isVideo(filename) {
        if (!filename) return false;
        const ext = filename.split('.').pop().toLowerCase();
        return ['mp4', 'webm', 'ogg', 'mov', 'avi'].includes(ext);
    },
    getFileType(filename) {
        if (this.isImage(filename)) return 'image';
        if (this.isPdf(filename)) return 'pdf';
        if (this.isVideo(filename)) return 'video';
        return 'other';
    }
}">
    <div class="max-w-7xl mx-auto">
        <!-- Header -->
        <div class="mb-6">
            <div class="flex items-start justify-between gap-4">
                <div>
                    <h1 class="font-heading text-3xl font-bold text-slate-900 tracking-tight mb-2">Ticket #{{ $ticket->id }}</h1>
                    <div class="flex items-center gap-3 flex-wrap">
                        @if($ticket->support_closed)
                            <span class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full status-closed">
                                <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Closed by Support
                            </span>
                        @elseif($ticket->closed)
                            <span class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full status-closed">
                                <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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Closed
                            </span>
                        @else
                            <span class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full status-open">
                                <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Open
                            </span>
                        @endif
                        <span class="text-slate-400">•</span>
                        <span class="text-slate-500 text-sm">Created {{ $ticket->created?->format('M d, Y \a\t H:i') }}</span>
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    @if($ticket->support_closed && $ticket->closed)
                        <form action="{{ route('sites.tickets.reopen', [$site, $ticket->id]) }}" method="POST">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-lg transition-colors flex items-center gap-2">
                                <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="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"></path>
                                </svg>
                                Reopen Ticket
                            </button>
                        </form>
                    @else
                        <form action="{{ route('sites.tickets.close', [$site, $ticket->id]) }}" method="POST">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-lg transition-colors flex items-center gap-2">
                                <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 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Close Ticket
                            </button>
                        </form>
                    @endif
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Main content -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Ticket content -->
                <div class="bg-white border border-slate-200 rounded-lg shadow-sm">
                    <div class="px-6 py-4 border-b border-slate-100">
                        <h2 class="font-heading text-lg font-semibold text-slate-900 flex items-center gap-2">
                            <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                            </svg>
                            Ticket Description
                        </h2>
                    </div>
                    <div class="p-6">
                        <div class="prose prose-slate max-w-none text-slate-700 leading-relaxed">
                            {!! $ticket->content ?? '<p class="text-slate-500 italic">No description provided.</p>' !!}
                        </div>
                    </div>
                </div>

                <!-- Ticket Files (if any, not linked to comments) -->
                @php
                    $ticketOnlyFiles = $ticket->files->whereNull('comment_id');
                @endphp
                @if($ticketOnlyFiles->isNotEmpty())
                <div class="bg-white border border-slate-200 rounded-lg shadow-sm">
                    <div class="px-6 py-4 border-b border-slate-100">
                        <h2 class="font-heading text-lg font-semibold text-slate-900 flex items-center gap-2">
                            <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                            </svg>
                            Ticket Attachments ({{ $ticketOnlyFiles->count() }})
                        </h2>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
                            @foreach($ticketOnlyFiles as $file)
                                @include('partials.file-thumbnail', ['file' => $file])
                            @endforeach
                        </div>
                    </div>
                </div>
                @endif

                <!-- Comments section -->
                <div class="bg-white border border-slate-200 rounded-lg shadow-sm">
                    <div class="px-6 py-4 border-b border-slate-100">
                        <h2 class="font-heading text-lg font-semibold text-slate-900 flex items-center gap-2">
                            <svg class="w-5 h-5 text-slate-400" 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"></path>
                            </svg>
                            Comments ({{ $ticket->comments->count() }})
                        </h2>
                    </div>
                    <div class="p-6">
                        @if($ticket->comments->isEmpty())
                            <p class="text-slate-500 text-center py-6">No comments yet</p>
                        @else
                            <div class="space-y-4 max-h-[600px] overflow-y-auto pr-2">
                                @foreach($ticket->comments as $comment)
                                    <div class="p-4 rounded-lg {{ $comment->support_reply ? 'comment-support' : 'comment-customer' }}">
                                        <div class="flex items-center justify-between mb-2">
                                            <div class="flex items-center gap-2">
                                                <div class="w-8 h-8 rounded-full flex items-center justify-center {{ $comment->support_reply ? 'bg-blue-100 text-blue-600' : 'bg-slate-200 text-slate-600' }}">
                                                    <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                                    </svg>
                                                </div>
                                                <div>
                                                    <p class="font-medium text-slate-900 text-sm">
                                                        {{ $comment->support_reply ? ($comment->support_by ?? 'Support Agent') : 'Customer' }}
                                                    </p>
                                                    @if($comment->support_reply)
                                                        <span class="inline-flex px-2 py-0.5 text-xs font-medium rounded-full status-open">Support</span>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="flex items-center gap-2">
                                                @if($comment->support_reply && ($comment->support_by == Auth::user()->name))
                                                    <button 
                                                        type="button"
                                                        data-comment-id="{{ $comment->id }}"
                                                        data-comment-content="{{ base64_encode($comment->content) }}"
                                                        onclick="openEditModal(this)"
                                                        class="p-1.5 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors"
                                                        title="Edit comment"
                                                    >
                                                        <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                                        </svg>
                                                    </button>
                                                    @if(!$comment->support_by == Auth::user()->name)
                                                    <button
                                                        type="button"
                                                        data-comment-id="{{ $comment->id }}"
                                                        onclick="openDeleteModal(this)"
                                                        class="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
                                                        title="Delete comment"
                                                    >
                                                        <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                                        </svg>
                                                    </button>
                                                    @endif
                                                @endif
                                                <span class="text-xs text-slate-500">{{ $comment->created?->format('M d, Y H:i') }}</span>
                                                @if($comment->updated && $comment->updated != $comment->created)
                                                    <span class="text-xs text-slate-400 italic">(edited)</span>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="text-slate-700 text-sm leading-relaxed pl-10 prose prose-sm prose-slate max-w-none">
                                            {!! $comment->content !!}
                                        </div>
                                        
                                        <!-- Comment files -->
                                        @php
                                            $commentFiles = $ticket->files->where('comment_id', $comment->id);
                                        @endphp
                                        @if($commentFiles->isNotEmpty())
                                            <div class="mt-3 pl-10">
                                                <p class="text-xs text-slate-500 mb-2">Attachments:</p>
                                                <div class="flex flex-wrap gap-2">
                                                    @foreach($commentFiles as $file)
                                                        @include('partials.file-thumbnail-small', ['file' => $file])
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        <hr class="my-6 border-slate-200">

                        <!-- Add comment form with Summernote -->
                        <form action="{{ route('sites.tickets.comments.store', [$site, $ticket->id]) }}" method="POST" enctype="multipart/form-data" id="commentForm">
                            @csrf
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-slate-700 mb-2">Add Response</label>
                                <textarea 
                                    name="content" 
                                    id="summernote"
                                    class="w-full"
                                >{{ old('content') }}</textarea>
                                @error('content')
                                    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <!-- Additional file upload -->
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-slate-700 mb-2">Attach Additional Images</label>
                                <input 
                                    type="file" 
                                    name="images[]" 
                                    multiple 
                                    accept="image/*"
                                    class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-slate-100 file:text-slate-700 hover:file:bg-slate-200 cursor-pointer"
                                >
                                <p class="text-xs text-slate-500 mt-1">You can also paste or drag images directly into the editor above.</p>
                            </div>
                            
                            <div class="flex justify-end">
                                <button type="submit" class="px-4 py-2 bg-slate-900 hover:bg-slate-800 text-white font-medium rounded-md btn-press flex items-center gap-2 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 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
                                    </svg>
                                    Send Response
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="space-y-6">
                <!-- User info -->
                <div class="bg-white border border-slate-200 rounded-lg shadow-sm">
                    <div class="px-6 py-4 border-b border-slate-100">
                        <h2 class="font-heading text-lg font-semibold text-slate-900 flex items-center gap-2">
                            <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                            </svg>
                            User Information
                        </h2>
                    </div>
                    <div class="p-6">
                        @if($ticket->user)
                            <div class="flex items-center gap-3 mb-4">
                                <div class="w-12 h-12 bg-slate-100 rounded-full flex items-center justify-center">
                                    <svg class="w-6 h-6 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                    </svg>
                                </div>
                                <div>
                                    <p class="font-medium text-slate-900">{{ $ticket->user->name }}</p>
                                    <p class="text-sm text-slate-500 font-mono">{{ $ticket->user->username }}</p>
                                </div>
                            </div>
                            <hr class="my-4 border-slate-100">
                            <div class="space-y-2 text-sm">
                                <div class="flex justify-between">
                                    <span class="text-slate-500">Type</span>
                                    <span class="font-mono text-slate-700 bg-slate-100 px-2 py-0.5 rounded">{{ $ticket->user->type }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-slate-500">Status</span>
                                    <span class="inline-flex px-2 py-0.5 text-xs font-medium rounded-full {{ $ticket->user->status === 'A' ? 'status-open' : 'status-closed' }}">
                                        {{ $ticket->user->status === 'A' ? 'Active' : 'Suspended' }}
                                    </span>
                                </div>
                            </div>
                        @else
                            <p class="text-slate-500 text-sm">User information not available</p>
                        @endif
                    </div>
                </div>

                <!-- Ticket metadata -->
                <div class="bg-white border border-slate-200 rounded-lg shadow-sm">
                    <div class="px-6 py-4 border-b border-slate-100">
                        <h2 class="font-heading text-lg font-semibold text-slate-900 flex items-center gap-2">
                            <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                            </svg>
                            Ticket Details
                        </h2>
                    </div>
                    <div class="p-6 space-y-3 text-sm">
                        <div class="flex justify-between items-center">
                            <span class="text-slate-500">Category</span>
                            <span class="text-slate-900 font-medium">{{ $ticket->category ?? '—' }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-slate-500">Priority</span>
                            <span class="text-slate-900 font-medium">{{ $ticket->type ?? '—' }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-slate-500">MAC Address</span>
                            <span class="text-slate-900 font-mono text-xs">{{ $ticket->mac ?? '—' }}</span>
                        </div>
                        <hr class="border-slate-100">
                        <div class="flex justify-between items-center">
                            <span class="text-slate-500">Box</span>
                            <span class="text-slate-900 font-mono text-xs">{{ $ticket->box ?? '—' }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-slate-500">Box IP</span>
                            <span class="text-slate-900 font-mono text-xs">{{ $ticket->box_ip ?? '—' }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-slate-500">ISP</span>
                            <span class="text-slate-900">{{ $ticket->box_isp ?? '—' }}</span>
                        </div>
                        @if($ticket->vod_category)
                            <div class="flex justify-between items-center">
                                <span class="text-slate-500">VOD Category</span>
                                <span class="text-slate-900">{{ $ticket->vod_category }}</span>
                            </div>
                        @endif
                        <hr class="border-slate-100">
                        <div class="flex justify-between items-center">
                            <span class="text-slate-500">Read Status</span>
                            <span class="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full {{ $ticket->read ? 'status-open' : 'status-pending' }}">
                                @if($ticket->read)
                                    <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                    </svg>
                                    Read
                                @else
                                    <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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"></path>
                                    </svg>
                                    Unread
                                @endif
                            </span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-slate-500">Last Updated</span>
                            <span class="text-slate-900 text-xs">{{ $ticket->updated?->format('M d, Y H:i') }}</span>
                        </div>
                    </div>
                </div>

                <!-- All Files List -->
                <div class="bg-white border border-slate-200 rounded-lg shadow-sm">
                    <div class="px-6 py-4 border-b border-slate-100">
                        <h2 class="font-heading text-lg font-semibold text-slate-900 flex items-center gap-2">
                            <svg class="w-5 h-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"></path>
                            </svg>
                            All Files ({{ $ticket->files->count() }})
                        </h2>
                    </div>
                    <div class="p-6">
                        @if($ticket->files->isEmpty())
                            <p class="text-slate-500 text-sm text-center py-4">No attachments</p>
                        @else
                            <div class="space-y-2 max-h-[300px] overflow-y-auto">
                                @foreach($ticket->files as $file)
                                    @php
                                        $fileUrl = \App\Helpers\FileHelper::getFileUrl($site, $file->file);
                                    @endphp
                                    <div 
                                        class="flex items-center gap-3 p-3 bg-slate-50 rounded-lg hover:bg-slate-100 transition-colors cursor-pointer"
                                        @click="openModal('{{ $fileUrl }}', getFileType('{{ $file->file }}'))"
                                    >
                                        <div class="w-10 h-10 bg-white border border-slate-200 rounded-lg flex items-center justify-center overflow-hidden flex-shrink-0">
                                            <template x-if="isImage('{{ $file->file }}')">
                                                <img 
                                                    src="{{ $fileUrl }}" 
                                                    alt="{{ $file->file }}"
                                                    class="w-full h-full object-cover"
                                                    onerror="this.style.display='none';"
                                                >
                                            </template>
                                            <div x-show="!isImage('{{ $file->file }}')" class="flex items-center justify-center w-full h-full">
                                                <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="flex-1 min-w-0">
                                            <p class="text-sm font-medium text-slate-900 truncate">{{ basename($file->file) }}</p>
                                            <p class="text-xs text-slate-500">{{ $file->created?->format('M d, Y') }}</p>
                                        </div>
                                        <svg class="w-4 h-4 text-slate-400 flex-shrink-0" 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"></path>
                                        </svg>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- File Preview Modal -->
    <div 
        x-show="modalOpen" 
        x-cloak
        class="fixed inset-0 z-50 flex items-center justify-center"
        @keydown.escape.window="closeModal()"
    >
        <!-- Full screen backdrop -->
        <div 
            class="fixed inset-0 bg-black/80 backdrop-blur-sm"
            @click="closeModal()"
            x-show="modalOpen"
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
        ></div>

        <!-- Modal content -->
        <div 
            class="relative bg-white rounded-xl shadow-2xl max-w-5xl w-full max-h-[90vh] overflow-hidden mx-4 z-10"
            x-show="modalOpen"
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            @click.stop
        >
                <!-- Header -->
                <div class="flex items-center justify-between px-6 py-4 border-b border-slate-200 bg-slate-50">
                    <div class="flex items-center gap-3">
                        <svg class="w-5 h-5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                        </svg>
                        <h3 class="font-heading font-semibold text-slate-900 truncate" x-text="modalFile ? modalFile.split('/').pop() : 'Preview'"></h3>
                    </div>
                    <div class="flex items-center gap-2">
                        <a 
                            :href="modalFile" 
                            target="_blank" 
                            class="p-2 text-slate-500 hover:text-slate-700 hover:bg-slate-100 rounded-lg transition-colors"
                            title="Open in new tab"
                        >
                            <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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                            </svg>
                        </a>
                        <a 
                            :href="modalFile" 
                            download 
                            class="p-2 text-slate-500 hover:text-slate-700 hover:bg-slate-100 rounded-lg transition-colors"
                            title="Download"
                        >
                            <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                            </svg>
                        </a>
                        <button 
                            @click="closeModal()" 
                            class="p-2 text-slate-500 hover:text-slate-700 hover:bg-slate-100 rounded-lg 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"></path>
                            </svg>
                        </button>
                    </div>
                </div>

                <!-- Content -->
                <div class="p-6 overflow-auto max-h-[calc(90vh-80px)] bg-slate-100 flex items-center justify-center min-h-[400px]">
                    <!-- Image preview -->
                    <template x-if="modalType === 'image'">
                        <img 
                            :src="modalFile" 
                            :alt="modalFile"
                            class="max-w-full max-h-full object-contain rounded-lg shadow-lg"
                        >
                    </template>

                    <!-- PDF preview -->
                    <template x-if="modalType === 'pdf'">
                        <iframe 
                            :src="modalFile" 
                            class="w-full h-[70vh] rounded-lg border border-slate-200"
                        ></iframe>
                    </template>

                    <!-- Video preview -->
                    <template x-if="modalType === 'video'">
                        <video 
                            :src="modalFile" 
                            controls 
                            class="max-w-full max-h-full rounded-lg shadow-lg"
                        >
                            Your browser does not support the video tag.
                        </video>
                    </template>

                    <!-- Other file types -->
                    <template x-if="modalType === 'other'">
                        <div class="text-center py-12">
                            <svg class="w-16 h-16 text-slate-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                            </svg>
                            <p class="text-slate-600 mb-4">This file type cannot be previewed</p>
                            <a 
                                :href="modalFile" 
                                download 
                                class="inline-flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg hover:bg-slate-800 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                                </svg>
                                Download File
                            </a>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Comment Modal -->
    <div 
        id="editModal"
        class="hidden fixed inset-0 z-50 flex items-center justify-center"
    >
        <!-- Full screen backdrop -->
        <div 
            class="fixed inset-0 bg-black/50 backdrop-blur-sm"
            onclick="closeEditModal()"
        ></div>
        
        <!-- Modal content -->
        <div class="relative bg-white rounded-xl shadow-2xl max-w-3xl w-full mx-4 z-10 max-h-[90vh] overflow-y-auto">
            <!-- Header -->
            <div class="flex items-center justify-between px-6 py-4 border-b border-slate-200 bg-slate-50 rounded-t-xl">
                <div class="flex items-center gap-3">
                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                    </svg>
                    <h3 class="font-heading font-semibold text-slate-900">Edit Comment</h3>
                </div>
                <button 
                    type="button"
                    onclick="closeEditModal()"
                    class="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg 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"></path>
                    </svg>
                </button>
            </div>

            <!-- Form -->
            <form 
                id="editCommentForm"
                action=""
                method="POST"
                onsubmit="return submitEditForm(this);"
            >
                @csrf
                @method('PATCH')
                <div class="p-6">
                    <textarea 
                        name="content" 
                        id="editSummernote"
                        class="w-full"
                    ></textarea>
                </div>
                
                <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-slate-200 bg-slate-50 rounded-b-xl">
                    <button 
                        type="button" 
                        onclick="closeEditModal()"
                        class="px-4 py-2 text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors"
                    >
                        Cancel
                    </button>
                    <button 
                        type="submit" 
                        class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors flex items-center gap-2"
                    >
                        <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="M5 13l4 4L19 7"></path>
                        </svg>
                        Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Delete Comment Modal -->
    <div 
        id="deleteModal"
        class="hidden fixed inset-0 z-50 flex items-center justify-center"
    >
        <!-- Full screen backdrop -->
        <div 
            class="fixed inset-0 bg-black/50 backdrop-blur-sm"
            onclick="closeDeleteModal()"
        ></div>
        
        <!-- Modal content -->
        <div class="relative bg-white rounded-xl shadow-2xl max-w-md w-full mx-4 p-6 z-10">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
                    <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                    </svg>
                </div>
                <h3 class="font-heading text-lg font-semibold text-slate-900">Delete Comment</h3>
            </div>
            <p class="text-slate-600 mb-6">Are you sure you want to delete this comment? This action cannot be undone.</p>
            
            <form id="deleteCommentForm" action="" method="POST" class="flex gap-3 justify-end">
                @csrf
                @method('DELETE')
                <button type="button" onclick="closeDeleteModal()" class="px-4 py-2 text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors">
                    Cancel
                </button>
                <button type="submit" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors">
                    Delete
                </button>
            </form>
        </div>
    </div>
</div>

<!-- jQuery (required for Summernote) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- Summernote JS -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.js"></script>

<script>
// Edit modal state
window.editCommentId = null;
window.deleteCommentId = null;

function openEditModal(button) {
    const commentId = button.getAttribute('data-comment-id');
    const contentBase64 = button.getAttribute('data-comment-content');
    const content = atob(contentBase64);
    
    window.editCommentId = commentId;
    
    // Update form action
    const form = document.getElementById('editCommentForm');
    form.action = '{{ url("/sites/" . $site . "/tickets/" . $ticket->id . "/comments") }}/' + commentId;
    
    // Show modal
    document.getElementById('editModal').classList.remove('hidden');
    
    // Initialize Summernote with content after a brief delay
    setTimeout(function() {
        if ($('#editSummernote').data('summernote')) {
            $('#editSummernote').summernote('destroy');
        }
        $('#editSummernote').val(content);
        $('#editSummernote').summernote({
            placeholder: 'Edit your comment...',
            tabsize: 2,
            height: 250,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'italic', 'underline', 'strikethrough', 'clear']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture']],
                ['view', ['fullscreen', 'codeview']]
            ],
            callbacks: {
                onImageUpload: function(files) {
                    for (let i = 0; i < files.length; i++) {
                        uploadEditImage(files[i]);
                    }
                }
            }
        });
    }, 100);
}

function closeEditModal() {
    document.getElementById('editModal').classList.add('hidden');
    if ($('#editSummernote').data('summernote')) {
        $('#editSummernote').summernote('destroy');
    }
    window.editCommentId = null;
}

function openDeleteModal(button) {
    const commentId = button.getAttribute('data-comment-id');
    window.deleteCommentId = commentId;
    
    // Update form action
    const form = document.getElementById('deleteCommentForm');
    form.action = '{{ url("/sites/" . $site . "/tickets/" . $ticket->id . "/comments") }}/' + commentId;
    
    // Show modal
    document.getElementById('deleteModal').classList.remove('hidden');
}

function closeDeleteModal() {
    document.getElementById('deleteModal').classList.add('hidden');
    window.deleteCommentId = null;
}

function submitEditForm(form) {
    const textarea = form.querySelector('textarea[name="content"]');
    textarea.value = $('#editSummernote').summernote('code');
    return true;
}

$(document).ready(function() {
    $('#summernote').summernote({
        placeholder: 'Write your response here...',
        tabsize: 2,
        height: 200,
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
            ['fontname', ['fontname']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video', 'hr']],
            ['view', ['fullscreen', 'codeview', 'help']]
        ],
        fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Georgia', 'Helvetica', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'],
        fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '22', '24', '28', '32', '36', '48', '64', '72'],
        callbacks: {
            onImageUpload: function(files) {
                for (let i = 0; i < files.length; i++) {
                    uploadImage(files[i]);
                }
            },
            onMediaDelete: function(target) {
                // Optional: Handle media deletion
            }
        }
    });

    function uploadImage(file) {
        let formData = new FormData();
        formData.append('file', file);
        formData.append('_token', '{{ csrf_token() }}');

        $.ajax({
            url: '{{ route("sites.tickets.upload-image", [$site, $ticket->id]) }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                $('#summernote').summernote('insertImage', response.url);
            },
            error: function(xhr) {
                alert('Image upload failed. Please try again.');
                console.error(xhr.responseText);
            }
        });
    }

    function uploadEditImage(file) {
        let formData = new FormData();
        formData.append('file', file);
        formData.append('_token', '{{ csrf_token() }}');

        $.ajax({
            url: '{{ route("sites.tickets.upload-image", [$site, $ticket->id]) }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                $('#editSummernote').summernote('insertImage', response.url);
            },
            error: function(xhr) {
                alert('Image upload failed. Please try again.');
                console.error(xhr.responseText);
            }
        });
    }
    
    // Make uploadEditImage global
    window.uploadEditImage = uploadEditImage;
    
    // Close modals on escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            if (!document.getElementById('editModal').classList.contains('hidden')) {
                closeEditModal();
            }
            if (!document.getElementById('deleteModal').classList.contains('hidden')) {
                closeDeleteModal();
            }
        }
    });
});
</script>
@endsection