@extends('layouts.app')

@section('title', 'Ticket #' . ($ticket->ticket_number ?? 'N/A'))

@section('content')
@if(!isset($ticket) || !$ticket->id)
    <div class="container-fluid py-4">
        <div class="alert alert-danger">
            <i class="fas fa-exclamation-triangle me-2"></i>
            Ticket not found. 
            <a href="{{ route('complaints.index') }}" class="alert-link">Return to tickets list</a>
        </div>
    </div>
    @php return; @endphp
@endif

<div class="container-fluid py-4" data-ticket-id="{{ $ticket->id }}">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-start">
                <div class="flex-grow-1">
                    <div class="d-flex align-items-center mb-2">
                        <div class="ticket-badge bg-primary text-white rounded px-3 py-2 me-3">
                            <i class="fas fa-ticket-alt me-2"></i>
                            <strong>TICKET #{{ $ticket->ticket_number }}</strong>
                        </div>
                        <div class="status-badge">
                            <span class="badge status-{{ $ticket->status }} px-3 py-2">
                                <i class="fas fa-{{ $ticket->status === 'open' ? 'clock' : ($ticket->status === 'in_progress' ? 'spinner' : ($ticket->status === 'resolved' ? 'check-circle' : 'archive')) }} me-1"></i>
                                {{ ucfirst(str_replace('_', ' ', $ticket->status)) }}
                            </span>
                        </div>
                    </div>
                    <h1 class="h3 mb-1 text-dark fw-bold">{{ $ticket->subject ?? 'No Subject' }}</h1>
                    <p class="text-muted mb-0">
                        <i class="fas fa-calendar me-1"></i>
                        Created {{ $ticket->created_at->format('F j, Y \a\t g:i A') }}
                        @if($ticket->updated_at->ne($ticket->created_at))
                            • Updated {{ $ticket->updated_at->format('F j, Y \a\t g:i A') }}
                        @endif
                    </p>
                </div>
                <div class="d-flex gap-2 flex-shrink-0">
                    <a href="{{ route('complaints.index') }}" class="btn btn-light border">
                        <i class="fas fa-arrow-left me-2"></i>Back
                    </a>
                    @if(auth()->user()->user_type === 'admin' || auth()->user()->user_type === 'lms_manager')
                        @if(!$ticket->assigned_to_user_id)
                            <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#assignTicketModal">
                                <i class="fas fa-user-plus me-1"></i> Assign
                            </button>
                        @endif
                        @if($ticket->status !== 'closed')
                            <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#closeTicketModal">
                                <i class="fas fa-lock me-1"></i> Close
                            </button>
                        @endif
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="row">
        <!-- Left Column - Main Content -->
        <div class="col-lg-8">
            <!-- Ticket Details Card -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-transparent border-bottom-0 py-4">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0 text-dark fw-bold">
                            <i class="fas fa-file-alt text-primary me-2"></i>
                            Ticket Details
                        </h5>
                        <div class="priority-badge">
                            <span class="badge priority-{{ $ticket->priority }} px-3 py-2">
                                <i class="fas fa-flag me-1"></i>
                                {{ ucfirst($ticket->priority) }} Priority
                            </span>
                        </div>
                    </div>
                </div>
                <div class="card-body pt-0">
                    <div class="ticket-content bg-light rounded-3 p-4 mb-4">
                        <p class="mb-0 text-dark fs-6 lh-base">{{ $ticket->description ?? 'No description provided.' }}</p>
                    </div>
                    
                    @if($ticket->attachment)
                        <div class="attachment-card border rounded-3 p-3 bg-white">
                            <div class="d-flex align-items-center">
                                <div class="attachment-icon bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 48px; height: 48px;">
                                    <i class="fas fa-paperclip fa-lg"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="mb-1 text-dark fw-semibold">Attachment Available</h6>
                                    <p class="mb-0 text-muted small">Click download to get the attached file</p>
                                </div>
                                <a href="{{ Storage::disk('public')->url($ticket->attachment) }}" class="btn btn-primary px-3" target="_blank">
                                    <i class="fas fa-download me-2"></i> Download
                                </a>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Conversation Section -->
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-transparent border-bottom-0 py-4">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0 text-dark fw-bold">
                            <i class="fas fa-comments text-primary me-2"></i>
                            Conversation
                            <span class="badge bg-primary ms-2">{{ $ticket->messages->count() }}</span>
                        </h5>
                        <div class="text-muted">
                            <small>
                                <i class="fas fa-sync-alt me-1"></i>
                                Last updated {{ $ticket->updated_at->format('M j, g:i A') }}
                            </small>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    <!-- Messages Container -->
                    <div class="messages-container p-4" style="max-height: 500px; overflow-y: auto;">
                        @forelse($ticket->messages as $message)
                            <div class="message-wrapper mb-4 {{ $message->sender_user_id === auth()->id() ? 'message-own' : '' }}">
                                <div class="d-flex {{ $message->sender_user_id === auth()->id() ? 'justify-content-end' : '' }}">
                                    <div class="message-bubble {{ $message->sender_user_id === auth()->id() ? 'bg-primary' : 'bg-light' }} rounded-3 p-3 position-relative shadow-sm" style="max-width: 70%;">
                                        <!-- Message Header -->
                                        <div class="d-flex justify-content-between align-items-start mb-2">
                                            <div class="d-flex align-items-center">
                                                <div class="user-avatar {{ $message->sender_user_id === auth()->id() ? 'bg-primary text-white' : 'bg-secondary text-white' }} rounded-circle me-2 d-flex align-items-center justify-content-center" style="width: 36px; height: 36px; font-weight: 600; font-size: 14px;">
                                                    {{ substr($message->sender->username ?? 'U', 0, 1) }}
                                                </div>
                                                <div>
                                                    <div class="d-flex align-items-center">
                                                        <strong class="{{ $message->sender_user_id === auth()->id() ? 'text-white' : 'text-dark' }} me-2">
                                                            {{ $message->sender->username ?? 'Unknown User' }}
                                                        </strong>
                                                        @if($message->is_system_message)
                                                            <span class="badge bg-info">System</span>
                                                        @elseif($message->is_resolution_note)
                                                            <span class="badge bg-success">Resolution</span>
                                                        @endif
                                                    </div>
                                                    <small class="text-{{ $message->sender_user_id === auth()->id() ? 'white-50' : 'muted' }}">
                                                        {{ $message->sender->user_type === 'student' ? 'Student' : ($message->sender->user_type === 'admin' ? 'Administrator' : 'LMS Manager') }}
                                                    </small>
                                                </div>
                                            </div>
                                            <small class="text-{{ $message->sender_user_id === auth()->id() ? 'white-50' : 'muted' }} text-nowrap ms-2">
                                                {{ $message->created_at->format('M j, g:i A') }}
                                            </small>
                                        </div>
                                        
                                        <!-- Message Body -->
                                        <div class="message-text {{ $message->sender_user_id === auth()->id() ? 'text-white' : 'text-dark' }} mb-2">
                                            {{ $message->message }}
                                        </div>
                                        
                                        <!-- Attachment -->
                                        @if($message->attachment)
                                            <div class="mt-3 pt-2 border-top border-{{ $message->sender_user_id === auth()->id() ? 'white-50' : 'muted' }}">
                                                <a href="{{ Storage::disk('public')->url($message->attachment) }}" class="btn btn-sm {{ $message->sender_user_id === auth()->id() ? 'btn-light text-primary' : 'btn-outline-primary' }} px-3" target="_blank">
                                                    <i class="fas fa-download me-1"></i> 
                                                    Download Attachment
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="text-center py-5">
                                <div class="empty-state-icon mb-3">
                                    <i class="fas fa-comments fa-4x text-muted opacity-50"></i>
                                </div>
                                <h5 class="text-muted mb-2">No messages yet</h5>
                                <p class="text-muted mb-0">Start the conversation by sending the first message</p>
                            </div>
                        @endforelse
                    </div>

                    <!-- Reply Form -->
                    @if($ticket->status !== 'closed')
                        <div class="border-top bg-light rounded-bottom-3 p-4">
                            <h6 class="text-dark mb-3 fw-semibold">
                                <i class="fas fa-reply me-2"></i>Send Reply
                            </h6>
                            <form action="{{ route('complaints.messages.store', $ticket->id) }}" method="POST" enctype="multipart/form-data" id="replyForm">
                                @csrf
                                <div class="mb-3">
                                    <textarea class="form-control border-0 shadow-sm" name="message" rows="4" placeholder="Type your message here..." required style="resize: none; border-radius: 12px;"></textarea>
                                </div>
                                <div class="mb-4">
                                    <label class="form-label text-dark mb-2 fw-semibold">
                                        <i class="fas fa-paperclip me-1"></i>Attachment (Optional)
                                    </label>
                                    <input type="file" class="form-control border-0 shadow-sm" name="attachment" style="border-radius: 12px;">
                                    <div class="form-text text-muted mt-1">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Maximum file size: 10MB. Supported formats: PDF, DOC, DOCX, JPG, PNG, ZIP
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <button type="submit" class="btn btn-primary px-4 py-2 fw-semibold" style="border-radius: 12px;">
                                        <i class="fas fa-paper-plane me-2"></i> Send Message
                                    </button>
                                    @if(auth()->user()->user_type !== 'student')
                                        <div class="d-flex gap-2">
                                            <button type="button" class="btn btn-outline-info quick-action-btn px-3 py-2" data-action="in_progress" style="border-radius: 12px;">
                                                <i class="fas fa-play-circle me-1"></i> In Progress
                                            </button>
                                            <button type="button" class="btn btn-outline-success quick-action-btn px-3 py-2" data-action="resolved" style="border-radius: 12px;">
                                                <i class="fas fa-check-circle me-1"></i> Resolved
                                            </button>
                                        </div>
                                    @endif
                                </div>
                            </form>
                        </div>
                    @else
                        <div class="border-top bg-light rounded-bottom-3 p-5 text-center">
                            <div class="closed-state-icon mb-3">
                                <i class="fas fa-lock fa-3x text-muted opacity-50"></i>
                            </div>
                            <h6 class="text-muted mb-2 fw-semibold">Ticket Closed</h6>
                            <p class="text-muted mb-0">This ticket is closed and cannot receive new messages</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Right Column - Sidebar -->
        <div class="col-lg-4">
            <!-- Quick Actions -->
            @if(auth()->user()->user_type !== 'student' && $ticket->status !== 'closed')
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-transparent border-bottom-0 py-4">
                    <h6 class="card-title mb-0 text-dark fw-bold">
                        <i class="fas fa-bolt text-warning me-2"></i>
                        Quick Actions
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-outline-info quick-action-btn py-2" data-action="in_progress" style="border-radius: 12px;">
                            <i class="fas fa-play-circle me-2"></i> Mark In Progress
                        </button>
                        <button type="button" class="btn btn-outline-success quick-action-btn py-2" data-action="resolved" style="border-radius: 12px;">
                            <i class="fas fa-check-circle me-2"></i> Mark Resolved
                        </button>
                        @if(!$ticket->assigned_to_user_id && auth()->user()->user_type === 'admin')
                            <button class="btn btn-outline-primary py-2" data-bs-toggle="modal" data-bs-target="#assignTicketModal" style="border-radius: 12px;">
                                <i class="fas fa-user-plus me-2"></i> Assign Ticket
                            </button>
                        @endif
                    </div>
                </div>
            </div>
            @endif

            <!-- Ticket Information -->
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-transparent border-bottom-0 py-4">
                    <h6 class="card-title mb-0 text-dark fw-bold">
                        <i class="fas fa-info-circle text-primary me-2"></i>
                        Ticket Information
                    </h6>
                </div>
                <div class="card-body">
                    <!-- Student Information -->
                    <div class="info-item mb-4 pb-3 border-bottom">
                        <label class="text-muted small mb-2 fw-semibold text-uppercase">Student</label>
                        <div class="d-flex align-items-center">
                            <div class="user-avatar bg-primary text-white rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; font-weight: 600;">
                                {{ substr($ticket->student->name ?? 'S', 0, 1) }}
                            </div>
                            <div>
                                <strong class="text-dark d-block">{{ $ticket->student->name ?? 'Unknown Student' }}</strong>
                                <small class="text-muted">{{ $ticket->student->user->email ?? 'No email' }}</small>
                            </div>
                        </div>
                    </div>

                    <!-- Assigned To -->
                    @if($ticket->assignedTo)
                    <div class="info-item mb-4 pb-3 border-bottom">
                        <label class="text-muted small mb-2 fw-semibold text-uppercase">Assigned To</label>
                        <div class="d-flex align-items-center">
                            <div class="user-avatar bg-success text-white rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; font-weight: 600;">
                                {{ substr($ticket->assignedTo->name, 0, 1) }}
                            </div>
                            <div>
                                <strong class="text-dark d-block">{{ $ticket->assignedTo->username }}</strong>
                                <small class="text-muted">LMS Manager</small>
                            </div>
                        </div>
                    </div>
                    @endif

                    <!-- Category -->
                    <div class="info-item mb-4 pb-3 border-bottom">
                        <label class="text-muted small mb-2 fw-semibold text-uppercase">Category</label>
                        <div class="text-dark fw-semibold">{{ $ticket->category ?? 'Uncategorized' }}</div>
                    </div>

                    <!-- Batch Information -->
                    @if($ticket->batch)
                    <div class="info-item mb-4 pb-3 border-bottom">
                        <label class="text-muted small mb-2 fw-semibold text-uppercase">Batch</label>
                        <div class="text-dark fw-semibold">
                            <i class="fas fa-users me-2 text-muted"></i>
                            {{ $ticket->batch->name }}
                        </div>
                    </div>
                    @endif

                    <!-- Dates -->
                    <div class="info-item mb-4 pb-3 border-bottom">
                        <label class="text-muted small mb-2 fw-semibold text-uppercase">Created Date</label>
                        <div class="text-dark fw-semibold">
                            <i class="fas fa-calendar me-2 text-muted"></i>
                            {{ $ticket->created_at->format('M j, Y') }}
                        </div>
                        <small class="text-muted">{{ $ticket->created_at->format('g:i A') }}</small>
                    </div>

                    @if($ticket->updated_at->ne($ticket->created_at))
                    <div class="info-item">
                        <label class="text-muted small mb-2 fw-semibold text-uppercase">Last Updated</label>
                        <div class="text-dark fw-semibold">
                            <i class="fas fa-clock me-2 text-muted"></i>
                            {{ $ticket->updated_at->format('M j, Y g:i A') }}
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modals -->
@include('complaints.models.assign')
@include('complaints.models.close')
@endsection

