@extends('school.layouts.app')

@section('content')
<!-- NEW - Full height responsive layout -->
<div class="flex h-[calc(100vh-80px)] lg:h-[calc(100vh-60px)] bg-white rounded-3xl border border-slate-200 overflow-hidden shadow-sm">
    
    <!-- LEFT SIDE: CHAT LIST -->
    <div class="w-full lg:w-1/3 border-r border-slate-100 flex flex-col bg-white h-full">
        <!-- PREMIUM FILTER SECTION -->
        <div class="bg-white p-3 lg:p-4 rounded-3xl border border-slate-200 shadow-sm mb-4 lg:mb-6 sticky top-0 z-30">
            <form id="filter-form" action="{{ route('school.communication.chats') }}" method="GET" class="space-y-2 lg:space-y-3">

                <!-- ROW 1: QUICK FILTER | SEARCH -->
                <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
                    <div class="flex-1 min-w-0">
                        <select name="filter" onchange="this.form.submit()" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none focus:border-indigo-500 transition-all">
                            <option value="">All Conversations</option>
                            <option value="student" {{ request('filter') == 'student' ? 'selected' : '' }}>Student</option>
                            <option value="teacher" {{ request('filter') == 'teacher' ? 'selected' : '' }}>Teacher</option>
                        </select>
                    </div>
                    <div class="flex-[2] flex items-center bg-white border border-slate-200 rounded-xl px-3 py-1 focus-within:ring-2 focus-within:ring-indigo-500 transition-all min-w-0">
                        <i class="fa-solid fa-magnifying-glass text-slate-400 text-xs shrink-0"></i>
                        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search Name or Adm No..." class="flex-1 px-3 py-2 text-xs outline-none bg-transparent min-w-0" oninput="debounceSubmit()">
                    </div>
                </div>

                <!-- ROW 2: SESSION | CLASS | SECTION -->
                <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
                    <div class="flex-1 min-w-0">
                        <select name="session" onchange="this.form.submit()" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none focus:border-indigo-500 transition-all">
                            <option value="">All Sessions</option>
                            @foreach($sessions as $sess) 
                                <option value="{{ $sess->id }}" {{ $selectedSession == $sess->id ? 'selected' : '' }}>{{ $sess->session_name }}</option> 
                            @endforeach
                        </select>
                    </div>
                    <div class="flex-1 min-w-0">
                        <select name="class" id="class-dropdown" onchange="handleClassChange(this.value)" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none focus:border-indigo-500 transition-all">
                            <option value="">Select Class</option>
                            @foreach($classes as $c) 
                                <option value="{{ $c->id }}" {{ request('class') == $c->id ? 'selected' : '' }}>{{ $c->name }}</option> 
                            @endforeach
                        </select>
                    </div>
                    <div class="flex-1 min-w-0">
                        <select name="section" id="section-dropdown" onchange="this.form.submit()" 
                            {{ empty(request('class')) ? 'disabled' : '' }} 
                            class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none focus:border-indigo-500 transition-all {{ empty(request('class')) ? 'opacity-50 cursor-not-allowed' : '' }}">
                            <option value="">All Sections</option>
                            @foreach($sections as $s) 
                                <option value="{{ $s->id }}" {{ request('section') == $s->id ? 'selected' : '' }}>{{ $s->name }}</option> 
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- ROW 3: DATE FILTER & UNREAD BUTTON -->
                <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-2 pt-2 border-t border-slate-100">
                    <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 flex-wrap">
                        <select name="date_filter" onchange="toggleCustomDate(this.value); this.form.submit()" class="px-3 py-2 text-[10px] font-bold rounded-xl border border-slate-200 outline-none bg-white text-slate-600 shrink-0">
                            <option value="">All Dates</option>
                            <option value="today" {{ request('date_filter') == 'today' ? 'selected' : '' }}>Today</option>
                            <option value="week" {{ request('date_filter') == 'week' ? 'selected' : '' }}>This Week</option>
                            <option value="custom" {{ request('date_filter') == 'custom' ? 'selected' : '' }}>Custom Range</option>
                        </select>

                        <div id="custom_date_fields" class="{{ request('date_filter') == 'custom' ? '' : 'hidden' }} flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
                            <input type="date" name="from_date" id="from_date" value="{{ request('from_date') }}" class="px-2 py-1 text-[10px] rounded-lg border border-slate-200 outline-none">
                            <input type="date" name="to_date" id="to_date" value="{{ request('to_date') }}" class="px-2 py-1 text-[10px] rounded-lg border border-slate-200 outline-none">
                            
                            <button type="button" onclick="applyCustomDate()" class="px-3 py-1 bg-indigo-600 text-white text-[10px] font-bold rounded-lg hover:bg-indigo-700 transition-all">Apply</button>
                            
                        </div>
                    </div>

                    <a href="{{ route('school.communication.chats', array_merge(request()->query(), ['unread_only' => request('unread_only') == 1 ? 0 : 1])) }}" 
                    class="px-3 py-2 rounded-xl text-[10px] font-bold flex items-center justify-center gap-2 transition-all whitespace-nowrap shrink-0 {{ request('unread_only') == 1 ? 'bg-indigo-600 text-white' : 'bg-indigo-50 text-indigo-600 border border-indigo-200' }}">
                        <span class="relative flex h-2 w-2 shrink-0">
                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
                            <span class="relative inline-flex rounded-full h-2 w-2 bg-indigo-600"></span>
                        </span>
                        NEW ({{ $conversations->where('unread_count', '>', 0)->count() }})
                    </a>
                </div>
                <span id="to_date_error" class="hidden text-[9px] text-red-500 font-bold whitespace-nowrap">To Date must be after or equal to From Date</span>
            </form>
        </div>

                <!-- Start New Chat Button -->
        <div class="px-4 pb-3">
            <button onclick="openNewChatModal()" class="w-full py-2.5 bg-indigo-600 text-white rounded-xl text-xs font-bold shadow-sm hover:bg-indigo-700 transition-all flex items-center justify-center gap-2">
                <i class="fa-solid fa-plus"></i> Start New Chat
            </button>
        </div>

        <!-- Conversations List -->
        <div class="flex-1 overflow-y-auto p-2 min-h-0">
            <div class="space-y-1">
                @forelse($conversations as $conv)
                <a href="{{ route('school.communication.viewChat', $conv->id) }}" class="flex items-center gap-3 p-3 lg:p-4 hover:bg-indigo-50 transition-all border-b border-slate-50 group rounded-xl">
                    <div class="relative shrink-0">
                        <div class="w-10 h-10 lg:w-12 lg:h-12 rounded-full overflow-hidden bg-indigo-100 text-indigo-600 flex items-center justify-center font-bold text-lg border border-indigo-200 shrink-0">
                            @if($conv->student_photo)
                                <img src="{{ asset('storage/'.$conv->student_photo) }}" class="w-full h-full object-cover" onerror="this.parentElement.innerHTML='{{ substr($conv->user_name, 0, 1) }}'">
                            @else
                                {{ substr($conv->user_name, 0, 1) }}
                            @endif
                        </div>
                        @if($conv->unread_count > 0)
                            <div class="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-[9px] flex items-center justify-center rounded-full border-2 border-white font-bold shadow-sm">
                                {{ $conv->unread_count }}
                            </div>
                        @endif
                    </div>

                    <div class="flex-1 min-w-0">
                        <div class="flex justify-between items-baseline">
                            <h4 class="text-sm font-bold text-slate-800 truncate {{ $conv->unread_count > 0 ? 'text-indigo-600' : '' }}">{{ $conv->user_name }}</h4>
                            <span class="text-[10px] text-slate-400 shrink-0 ml-2">{{ $conv->last_msg_time ? \Carbon\Carbon::parse($conv->last_msg_time)->format('h:i A') : '' }}</span>
                        </div>
                        <p class="text-[10px] text-slate-400 font-medium uppercase">
                            @if($conv->user_type == 'student')
                                ({{ $conv->class }} | {{ $conv->admission_no }})
                            @else
                                <span class="text-indigo-500 font-bold">TEACHER</span>
                            @endif
                        </p>
                        <p class="text-xs {{ $conv->unread_count > 0 ? 'text-slate-800 font-semibold' : 'text-slate-500' }} truncate mt-1">
                            {{ $conv->last_message ?? 'No messages yet' }}
                        </p>
                    </div>
                </a>
                @empty
                <div class="flex-1 flex flex-col items-center justify-center text-center p-6 lg:p-10 min-h-[200px]">
                    <div class="w-16 h-16 lg:w-20 lg:h-20 bg-slate-100 text-slate-300 rounded-full flex items-center justify-center mb-4">
                        <i class="fa-solid fa-comments text-3xl lg:text-4xl"></i>
                    </div>
                    <h3 class="text-base lg:text-lg font-bold text-slate-800">No Conversations Found</h3>
                    <p class="text-slate-500 text-xs lg:text-sm">Try adjusting your filters.</p>
                </div>
                @endforelse
            </div>

            <!-- Pagination Links -->
            <div class="mt-4 px-4 pb-4">
                {{ $conversations->appends(request()->query())->links() }}
            </div>
        </div>
    </div>

    <!-- RIGHT SIDE: CHAT WINDOW - ONLY SHOWS WHEN VIEWING SPECIFIC CHAT -->
    <div class="hidden lg:flex flex-1 flex-col bg-slate-50 h-full">
        @if(isset($conversation) && $conversation)
            @include('school.communications.chat_window_content')
        @else
            <div class="flex-1 flex flex-col items-center justify-center text-center p-10">
                <div class="w-20 h-20 bg-slate-100 text-slate-300 rounded-full flex items-center justify-center mb-4">
                    <i class="fa-solid fa-comments text-4xl"></i>
                </div>
                <h3 class="text-lg font-bold text-slate-800">No Conversation Selected</h3>
                <p class="text-slate-500 text-sm">Select a chat from the list to view messages.</p>
            </div>
        @endif
    </div>
