@extends('backend.app')

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

@push('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css" />
    <style>
        .ticket-details-card {
            border: none;
            border-radius: 1rem;
            box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1);
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            height: fit-content;
        }
        .chat-app-window {
            height: 100%;
            border-radius: 1rem;
            background-color: #f8f9fa;
            display: flex;
            flex-direction: column;
        }
        .chat-app-window .card-body {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .user-chats {
            padding: 1.5rem;
            flex: 1;
            overflow-y: auto;
            min-height: 450px;
            max-height: calc(100vh - 400px);
        }
        .chat-content {
            display: flex;
            flex-direction: column;
            margin-bottom: 1rem;
        }
        .chat-content.chat-left {
            align-items: flex-start;
        }
        .chat-content.chat-right {
            align-items: flex-end;
        }
        .chat-avatar {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }
        .chat-message {
            max-width: 70%;
            padding: 1rem 1.25rem;
            border-radius: 1rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
        .chat-left .chat-message {
            background-color: #fff;
            color: #5e5873;
            border-bottom-left-radius: 0.25rem;
        }
        .chat-right .chat-message {
            background: linear-gradient(135deg, #7367f0 0%, #5e50ee 100%);
            color: #fff;
            border-bottom-right-radius: 0.25rem;
        }
        .chat-time {
            font-size: 0.7rem;
            color: #b9b9c3;
            margin-top: 0.4rem;
            display: block;
        }
        .chat-right .chat-time {
            color: rgba(255,255,255,0.8);
            text-align: right;
        }
        .attachment-box {
            background: rgba(255,255,255,0.15);
            border-radius: 0.5rem;
            padding: 0.5rem 0.75rem;
            margin-top: 0.75rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        .chat-left .attachment-box {
            background: #f0f0f5;
            color: #7367f0;
        }
        .customer-info {
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
        .customer-info .user-info,
        .customer-info .company-info {
            flex: 1;
            min-width: 0;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
        .customer-info h6,
        .customer-info small {
            word-wrap: break-word;
            overflow-wrap: break-word;
            word-break: break-word;
        }
        .customer-info .customer-card {
            background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
            border: 1px solid #edf2f7;
            box-shadow: 0 2px 10px rgba(0,0,0,0.03);
            transition: all 0.3s ease;
        }
        .customer-info .customer-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.06);
        }
        .dropify-wrapper {
            border-radius: 0.75rem !important;
            border: 1px dashed #d1d5db !important;
            height: 100px !important;
        }
        .dropify-wrapper .dropify-message p {
            font-size: 13px !important;
            margin: 5px 0 0 !important;
            color: #6b7280;
        }
        .dropify-wrapper .dropify-message .file-icon {
            font-size: 24px !important;
            color: #9ca3af;
        }
        .status-select, .priority-select {
            font-weight: 600;
            border-radius: 0.5rem;
        }
        .chat-app-form {
            border-top: 1px solid #f1f5f9;
            background: #fff;
            border-radius: 0 0 1rem 1rem;
        }
        .ticket-info-label {
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            margin-bottom: 0.5rem;
            color: #64748b;
        }
        .image-attachment-preview {
            max-width: 200px;
            max-height: 200px;
            border-radius: 0.75rem;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            object-fit: cover;
            margin-top: 0.5rem;
        }
        .image-attachment-preview:hover {
            transform: scale(1.02);
            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
        }
        .attachment-box {
            background: rgba(255,255,255,0.15);
            border-radius: 0.5rem;
            padding: 0.5rem 0.75rem;
            margin-top: 0.5rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        .chat-left .attachment-box {
            background: #f0f0f5;
            color: #7367f0;
        }
        /* Custom avatar improvements */
        .avatar.avatar-xl {
            width: 54px;
            height: 54px;
        }
        .avatar-content {
            font-size: 1.4rem;
        }
    </style>
@endpush

@section('content')
    @php
        // Pre-check user and company data once to avoid loops
        $useUserAvatar = false;
        $useCompanyLogo = false;
        $userAvatarPath = '';
        $companyLogoPath = '';
        $userInitial = 'U';
        $companyInitial = 'C';

        if ($ticket->ticket_type == 'user' && $ticket->user) {
            $userInitial = strtoupper(substr($ticket->user->name, 0, 1));
            if ($ticket->user->avatar && !empty($ticket->user->avatar) && file_exists(public_path($ticket->user->avatar))) {
                $useUserAvatar = true;
                $userAvatarPath = asset($ticket->user->avatar);
            }
        } elseif ($ticket->company) {
            $companyInitial = strtoupper(substr($ticket->company->name, 0, 1));
            if ($ticket->company->logo && !empty($ticket->company->logo) && file_exists(public_path($ticket->company->logo))) {
                $useCompanyLogo = true;
                $companyLogoPath = asset($ticket->company->logo);
            }
        }

        // Pre-load all message user data to avoid N+1 queries and loops
        $messageUserData = [];
        foreach ($ticket->messages as $msg) {
            if ($msg->user) {
                $messageUserData[$msg->id] = [
                    'name' => $msg->user->name,
                    'initial' => strtoupper(substr($msg->user->name, 0, 1))
                ];
            } else {
                $messageUserData[$msg->id] = [
                    'name' => 'Customer',
                    'initial' => 'C'
                ];
            }
        }
    @endphp

    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-12 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h3 class="content-header-title float-left mb-0">Support Ticket #{{ $ticket->id }}</h3>
                        </div>
                    </div>
                </div>
            </div>

            <div class="content-body">
                <div class="row">
                    <!-- Ticket Details Sidebar -->
                    <div class="col-xl-4 col-lg-5 col-md-12">
                        <div class="card ticket-details-card mb-0">
                            <div class="card-header border-bottom bg-white">
                                <div class="d-flex justify-content-between align-items-center justify-content-center">
                                    <h4 class="card-title mb-0">Ticket Information</h4>
                                    <span class="badge badge-light-primary font-weight-bold px-2 py-1 mr-5">#{{ $ticket->id }}</span>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label class="ticket-info-label text-muted">SUBJECT</label>
                                    <h5 class="font-weight-bolder mb-0 text-break-word">{{ $ticket->subject }}</h5>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-6">
                                        <label class="ticket-info-label text-muted">TICKET TYPE</label>
                                        <div class="mt-50">
                                            @if($ticket->ticket_type == 'user')
                                                <span class="badge badge-light-primary px-2 py-1"><i data-feather="user" class="mr-25" style="width: 14px;"></i> User</span>
                                            @else
                                                <span class="badge badge-light-info px-2 py-1"><i data-feather="briefcase" class="mr-25" style="width: 14px;"></i> Company</span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <label class="ticket-info-label text-muted">CREATED DATE</label>
                                        <div class="font-small-3 mt-50">{{ $ticket->created_at->format('M d, Y') }}</div>
                                    </div>
                                </div>

                                <div class="form-group mb-3">
                                    <label class="ticket-info-label text-muted">PRIORITY LEVEL</label>
                                    <select name="priority" class="form-control select2 priority-select" data-placeholder="Select Priority" onchange="updateTicketPriority({{ $ticket->id }}, this.value)">
                                        <option value="low" {{ $ticket->priority == 'low' ? 'selected' : '' }}>Low Priority</option>
                                        <option value="medium" {{ $ticket->priority == 'medium' ? 'selected' : '' }}>Medium Priority</option>
                                        <option value="high" {{ $ticket->priority == 'high' ? 'selected' : '' }}>High Priority</option>
                                    </select>
                                </div>

                                <div class="form-group mb-3">
                                    <label class="ticket-info-label text-muted">TICKET STATUS</label>
                                    <select name="status" class="form-control select2 status-select" data-placeholder="Update Status" onchange="updateTicketStatus({{ $ticket->id }}, this.value)">
                                        <option value="open" {{ $ticket->status == 'open' ? 'selected' : '' }}>Open</option>
                                        <option value="pending" {{ $ticket->status == 'pending' ? 'selected' : '' }}>Pending</option>
                                        <option value="resolved" {{ $ticket->status == 'resolved' ? 'selected' : '' }}>Resolved</option>
                                        <option value="closed" {{ $ticket->status == 'closed' ? 'selected' : '' }}>Closed</option>
                                    </select>
                                </div>

                                <hr class="my-3">

                                <div class="customer-info">
                                    <label class="ticket-info-label">CUSTOMER PROFILE</label>
                                    @if($ticket->ticket_type == 'user' && $ticket->user)
                                        <div class="customer-card d-flex align-items-center mt-1 p-2 rounded" style="min-width: 0;">
                                            <div class="avatar avatar-xl mr-2 flex-shrink-0">
                                                @if($useUserAvatar)
                                                    <img src="{{ $userAvatarPath }}" alt="avatar" height="54" width="54" class="rounded">
                                                @else
                                                    <span class="avatar avatar-xl bg-light-primary rounded">
                                                        <span class="avatar-content">{{ $userInitial }}</span>
                                                    </span>
                                                @endif
                                            </div>
                                            <div class="user-info" style="min-width: 0;">
                                                <h6 class="mb-0 text-truncate font-weight-bolder">{{ $ticket->user->name }}</h6>
                                                <small class="text-muted d-block text-truncate">{{ $ticket->user->email }}</small>
                                            </div>
                                        </div>
                                    @elseif($ticket->company)
                                        <div class="customer-card d-flex align-items-center mt-1 p-2 rounded" style="min-width: 0;">
                                            <div class="avatar avatar-xl mr-2 flex-shrink-0">
                                                @if($useCompanyLogo)
                                                    <img src="{{ $companyLogoPath }}" alt="logo" height="54" width="54" class="rounded shadow-sm">
                                                @else
                                                    <span class="avatar avatar-xl bg-light-info rounded d-flex align-items-center justify-content-center">
                                                        <span class="avatar-content">{{ $companyInitial }}</span>
                                                    </span>
                                                @endif
                                            </div>
                                            <div class="company-info" style="min-width: 0;">
                                                <h6 class="mb-0 text-truncate font-weight-bolder">{{ $ticket->company->name }}</h6>
                                                <small class="text-muted d-block text-truncate">{{ $ticket->company->city ?? 'Service Provider' }}</small>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <div class="card-footer bg-transparent border-top">
                                <label class="ticket-info-label text-muted d-block mb-1">INTERNAL ADMIN NOTES</label>
                                <textarea id="adminNotes" class="form-control mb-2" rows="3" placeholder="Private notes for staff..." style="resize: vertical;">{{ $ticket->admin_notes }}</textarea>
                                <button class="btn btn-sm btn-block btn-outline-primary" onclick="saveAdminNotes({{ $ticket->id }})">
                                    <i data-feather="save" class="mr-25" style="width: 14px;"></i> Save Private Notes
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Conversation/Messages Area -->
                    <div class="col-xl-8 col-lg-7 col-md-12">
                        <div class="card chat-app-window h-100">
                            <div class="card-header border-bottom bg-white">
                                <div class="w-100 d-flex justify-content-between align-items-center justify-content-between">
                                    <div>
                                        <h4 class="card-title mb-0">Conversation History</h4>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <span class="text-muted font-small-3">
                                            <i data-feather="clock" class="mr-1" style="width: 14px;"></i>
                                            Last Activity: {{ $ticket->last_message_at ? $ticket->last_message_at->diffForHumans() : 'N/A' }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body p-0">
                                <div class="user-chats" id="chatContainer">
                                    @forelse($ticket->messages as $message)
                                        @if($message->is_admin)
                                            <!-- Admin Message (Right) -->
                                            <div class="d-flex flex-column align-items-end mb-3">
                                                <div class="d-flex align-items-end mb-1">
                                                    <small class="font-weight-bolder mr-2 text-muted">Admin</small>
                                                    <span class="avatar avatar-sm bg-light-primary shadow-sm">
                                                        <span class="avatar-content">A</span>
                                                    </span>
                                                </div>
                                                <div class="chat-message" style="max-width: 70%;">
                                                    <p class="mb-0" style="white-space: pre-wrap; word-wrap: break-word;">{!! nl2br(e($message->message)) !!}</p>
                                                    @if($message->attachment_path)
                                                        @php $ext = pathinfo($message->attachment_path, PATHINFO_EXTENSION); @endphp
                                                        @if(in_array(strtolower($ext), ['jpg', 'jpeg', 'png', 'gif', 'webp']))
                                                            <div class="mt-1">
                                                                <img src="{{ asset($message->attachment_path) }}" class="image-attachment-preview" onclick="previewImage(this.src)" alt="Attachment">
                                                            </div>
                                                        @else
                                                            <div class="attachment-box">
                                                                <a href="{{ asset($message->attachment_path) }}" target="_blank" class="text-white font-small-3" style="display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none;">
                                                                    <i data-feather="paperclip" style="width: 14px;"></i>
                                                                    <span>{{ $message->attachment_name }}</span>
                                                                </a>
                                                            </div>
                                                        @endif
                                                    @endif
                                                </div>
                                                <small class="chat-time">{{ $message->created_at->format('M d, g:i A') }}</small>
                                            </div>
                                        @else
                                            <!-- Customer Message (Left) -->
                                            <div class="d-flex flex-column align-items-start mb-3">
                                                <div class="d-flex align-items-end mb-1">
                                                    <span class="avatar avatar-sm bg-light-secondary shadow-sm">
                                                        <span class="avatar-content">{{ $messageUserData[$message->id]['initial'] }}</span>
                                                    </span>
                                                    <small class="font-weight-bolder ml-2 text-muted">{{ $messageUserData[$message->id]['name'] }}</small>
                                                </div>
                                                <div class="chat-message" style="max-width: 70%;">
                                                    <p class="mb-0" style="white-space: pre-wrap; word-wrap: break-word;">{!! nl2br(e($message->message)) !!}</p>
                                                    @if($message->attachment_path)
                                                        @php $ext = pathinfo($message->attachment_path, PATHINFO_EXTENSION); @endphp
                                                        @if(in_array(strtolower($ext), ['jpg', 'jpeg', 'png', 'gif', 'webp']))
                                                            <div class="mt-1">
                                                                <img src="{{ asset($message->attachment_path) }}" class="image-attachment-preview" onclick="previewImage(this.src)" alt="Attachment">
                                                            </div>
                                                        @else
                                                            <div class="attachment-box">
                                                                <a href="{{ asset($message->attachment_path) }}" target="_blank" class="text-primary font-small-3" style="display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none;">
                                                                    <i data-feather="paperclip" style="width: 14px;"></i>
                                                                    <span>{{ $message->attachment_name }}</span>
                                                                </a>
                                                            </div>
                                                        @endif
                                                    @endif
                                                </div>
                                                <small class="chat-time">{{ $message->created_at->format('M d, g:i A') }}</small>
                                            </div>
                                        @endif
                                    @empty
                                        <div class="text-center text-muted py-5">
                                            <i data-feather="message-circle" style="width: 48px; height: 48px; opacity: 0.3;"></i>
                                            <p class="mt-2">No messages yet. Start the conversation!</p>
                                        </div>
                                    @endforelse
                                </div>

                                <!-- Reply Section -->
                                <div class="chat-app-form p-3">
                                    @if(!$ticket->isClosed())
                                        <form id="replyForm" enctype="multipart/form-data">
                                            @csrf
                                            <div class="mb-2">
                                                <label class="form-label font-weight-bolder text-muted small">Your Professional Reply</label>
                                                <textarea name="message" id="message" class="form-control" rows="3" placeholder="How can we help the customer today?" required style="resize: vertical;"></textarea>
                                            </div>
                                            <div class="row d-flex align-items-end">
                                                <div class="col-md-8 mb-2">
                                                    <label class="form-label text-muted font-small-3">Attach relevant documents (optional)</label>
                                                    <input type="file" name="attachment" id="attachment" class="dropify" data-height="80" data-default-file="" />
                                                </div>
                                                <div class="col-md-4 mb-0 d-flex align-items-end mb-3">
                                                    <button type="submit" class="btn btn-primary btn-block shadow-sm" id="sendReplyBtn">
                                                        <i data-feather="send" class="mr-1" style="width: 14px;"></i> Send Message
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    @else
                                        <div class="alert alert-light-warning py-3 mb-0 rounded">
                                            <div class="d-flex align-items-center">
                                                <i data-feather="lock" class="mr-1" style="width: 20px;"></i>
                                                <div>
                                                    <h6 class="alert-heading mb-1 font-weight-bolder">This ticket is archived</h6>
                                                    <p class="mb-0 font-small-3">This conversation has been closed and cannot be replied to. Re-open the ticket if further assistance is required.</p>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Back Button -->
                <div class="row mt-3">
                    <div class="col-12">
                        @if($ticket->ticket_type == 'user')
                            <a href="{{ route('admin.support.user.index') }}" class="btn btn-secondary">
                                <i data-feather="arrow-left"></i> Back to User Tickets
                            </a>
                        @else
                            <a href="{{ route('admin.support.company.index') }}" class="btn btn-secondary">
                                <i data-feather="arrow-left"></i> Back to Company Tickets
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Image Preview Modal -->
    <div class="modal fade" id="imagePreviewModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content bg-transparent border-0">
                <div class="modal-body p-0 text-center position-relative">
                    <button type="button" class="close text-white position-absolute" style="right: 15px; top: 15px; z-index: 10; opacity: 1; font-size: 2rem;" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <img src="" id="fullSizeImage" class="img-fluid rounded shadow-lg" style="max-height: 90vh;">
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
        $(document).ready(function() {
            // Initialize Dropify
            $('.dropify').dropify({
                messages: {
                    default: 'Drag and drop a file here or click',
                    replace: 'Drag and drop or click to replace',
                    remove: 'Remove',
                    error: 'Ooops, something wrong happened.'
                }
            });

            // Scroll to bottom of chats
            var chatContainer = document.getElementById("chatContainer");
            if(chatContainer) {
                setTimeout(function() {
                    chatContainer.scrollTop = chatContainer.scrollHeight;
                }, 100);
            }

            // Handle reply form submission
            $('#replyForm').on('submit', function(e) {
                e.preventDefault();
                e.stopPropagation();

                var $form = $(this);
                var $btn = $('#sendReplyBtn');
                var $messageBox = $('#message');
                var originalText = $btn.html();

                // Disable button and show loading
                $btn.html('<i class="spinner-border spinner-border-sm mr-1"></i> Sending...').prop('disabled', true);

                var formData = new FormData(this);
                $.ajax({
                    url: '/admin/support/{{ $ticket->id }}/reply',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    timeout: 30000,
                    success: function(response) {
                        if (response.success) {
                            var msg = response.data;
                            toastr.success(response.message);
                            // Construct message HTML
                            var attachmentHtml = '';
                            if (msg.attachment_path) {
                                var extension = msg.attachment_path.split('.').pop().toLowerCase();
                                var imageExts = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
                                
                                if (imageExts.includes(extension)) {
                                    attachmentHtml = `<div class="mt-1"><img src="${msg.attachment_path}" class="image-attachment-preview" onclick="previewImage(this.src)" alt="Attachment"></div>`;
                                } else {
                                    attachmentHtml = `<div class="attachment-box">
                                        <a href="${msg.attachment_path}" target="_blank" class="text-white font-small-3" style="display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none;">
                                            <i data-feather="paperclip" style="width: 14px;"></i>
                                            <span>${msg.attachment_name || 'Attachment'}</span>
                                        </a>
                                    </div>`;
                                }
                            }

                            var newMessageHtml = `
                                <div class="d-flex flex-column align-items-end mb-3 animated fadeIn">
                                    <div class="d-flex align-items-end mb-1">
                                        <small class="font-weight-bolder mr-2 text-muted">Admin</small>
                                        <span class="avatar avatar-sm bg-light-primary shadow-sm">
                                            <span class="avatar-content">A</span>
                                        </span>
                                    </div>
                                    <div class="chat-message" style="max-width: 70%;">
                                        <p class="mb-0" style="white-space: pre-wrap; word-wrap: break-word;">${msg.message.replace(/\n/g, '<br>')}</p>
                                        ${attachmentHtml}
                                    </div>
                                    <small class="chat-time">${msg.created_at}</small>
                                </div>
                            `;

                            // Append and scroll
                            $('#chatContainer').append(newMessageHtml);
                            
                            // Initialize feather icons for new content
                            if(typeof feather !== 'undefined') {
                                feather.replace();
                            }

                            // Auto scroll to bottom
                            var chatContainer = document.getElementById("chatContainer");
                            if(chatContainer) {
                                chatContainer.scrollTop = chatContainer.scrollHeight;
                            }

                            // Clear message and file input
                            $messageBox.val('');
                            
                            // Reset Dropify
                            try {
                                var drEvent = $('#attachment').dropify();
                                drEvent = drEvent.data('dropify');
                                if(drEvent) {
                                    drEvent.resetPreview();
                                    drEvent.clearElement();
                                }
                            } catch (err) {
                                console.warn('Dropify reset failed:', err);
                            }
                            
                            // Reset button
                            $btn.html(originalText).prop('disabled', false);
                        } else {
                            toastr.error(response.message || 'Failed to send message');
                            $btn.html(originalText).prop('disabled', false);
                        }
                    },
                    error: function(xhr) {
                        console.error('Error:', xhr);
                        var errorMsg = 'An error occurred while sending the message';

                        if(xhr.responseJSON) {
                            if(xhr.responseJSON.message) {
                                errorMsg = xhr.responseJSON.message;
                            } else if(xhr.responseJSON.errors) {
                                var firstError = Object.values(xhr.responseJSON.errors)[0];
                                if(Array.isArray(firstError)) {
                                    errorMsg = firstError[0];
                                } else {
                                    errorMsg = firstError;
                                }
                            }
                        } else if(xhr.statusText) {
                            errorMsg = xhr.statusText;
                        }

                        toastr.error(errorMsg);
                        $btn.html(originalText).prop('disabled', false);
                    }
                });

                return false;
            });
        });

        function updateTicketStatus(ticketId, status) {
            if (!confirm('Are you sure you want to change the status to ' + status + '?')) return;

            $.ajax({
                url: '/admin/support/' + ticketId + '/status',
                method: 'PUT',
                data: {
                    status: status,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message);
                        setTimeout(function() {
                            location.reload();
                        }, 500);
                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function(xhr) {
                    console.error('Error:', xhr);
                    var errorMsg = xhr.responseJSON?.message || 'An error occurred';
                    toastr.error(errorMsg);
                }
            });
        }

        function updateTicketPriority(ticketId, priority) {
            if (!confirm('Are you sure you want to change the priority to ' + priority + '?')) return;

            $.ajax({
                url: '/admin/support/' + ticketId + '/priority',
                method: 'PUT',
                data: {
                    priority: priority,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message);
                        setTimeout(function() {
                            location.reload();
                        }, 500);
                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function(xhr) {
                    console.error('Error:', xhr);
                    var errorMsg = xhr.responseJSON?.message || 'An error occurred';
                    toastr.error(errorMsg);
                }
            });
        }

        function saveAdminNotes(ticketId) {
            var notes = $('#adminNotes').val();
            var $btn = event.currentTarget;
            var originalText = $($btn).html();

            $($btn).html('<i class="spinner-border spinner-border-sm mr-1"></i> Saving...').prop('disabled', true);

            $.ajax({
                url: '/admin/support/' + ticketId + '/notes',
                method: 'PUT',
                data: {
                    admin_notes: notes,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message);
                        $($btn).html('<i data-feather="check" class="mr-1" style="width: 14px;"></i> Saved!');
                        setTimeout(function() {
                            $($btn).html(originalText).prop('disabled', false);
                            if(feather) feather.replace();
                        }, 1500);
                    } else {
                        toastr.error(response.message);
                        $($btn).html(originalText).prop('disabled', false);
                    }
                },
                error: function(xhr) {
                    console.error('Error:', xhr);
                    var errorMsg = xhr.responseJSON?.message || 'An error occurred';
                    toastr.error(errorMsg);
                    $($btn).html(originalText).prop('disabled', false);
                }
            });
        }

        function previewImage(src) {
            $('#fullSizeImage').attr('src', src);
            $('#imagePreviewModal').modal('show');
        }
    </script>
@endpush