@section('styles')
<style>
    .ticket-badge {
        font-size: 0.9rem;
        font-weight: 600;
    }
    
    .status-open {
        background: linear-gradient(135deg, #f6c23e, #e74a3b);
        color: white;
    }
    
    .status-in_progress {
        background: linear-gradient(135deg, #36b9cc, #4e73df);
        color: white;
    }
    
    .status-resolved {
        background: linear-gradient(135deg, #1cc88a, #2e59d9);
        color: white;
    }
    
    .status-closed {
        background: linear-gradient(135deg, #858796, #5a5c69);
        color: white;
    }
    
    .priority-high {
        background: linear-gradient(135deg, #e74a3b, #be2617);
        color: white;
    }
    
    .priority-normal {
        background: linear-gradient(135deg, #4e73df, #2e59d9);
        color: white;
    }
    
    .priority-low {
        background: linear-gradient(135deg, #1cc88a, #17a673);
        color: white;
    }
    
    .card {
        border: none;
        box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1);
        border-radius: 16px;
    }
    
    .message-bubble {
        position: relative;
        border: none;
        transition: all 0.2s ease;
    }
    
    .message-bubble:hover {
        transform: translateY(-1px);
        box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15) !important;
    }
    
    .message-own .message-bubble {
        background: linear-gradient(135deg, #4e73df, #2e59d9);
    }
    
    .user-avatar {
        flex-shrink: 0;
        font-weight: 600;
    }
    
    .messages-container {
        scrollbar-width: thin;
        scrollbar-color: #c1c1c1 #f8f9fa;
    }
    
    .messages-container::-webkit-scrollbar {
        width: 8px;
    }
    
    .messages-container::-webkit-scrollbar-track {
        background: #f8f9fa;
        border-radius: 10px;
    }
    
    .messages-container::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 10px;
    }
    
    .messages-container::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
    
    .ticket-content {
        border-left: 4px solid #4e73df;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    }
    
    .attachment-card {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        border-left: 4px solid #1cc88a !important;
    }
    
    .attachment-icon {
        background: linear-gradient(135deg, #4e73df, #2e59d9);
    }
    
    .btn {
        border: none;
        font-weight: 500;
        transition: all 0.2s ease;
    }
    
    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
    }
    
    .form-control {
        border: none;
        transition: all 0.2s ease;
    }
    
    .form-control:focus {
        border: none;
        box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.1);
    }
    
    .badge {
        font-weight: 500;
        border: none;
    }
    
    .info-item:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .empty-state-icon, .closed-state-icon {
        opacity: 0.7;
    }
    
    .shadow-sm {
        box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1) !important;
    }
</style>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-scroll messages to bottom
    const messagesContainer = document.querySelector('.messages-container');
    if (messagesContainer) {
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }

    // Quick action buttons
    document.querySelectorAll('.quick-action-btn').forEach(button => {
        button.addEventListener('click', function() {
            const action = this.getAttribute('data-action');
            const actionText = action.replace('_', ' ');
            
            if (confirm(`Are you sure you want to mark this ticket as ${actionText}?`)) {
                updateTicketStatus(action);
            }
        });
    });

    // Update ticket status function
    function updateTicketStatus(status) {
        const ticketId = document.querySelector('[data-ticket-id]').getAttribute('data-ticket-id');
        
        fetch(`/complaints/${ticketId}/update-status`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            body: JSON.stringify({ 
                status: status,
                _token: '{{ csrf_token() }}'
            })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                showAlert('Ticket status updated successfully!', 'success');
                setTimeout(() => {
                    location.reload();
                }, 1500);
            } else {
                showAlert(data.message || 'Failed to update ticket status', 'danger');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('An error occurred. Please try again.', 'danger');
        });
    }

    // Show alert function
    function showAlert(message, type) {
        // Remove existing alerts
        const existingAlert = document.querySelector('.alert-dismissible');
        if (existingAlert) {
            existingAlert.remove();
        }

        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed top-0 start-50 translate-middle-x mt-3`;
        alertDiv.style.zIndex = '9999';
        alertDiv.style.borderRadius = '12px';
        alertDiv.innerHTML = `
            <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-triangle'} me-2"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        document.body.appendChild(alertDiv);
        
        // Auto-remove after 5 seconds
        setTimeout(() => {
            if (alertDiv.parentNode) {
                alertDiv.remove();
            }
        }, 5000);
    }

    // Form submission handling
    const replyForm = document.getElementById('replyForm');
    if (replyForm) {
        replyForm.addEventListener('submit', function(e) {
            const textarea = this.querySelector('textarea[name="message"]');
            if (textarea.value.trim() === '') {
                e.preventDefault();
                showAlert('Please enter a message before sending.', 'warning');
                textarea.focus();
            }
        });
    }

    // Auto-resize textarea
    const messageTextarea = document.querySelector('textarea[name="message"]');
    if (messageTextarea) {
        messageTextarea.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
        });
        
        // Initial resize
        setTimeout(() => {
            messageTextarea.style.height = 'auto';
            messageTextarea.style.height = (messageTextarea.scrollHeight) + 'px';
        }, 100);
    }

    // Add hover effects to message bubbles
    document.querySelectorAll('.message-bubble').forEach(bubble => {
        bubble.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-1px)';
            this.style.boxShadow = '0 0.25rem 0.75rem rgba(0, 0, 0, 0.15)';
        });
        
        bubble.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
            this.style.boxShadow = '';
        });
    });
});
</script>
@endsection