</div>

<!-- NEW CHAT MODAL -->
<div id="new-chat-modal" class="fixed inset-0 z-[100] hidden items-center justify-center">
    <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm" onclick="closeNewChatModal()"></div>
    <div class="relative bg-white w-full max-w-md mx-4 rounded-2xl shadow-2xl p-6 transform transition-all scale-95 opacity-0" id="new-chat-modal-content">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-bold text-slate-800">Start New Chat</h3>
            <button onclick="closeNewChatModal()" class="w-8 h-8 rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 flex items-center justify-center transition-all">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        <!-- Chat Type Tabs -->
        <div class="flex bg-slate-100 rounded-xl p-1 mb-5">
            <button type="button" onclick="setChatType('student')" id="btn-student" class="flex-1 py-2 rounded-lg text-xs font-bold transition-all bg-white text-indigo-600 shadow-sm">
                <i class="fa-solid fa-graduation-cap mr-1"></i> Student
            </button>
            <button type="button" onclick="setChatType('staff')" id="btn-staff" class="flex-1 py-2 rounded-lg text-xs font-bold transition-all text-slate-500 hover:text-slate-700">
                <i class="fa-solid fa-chalkboard-user mr-1"></i> Staff
            </button>
        </div>

        <!-- STUDENT FORM -->
        <div id="student-form" class="space-y-3">
            <div>
                <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Class</label>
                <select id="nc-class" onchange="ncLoadSections(this.value)" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none focus:border-indigo-500">
                    <option value="">Select Class</option>
                    @foreach($classes as $c)
                        <option value="{{ $c->id }}">{{ $c->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Section</label>
                <select id="nc-section" onchange="ncLoadStudents()" disabled class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none focus:border-indigo-500 opacity-50 cursor-not-allowed">
                    <option value="">Select Section</option>
                </select>
            </div>
            <div>
                <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Student</label>
                <select id="nc-student" onchange="ncValidate()" disabled class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none focus:border-indigo-500 opacity-50 cursor-not-allowed">
                    <option value="">Select Student</option>
                </select>
            </div>
            
            <!-- Private Toggle -->
            <div class="flex items-center gap-2 pt-1">
                <input type="checkbox" id="nc-private" onchange="ncTogglePrivate()" class="w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500">
                <label for="nc-private" class="text-xs font-bold text-slate-700 cursor-pointer">Private (School & Student only)</label>
            </div>
            
        </div>

        <!-- STAFF FORM -->
        <div id="staff-form" class="space-y-3 hidden">
            <div>
                <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Department</label>
                <select id="nc-department" onchange="ncLoadStaff(this.value)" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none focus:border-indigo-500">
                    <option value="">Select Department</option>
                </select>
            </div>
            <div>
                <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Staff Member</label>
                <select id="nc-staff" onchange="ncValidate()" disabled class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none focus:border-indigo-500 opacity-50 cursor-not-allowed">
                    <option value="">Select Staff</option>
                </select>
            </div>
        </div>

        <button onclick="ncSubmit()" id="nc-submit" class="w-full mt-5 py-3 bg-indigo-600 text-white rounded-xl font-bold text-sm shadow-md hover:bg-indigo-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed" disabled>
            Start Chat
        </button>
    </div>
</div>

<!-- NEW SCRIPTS -->
<script>
    // Debounce search
    let debounceTimer;
    function debounceSubmit() {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => {
            document.getElementById('filter-form').submit();
        }, 500);
    }

    // Class → Section dependency
    function handleClassChange(classId) {
        const sectionDropdown = document.getElementById('section-dropdown');
        const form = document.getElementById('filter-form');
        
        if(!classId) {
            sectionDropdown.disabled = true;
            sectionDropdown.classList.add('opacity-50', 'cursor-not-allowed');
            sectionDropdown.innerHTML = '<option value="">All Sections</option>';
            sectionDropdown.value = '';
            form.submit();
            return;
        }
        
        sectionDropdown.disabled = false;
        sectionDropdown.classList.remove('opacity-50', 'cursor-not-allowed');
        sectionDropdown.innerHTML = '<option value="">Loading...</option>';
        
        $.ajax({
            url: `/communication/get-sections/${classId}`, 
            method: 'GET',
            success: function(data) {
                let options = '<option value="">All Sections</option>';
                data.forEach(sec => {
                    options += `<option value="${sec.id}">${sec.name}</option>`;
                });
                sectionDropdown.innerHTML = options;
                form.submit();
            },
            error: function() {
                sectionDropdown.innerHTML = '<option value="">All Sections</option>';
                form.submit();
            }
        });
    }

    // Toggle custom date fields
    function toggleCustomDate(val) {
        document.getElementById('custom_date_fields').classList.toggle('hidden', val !== 'custom');
    }

    // ✅ Date validation: FROM DATE must be <= TO DATE
    function applyCustomDate() {
        const fromDate = document.getElementById('from_date').value;
        const toDate = document.getElementById('to_date').value;

        if (!fromDate || !toDate) {
            alert('Please select both From Date and To Date');
            return;
        }

        if (fromDate > toDate) {
            alert('From Date must be less than or equal to To Date');
            document.getElementById('to_date').value = '';
            return;
        }

        document.getElementById('filter-form').submit();
    }

    // Validate on direct input change too
    document.getElementById('from_date').addEventListener('change', function() {
        const toDate = document.getElementById('to_date');
        const err = document.getElementById('to_date_error');
        if (toDate.value && this.value > toDate.value) {
            toDate.value = this.value;
        }
        toDate.classList.remove('border-red-500', 'ring-1', 'ring-red-500');
        if (err) err.classList.add('hidden');
    });

    document.getElementById('to_date').addEventListener('change', function() {
        const fromDate = document.getElementById('from_date');
        const err = document.getElementById('to_date_error');
        if (fromDate.value && this.value < fromDate.value) {
            this.classList.add('border-red-500', 'ring-1', 'ring-red-500');
            if (err) err.classList.remove('hidden');
            this.value = fromDate.value;
        } else {
            this.classList.remove('border-red-500', 'ring-1', 'ring-red-500');
            if (err) err.classList.add('hidden');
        }
    });
</script>



<!-- 1. Load jQuery FIRST -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    // Function to scroll to the very bottom of the chat
    function scrollToBottom() {
        const chatWindow = document.getElementById('chat-window');
        if (chatWindow) {
            chatWindow.scrollTo({
                top: chatWindow.scrollHeight,
                behavior: 'smooth'
            });
        }
    }

    $(document).ready(function() {
        // Initial scroll to bottom on page load
        scrollToBottom();

                // 1. Auto-Refresh Messages every 3 seconds
        setInterval(function() {
            $.ajax({
                url: "{{ route('school.communication.getMessages', ['id' => $chatId ?? 0]) }}",
                type: "GET",
                success: function(response) {
                    // Update chat messages
                    if (response.messages) {
                        renderMessages(response.messages);
                    }
                },
                error: function(xhr) {
                    console.error("Failed to load messages", xhr);
                }
            });
        }, 3000);

        // 2. Send Message
        $('#sendMessageBtn').click(function() {
            sendMessage();
        });

        $('#messageInput').keypress(function(e) {
            if (e.which === 13) {
                sendMessage();
            }
        });

        function sendMessage() {
            const messageInput = $('#messageInput');
            const msg = messageInput.val();

            if (msg.trim() === "") return;

            $.ajax({
                url: "{{ route('school.communication.sendReply', ['id' => $chatId ?? 0]) }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    message: msg
                },
                success: function(response) {
                    messageInput.val('');
                    renderMessages(response.messages);
                    scrollToBottom();
                },
                error: function(xhr) {
                    alert("Failed to send message: " + xhr.responseText);
                }
            });
        });
</script>

<script>
/* ========== NEW CHAT MODAL ========== */
let ncType = 'student';

function openNewChatModal() {
    const modal = document.getElementById('new-chat-modal');
    const content = document.getElementById('new-chat-modal-content');
    modal.classList.remove('hidden');
    modal.classList.add('flex');
    setTimeout(() => {
        content.classList.remove('scale-95', 'opacity-0');
        content.classList.add('scale-100', 'opacity-100');
    }, 10);
    ncLoadDepartments();
}

function closeNewChatModal() {
    const modal = document.getElementById('new-chat-modal');
    const content = document.getElementById('new-chat-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');
        ncReset();
    }, 200);
}

