@extends('student.layouts.app')

@section('content')
<div class="flex flex-col h-[calc(100vh-120px)] relative">
            <!-- STICKY PREMIUM CHAT HEADER -->
    <div class="sticky top-20 z-50 bg-slate-50 py-4 mb-6 px-1 shadow-sm">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <!-- Back Button -->
                <a href="{{ route('student.chats.list', ['slug' => session('student_school_slug')]) }}" class="w-10 h-10 flex items-center justify-center rounded-full bg-white border border-slate-200 text-slate-400 hover:text-indigo-600 hover:border-indigo-300 transition-all shadow-sm">
                    <i class="fa-solid fa-arrow-left text-lg"></i>
                </a>
                
                <div class="flex items-center gap-3">
                    <!-- Premium Avatar -->
                    <div class="relative">
                        <div class="w-11 h-11 rounded-full bg-indigo-600 text-white flex items-center justify-center font-bold shadow-md border-2 border-white ring-2 ring-indigo-100">
                            S
                        </div>
                        <!-- Online Status Dot -->
                        <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></div>
                    </div>
                    
                    <div class="flex flex-col">
                        <h4 class="text-sm font-extrabold text-slate-800 leading-tight">School Admin</h4>
                        <div class="flex items-center gap-1">
                            <span class="text-[10px] text-green-500 font-bold uppercase tracking-wider">Active Session</span>
                        </div>
                    </div>
                </div>
            </div>

                        <!-- Start New Chat Button -->
            <button id="open-modal-btn" class="flex items-center gap-1.5 px-3 py-1.5 bg-white border border-slate-200 text-indigo-600 rounded-full text-[10px] font-bold shadow-sm hover:bg-indigo-50 hover:border-indigo-300 active:scale-95 transition-all">
                <i class="fa-solid fa-plus text-[12px]"></i>
                <span>New Chat</span>
            </button>
        </div>
    </div>


    <!-- Messages Area -->
    <div id="chat-window" class="flex-1 overflow-y-auto px-1 space-y-6" style="max-height: calc(100vh - 250px);">
        @include('student.chat_messages')
    </div>

    <!-- Input Area -->
    <div class="fixed bottom-16 left-0 right-0 px-4 z-40">
        <input type="file" id="file-input" class="hidden" accept="image/jpeg,image/jpg,image/png,image/gif,image/webp,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" onchange="uploadFile()">

        <form id="chat-form" class="max-w-md mx-auto flex items-end gap-2 bg-white p-2 rounded-2xl border border-slate-200 shadow-2xl">
            @csrf
            <button type="button" onclick="document.getElementById('file-input').click()" class="w-10 h-10 rounded-full bg-slate-100 text-slate-500 flex items-center justify-center hover:bg-slate-200 transition-all">
                <i class="fa-solid fa-paperclip text-sm"></i>
            </button>
            <textarea id="message_input" name="message" placeholder="Type message..." 
                class="flex-1 px-3 py-2 bg-transparent text-sm outline-none resize-none max-h-32 overflow-y-auto" 
                rows="1" style="resize: none;"></textarea>
            <button type="submit" class="w-10 h-10 rounded-full bg-indigo-600 text-white flex items-center justify-center hover:bg-indigo-700 transition-all shadow-md">
                <i class="fa-solid fa-paper-plane text-xs"></i>
            </button>
        </form>
    </div>

    <!-- WORLD CLASS 3D MODAL -->
    <div id="custom-modal" class="fixed inset-0 z-[100] hidden flex items-center justify-center px-6">
        <!-- Backdrop blur -->
        <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm"></div>
        
        <!-- Modal Box -->
        <div class="relative bg-white w-full max-w-xs rounded-3xl shadow-[0_20px_50px_rgba(0,0,0,0.3)] p-8 text-center transform transition-all scale-90 opacity-0" id="modal-content">
            <div class="w-16 h-16 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center mx-auto mb-4 shadow-inner">
                <i class="fa-solid fa-message text-2xl"></i>
            </div>
        <h3 class="text-lg font-bold text-slate-800 mb-2">Start New Chat?</h3>
            <p class="text-sm text-slate-500 mb-6">This will create a brand new conversation. Your old chats will remain in your chat list.</p>
            
            <div class="flex flex-col gap-3">
                <button id="confirm-new-chat" class="w-full py-3 bg-indigo-600 text-white rounded-xl font-bold shadow-[0_4px_0_rgb(49,46,129)] active:shadow-none active:translate-y-1 transition-all">
                    Yes, Start New Chat
                </button>
            </div>
        </div>
    </div>

    <!-- LUXURY 3D ERROR MODAL -->
