@extends('layout.layout')
@section('content')

<div class="container py-5">
    {{-- @include('components.alert') --}}

    {{-- Search and Filter Toggle Container --}}
    <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3 mb-4 p-3 bg-white rounded-3 shadow-lg border">

        <form id="filter-form" class="d-flex flex-column flex-md-row align-items-stretch align-items-md-center gap-3 w-100 w-md-auto"
            action="{{ route('students') }}" method="GET">

            <div class="input-group input-group-sm flex-grow-1" style="min-width: 100px;">
                {{-- ADDED ID for JS targeting --}}
                <input type="text" class="form-control" name="search" id="main-search-input" placeholder="Search by name or ID"
                    value="{{ request('search') }}">
                <button class="btn btn-primary" type="submit" title="Search">
                    <iconify-icon icon="ion:search-outline"></iconify-icon>
                </button>
                <a href="{{ route('students') }}" class="btn btn-outline-danger" title="Clear Filters">
                    <iconify-icon icon="ion:close-outline"></iconify-icon>
                </a>
            </div>
            <button class="btn btn-outline-secondary btn-sm d-flex align-items-center justify-content-center"
                type="button" id="filter-toggle" style="width: auto;">
                <iconify-icon icon="ion:filter-outline" class="me-1"></iconify-icon>
                Staff Filters
            </button>
        </form>
    </div>

    <br>
    {{-- Dynamic Filter Dropdowns Container (Initially hidden/toggled) --}}
    @if ($staff->jobTitle->slug == "academic-manager" || $staff->jobTitle->slug != "academic-manager")
    <div id="staff-filters" class="p-3 mb-4 bg-light rounded-3 shadow-sm" style="display: {{ request()->hasAny(['supervisor_id', 'teacher_id']) ? 'block' : 'none' }};">
        <form id="dropdown-filter-form" class="d-flex flex-wrap align-items-center gap-3" action="{{ route('students') }}" method="GET">

            {{-- HIDDEN INPUT: Carries the search term from the main search box. Will be updated by JS. --}}
            <input type="hidden" name="search" id="hidden-search-input" value="{{ request('search') }}">

            @if ($staff->jobTitle->slug == "academic-manager")
            <div class="fw-bold text-secondary">Academic Manager Filter:</div>

            <div class="flex-grow-1">
                <label for="supervisor-select" class="form-label visually-hidden">Supervisor</label>
                <select id="supervisor-select" name="supervisor_id" class="form-select form-select-sm">
                    <option value="">All Supervisors</option>
                    @foreach ($assignableStaffs as $supervisor)
                    <option value="{{ $supervisor->id }}" {{ request('supervisor_id') == $supervisor->id ? 'selected' : '' }}>
                        {{ $supervisor->first_name . ' ' . $supervisor->last_name }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div class="flex-grow-1">
                <label for="teacher-select" class="form-label visually-hidden">Teacher</label>
                <select id="teacher-select" name="teacher_id" class="form-select form-select-sm">
                    <option value="">All Teachers</option>
                    @if (request('supervisor_id') && request('teacher_id'))
                    {{-- This option is removed by JS when teachers are loaded dynamically --}}
                    <option value="{{ request('teacher_id') }}" selected>
                        Selected Teacher
                    </option>
                    @endif
                </select>
            </div>
            <button class="btn btn-success btn-sm" type="submit">Apply Filters</button>
            @else
            <div class="fw-bold text-secondary">Teacher View:</div>
            <div class="flex-grow-1">
                <label for="teacher-select-other" class="form-label visually-hidden">Teacher</label>
                <select id="teacher-select-other" name="teacher_id" class="form-select form-select-sm">
                    <option value="">All Teachers</option>
                    @foreach ($assignableStaffs as $teacher)
                    <option value="{{ $teacher->id }}" {{ request('teacher_id') == $teacher->id ? 'selected' : '' }}>
                        Teacher: {{ $teacher->first_name . ' ' . $teacher->last_name }}
                    </option>
                    @endforeach
                </select>
            </div>
            <button class="btn btn-success btn-sm" type="submit">Apply Filters</button>
            @endif
        </form>
    </div>
    @endif

    {{-- Student Table --}}
    @if ($students->count())
    <div class="table-responsive">
        <table class="table table-bordered table-hover table-sm mb-0 align-middle">
            <thead class="table-primary">
                <tr>
                    <th>Photo</th>
                    <th>ID</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Last Session</th>
                    <th>Session Date</th>
                    <th>Feedback Status</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($students as $index => $studentCourse)
                <tr>
                    <td>
                        @php
                        $profileImage = $studentCourse->student->student_photo
                        ? $studentCourse->student->student_photo
                        : asset('assets/images/logo-icon.png');
                        $lastSession = $studentCourse->last_session;
                        $targetDate = $studentCourse->feedback_target_date
                        ? \Carbon\Carbon::parse($studentCourse->feedback_target_date)
                        : null;

                        $today = \Carbon\Carbon::today();
                        $isLate = $targetDate && $today->gt($targetDate);
                        @endphp
                        <img src="{{ $profileImage }}" alt="" class="rounded-circle" width="50" height="50" style="object-fit: cover;">
                    </td>
                    <td><a href="#" class="text-decoration-none text-primary">{{ $studentCourse->student->student_code ?? $studentCourse->student->id }}</a></td>
                    <td>{{ $studentCourse->student->first_name ?? '' }}</td>
                    <td>{{ $studentCourse->student->last_name ?? '' }}</td>
                    <td>
                        @if ($lastSession)
                        <span class="badge bg-secondary">Session {{ $lastSession['session_number'] }}</span>
                        @else
                        <span class="text-muted fst-italic">No session attended yet</span>
                        @endif
                    </td>
                    <td>
                        @if ($lastSession)
                        <span class="badge bg-secondary">{{ $lastSession['session_date'] }}</span>
                        @else
                        <span class="text-muted fst-italic">No session attended yet</span>
                        @endif
                    </td>
                    <td>
                        @can('retention_students_show')
                        <a href="{{ config('app.Retention_URL') . 'students/' . $studentCourse->student->id }}"
                            class="btn btn-sm btn-outline-primary radius-8" title="Show">
                            <iconify-icon icon="lucide:eye" class="text-lg"></iconify-icon>
                        </a>
                        @endcan

                        @php
                        $authStaff = \App\Models\Staff::with('jobTitle:id,slug')->where('user_id', Auth::id())->first();

                        $hasUrgent = \DB::table('urgents')
                        ->where('student_id', $studentCourse->student->id)
                        ->where('created_by', Auth::id())
                        ->where('message', 'Misplaced Request')
                        ->exists();
                        @endphp
                        @if($authStaff &&$authStaff->jobTitle &&$authStaff->jobTitle->slug === 'teacher' && in_array($lastSession['session_number'], [1, 2]) &&!$hasUrgent)
                        <form action="{{ route('addUrgent') }}" method="POST" style="display:inline;">
                            @csrf
                            <input type="hidden" name="student_id" value="{{ $studentCourse->student->id }}">
                            <input type="hidden" name="session_id" value="{{ $lastSession['id'] }}">
                            <input type="hidden" name="message" value="Misplaced Request">
                            <button type="submit" class="btn btn-outline-primary btn-sm radius-8">
                                Misplaced
                            </button>
                        </form>
                        @endif
                        @if($studentCourse->should_add_feedback && $staff->jobTitle->slug == "teacher")
                        @php
                        $feedbackType = null;
                        if ($studentCourse->nextFeedback == "initial" && $lastSession['session_number'] == 2) $feedbackType = 'Initial';
                        elseif($studentCourse->nextFeedback == "mid" && $lastSession['session_number'] == 4) $feedbackType = 'Mid-Course';
                        elseif($studentCourse->nextFeedback == "final" && $lastSession['session_number'] == 8) $feedbackType = 'Final';
                        @endphp
                        @if($feedbackType)
                        <a href="{{ route('teacher_feedback.create', ['id' => $studentCourse->student->id,'staff_schedule_id' => $studentCourse->course->id]) }}"
                            class="btn {{ $isLate ? 'btn-danger' : 'btn-warning' }} btn-sm text-white me-2"
                            title="{{ $isLate ? 'OVERDUE' : 'Required' }}">
                            {{ $feedbackType }} Feedback
                            @if ($isLate) <iconify-icon icon="ion:alert-circle-outline"></iconify-icon> @endif
                        </a>
                        @endif
                        @endif
                        @php
                        $feedbackType = match($lastSession['session_number']) {
                        2 => 'initial',
                        4 => 'mid',
                        8 => 'final',
                        default => null
                        };
                        @endphp
                        @if(!$studentCourse->should_add_feedback &&in_array($lastSession['session_number'], [2, 4, 8]))
                        <button type="button"
                            class="btn btn-outline-info btn-sm"
                            data-bs-toggle="modal"
                            data-bs-target="#feedbackModal{{ $studentCourse->student->id }}">
                            View Feedback ({{ ucfirst($feedbackType) }})
                        </button>
                        @endif
                    </td>
                </tr>
                <div class="modal fade" id="feedbackModal{{ $studentCourse->student->id }}" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-xl modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header bg-primary text-white">
                                <h5 class="modal-title fw-bold">
                                    Feedback Details - {{ $studentCourse->student->first_name }} {{ $studentCourse->student->last_name }}
                                    <span class="badge bg-light text-dark ms-2">{{ ucfirst($feedbackType) }} Feedback</span>
                                </h5>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                @php
                                $filteredFeedbacks = $studentCourse->existing_feedbacks
                                ->where('type', $feedbackType);
                                @endphp
                                @forelse($filteredFeedbacks as $feedback)
                                <div class="border rounded p-3 mb-4 shadow-sm">
                                    <h6 class="fw-bold text-primary mb-2">
                                        {{ ucfirst($feedback->type) }} Feedback
                                        <span class="badge bg-secondary ms-2">{{ $feedback->created_at->format('Y-m-d') }}</span>
                                    </h6>

                                    <div class="row g-2 mb-3">
                                        @if($feedback->level)
                                        <div class="col-md-3"><strong>Level:</strong> {{ $feedback->level ?? 'N/A' }}</div>
                                        @endif
                                        @if($feedback->need)
                                        <div class="col-md-3"><strong>Need:</strong> {{ $feedback->need ?? 'N/A' }}</div>
                                        @endif
                                        @if($feedback->result)
                                        <div class="col-md-3"><strong>Result:</strong> {{ $feedback->result ?? 'N/A' }}</div>
                                        @endif
                                        @if($feedback->score)
                                        <div class="col-md-3"><strong>Score:</strong> {{ $feedback->score ?? 'N/A' }}</div>
                                        @endif
                                        @if($feedback->up_to_level)
                                        <div class="col-md-3"><strong>Up to Level:</strong> {{ $feedback->up_to_level ?? 'N/A' }}</div>
                                        @endif
                                    </div>

                                    <div class="mb-3 p-2 bg-light border rounded">
                                        <strong>Key Feedback/Summary:</strong>
                                        <p class="mb-0 text-muted">{{ $feedback->first_feedback ?? 'N/A' }}</p>
                                    </div>
                                    @if($feedback->type == "final")
                                    <h6 class="fw-bold text-secondary mt-3 mb-2 border-top pt-2">Skill Ratings</h6>
                                    @endif
                                    <div class="row g-2">
                                        @if($feedback->grammar)
                                        <div class="col-md-4"><strong>Grammar:</strong> {{ $feedback->grammar ?? 'N/A' }}</div>
                                        @endif
                                        @if($feedback->speaking)
                                        <div class="col-md-4"><strong>Speaking:</strong> {{ $feedback->speaking ?? 'N/A' }}</div>
                                        @endif
                                        @if($feedback->appropriacy)
                                        <div class="col-md-4"><strong>Appropriacy:</strong> {{ $feedback->appropriacy ?? 'N/A' }}</div>
                                        @endif
                                        @if($feedback->listening)
                                        <div class="col-md-4"><strong>Listening:</strong> {{ $feedback->listening ?? 'N/A' }}</div>
                                        @endif
                                        @if($feedback->reading)
                                        <div class="col-md-4"><strong>Reading:</strong> {{ $feedback->reading ?? 'N/A' }}</div>
                                        @endif
                                        @if($feedback->writing)
                                        <div class="col-md-4"><strong>Writing:</strong> {{ $feedback->writing ?? 'N/A' }}</div>
                                        @endif
                                    </div>

                                    @if($feedback->teachers_note)
                                    <div class="mt-3 p-2 border-top pt-3">
                                        <strong>Teacher’s Note:</strong>
                                        <p class="mb-0 fst-italic">{{ $feedback->teachers_note ?? 'No notes provided' }}</p>
                                    </div>
                                    @endif
                                </div>
                                @empty
                                <p class="text-center text-muted mb-0 p-3 bg-light rounded">
                                    No {{ $feedbackType }} feedback available for this student.
                                </p>
                                @endforelse
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>

                @endforeach
            </tbody>
        </table>
    </div>
    @else
    <div class="alert alert-info text-center mt-4" role="alert">
        <iconify-icon icon="ion:information-circle-outline" class="me-1"></iconify-icon>
        No students found matching the current filters.
    </div>
    @endif
    <div class="mt-3">
        {{ $students->appends(request()->query())->links() }}
    </div>


</div>
@endsection
@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const supervisorSelect = document.getElementById('supervisor-select');
        const teacherSelect = document.getElementById('teacher-select');
        const staffFiltersContainer = document.getElementById('staff-filters');
        const filterToggleBtn = document.getElementById('filter-toggle');
        const dropdownFilterForm = document.getElementById('dropdown-filter-form');

        // NEW ELEMENTS for the fix
        const mainSearchInput = document.getElementById('main-search-input');
        const hiddenSearchInput = document.getElementById('hidden-search-input');

        const selectedTeacherId = "{{ request('teacher_id') }}";

        // --- FIX: Ensure search term is passed when applying dropdown filters ---
        if (dropdownFilterForm && mainSearchInput && hiddenSearchInput) {
            dropdownFilterForm.addEventListener('submit', function() {
                // Copy the current value from the main search box into the hidden field 
                // of the dropdown filter form, just before it submits.
                hiddenSearchInput.value = mainSearchInput.value;
            });
        }

        // --- Filter Toggle Logic ---
        if (filterToggleBtn && staffFiltersContainer) {
            filterToggleBtn.addEventListener('click', function() {
                if (staffFiltersContainer.style.display === 'none' || staffFiltersContainer.style.display === '') {
                    staffFiltersContainer.style.display = 'block';
                } else {
                    staffFiltersContainer.style.display = 'none';
                }
            });
        }


        // --- Dynamic Teacher Loading (Academic Manager View) ---
        function fetchTeachers(selectedId = null) {
            // Check if we are in the Academic Manager view with the specific dropdowns
            if (!supervisorSelect || !teacherSelect) return;

            const supervisorId = supervisorSelect.value;

            // Reset teachers dropdown
            teacherSelect.innerHTML = '<option value="">All Teachers</option>';

            if (!supervisorId) {
                // Remove the "Selected Teacher" option placeholder if the supervisor is cleared
                teacherSelect.querySelector('option[selected]')?.remove();
                return;
            }

            // URL for fetching teachers (Assuming /get-teachers-by-supervisor/{id} is the correct route)
            const fetchUrl = `/get-teachers-by-supervisor/${supervisorId}`;

            // Add a temporary loading option
            const loadingOption = document.createElement('option');
            loadingOption.textContent = 'Loading teachers...';
            loadingOption.disabled = true;
            teacherSelect.appendChild(loadingOption);


            fetch(fetchUrl)
                .then(response => {
                    // Remove loading option regardless of success/error
                    loadingOption.remove();
                    if (!response.ok) {
                        throw new Error('Network response was not ok: ' + response.statusText);
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        data.teachers.forEach(teacher => {
                            const option = document.createElement('option');
                            option.value = teacher.id;
                            option.textContent = teacher.first_name + ' ' + teacher.last_name;
                            if (selectedId && selectedId == teacher.id) {
                                option.selected = true;
                            }
                            teacherSelect.appendChild(option);
                        });
                        // Clean up the Blade-rendered placeholder if it was present
                        const placeholderOption = teacherSelect.querySelector('option[value="{{ request('
                            teacher_id ') }}"]:not([value=""])');
                        if (placeholderOption) {
                            placeholderOption.remove();
                        }
                    }
                })
                .catch(error => {
                    console.error('Error fetching teachers:', error);
                    // Add an error message option
                    const errorOption = document.createElement('option');
                    errorOption.textContent = 'Error loading teachers';
                    errorOption.disabled = true;
                    teacherSelect.appendChild(errorOption);
                });
        }

        if (supervisorSelect && supervisorSelect.value) {
            fetchTeachers(selectedTeacherId);
        }

        if (supervisorSelect) {
            supervisorSelect.addEventListener('change', () => fetchTeachers());
        }

    });
</script>
@endpush