function ncReset() {
    document.getElementById('nc-class').value = '';
    document.getElementById('nc-section').innerHTML = '<option value="">Select Section</option>';
    document.getElementById('nc-section').disabled = true;
    document.getElementById('nc-section').classList.add('opacity-50','cursor-not-allowed');
    document.getElementById('nc-student').innerHTML = '<option value="">Select Student</option>';
    document.getElementById('nc-student').disabled = true;
    document.getElementById('nc-student').classList.add('opacity-50','cursor-not-allowed');
    document.getElementById('nc-private').checked = false;
    document.getElementById('nc-teacher-wrap').classList.add('hidden');
    document.getElementById('nc-teacher').innerHTML = '<option value="">Select Teacher</option>';
    document.getElementById('nc-department').value = '';
    document.getElementById('nc-staff').innerHTML = '<option value="">Select Staff</option>';
    document.getElementById('nc-staff').disabled = true;
    document.getElementById('nc-staff').classList.add('opacity-50','cursor-not-allowed');
    ncValidate();
}

function setChatType(type) {
    ncType = type;
    document.getElementById('student-form').classList.toggle('hidden', type !== 'student');
    document.getElementById('staff-form').classList.toggle('hidden', type !== 'staff');
    
    document.getElementById('btn-student').className = type === 'student' 
        ? 'flex-1 py-2 rounded-lg text-xs font-bold transition-all bg-white text-indigo-600 shadow-sm'
        : 'flex-1 py-2 rounded-lg text-xs font-bold transition-all text-slate-500 hover:text-slate-700';
    document.getElementById('btn-staff').className = type === 'staff'
        ? 'flex-1 py-2 rounded-lg text-xs font-bold transition-all bg-white text-indigo-600 shadow-sm'
        : 'flex-1 py-2 rounded-lg text-xs font-bold transition-all text-slate-500 hover:text-slate-700';
    ncValidate();
}