<div id="luxury-error-modal" class="fixed inset-0 z-[100] hidden items-center justify-center">
    <div class="absolute inset-0 bg-slate-900/70 backdrop-blur-sm transition-opacity" onclick="closeStudentLuxuryError()"></div>
    <div class="relative bg-white w-full max-w-sm mx-4 rounded-3xl shadow-2xl p-8 text-center transform transition-all scale-95 opacity-0" id="student-luxury-modal-content">
        <div class="relative mx-auto mb-6">
            <div class="absolute inset-0 bg-red-500/20 rounded-full blur-xl animate-pulse"></div>
            <div class="relative w-20 h-20 bg-gradient-to-br from-red-400 to-red-600 rounded-full flex items-center justify-center mx-auto shadow-lg shadow-red-500/30 transform hover:scale-110 transition-transform">
                <i class="fa-solid fa-triangle-exclamation text-3xl text-white drop-shadow-lg"></i>
            </div>
        </div>
        <h3 class="text-xl font-black text-slate-800 mb-2 tracking-tight">File Not Supported</h3>
        <p class="text-sm text-slate-500 mb-6 leading-relaxed" id="student-luxury-error-message">
            This file format is not allowed. Please upload images, PDF, Word, or Excel files only.
        </p>
        <button onclick="closeStudentLuxuryError()" class="w-full py-3.5 bg-gradient-to-r from-slate-800 to-slate-900 text-white rounded-2xl font-bold text-sm hover:from-slate-700 hover:to-slate-800 transition-all shadow-lg shadow-slate-900/20 active:scale-95">
            Got it
        </button>
    </div>
