@extends('layouts/contentNavbarLayout')

@section('title', 'Dashboard - Reports')

@section('vendor-style')
    <style>
        .metric-card {
            transition: transform 0.2s;
        }

        .metric-card:hover {
            transform: translateY(-2px);
        }

        .rating-progress {
            height: 6px;
        }

        .department-card {
            border-left: 4px solid #696cff;
        }

        .recent-activity {
            max-height: 400px;
            overflow-y: auto;
        }

        .filter-section {
            background: #f8f9fa;
            border-radius: 8px;
        }
    </style>
@endsection

@section('vendor-script')
    <script>
        // Enhanced functionality for the dashboard

        // Export functionality
        function exportData() {
            const filters = {
                department: '{{ $selectedDepartment }}',
                academic_year: '{{ $selectedAcademicYear }}',
                semester: '{{ $selectedSemester }}'
            };

            // Create CSV content
            let csvContent = "data:text/csv;charset=utf-8,";

            // Add headers
            csvContent += "Department,Faculty Count,Total Evaluations,Active Evaluations,Total Responses,Average Rating\n";

            @foreach($departmentBreakdown as $dept)
                csvContent += "{{ $dept['department'] }},{{ $dept['faculty_count'] }},{{ $dept['total_evaluations'] }},{{ $dept['active_evaluations'] }},{{ $dept['total_responses'] }},{{ $dept['average_rating'] }}\n";
            @endforeach

                                                                                            // Create and trigger download
                                                                                            const encodedUri = encodeURI(csvContent);
            const link = document.createElement("a");
            link.setAttribute("href", encodedUri);
            link.setAttribute("download", `evaluation_report_${new Date().toISOString().split('T')[0]}.csv`);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }

        // Real-time updates
        function refreshData() {
            fetch(window.location.href, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
                .then(response => response.text())
                .then(html => {
                    // Update only the metrics cards without full page reload
                    const parser = new DOMParser();
                    const newDoc = parser.parseFromString(html, 'text/html');

                    // Update metric values
                    document.querySelectorAll('.metric-card h3').forEach((element, index) => {
                        const newValue = newDoc.querySelectorAll('.metric-card h3')[index];
                        if (newValue && element.textContent !== newValue.textContent) {
                            element.style.animation = 'pulse 0.5s';
                            element.textContent = newValue.textContent;
                        }
                    });
                })
                .catch(error => console.log('Auto-refresh failed:', error));
        }

        // Form auto-submit on filter change
        document.querySelectorAll('select[name="department"], select[name="academic_year"], select[name="semester"]').forEach(select => {
            select.addEventListener('change', function () {
                // Add loading state
                const button = document.querySelector('button[type="submit"]');
                const originalText = button.innerHTML;
                button.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Loading...';
                button.disabled = true;

                // Submit form
                this.form.submit();
            });
        });

        // Tooltips for metrics
        const tooltips = {
            'Total Faculties': 'Number of faculty members in the selected filters',
            'Total Responses': 'Total evaluation responses submitted by students',
            'Average Rating': 'Overall average effectiveness rating across all evaluations',
            'Courses Evaluated': 'Number of unique courses that have received evaluations'
        };

        // Add tooltips
        document.querySelectorAll('.metric-card p').forEach(element => {
            const text = element.textContent.trim();
            if (tooltips[text]) {
                element.setAttribute('title', tooltips[text]);
                element.style.cursor = 'help';
            }
        });

        // Progress bar animations
        function animateProgressBars() {
            document.querySelectorAll('.progress-bar').forEach(bar => {
                const width = bar.style.width;
                bar.style.width = '0%';
                setTimeout(() => {
                    bar.style.transition = 'width 1s ease-in-out';
                    bar.style.width = width;
                }, 100);
            });
        }

        // Initialize animations on load
        document.addEventListener('DOMContentLoaded', function () {
            animateProgressBars();
        });

        // Auto-refresh every 5 minutes
        setInterval(refreshData, 300000);

        // Add CSS animations
        const style = document.createElement('style');
        style.textContent = `
                                                                                            @keyframes pulse {
                                                                                                0% { transform: scale(1); }
                                                                                                50% { transform: scale(1.05); }
                                                                                                100% { transform: scale(1); }
                                                                                            }

                                                                                            .progress-bar {
                                                                                                transition: width 0.8s ease-in-out;
                                                                                            }

                                                                                            .metric-card {
                                                                                                transition: all 0.3s ease;
                                                                                            }

                                                                                            .metric-card:hover {
                                                                                                box-shadow: 0 4px 12px rgba(0,0,0,0.1);
                                                                                            }
                                                                                        `;
        document.head.appendChild(style);
    </script>
@endsection

@section('content')
    <div class="container-fluid">
        {{-- Header --}}
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h4 class="mb-1">Post-Class Survey Analytics</h4>
                <p class="text-muted mb-0">Comprehensive dashboard for evaluation insights and reporting</p>
            </div>
            <div class="d-flex gap-2">
                <button class="btn btn-outline-primary" onclick="window.print()">
                    <i class="bx bx-printer me-1"></i>Print Report
                </button>
                <button class="btn btn-primary" onclick="exportData()">
                    <i class="bx bx-download me-1"></i>Export Data
                </button>
            </div>
        </div>

        {{-- Filters --}}
        <div class="card mb-4 filter-section">
            <div class="card-body">
                <form method="GET" action="{{ route('reports') }}" class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">Department</label>
                        <select name="department" class="form-select">
                            <option value="all" {{ $selectedDepartment == 'all' ? 'selected' : '' }}>All Departments</option>
                            @foreach($departments as $dept)
                                <option value="{{ $dept }}" {{ $selectedDepartment == $dept ? 'selected' : '' }}>
                                    {{ $dept }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Academic Year</label>
                        <select name="academic_year" class="form-select">
                            <option value="all" {{ $selectedAcademicYear == 'all' ? 'selected' : '' }}>All Years</option>
                            @foreach($academicYears as $year)
                                <option value="{{ $year }}" {{ $selectedAcademicYear == $year ? 'selected' : '' }}>
                                    {{ $year }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Semester</label>
                        <select name="semester" class="form-select">
                            <option value="all" {{ $selectedSemester == 'all' ? 'selected' : '' }}>All Semesters</option>
                            @foreach($semesters as $sem)
                                <option value="{{ $sem }}" {{ $selectedSemester == $sem ? 'selected' : '' }}>
                                    {{ $sem }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="bx bx-filter-alt me-1"></i>Apply Filters
                        </button>
                    </div>
                </form>
            </div>
        </div>

        {{-- Key Metrics Cards --}}
        <div class="row mb-4">
            <div class="col-xl-3 col-md-6 mb-3">
                <div class="card metric-card h-100">
                    <div class="card-body text-center">
                        <div class="d-flex align-items-center justify-content-center mb-3">
                            <div class="avatar flex-shrink-0 me-3">
                                <span class="avatar-initial bg-primary rounded">
                                    <i class="bx bx-user-check bx-lg"></i>
                                </span>
                            </div>
                            <div>
                                <h3 class="mb-0">{{ $metrics['total_faculties'] }}</h3>
                                <p class="text-muted mb-0">Total Faculties</p>
                            </div>
                        </div>
                        <small class="text-success">
                            {{ $metrics['active_evaluations'] }} active evaluations
                        </small>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6 mb-3">
                <div class="card metric-card h-100">
                    <div class="card-body text-center">
                        <div class="d-flex align-items-center justify-content-center mb-3">
                            <div class="avatar flex-shrink-0 me-3">
                                <span class="avatar-initial bg-success rounded">
                                    <i class="bx bx-bar-chart bx-lg"></i>
                                </span>
                            </div>
                            <div>
                                <h3 class="mb-0">{{ $metrics['total_responses'] }}</h3>
                                <p class="text-muted mb-0">Total Responses</p>
                            </div>
                        </div>
                        <small class="text-info">
                            {{ $metrics['responses_with_feedback'] }} with feedback
                        </small>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6 mb-3">
                <div class="card metric-card h-100">
                    <div class="card-body text-center">
                        <div class="d-flex align-items-center justify-content-center mb-3">
                            <div class="avatar flex-shrink-0 me-3">
                                <span class="avatar-initial bg-warning rounded">
                                    <i class="bx bx-star bx-lg"></i>
                                </span>
                            </div>
                            <div>
                                <h3 class="mb-0">{{ $metrics['average_rating'] }}</h3>
                                <p class="text-muted mb-0">Average Rating</p>
                            </div>
                        </div>
                        <small class="text-muted">
                            Out of 4.0 scale
                        </small>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6 mb-3">
                <div class="card metric-card h-100">
                    <div class="card-body text-center">
                        <div class="d-flex align-items-center justify-content-center mb-3">
                            <div class="avatar flex-shrink-0 me-3">
                                <span class="avatar-initial bg-info rounded">
                                    <i class="bx bx-book bx-lg"></i>
                                </span>
                            </div>
                            <div>
                                <h3 class="mb-0">{{ $metrics['courses_evaluated'] }}</h3>
                                <p class="text-muted mb-0">Courses Evaluated</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            {{-- Rating Distribution --}}
            <div class="col-lg-8 mb-4">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">Overall Rating Distribution</h5>
                        <small class="text-muted">{{ $metrics['total_responses'] }} total responses</small>
                    </div>
                    <div class="card-body">
                        @if($metrics['total_responses'] > 0)
                            <div class="row">
                                @foreach(['4' => ['Very Effective', 'success'], '3' => ['Effective', 'info'], '2' => ['Somewhat Effective', 'warning'], '1' => ['Not Effective', 'danger']] as $rating => $info)
                                    @php
                                        $count = $metrics['rating_distribution']->get($rating, 0);
                                        $percentage = ($count / $metrics['total_responses']) * 100;
                                    @endphp
                                    <div class="col-md-6 mb-3">
                                        <div class="d-flex justify-content-between mb-1">
                                            <span class="fw-medium">{{ $info[0] }}</span>
                                            <span class="text-muted">{{ $count }} ({{ number_format($percentage, 1) }}%)</span>
                                        </div>
                                        <div class="progress rating-progress mb-2">
                                            <div class="progress-bar bg-{{ $info[1] }}" style="width: {{ $percentage }}%"></div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            {{-- Quick Stats --}}
                            <div class="row mt-4">
                                <div class="col-md-4 text-center">
                                    <h6 class="text-success">
                                        {{ $metrics['rating_distribution']->get('4', 0) + $metrics['rating_distribution']->get('3', 0) }}
                                    </h6>
                                    <small class="text-muted">Positive Ratings</small>
                                </div>
                                <div class="col-md-4 text-center">
                                    <h6 class="text-warning">{{ $metrics['rating_distribution']->get('2', 0) }}</h6>
                                    <small class="text-muted">Neutral Ratings</small>
                                </div>
                                <div class="col-md-4 text-center">
                                    <h6 class="text-danger">{{ $metrics['rating_distribution']->get('1', 0) }}</h6>
                                    <small class="text-muted">Needs Improvement</small>
                                </div>
                            </div>
                        @else
                            <div class="text-center py-5">
                                <i class="bx bx-bar-chart display-4 text-muted mb-3"></i>
                                <h6 class="mb-2">No Data Available</h6>
                                <p class="text-muted">No evaluation responses found for the selected filters.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Recent Activity --}}
            <div class="col-lg-4 mb-4">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Recent Evaluations</h5>
                    </div>
                    <div class="card-body p-0">
                        <div class="recent-activity p-3">
                            @forelse($recentResponses as $response)
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="avatar flex-shrink-0 me-3">
                                                        <span class="avatar-initial rounded bg-light text-dark">
                                                            {{ substr($response->schedule->facultyCourse->course->class_code ?? 'N', 0, 2) }}
                                                        </span>
                                                    </div>
                                                    <div class="flex-grow-1">
                                                        <h6 class="mb-1">{{ $response->schedule->facultyCourse->course->class_code ?? 'N/A' }}
                                                        </h6>
                                                        <div class="d-flex align-items-center">
                                                            <span
                                                                class="badge bg-{{ 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            $response->effectiveness_rating == '4' ? 'success' :
                                ($response->effectiveness_rating == '3' ? 'info' :
                                    ($response->effectiveness_rating == '2' ? 'warning' : 'danger')) 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        }} me-2">{{ $response->effectiveness_rating }}</span>
                                                            <small class="text-muted">{{ $response->created_at->diffForHumans() }}</small>
                                                        </div>
                                                    </div>
                                                </div>
                            @empty
                                <div class="text-center py-4">
                                    <i class="bx bx-time text-muted mb-2" style="font-size: 2rem;"></i>
                                    <p class="text-muted mb-0">No recent activity</p>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Department Breakdown --}}
        <div class="row">
            <div class="col-12 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            @if($selectedDepartment !== 'all')
                                {{ $selectedDepartment }} Department Performance
                            @else
                                Department Performance Breakdown
                            @endif
                        </h5>
                        @if($selectedDepartment !== 'all')
                            <small class="text-muted">Showing data for {{ $selectedDepartment }} department only</small>
                        @endif
                    </div>
                    <div class="card-body">
                        {{-- Table Controls --}}
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <label class="form-label">Show entries</label>
                                <select class="form-select form-select-sm" id="departmentPerPage"
                                    onchange="updatePerPage(this.value)">
                                    <option value="10" {{ $perPage == 10 ? 'selected' : '' }}>10</option>
                                    <option value="25" {{ $perPage == 25 ? 'selected' : '' }}>25</option>
                                    <option value="50" {{ $perPage == 50 ? 'selected' : '' }}>50</option>
                                    <option value="100" {{ $perPage == 100 ? 'selected' : '' }}>100</option>
                                </select>
                            </div>
                            <div class="col-md-6"></div>
                            <div class="col-md-3">
                                <label class="form-label">Search</label>
                                <input type="text" class="form-control form-control-sm" id="departmentSearch"
                                    placeholder="Search departments..." onkeyup="filterDepartments(this.value)">
                            </div>
                        </div>

                        <div class="table-responsive" id="departmentTableContainer">
                            <table class="table table-hover" id="departmentTable">
                                <thead>
                                    <tr>
                                        <th>Department</th>
                                        <th class="text-center">Faculties</th>
                                        <th class="text-center">Evaluations</th>
                                        <th class="text-center">Responses</th>
                                        <th class="text-center">Avg Rating</th>
                                        <th class="text-center">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($departmentBreakdown as $dept)
                                        <tr class="department-row" data-department="{{ $dept['department'] }}">
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar flex-shrink-0 me-3">
                                                        <span class="avatar-initial bg-primary rounded">
                                                            {{ substr($dept['department'], 0, 2) }}
                                                        </span>
                                                    </div>
                                                    <div>
                                                        <h6 class="mb-0">{{ $dept['department'] }}</h6>
                                                        <small class="text-muted">{{ $dept['active_evaluations'] }}
                                                            active</small>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                <span class="badge bg-light text-dark">{{ $dept['faculty_count'] }}</span>
                                            </td>
                                            <td class="text-center">
                                                <span class="badge bg-info">{{ $dept['total_evaluations'] }}</span>
                                            </td>
                                            <td class="text-center">
                                                <span class="badge bg-success">{{ $dept['total_responses'] }}</span>
                                            </td>
                                            <td class="text-center">
                                                <span class="fw-medium">{{ $dept['average_rating'] }}</span>
                                                <div class="progress rating-progress mt-1">
                                                    <div class="progress-bar bg-{{ $dept['average_rating'] >= 3 ? 'success' : ($dept['average_rating'] >= 2 ? 'warning' : 'danger') }}"
                                                        style="width: {{ ($dept['average_rating'] / 4) * 100 }}%"></div>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                <button type="button" class="btn btn-sm btn-outline-primary"
                                                    onclick="showFacultyModal('{{ $dept['department'] }}')">
                                                    <i class="bx bx-group me-1"></i>View Faculty
                                                </button>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center py-4">
                                                <i class="bx bx-buildings text-muted mb-2" style="font-size: 2rem;"></i>
                                                <p class="text-muted mb-0">No department data available</p>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        {{-- Department Table Pagination (Simple client-side for now) --}}
                        <div class="d-flex justify-content-between align-items-center mt-3" id="departmentPagination">
                            <div>
                                <small class="text-muted">Showing <span
                                        id="departmentShowing">{{ count($departmentBreakdown) }}</span> of
                                    {{ count($departmentBreakdown) }} entries</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Faculty Performance Tables --}}
        <div class="row">
            {{-- Top Rated Faculties --}}
            <div class="col-lg-6 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Top Rated Faculties</h5>
                    </div>
                    <div class="card-body">
                        @forelse($facultyRatings['top_rated'] as $index => $faculty)
                            <div class="d-flex align-items-center mb-3">
                                <div class="me-3">
                                    <span class="badge bg-{{ $index < 3 ? 'success' : 'primary' }} rounded-pill">
                                        #{{ $index + 1 }}
                                    </span>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0">{{ $faculty['faculty_name'] }}</h6>
                                    <small class="text-muted">{{ $faculty['department'] }}</small>
                                </div>
                                <div class="text-end">
                                    <div class="fw-medium">{{ $faculty['average_rating'] }}/4.0</div>
                                    <small class="text-muted">{{ $faculty['total_responses'] }} responses</small>
                                </div>
                            </div>
                        @empty
                            <div class="text-center py-3">
                                <i class="bx bx-star text-muted mb-2" style="font-size: 2rem;"></i>
                                <p class="text-muted mb-0">No rating data available</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>

            {{-- Most Evaluated Faculties --}}
            <div class="col-lg-6 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Most Evaluated Faculties</h5>
                    </div>
                    <div class="card-body">
                        @forelse($facultyRatings['most_evaluated'] as $index => $faculty)
                            <div class="d-flex align-items-center mb-3">
                                <div class="me-3">
                                    <span class="badge bg-{{ $index < 3 ? 'info' : 'secondary' }} rounded-pill">
                                        #{{ $index + 1 }}
                                    </span>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0">{{ $faculty['faculty_name'] }}</h6>
                                    <small class="text-muted">{{ $faculty['department'] }}</small>
                                </div>
                                <div class="text-end">
                                    <div class="fw-medium">{{ $faculty['total_responses'] }} responses</div>
                                    <small class="text-muted">{{ $faculty['average_rating'] }}/4.0 avg</small>
                                </div>
                            </div>
                        @empty
                            <div class="text-center py-3">
                                <i class="bx bx-bar-chart text-muted mb-2" style="font-size: 2rem;"></i>
                                <p class="text-muted mb-0">No evaluation data available</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Faculty Modal --}}
    <div class="modal fade" id="facultyModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Faculty Members - <span id="modalDepartmentName"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {{-- Faculty Table Controls --}}
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <label class="form-label">Show entries</label>
                            <select class="form-select form-select-sm" id="facultyPerPage">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                        </div>
                        <div class="col-md-6"></div>
                        <div class="col-md-3">
                            <label class="form-label">Search</label>
                            <input type="text" class="form-control form-control-sm" id="facultySearch"
                                placeholder="Search faculty...">
                        </div>
                    </div>

                    {{-- Faculty Table Container --}}
                    <div id="facultyTableContainer">
                        <div class="text-center py-4">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </div>
                    </div>

                    {{-- Faculty Pagination --}}
                    <div id="facultyPagination" class="mt-3"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Enhanced functionality for the dashboard
        let currentDepartment = '';

        // Export functionality
        function exportData() {
            const filters = {
                department: '{{ $selectedDepartment }}',
                academic_year: '{{ $selectedAcademicYear }}',
                semester: '{{ $selectedSemester }}'
            };

            // Create CSV content
            let csvContent = "data:text/csv;charset=utf-8,";

            // Add headers
            csvContent += "Department,Faculty Count,Total Evaluations,Active Evaluations,Total Responses,Average Rating\n";

            @foreach($departmentBreakdown as $dept)
                csvContent += "{{ $dept['department'] }},{{ $dept['faculty_count'] }},{{ $dept['total_evaluations'] }},{{ $dept['active_evaluations'] }},{{ $dept['total_responses'] }},{{ $dept['average_rating'] }}\n";
            @endforeach

                                                // Create and trigger download
                                                const encodedUri = encodeURI(csvContent);
            const link = document.createElement("a");
            link.setAttribute("href", encodedUri);
            link.setAttribute("download", `evaluation_report_${new Date().toISOString().split('T')[0]}.csv`);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }

        // Department table functionality
        function updatePerPage(value) {
            const url = new URL(window.location.href);
            url.searchParams.set('per_page', value);
            window.location.href = url.toString();
        }

        function filterDepartments(searchTerm) {
            const rows = document.querySelectorAll('.department-row');
            let visibleCount = 0;

            rows.forEach(row => {
                const departmentName = row.getAttribute('data-department').toLowerCase();
                if (departmentName.includes(searchTerm.toLowerCase())) {
                    row.style.display = '';
                    visibleCount++;
                } else {
                    row.style.display = 'none';
                }
            });

            document.getElementById('departmentShowing').textContent = visibleCount;
        }

        // Faculty modal functionality
        function showFacultyModal(department) {
            currentDepartment = department;
            document.getElementById('modalDepartmentName').textContent = department;

            const modal = new bootstrap.Modal(document.getElementById('facultyModal'));
            modal.show();

            loadFacultyData(department, 1, 10, '');
        }

        function loadFacultyData(department, page = 1, perPage = 10, search = '') {
            const url = new URL('{{ route("reports.department.faculties") }}');
            url.searchParams.set('department', department);
            url.searchParams.set('page', page);
            url.searchParams.set('per_page', perPage);
            url.searchParams.set('search', search);
            url.searchParams.set('academic_year', '{{ $selectedAcademicYear }}');
            url.searchParams.set('semester', '{{ $selectedSemester }}');

            // Show loading
            document.getElementById('facultyTableContainer').innerHTML = `
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="text-muted mt-2">Loading faculty data...</p>
                    </div>
                `;

            fetch(url, {
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/json'
                }
            })
                .then(response => {
                    console.log('Response status:', response.status);
                    console.log('Response headers:', response.headers.get('content-type'));

                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('Response data:', data);

                    // Check if the response has the expected structure
                    if (!data || typeof data !== 'object') {
                        throw new Error('Invalid response: not an object');
                    }

                    // Handle error responses
                    if (data.success === false) {
                        throw new Error(data.message || data.error || 'Server returned an error');
                    }

                    // Check for required properties
                    if (!data.hasOwnProperty('html')) {
                        throw new Error('Invalid response: missing html property');
                    }

                    if (!data.hasOwnProperty('pagination')) {
                        throw new Error('Invalid response: missing pagination property');
                    }

                    // Set the HTML content
                    document.getElementById('facultyTableContainer').innerHTML = data.html;

                    // Handle pagination - check if there's pagination content
                    const paginationContainer = document.getElementById('facultyPagination');
                    if (data.pagination && data.pagination.trim() !== '') {
                        paginationContainer.innerHTML = data.pagination;
                        paginationContainer.style.display = 'block';
                    } else {
                        // Hide pagination if no pagination needed (single page)
                        paginationContainer.innerHTML = '';
                        paginationContainer.style.display = 'none';
                    }

                    // Update pagination info if meta data is available
                    if (data.meta) {
                        updatePaginationInfo(data.meta);
                    }

                    // Bind pagination click events
                    bindPaginationEvents();

                    // Success feedback
                    console.log('Faculty data loaded successfully');

                })
                .catch(error => {
                    console.error('Error loading faculty data:', error);

                    // Show detailed error message
                    document.getElementById('facultyTableContainer').innerHTML = `
                        <div class="text-center py-4">
                            <i class="bx bx-error text-danger mb-2" style="font-size: 2rem;"></i>
                            <h6 class="text-danger mb-2">Error Loading Faculty Data</h6>
                            <p class="text-muted mb-2">${error.message}</p>
                            <button class="btn btn-sm btn-outline-primary" onclick="loadFacultyData('${department}', ${page}, ${perPage}, '${search}')">
                                <i class="bx bx-refresh me-1"></i>Retry
                            </button>
                        </div>
                    `;

                    // Hide pagination on error
                    document.getElementById('facultyPagination').style.display = 'none';
                });
        }

        // Helper function to update pagination info
        function updatePaginationInfo(meta) {
            const infoElement = document.querySelector('#facultyPagination .pagination-info');
            if (infoElement && meta.total !== undefined) {
                const from = meta.from || 0;
                const to = meta.to || 0;
                const total = meta.total || 0;

                infoElement.textContent = `Showing ${from} to ${to} of ${total} entries`;
            }
        }

        // Bind pagination events
        function bindPaginationEvents() {
            const paginationLinks = document.querySelectorAll('#facultyPagination .pagination a');

            paginationLinks.forEach(link => {
                link.addEventListener('click', function (e) {
                    e.preventDefault();

                    // Extract page number from URL or data attribute
                    let page = 1;
                    if (this.href) {
                        const url = new URL(this.href);
                        page = url.searchParams.get('page') || 1;
                    } else if (this.dataset.page) {
                        page = this.dataset.page;
                    }

                    const perPage = document.getElementById('facultyPerPage').value;
                    const search = document.getElementById('facultySearch').value;

                    // Load the new page
                    loadFacultyData(currentDepartment, page, perPage, search);
                });
            });
        }

        // Faculty pagination function for direct page calls
        function goToFacultyPage(page) {
            const perPage = document.getElementById('facultyPerPage').value || 10;
            const search = document.getElementById('facultySearch').value || '';
            loadFacultyData(currentDepartment, page, perPage, search);
        }

        // Faculty search and pagination handlers
        document.addEventListener('DOMContentLoaded', function () {
            // Faculty per page change
            document.getElementById('facultyPerPage').addEventListener('change', function () {
                if (currentDepartment) {
                    loadFacultyData(currentDepartment, 1, this.value, document.getElementById('facultySearch').value);
                }
            });

            // Faculty search with debouncing
            let searchTimeout;
            document.getElementById('facultySearch').addEventListener('input', function () {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(() => {
                    if (currentDepartment) {
                        loadFacultyData(currentDepartment, 1, document.getElementById('facultyPerPage').value, this.value);
                    }
                }, 500);
            });
        });

        // Form auto-submit on filter change
        document.querySelectorAll('select[name="department"], select[name="academic_year"], select[name="semester"]').forEach(select => {
            select.addEventListener('change', function () {
                // Add loading state
                const button = document.querySelector('button[type="submit"]');
                const originalText = button.innerHTML;
                button.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Loading...';
                button.disabled = true;

                // Submit form
                this.form.submit();
            });
        });

        // Progress bar animations
        function animateProgressBars() {
            document.querySelectorAll('.progress-bar').forEach(bar => {
                const width = bar.style.width;
                bar.style.width = '0%';
                setTimeout(() => {
                    bar.style.transition = 'width 1s ease-in-out';
                    bar.style.width = width;
                }, 100);
            });
        }

        // Initialize animations on load
        document.addEventListener('DOMContentLoaded', function () {
            animateProgressBars();
        });

        // Auto-refresh every 5 minutes (only if modal is not open)
        setInterval(function () {
            const modal = document.getElementById('facultyModal');
            if (!modal.classList.contains('show')) {
                location.reload();
            }
        }, 300000);

        // Utility function to decode HTML entities
        function decodeHtmlEntities(str) {
            const textArea = document.createElement('textarea');
            textArea.innerHTML = str;
            return textArea.value;
        }

        // Alternative method for handling JSON response with escaped HTML
        function parseJsonResponse(data) {
            if (typeof data === 'string') {
                try {
                    data = JSON.parse(data);
                } catch (e) {
                    console.error('Failed to parse JSON:', e);
                    return null;
                }
            }

            if (data.html) {
                // Decode HTML entities if they exist
                data.html = decodeHtmlEntities(data.html);
            }

            if (data.pagination) {
                // Decode pagination HTML entities if they exist
                data.pagination = decodeHtmlEntities(data.pagination);
            }

            return data;
        }

        // Enhanced error handling
        window.addEventListener('error', function (e) {
            console.error('JavaScript error:', e.error);
        });

        // Add CSS animations and styles
        const style = document.createElement('style');
        style.textContent = `
                                                @keyframes pulse {
                                                    0% { transform: scale(1); }
                                                    50% { transform: scale(1.05); }
                                                    100% { transform: scale(1); }
                                                }

                                                @keyframes fadeIn {
                                                    from { opacity: 0; }
                                                    to { opacity: 1; }
                                                }

                                                .progress-bar {
                                                    transition: width 0.8s ease-in-out;
                                                }

                                                .metric-card {
                                                    transition: all 0.3s ease;
                                                }

                                                .metric-card:hover {
                                                    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
                                                }

                                                .department-row:hover {
                                                    background-color: #f8f9fa;
                                                }

                                                .modal-xl {
                                                    max-width: 1200px;
                                                }

                                                .table-responsive {
                                                    animation: fadeIn 0.3s ease-in-out;
                                                }

                                                .pagination {
                                                    justify-content: center;
                                                }

                                                .pagination .page-link {
                                                    transition: all 0.2s ease;
                                                }

                                                .pagination .page-link:hover {
                                                    transform: translateY(-1px);
                                                }

                                                .spinner-border-sm {
                                                    width: 1rem;
                                                    height: 1rem;
                                                }

                                                .loading-overlay {
                                                    position: relative;
                                                }

                                                .loading-overlay::after {
                                                    content: '';
                                                    position: absolute;
                                                    top: 0;
                                                    left: 0;
                                                    right: 0;
                                                    bottom: 0;
                                                    background: rgba(255, 255, 255, 0.8);
                                                    display: flex;
                                                    align-items: center;
                                                    justify-content: center;
                                                    z-index: 10;
                                                }
                                            `;
        document.head.appendChild(style);

        // Debug function to check response format
        function debugResponse(response) {
            console.log('Response type:', typeof response);
            console.log('Response content:', response);

            if (typeof response === 'string') {
                try {
                    const parsed = JSON.parse(response);
                    console.log('Parsed JSON:', parsed);
                    return parsed;
                } catch (e) {
                    console.error('JSON parse error:', e);
                    return null;
                }
            }

            return response;
        }
    </script>
@endsection