function ncLoadSections(classId) {
    const sec = document.getElementById('nc-section');
    const stu = document.getElementById('nc-student');
    
    if (!classId) {
        sec.innerHTML = '<option value="">Select Section</option>';
        sec.disabled = true;
        sec.classList.add('opacity-50', 'cursor-not-allowed');
        stu.innerHTML = '<option value="">Select Student</option>';
        stu.disabled = true;
        stu.classList.add('opacity-50', 'cursor-not-allowed');
        ncValidate();
        return;
    }
    
    sec.innerHTML = '<option value="">Loading...</option>';
    sec.disabled = true;
    
    $.ajax({
        url: "{{ route('school.communication.getSections', ['classId' => '__CID__']) }}".replace('__CID__', classId),
        method: 'GET',
        success: function(data) {
            let opts = '<option value="">Select Section</option>';
            if (data && data.length > 0) {
                data.forEach(function(d) {
                    opts += '<option value="' + d.id + '">' + d.name + '</option>';
                });
            } else {
                opts += '<option value="" disabled>No sections found</option>';
            }
            sec.innerHTML = opts;
            sec.disabled = false;
            sec.classList.remove('opacity-50', 'cursor-not-allowed');
        },
        error: function(xhr) {
            console.error("Section load failed:", xhr.responseText);
            sec.innerHTML = '<option value="">Select Section</option>';
            sec.disabled = true;
            sec.classList.add('opacity-50', 'cursor-not-allowed');
        }
    });
    ncValidate();
}

