@extends('layouts.main')

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

@section('content')
    <!-- start page content -->
    <div class="row">
        <div class="col-sm-12">
            <div class="white-box-card">
                <div class="block-heading-panel d-flex align-items-center justify-content-between mb-4">
                    <div class="d-flex align-items-center gap-3">
                        <div class="heading-avatar text-dark" style="background: #E3F2FD;">
                            <i class="bx bx-ticket"></i>
                        </div>
                        <div class="block-heading">
                            <h3>{{ $ticket->subject }}</h3>
                            <h5 class="d-flex gap-2 align-items-center mb-0">
                                <span class="badge bg-secondary">{{ $ticket->unique_id }}</span>
                                <span class="badge {{ $ticket->status_badge_class }}">{{ $ticket->status_label }}</span>
                                <span class="badge {{ $ticket->type == 1 ? 'bg-primary' : 'bg-success' }}">{{ $ticket->type_label }}</span>
                            </h5>
                        </div>
                    </div>
                    <div class="d-flex gap-2">
                        @if(auth()->user()->hasRole('super-admin'))
                            <!-- Status Update Dropdown -->
                            <div class="dropdown">
                                <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" id="statusUpdateBtn">
                                    <i class="bx bx-cog"></i> Update Status
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item" href="#" onclick="updateTicketStatus(0); return false;" data-status="0">
                                            <span class="badge bg-warning me-2">Open</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#" onclick="updateTicketStatus(1); return false;" data-status="1">
                                            <span class="badge bg-info me-2">In Progress</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#" onclick="updateTicketStatus(2); return false;" data-status="2">
                                            <span class="badge bg-success me-2">Resolved</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#" onclick="updateTicketStatus(3); return false;" data-status="3">
                                            <span class="badge bg-secondary me-2">Closed</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        @endif

                        @if(auth()->user()->hasRole('company') && in_array($ticket->status, [2, 3]))
                            <button type="button" class="btn btn-warning" onclick="reopenTicket()" id="reopenBtn">
                                <i class="bx bx-refresh"></i> Reopen Ticket
                            </button>
                        @endif

                        <a href="{{ route('support.index') }}" class="btn btn-outline-secondary">
                            <i class="bx bx-arrow-back"></i> Back to List
                        </a>
                    </div>
                </div>

                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <!-- Ticket Info -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body">
                                <h6 class="card-title">Ticket Information</h6>
                                <div class="row">
                                    <div class="col-6">
                                        <small class="text-muted">Created:</small><br>
                                        <strong>{{ $ticket->created_at->format('M d, Y h:i A') }}</strong>
                                    </div>
                                    <div class="col-6">
                                        <small class="text-muted">Last Activity:</small><br>
                                        <strong>{{ $ticket->last_activity_at->diffForHumans() }}</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body">
                                <h6 class="card-title">Customer Information</h6>
                                <div class="d-flex align-items-center">
                                    <div class="avatar-sm rounded-circle bg-light me-3 d-flex align-items-center justify-content-center">
                                        <i class="bx bx-user"></i>
                                    </div>
                                    <div>
                                        <strong>{{ $ticket->user->name }}</strong><br>
                                        <small class="text-muted">{{ $ticket->user->email }}</small>
                                        @if($ticket->user->company)
                                            <br><small class="text-muted">{{ $ticket->user->company }}</small>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Chat Thread -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="bx bx-chat me-2"></i>Conversation</h5>
                    </div>
                    <div class="card-body p-0">
                        <div class="chat-thread" style="max-height: 600px; overflow-y: auto; padding: 20px;">
                            @foreach($ticket->threads as $thread)
                                @php
                                    $isCurrentUser = $thread->added_by === auth()->id();
                                    $isSupport = $thread->user->hasRole('super-admin');
                                @endphp
                                <div class="thread-item mb-3">
                                    <div class="d-flex {{ $isCurrentUser ? 'justify-content-end' : 'justify-content-start' }}">
                                        <div class="thread-content {{ $isCurrentUser ? 'current-user-content' : 'other-user-content' }}" style="max-width: 70%;">
                                            
                                            <!-- Message Bubble -->
                                            <div class="message-bubble {{ $isCurrentUser ? 'current-user-message' : ($isSupport ? 'support-message' : 'other-user-message') }} p-3 rounded-3 shadow-sm">
                                                <div class="message-text">
                                                    {!! $thread->description !!}
                                                </div>
                                                
                                                <!-- Thread Attachments -->
                                                @if($thread->files->count() > 0)
                                                    <div class="thread-attachments mt-2 pt-2 border-top">
                                                        <small class="text-muted d-block mb-2"><i class="bx bx-paperclip"></i> Attachments:</small>
                                                        <div class="attachments-list">
                                                            @foreach($thread->files as $file)
                                                                <div class="attachment-item d-inline-block me-2 mb-1">
                                                                    <a href="{{ route('support.download', $file->id) }}" 
                                                                       class="btn btn-sm {{ $isCurrentUser ? 'btn-outline-light' : 'btn-outline-primary' }}" 
                                                                       title="Download {{ $file->name }}">
                                                                        @if(str_contains($file->mime_type, 'image'))
                                                                            <i class="bx bx-image"></i>
                                                                        @elseif(str_contains($file->mime_type, 'pdf'))
                                                                            <i class="bx bx-file-pdf"></i>
                                                                        @elseif(str_contains($file->mime_type, 'zip'))
                                                                            <i class="bx bx-archive"></i>
                                                                        @else
                                                                            <i class="bx bx-file"></i>
                                                                        @endif
                                                                        {{ Str::limit($file->name, 15) }}
                                                                    </a>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>

                                            <!-- Message Info -->
                                            <div class="message-info d-flex align-items-center mt-1 {{ $isCurrentUser ? 'justify-content-end' : 'justify-content-start' }}">
                                                @if(!$isCurrentUser)
                                                    <div class="avatar-xs rounded-circle {{ $isSupport ? 'bg-primary' : 'bg-success' }} text-white me-2 d-flex align-items-center justify-content-center">
                                                        <i class="bx {{ $isSupport ? 'bx-support' : 'bx-user' }}" style="font-size: 10px;"></i>
                                                    </div>
                                                @endif
                                                <small class="text-muted">
                                                    @if($isCurrentUser)
                                                        {{ $thread->created_at->format('M d, h:i A') }}
                                                    @else
                                                        <strong>{{ $isSupport ? 'Support Team' : $thread->user->name }}</strong> • {{ $thread->created_at->format('M d, h:i A') }}
                                                    @endif
                                                </small>
                                                @if($isCurrentUser)
                                                    <div class="avatar-xs rounded-circle bg-secondary text-white ms-2 d-flex align-items-center justify-content-center">
                                                        <i class="bx bx-user" style="font-size: 10px;"></i>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <!-- Reply Form -->
                @if(!in_array($ticket->status, [3]) || auth()->user()->hasRole('super-admin'))
                <div class="card" id="replyFormCard">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="bx bx-reply me-2"></i>Add Reply</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('support.add-thread', $ticket->unique_id) }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="mb-3">
                                <label for="reply_description" class="form-label">Your Reply <span class="text-danger">*</span></label>
                                <textarea class="form-control editor @error('description') is-invalid @enderror" 
                                          id="reply_description" 
                                          name="description" 
                                          rows="6"
                                          placeholder="Type your reply here...">{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="reply_attachments" class="form-label">Attachments</label>
                                <input type="file" 
                                       class="form-control @error('attachments.*') is-invalid @enderror" 
                                       id="reply_attachments" 
                                       name="attachments[]" 
                                       multiple
                                       accept=".jpg,.jpeg,.png,.pdf,.zip">
                                <div class="form-text">
                                    You can upload multiple files (JPG, PNG, PDF, ZIP only). Maximum size: 10MB per file.
                                </div>
                                @error('attachments.*')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary">
                                    <i class="bx bx-send"></i> Send Reply
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script src="{{ asset('/libs/tinymce/tinymce.min.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize TinyMCE
    tinymce.init({
        selector:'.editor',
        theme: "modern",
        height: 300,
        plugins: [
            "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
            "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
            "save table contextmenu directionality emoticons template paste textcolor"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons",
        style_formats: [
            {title: 'Bold text', inline: 'b'},
            {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
            {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
            {title: 'Example 1', inline: 'span', classes: 'example1'},
            {title: 'Example 2', inline: 'span', classes: 'example2'},
            {title: 'Table styles'},
            {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
        ],
        init_instance_callback: function (editor) {
            console.log('TinyMCE editor initialized for: ' + editor.id);
        }
    });

    // Auto-scroll to bottom of chat thread
    const chatThread = document.querySelector('.chat-thread');
    if (chatThread) {
        chatThread.scrollTop = chatThread.scrollHeight;
    }

    // File upload preview for reply
    const replyFileInput = document.getElementById('reply_attachments');
    const replyFilePreview = document.createElement('div');
    replyFilePreview.className = 'mt-2';
    replyFileInput.parentNode.appendChild(replyFilePreview);

    replyFileInput.addEventListener('change', function(e) {
        replyFilePreview.innerHTML = '';
        
        if (e.target.files.length > 0) {
            const fileList = document.createElement('div');
            fileList.className = 'border rounded p-2 bg-light';
            
            Array.from(e.target.files).forEach(file => {
                const fileItem = document.createElement('div');
                fileItem.className = 'd-flex align-items-center justify-content-between p-2 border-bottom';
                fileItem.innerHTML = `
                    <div class="d-flex align-items-center">
                        <i class="bx bx-file me-2"></i>
                        <span>${file.name}</span>
                        <small class="text-muted ms-2">(${(file.size / 1024 / 1024).toFixed(2)} MB)</small>
                    </div>
                `;
                fileList.appendChild(fileItem);
            });
            
            replyFilePreview.appendChild(fileList);
        }
    });
});

// AJAX function to update ticket status
function updateTicketStatus(status) {
    const statusUpdateBtn = document.getElementById('statusUpdateBtn');
    const originalText = statusUpdateBtn.innerHTML;
    
    // Close dropdown immediately to prevent multiple clicks
    const dropdownElement = statusUpdateBtn.closest('.dropdown');
    const dropdownMenu = dropdownElement.querySelector('.dropdown-menu');
    if (dropdownMenu.classList.contains('show')) {
        dropdownMenu.classList.remove('show');
        statusUpdateBtn.setAttribute('aria-expanded', 'false');
    }
    
    // Show loading state
    statusUpdateBtn.innerHTML = '<i class="bx bx-loader-alt bx-spin"></i> Updating...';
    statusUpdateBtn.disabled = true;
    
    // Make AJAX request
    fetch(`{{ route('support.update-status', $ticket->unique_id) }}`, {
        method: 'PATCH',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: JSON.stringify({
            status: status
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Update status badge in the UI
            const statusBadge = document.querySelector('.block-heading h5 .badge:nth-child(2)');
            statusBadge.className = `badge ${data.status_badge_class}`;
            statusBadge.textContent = data.status_label;
            
            // Show success message
            showAlert('success', data.message);
            
            // Update reopen button visibility
            updateReopenButtonVisibility(status);
            
            // Update reply form visibility based on status
            updateReplyFormVisibility(status);
        } else {
            showAlert('error', data.message || 'Failed to update ticket status');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('error', 'An error occurred while updating the ticket status');
    })
    .finally(() => {
        // Restore button state
        statusUpdateBtn.innerHTML = originalText;
        statusUpdateBtn.disabled = false;
    });
}

// AJAX function to reopen ticket
function reopenTicket() {
    const reopenBtn = document.getElementById('reopenBtn');
    const originalText = reopenBtn.innerHTML;
    
    // Show loading state
    reopenBtn.innerHTML = '<i class="bx bx-loader-alt bx-spin"></i> Reopening...';
    reopenBtn.disabled = true;
    
    // Make AJAX request
    fetch(`{{ route('support.reopen', $ticket->unique_id) }}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Update status badge in the UI
            const statusBadge = document.querySelector('.block-heading h5 .badge:nth-child(2)');
            statusBadge.className = `badge ${data.status_badge_class}`;
            statusBadge.textContent = data.status_label;
            
            // Hide reopen button
            reopenBtn.style.display = 'none';
            
            // Show reply form since ticket is now open (status 0)
            updateReplyFormVisibility(0);
            
            // Show success message
            showAlert('success', data.message);
        } else {
            showAlert('error', data.message || 'Failed to reopen ticket');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('error', 'An error occurred while reopening the ticket');
    })
    .finally(() => {
        // Restore button state
        reopenBtn.innerHTML = originalText;
        reopenBtn.disabled = false;
    });
}

// Helper function to show alerts
function showAlert(type, message) {
    // Remove existing alerts
    const existingAlerts = document.querySelectorAll('.alert');
    existingAlerts.forEach(alert => alert.remove());
    
    // Create new alert
    const alertDiv = document.createElement('div');
    const alertClass = type === 'success' ? 'success' : type === 'info' ? 'info' : 'danger';
    alertDiv.className = `alert alert-${alertClass} alert-dismissible fade show`;
    alertDiv.setAttribute('role', 'alert');
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    `;
    
    // Insert after the block heading panel
    const blockHeading = document.querySelector('.block-heading-panel');
    blockHeading.parentNode.insertBefore(alertDiv, blockHeading.nextSibling);
    
    // Auto-hide after 5 seconds
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.remove();
        }
    }, 5000);
}

// Helper function to update reopen button visibility
function updateReopenButtonVisibility(status) {
    const reopenBtn = document.getElementById('reopenBtn');
    if (reopenBtn) {
        // Show reopen button only for resolved (2) or closed (3) status for company users
        if (status === 2 || status === 3) {
            reopenBtn.style.display = 'inline-block';
        } else {
            reopenBtn.style.display = 'none';
        }
    }
}

// Helper function to update reply form visibility
function updateReplyFormVisibility(status) {
    const replyFormCard = document.getElementById('replyFormCard');
    const userRole = '{{ auth()->user()->roles->first()->name ?? "" }}';
    
    if (replyFormCard) {
        // Super admin can always reply
        if (userRole === 'super-admin') {
            replyFormCard.style.display = 'block';
            animateFormShow(replyFormCard);
            return;
        }
        
        // For company users: show form for Open (0), In Progress (1), Resolved (2)
        // Hide form for Closed (3)
        if (status === 0 || status === 1 || status === 2) {
            const wasHidden = replyFormCard.style.display === 'none';
            replyFormCard.style.display = 'block';
            animateFormShow(replyFormCard);
            
            // Show notification if form was previously hidden
            if (wasHidden) {
                showAlert('success', 'You can now reply to this ticket!');
            }
        } else if (status === 3) {
            animateFormHide(replyFormCard);
            showAlert('info', 'Ticket is now closed. Replies are disabled.');
        }
    }
}

// Helper function to animate form showing
function animateFormShow(element) {
    element.style.opacity = '0';
    element.style.transform = 'translateY(-20px)';
    element.style.display = 'block';
    
    // Trigger animation
    setTimeout(() => {
        element.style.transition = 'all 0.3s ease-out';
        element.style.opacity = '1';
        element.style.transform = 'translateY(0)';
        
        // Scroll to form after animation
        setTimeout(() => {
            element.scrollIntoView({ 
                behavior: 'smooth', 
                block: 'start',
                inline: 'nearest'
            });
        }, 150);
    }, 10);
}

// Helper function to animate form hiding
function animateFormHide(element) {
    element.style.transition = 'all 0.3s ease-out';
    element.style.opacity = '0';
    element.style.transform = 'translateY(-20px)';
    
    // Hide after animation
    setTimeout(() => {
        element.style.display = 'none';
    }, 300);
}
</script>

<style>
.chat-thread {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 10px;
}

.thread-item {
    position: relative;
}

.message-bubble {
    position: relative;
    word-wrap: break-word;
    transition: all 0.2s ease;
}

.message-bubble:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Current user messages (right side) */
.current-user-message {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    margin-left: 20px;
}

.current-user-message::before {
    content: '';
    position: absolute;
    top: 15px;
    right: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid #667eea;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

/* Support team messages (left side) */
.support-message {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    margin-right: 20px;
}

.support-message::before {
    content: '';
    position: absolute;
    top: 15px;
    left: -8px;
    width: 0;
    height: 0;
    border-right: 8px solid #f093fb;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

/* Other user messages (left side) */
.other-user-message {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    color: #333;
    margin-right: 20px;
}

.other-user-message::before {
    content: '';
    position: absolute;
    top: 15px;
    left: -8px;
    width: 0;
    height: 0;
    border-right: 8px solid #a8edea;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

/* Message text styling */
.message-text p {
    margin-bottom: 0;
}

.message-text p:not(:last-child) {
    margin-bottom: 8px;
}

/* Avatar styling */
.avatar-xs {
    width: 20px;
    height: 20px;
    font-size: 10px;
}

/* Message info styling */
.message-info {
    opacity: 0.8;
    font-size: 11px;
}

/* Attachment styling */
.attachment-item {
    transition: all 0.2s ease;
}

.attachment-item:hover {
    transform: translateY(-1px);
}

.current-user-message .btn-outline-light {
    border-color: rgba(255,255,255,0.3);
    color: white;
}

.current-user-message .btn-outline-light:hover {
    background-color: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.5);
    color: white;
}

/* Scrollbar styling */
.chat-thread::-webkit-scrollbar {
    width: 6px;
}

.chat-thread::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.chat-thread::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.chat-thread::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Animation for new messages */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.thread-item {
    animation: slideInUp 0.3s ease-out;
}

/* Responsive design */
@media (max-width: 768px) {
    .thread-content {
        max-width: 85% !important;
    }
    
    .message-bubble {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
}

/* Loading states */
.btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Dropdown animations */
.dropdown-menu {
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.dropdown-menu:not(.show) {
    opacity: 0;
    visibility: hidden;
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
}

/* Smooth status badge transitions */
.badge {
    transition: all 0.3s ease;
}

/* Reply form animations */
#replyFormCard {
    transition: all 0.3s ease-out;
}

#replyFormCard.hiding {
    opacity: 0;
    transform: translateY(-20px);
}

#replyFormCard.showing {
    opacity: 1;
    transform: translateY(0);
}

.bx-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Alert animations */
.alert {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
@endsection