</div>
</div>



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function scrollToBottom() {
        const chatWindow = document.getElementById('chat-window');
        if (chatWindow) { chatWindow.scrollTop = chatWindow.scrollHeight; }
    }

    const tx = document.getElementById('message_input');
    tx.addEventListener("input", function() {
        this.style.height = "auto";
        this.style.height = (this.scrollHeight) + "px";
    }, false);

    $(document).ready(function() {
        setTimeout(scrollToBottom, 100);

        setInterval(function() {
            $.ajax({
                url: "{{ route('student.chat.messages', ['slug' => session('student_school_slug')]) }}",
                method: 'GET',
                success: function(html) {
                    if (html !== $('#chat-window').html()) {
                        $('#chat-window').html(html);
                        scrollToBottom();
                    }
                }
            });
        }, 3000);

        $('#message_input').on('keydown', function(e) {
            if (e.which == 13 && !e.shiftKey) {
                e.preventDefault();
                $('#chat-form').submit();
            }
        });

        $('#chat-form').on('submit', function(e) {
            e.preventDefault();
            const messageInput = $('#message_input');
            const msg = messageInput.val();
            if (!msg.trim()) return;

            $.ajax({
                url: "{{ route('student.chat.send', ['slug' => session('student_school_slug')]) }}",
                method: 'POST',
                data: { _token: "{{ csrf_token() }}", message: msg },
                success: function() {
                    messageInput.val('');
                    // ✅ FORCE RESET HEIGHT
                    messageInput.css('height', 'auto'); 
                    $.get("{{ route('student.chat.messages', ['slug' => session('student_school_slug')]) }}", function(html) {
                        $('#chat-window').html(html);
                        scrollToBottom();
                    });
                }
            });
        });


        // MODAL LOGIC
        $('#open-modal-btn').on('click', function() {
            $('#custom-modal').removeClass('hidden');
            setTimeout(() => {
                $('#modal-content').addClass('scale-100 opacity-100').removeClass('scale-90 opacity-0');
            }, 10);
        });

        $('#close-modal').on('click', function() {
            $('#modal-content').addClass('scale-90 opacity-0').removeClass('scale-100 opacity-100');
            setTimeout(() => { $('#custom-modal').addClass('hidden'); }, 200);
        });

               $('#confirm-new-chat').on('click', function() {
            const btn = $(this);
            btn.prop('disabled', true).text('Creating...'); // Feedback

            $.ajax({
                url: "{{ route('student.chat.new', ['slug' => session('student_school_slug')]) }}",
                method: 'POST',
                data: { _token: "{{ csrf_token() }}" },
                success: function(res) { 
                    if(res.success && res.id) {
                        // Force a hard redirect to the new conversation ID
                        window.location.href = "/school/{{ session('student_school_slug') }}/student/chat/" + res.id;
                    } else {
                        alert("Error creating chat.");
                        btn.prop('disabled', false).text('Yes, Start New Chat');
                    }
                },
                error: function() {
                    alert("Server error occurred.");
                    btn.prop('disabled', false).text('Yes, Start New Chat');
                }
            });
        });

    });

        function uploadFile() {
        const fileInput = document.getElementById('file-input');
        const file = fileInput.files[0];
        if (!file) return;

        // Client-side validation before upload
        const allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'pdf', 'doc', 'docx', 'xls', 'xlsx'];
        const extension = file.name.split('.').pop().toLowerCase();
        
        if (!allowedExtensions.includes(extension)) {
            showStudentLuxuryError('This file format is not supported. Please upload images (JPG, PNG, GIF, WEBP), PDF, Word (DOC/DOCX), or Excel (XLS/XLSX) files only.');
            fileInput.value = '';
            return;
        }

        if (file.size > 5 * 1024 * 1024) {
            showStudentLuxuryError('File is too large! Maximum allowed size is 5MB.');
            fileInput.value = '';
            return;
        }

        const formData = new FormData();
        formData.append('attachment', file);
        formData.append('_token', "{{ csrf_token() }}");
        
        const btn = document.querySelector('.fa-paperclip').parentElement;
        btn.classList.add('animate-spin', 'bg-indigo-100');
        
        $.ajax({
            url: "{{ route('student.chat.upload', ['slug' => session('student_school_slug')]) }}",
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                btn.classList.remove('animate-spin', 'bg-indigo-100');
                fileInput.value = '';
                $.get("{{ route('student.chat.messages', ['slug' => session('student_school_slug')]) }}", function(html) {
                    $('#chat-window').html(html);
                    scrollToBottom();
                });
            },
            error: function(xhr) {
                btn.classList.remove('animate-spin', 'bg-indigo-100');
                fileInput.value = '';
                
                // Use luxury error modal instead of alert
                const errorMsg = xhr.responseJSON?.error || "Upload failed. Please try again.";
                showStudentLuxuryError(errorMsg);
            }
        });
    }

    function showStudentLuxuryError(message) {
        const modal = document.getElementById('luxury-error-modal');
        const content = document.getElementById('student-luxury-modal-content');
        const msgEl = document.getElementById('student-luxury-error-message');
        
        if (message) msgEl.textContent = message;
        
        modal.classList.remove('hidden');
        modal.classList.add('flex');
        
        setTimeout(() => {
            content.classList.remove('scale-95', 'opacity-0');
            content.classList.add('scale-100', 'opacity-100');
        }, 10);
    }

    function closeStudentLuxuryError() {
        const modal = document.getElementById('luxury-error-modal');
        const content = document.getElementById('student-luxury-modal-content');
        
        content.classList.remove('scale-100', 'opacity-100');
        content.classList.add('scale-95', 'opacity-0');
        
        setTimeout(() => {
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }, 200);
    }
</script>
@endsection