function ncLoadStudents() {
    const classId   = document.getElementById('nc-class').value;
    const sectionId = document.getElementById('nc-section').value;
    const stu       = document.getElementById('nc-student');
    
    if (!sectionId) {
        stu.innerHTML = '<option value="">Select Student</option>';
        stu.disabled = true;
        stu.classList.add('opacity-50', 'cursor-not-allowed');
        ncValidate();
        return;
    }
    stu.innerHTML = '<option value="">Loading...</option>';
    
    $.ajax({
        url: "{{ route('school.communication.getStudents') }}",
        method: 'GET',
        data: { class_id: classId, section_id: sectionId },
        success: function(data) {
            let opts = '<option value="">Select Student</option>';
            data.forEach(d => { opts += '<option value="' + d.id + '">' + d.name + ' (' + d.admission_no + ')</option>'; });
            stu.innerHTML = opts;
            stu.disabled = false;
            stu.classList.remove('opacity-50', 'cursor-not-allowed');
        },
        error: function() { stu.innerHTML = '<option value="">Select Student</option>'; }
    });
    ncValidate();
}

function ncTogglePrivate() {
    // No teacher dropdown to toggle anymore
    ncValidate();
}

function ncLoadDepartments() {
    $.ajax({
        url: "{{ route('school.communication.getDepartments') }}",
        method: 'GET',
        success: function(data) {
            const dd = document.getElementById('nc-department');
            let opts = '<option value="">Select Department</option>';
            data.forEach(d => { opts += `<option value="${d}">${d}</option>`; });
            dd.innerHTML = opts;
        }
    });
}

