@extends('staff.layouts.app')

@section('title', 'My Chats')

@section('content')

@php
    $slug = session('staff_school_slug');
@endphp
<div class="flex flex-col h-full px-4 pt-4">
    <!-- Header -->
    <div class="flex items-center justify-between mb-4 px-1">
         <div class="flex items-center gap-3">
            <a href="{{ route('staff.dashboard', ['slug' => $slug]) }}" class="text-slate-400 hover:text-amber-500 transition-colors">
                <i class="fa-solid fa-arrow-left text-xl"></i>
            </a>
            <h1 class="text-lg font-extrabold text-slate-800">My Chats
                @if($isPrincipal ?? false)
                    <span class="ml-2 px-2 py-0.5 bg-indigo-600 text-white text-[9px] rounded-md uppercase font-bold align-middle">Principal</span>
                @endif
            </h1>
        </div>
        <div class="flex items-center gap-2">
            <!-- NEW MESSAGES Button -->
            <a href="/school/{{ $slug }}/staff/chats?unread_only=1{{ request('filter') ? '&filter='.request('filter') : '' }}{{ request('class_filter') ? '&class_filter='.request('class_filter') : '' }}{{ request('section_filter') ? '&section_filter='.request('section_filter') : '' }}{{ request('from_date') ? '&from_date='.request('from_date') : '' }}{{ request('to_date') ? '&to_date='.request('to_date') : '' }}" 
               class="px-3 py-2 rounded-full text-[10px] font-bold flex items-center gap-2 transition-all whitespace-nowrap {{ request('unread_only') == 1 ? 'bg-amber-500 text-white' : 'bg-amber-50 text-amber-600 border border-amber-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-amber-400 opacity-75"></span>
                    <span class="relative inline-flex rounded-full h-2 w-2 bg-amber-600"></span>
                </span>
                NEW ({{ $totalUnread }})
            </a>

            <button id="new-chat-btn" 
				class="w-11 h-11 bg-gradient-to-br from-orange-500 to-orange-600 text-white rounded-full flex items-center justify-center shadow-lg shadow-orange-200 active:scale-90 transition-all border-2 border-white">
				
                 <i class="fa-solid fa-plus text-sm"></i>
            </button>
        </div>
    </div>

    <!-- PREMIUM FILTER SECTION -->
    <div class="bg-white p-4 rounded-3xl border border-slate-200 shadow-sm mb-6">
        <form action="/school/{{ $slug }}/staff/chats" method="GET" class="space-y-3">
            <!-- Quick Filter -->
            <div class="flex items-center gap-2">
                <div class="flex-1">
                    <label class="text-[10px] font-bold text-slate-400 uppercase ml-1">Quick Filter</label>
                <select name="filter" id="quick-filter" class="w-full mt-1 px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none focus:border-amber-500 transition-all">
                     <option value="">All Conversations</option>
                    @if($isPrincipal ?? false)
                        <option value="teachers" {{ request('filter') == 'teachers' ? 'selected' : '' }}>Teachers</option>
                    @else
                        <option value="admin" {{ request('filter') == 'admin' ? 'selected' : '' }}>School Admin</option>
                    @endif
                    <option value="students" {{ request('filter') == 'students' ? 'selected' : '' }}>Students</option>
                 </select>
                </div>
            </div>

            <!-- Class & Section Filter -->
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="text-[10px] font-bold text-slate-400 uppercase ml-1">Class</label>
                    <select name="class_filter" id="class-filter" class="w-full mt-1 px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none focus:border-amber-500 transition-all">
                        <option value="">All Classes</option>
                        @foreach($assignedClasses ?? [] as $classId => $className)
                            <option value="{{ $classId }}" {{ request('class_filter') == $classId ? 'selected' : '' }}>{{ $className }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="text-[10px] font-bold text-slate-400 uppercase ml-1">Section</label>
                    <select name="section_filter" id="section-filter" class="w-full mt-1 px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none focus:border-amber-500 transition-all">
                        <option value="">All Sections</option>
                        @foreach($assignedSections ?? [] as $sectionId => $sectionName)
                            <option value="{{ $sectionId }}" {{ request('section_filter') == $sectionId ? 'selected' : '' }}>{{ $sectionName }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- Date Range -->
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="text-[10px] font-bold text-slate-400 uppercase ml-1">From Date</label>
                    <input type="date" name="from_date" id="from_date" value="{{ request('from_date') }}" 
                        class="w-full mt-1 px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none focus:border-amber-500 transition-all">
                </div>
                <div>
                    <label class="text-[10px] font-bold text-slate-400 uppercase ml-1">To Date</label>
                    <input type="date" name="to_date" id="to_date" value="{{ request('to_date') }}" 
                        class="w-full mt-1 px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none focus:border-amber-500 transition-all">
                </div>
            </div>

            <button type="submit" class="w-full py-2 bg-slate-800 text-white rounded-xl text-xs font-bold hover:bg-slate-900 transition-all shadow-md">
                Apply Filters
            </button>
        </form>
    </div>

    <!-- CHAT LIST -->
    <div class="space-y-4 pb-24">
        @forelse($chatData as $chat)
            <a href="/school/{{ session('staff_school_slug') }}/staff/chat/{{ $chat['id'] }}" class="flex items-center gap-4 p-4 bg-white rounded-2xl border border-slate-200 shadow-sm hover:border-amber-300 hover:bg-amber-50/30 transition-all active:scale-95 relative">
                <!-- Avatar with Unread Badge -->
                <div class="relative shrink-0">
                    <div class="w-12 h-12 rounded-full bg-{{ $chat['avatar_color'] }}-100 text-{{ $chat['avatar_color'] }}-600 flex items-center justify-center font-bold border border-{{ $chat['avatar_color'] }}-200">
                        {{ $chat['avatar_letter'] }}
                    </div>
                    @if($chat['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">
                            {{ $chat['unread_count'] }}
                        </div>
                    @endif
                </div>
                
                <!-- Details -->
                <div class="flex-1 min-w-0">
                    <div class="flex justify-between items-center mb-1">
                        <h4 class="text-sm font-bold {{ $chat['unread_count'] > 0 ? 'text-amber-600' : 'text-slate-800' }} truncate">
                            {{ $chat['name'] }}
                        @if($chat['type'] == 'admin')
                            <span class="ml-1 px-1.5 py-0.5 bg-indigo-100 text-indigo-600 text-[8px] rounded-md uppercase font-bold">Admin</span>
                        @elseif($chat['type'] == 'teacher')
                            <span class="ml-1 px-1.5 py-0.5 bg-amber-100 text-amber-600 text-[8px] rounded-md uppercase font-bold">Teacher</span>
                        @endif
                        </h4>
                        <span class="text-[9px] text-slate-400 font-medium shrink-0 ml-2">{{ $chat['last_time'] }}</span>
                    </div>
                    @if(isset($chat['meta']))
                        <p class="text-[10px] text-slate-400 font-medium">{{ $chat['meta'] }}</p>
                    @endif
                    <p class="text-xs {{ $chat['unread_count'] > 0 ? 'text-slate-800 font-semibold' : 'text-slate-500' }} truncate leading-tight">
                        {{ Str::limit($chat['last_message'], 60) }}
                    </p>
                </div>
                <div class="text-slate-300 shrink-0">
                    <i class="fa-solid fa-chevron-right text-xs"></i>
                </div>
            </a>
        @empty
            <div class="text-center py-20">
                <div class="w-20 h-20 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fa-solid fa-comments-slash text-3xl text-slate-300"></i>
                </div>
                <h3 class="text-slate-800 font-bold text-sm">No Chats Found</h3>
                <p class="text-slate-400 text-xs mt-1">Start a new conversation</p>
            </div>
                @endforelse

        <!-- Pagination -->
        @if($chatData->hasPages())
            <div class="mt-4">
                {{ $chatData->links() }}
            </div>
        @endif
    </div>
</div>

<!-- NEW CHAT MODAL -->
<div id="new-chat-modal" class="fixed inset-0 z-[100] hidden flex items-center justify-center px-6">
    <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm" onclick="closeNewChatModal()"></div>
    <div class="relative bg-white w-full max-w-sm rounded-3xl shadow-2xl p-6 text-center transform transition-all scale-90 opacity-0" id="new-chat-modal-content">
        <div class="w-14 h-14 bg-amber-100 text-amber-600 rounded-full flex items-center justify-center mx-auto mb-4 shadow-inner">
            <i class="fa-solid fa-message text-xl"></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">Choose who you want to chat with</p>
        
        <div class="flex flex-col gap-3">
            @if($isPrincipal ?? false)
                <button onclick="showTeacherList()" class="w-full py-3 rounded-xl font-semibold text-white bg-gradient-to-r from-amber-500 via-orange-500 to-red-500 shadow-[0_6px_0_rgb(180,83,9)] hover:from-amber-400 hover:to-red-400 active:shadow-none active:translate-y-1 transition-all duration-300 flex items-center justify-center gap-2">
                    <i class="fa-solid fa-chalkboard-user text-sm"></i> Chat with Teacher
                </button>
            @else
                <button onclick="startAdminChat()" class="w-full py-3 rounded-xl font-semibold text-white bg-gradient-to-r from-violet-700 via-purple-700 to-fuchsia-700 shadow-[0_6px_0_rgb(76,29,149)] hover:from-violet-600 hover:to-fuchsia-600 active:shadow-none active:translate-y-1 transition-all duration-300 flex items-center justify-center gap-2">
                    <i class="fa-solid fa-building-columns text-sm"></i> Chat with School Admin
                </button>
            @endif
            
            <!-- Student Button (Required for both Principal & Teachers) -->
            <button onclick="showStudentList()" class="w-full py-3 rounded-xl font-semibold text-white bg-gradient-to-r from-cyan-600 via-sky-600 to-blue-700 shadow-[0_6px_0_rgb(30,64,175)] hover:from-cyan-500 hover:to-blue-600 active:shadow-none active:translate-y-1 transition-all duration-300 flex items-center justify-center gap-2">
                <i class="fa-solid fa-user-graduate text-sm"></i> Chat with Student
            </button>
        </div>
    </div>
</div>

<!-- CLASS/SECTION/STUDENT SELECTION MODAL -->
<div id="student-list-modal" class="fixed inset-0 z-[101] hidden flex items-center justify-center px-6">
    <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm" onclick="closeStudentListModal()"></div>
    <div class="relative bg-white w-full max-w-sm rounded-3xl shadow-2xl p-6 max-h-[80vh] flex flex-col transform transition-all scale-90 opacity-0" id="student-list-modal-content">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-bold text-slate-800" id="modal-title">Select Class</h3>
            <button onclick="closeStudentListModal()" class="w-8 h-8 rounded-full bg-slate-100 text-slate-500 flex items-center justify-center hover:bg-slate-200">
                <i class="fa-solid fa-xmark text-sm"></i>
            </button>
        </div>
        
                <!-- Step 1: Class Selection -->
        <div id="step-class" class="flex-1 overflow-y-auto space-y-2">
            @foreach($assignedClasses ?? [] as $classId => $className)
                <button onclick="selectClass('{{ $classId }}', '{{ $className }}')" class="w-full flex items-center gap-3 p-3 rounded-xl hover:bg-slate-50 transition-all text-left border border-slate-100">
                    <div class="w-10 h-10 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center font-bold text-sm shrink-0">
                        {{ substr($className, 0, 1) }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <h4 class="text-sm font-bold text-slate-800 truncate">{{ $className }}</h4>
                    </div>
                    <i class="fa-solid fa-chevron-right text-xs text-slate-300"></i>
                </button>
            @endforeach
        </div>

        <!-- Step 2: Section Selection -->
        <div id="step-section" class="hidden flex-1 overflow-y-auto space-y-2">
            <button onclick="backToClasses()" class="mb-3 text-xs text-amber-600 font-bold flex items-center gap-1">
                <i class="fa-solid fa-arrow-left"></i> Back to Classes
            </button>
            <div id="section-list-container">
                <!-- Sections loaded here -->
            </div>
        </div>

        <!-- Step 3: Student Selection -->
        <div id="step-student" class="hidden flex-1 overflow-y-auto space-y-2">
            <button onclick="backToSections()" class="mb-3 text-xs text-amber-600 font-bold flex items-center gap-1">
                <i class="fa-solid fa-arrow-left"></i> Back to Sections
            </button>
            <div id="student-list-container">
                <div class="text-center py-8">
                    <i class="fa-solid fa-circle-notch fa-spin text-amber-500 text-xl"></i>
                    <p class="text-xs text-slate-400 mt-2">Loading students...</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- TEACHER SELECTION MODAL -->
<div id="teacher-list-modal" class="fixed inset-0 z-[101] hidden flex items-center justify-center px-6">
    <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm" onclick="closeTeacherListModal()"></div>
    <div class="relative bg-white w-full max-w-sm rounded-3xl shadow-2xl p-6 max-h-[80vh] flex flex-col transform transition-all scale-90 opacity-0" id="teacher-list-modal-content">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-bold text-slate-800">Select Teacher</h3>
            <button onclick="closeTeacherListModal()" class="w-8 h-8 rounded-full bg-slate-100 text-slate-500 flex items-center justify-center hover:bg-slate-200"><i class="fa-solid fa-xmark text-sm"></i></button>
        </div>
        <div class="relative mb-3">
            <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
            <input type="text" id="teacher-search" placeholder="Search name or department..." class="w-full pl-8 pr-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none focus:border-amber-500">
        </div>
        <div id="teacher-list-container" class="flex-1 overflow-y-auto space-y-2">
            <div class="text-center py-8"><i class="fa-solid fa-circle-notch fa-spin text-amber-500 text-xl"></i></div>
        </div>
    </div>
</div>

<!-- LUXURY 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="closeLuxuryError()"></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="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">
                <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">Error</h3>
        <p class="text-sm text-slate-500 mb-6 leading-relaxed" id="luxury-error-message">Something went wrong.</p>
        <button onclick="closeLuxuryError()" 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>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const STAFF_SLUG = "{{ $slug }}";
const classSectionsMap = @json($classSections);
let allTeachers = [];
let selectedClassId = '', selectedClassName = '', selectedSectionId = '', selectedSectionName = '';

function openNewChatModal() { $('#new-chat-modal').removeClass('hidden'); setTimeout(() => { $('#new-chat-modal-content').addClass('scale-100 opacity-100').removeClass('scale-90 opacity-0'); }, 10); }
function closeNewChatModal() { $('#new-chat-modal-content').addClass('scale-90 opacity-0').removeClass('scale-100 opacity-100'); setTimeout(() => { $('#new-chat-modal').addClass('hidden'); }, 200); }
function openStudentListModal() { $('#student-list-modal').removeClass('hidden'); setTimeout(() => { $('#student-list-modal-content').addClass('scale-100 opacity-100').removeClass('scale-90 opacity-0'); }, 10); }
function closeStudentListModal() { $('#student-list-modal-content').addClass('scale-90 opacity-0').removeClass('scale-100 opacity-100'); setTimeout(() => { $('#student-list-modal').addClass('hidden'); }, 200); }

function showLuxuryError(message) {
    const modal = document.getElementById('luxury-error-modal');
    const content = document.getElementById('luxury-modal-content');
    if (message) document.getElementById('luxury-error-message').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 closeLuxuryError() {
    const modal = document.getElementById('luxury-error-modal');
    const content = document.getElementById('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);
}

$(document).ready(function() {
    $(document).on('click', '#new-chat-btn', function(e) { e.preventDefault(); openNewChatModal(); });
});

function startAdminChat() {
    const btn = event.target.closest('button');
    btn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> Creating...'; btn.disabled = true;
    $.ajax({
        url: "/school/" + STAFF_SLUG + "/staff/chat/new", method: 'POST',
        data: { _token: "{{ csrf_token() }}", type: 'admin' },
        success: function(res) { if(res.success && res.id) window.location.href = "/school/" + STAFF_SLUG + "/staff/chat/" + res.id; else { showLuxuryError('Failed.'); btn.disabled = false; btn.innerHTML = 'Chat with School Admin'; } },
        error: function(xhr) { showLuxuryError(xhr.responseJSON?.error || 'Error'); btn.disabled = false; btn.innerHTML = 'Chat with School Admin'; }
    });
}

function showStudentList() { closeNewChatModal(); openStudentListModal(); resetStudentModal(); }
function resetStudentModal() {
    selectedClassId = ''; selectedClassName = ''; selectedSectionId = ''; selectedSectionName = '';
    $('#modal-title').text('Select Class'); $('#step-class').removeClass('hidden'); $('#step-section, #step-student').addClass('hidden');
}

function selectClass(classId, className) {
    selectedClassId = classId; selectedClassName = className;
    $('#modal-title').text('Select Section - ' + className); $('#step-class').addClass('hidden'); $('#step-section').removeClass('hidden');
    let html = ''; const sections = classSectionsMap[classId] || {};
    Object.entries(sections).forEach(function([sectionId, sectionName]) {
        html += `<button onclick="selectSection('${sectionId}', '${sectionName}')" class="w-full flex items-center gap-3 p-3 rounded-xl hover:bg-slate-50 border border-slate-100 mb-2"><div class="w-10 h-10 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center font-bold">${sectionName.charAt(0)}</div><h4 class="text-sm font-bold">${sectionName}</h4></button>`;
    });
    $('#section-list-container').html(html || '<p class="text-center text-slate-500">No sections.</p>');
}

function selectSection(sectionId, sectionName) {
    selectedSectionId = sectionId; selectedSectionName = sectionName;
    $('#modal-title').text('Select Student'); $('#step-section').addClass('hidden'); $('#step-student').removeClass('hidden');
    $.ajax({
        url: "/school/" + STAFF_SLUG + "/staff/chat/assigned-students", method: 'GET',
        data: { class_id: selectedClassId, section_id: selectedSectionId },
        success: function(students) {
            let html = '';
            if (students.length === 0) html = '<p class="text-center text-slate-500">No students.</p>';
            else students.forEach(function(s) {
                html += `<button onclick="startStudentChat(${s.id})" class="w-full flex items-center gap-3 p-3 rounded-xl hover:bg-slate-50 border border-slate-100 mb-2"><div class="w-10 h-10 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center font-bold">${s.student_name.charAt(0)}</div><div><h4 class="text-sm font-bold">${s.student_name}</h4><p class="text-xs text-slate-400">${s.admission_no}</p></div></button>`;
            });
            $('#student-list-container').html(html);
        }
    });
}
function backToClasses() { resetStudentModal(); }
function backToSections() { $('#step-student').addClass('hidden'); $('#step-section').removeClass('hidden'); $('#modal-title').text('Select Section - ' + selectedClassName); }

function startStudentChat(studentId) {
    $.ajax({
        url: "/school/" + STAFF_SLUG + "/staff/chat/new", method: 'POST',
        data: { _token: "{{ csrf_token() }}", type: 'student', student_id: studentId },
        success: function(res) { if(res.success && res.id) window.location.href = "/school/" + STAFF_SLUG + "/staff/chat/" + res.id; else showLuxuryError(res.error); },
        error: function(xhr) { showLuxuryError(xhr.responseJSON?.error || 'Error'); }
    });
}

// TEACHER MODAL
function openTeacherListModal() { $('#teacher-list-modal').removeClass('hidden'); setTimeout(() => { $('#teacher-list-modal-content').addClass('scale-100 opacity-100').removeClass('scale-90 opacity-0'); }, 10); loadTeachers(); }
function closeTeacherListModal() { $('#teacher-list-modal-content').addClass('scale-90 opacity-0').removeClass('scale-100 opacity-100'); setTimeout(() => { $('#teacher-list-modal').addClass('hidden'); }, 200); }
function showTeacherList() { closeNewChatModal(); openTeacherListModal(); }
function loadTeachers() {
    $('#teacher-list-container').html('<div class="text-center py-8"><i class="fa-solid fa-circle-notch fa-spin text-amber-500 text-xl"></i></div>');
    $.get("/school/" + STAFF_SLUG + "/staff/chat/teachers", function(teachers) { allTeachers = teachers; renderTeacherList(teachers); });
}
function renderTeacherList(teachers) {
    let html = '';
    if (!teachers.length) html = '<p class="text-center text-slate-500">No teachers found.</p>';
    else teachers.forEach(function(t) {
        html += `<button onclick="startTeacherChat(${t.id})" class="w-full flex items-center gap-3 p-3 rounded-xl hover:bg-slate-50 border border-slate-100 mb-2"><div class="w-10 h-10 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center font-bold">${t.staff_name.charAt(0)}</div><div><h4 class="text-sm font-bold">${t.staff_name}</h4><p class="text-xs text-slate-400">${t.designation || 'Teacher'}</p></div></button>`;
    });
    $('#teacher-list-container').html(html);
}
$('#teacher-search').on('input', function() {
    const q = $(this).val().toLowerCase();
    renderTeacherList(allTeachers.filter(t => t.staff_name.toLowerCase().includes(q) || (t.designation && t.designation.toLowerCase().includes(q))));
});
function startTeacherChat(teacherId) {
    $.ajax({
        url: "/school/" + STAFF_SLUG + "/staff/chat/new", method: 'POST',
        data: { _token: "{{ csrf_token() }}", type: 'teacher', teacher_id: teacherId },
        success: function(res) { if(res.success && res.id) window.location.href = "/school/" + STAFF_SLUG + "/staff/chat/" + res.id; },
        error: function(xhr) { showLuxuryError(xhr.responseJSON?.error || 'Error'); }
    });
}
</script>
@endsection