function ncLoadStaff(department) {
    const stf = document.getElementById('nc-staff');
    if (!department) {
        stf.innerHTML = '<option value="">Select Staff</option>';
        stf.disabled = true; stf.classList.add('opacity-50','cursor-not-allowed');
        ncValidate(); return;
    }
    stf.innerHTML = '<option value="">Loading...</option>';
    $.ajax({
        url: "{{ route('school.communication.getStaff') }}",
        method: 'GET',
        data: { department: department },
        success: function(data) {
            let opts = '<option value="">Select Staff</option>';
            data.forEach(d => { opts += `<option value="${d.id}">${d.name}</option>`; });
            stf.innerHTML = opts;
            stf.disabled = false; stf.classList.remove('opacity-50','cursor-not-allowed');
        },
        error: function() { stf.innerHTML = '<option value="">Select Staff</option>'; }
    });
    ncValidate();
}

function ncValidate() {
    const btn = document.getElementById('nc-submit');
    let ok = false;
    if (ncType === 'student') {
        // Only need student selected — teacher auto-assigned by backend
        ok = !!document.getElementById('nc-student').value;
    } else {
        ok = !!document.getElementById('nc-staff').value;
    }
    btn.disabled = !ok;
}

function ncSubmit() {
    const btn = document.getElementById('nc-submit');
    btn.disabled = true;
    btn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin mr-2"></i> Starting...';
    
    const payload = {
        _token: "{{ csrf_token() }}",
        chat_type: ncType,
        is_private: document.getElementById('nc-private')?.checked ? 1 : 0
    };
    
    if (ncType === 'student') {
        payload.user_id = document.getElementById('nc-student').value;
    } else {
        payload.user_id = document.getElementById('nc-staff').value;
    }
    
    $.ajax({
        url: "{{ route('school.communication.startChat') }}",
        method: 'POST',
        data: payload,
        success: function(res) {
            if (res.success && res.id) {
                window.location.href = "{{ route('school.communication.viewChat', ['id' => '__CHAT_ID__']) }}".replace('__CHAT_ID__', res.id);
            } else {
                alert(res.message || 'Could not start chat.');
                btn.disabled = false;
                btn.innerHTML = 'Start Chat';
            }
        },
        error: function(xhr) {
            alert(xhr.responseJSON?.message || 'Server error occurred.');
            btn.disabled = false;
            btn.innerHTML = 'Start Chat';
        }
    });
}
</script>
@endsection