@extends('layout.super-admin-two')

@section('title', 'School Learning Resources')

@section('content')
    <div class="page-header">
        <h1>School Learning Resources</h1>
        <p>Manage school learning resources</p>
    </div>

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle-fill me-2 text-danger"></i>
            <strong>Errors:</strong>
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle-fill me-1 text-success"></i>  
            <span class="text-success">{{ session('success') }}</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="d-flex mb-2 gap-2">                
        <div>
            <select class="form-select form-select-sm" id="grade_level" name="grade_level">
                <option value="">Select Grade Level</option>
                @foreach($gradeLevels as $gradeLevel)
                    <option 
                        value="{{ $gradeLevel->id }}" 
                        @selected(old('grade_level', $selectedGradeLevel) == $gradeLevel->id)
                    >
                        {{ $gradeLevel->name }}
                    </option>
                @endforeach
            </select>
        </div>

    
        <div class="d-flex align-items-center">
            <select class="form-select form-select-sm" 
                    id="learning_area" 
                    name="learning_area">
                <option value="">Select Learning Area</option>
            </select>
            
            <!-- Added ms-2 for a small gap on the side -->
            <div id="subjectLoadingSpinner" class="ms-2 text-nowrap" style="display: none;">
                <small class="text-muted d-flex align-items-center">
                    <span class="spinner-border spinner-border-sm me-2"></span>
                </small>
            </div>
        </div>
        

        <div>
            <a href="{{ route('admin.school-resources.export', request()->query()) }}" class="btn btn-success btn-sm">
                <i class="bi bi-download"></i> Export CSV
            </a>
        </div>


    </div>

    <div class="card shadow-none border">
        <div class="card-header d-flex justify-content-between align-items-center" style="background-color: #E8F0FF;">
            <div class="text-primary"><i class="bi bi-file-text me-2"></i>Learning Resource List</div>
            <div class="d-flex gap-2 align-items-center">

                <div class="d-flex gap-2">                                                           
                    <!-- Search Box -->
                    <form method="GET" action="{{ route('admin.school-resources') }}" class="d-flex w-full gap-2">
                        <div class="input-group input-group-sm" style="width: 25rem;">
                            <input 
                                type="text" 
                                class="form-control border-secondary-subtle" 
                                placeholder="Search" 
                                name="search"
                                value="{{ old('search', $search) }}"
                            >
                            <button class="btn btn-outline-primary border-secondary-subtle" type="submit">
                                <i class="bi bi-search"></i>
                            </button>
                            @if($search)
                                <a href="{{ route('admin.school-resources') }}" class="btn btn-outline-secondary">
                                    <i class="bi bi-x-lg"></i>
                                </a>
                            @endif
                        </div>
                    </form>

                </div>
                

                <!-- Add Resource Button -->
                <div>
                    <a href="{{ route('admin.school-resources.create') }}" class="btn btn-primary btn-sm">
                        <i class="bi bi-plus-lg"></i> Add Resource
                    </a>
                </div>
            </div>
        </div>

        <div class="card-body">
            @if($resources->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover resources-table">
                        <thead>
                            <tr>
                                <th>
                                    <a href="{{ route('admin.school-resources', array_merge(request()->query(), ['sort_by' => 'title', 'sort_order' => $sortBy === 'title' && $sortOrder === 'asc' ? 'desc' : 'asc'])) }}" class="text-decoration-none text-dark">
                                        Title
                                        @if($sortBy === 'title')
                                            <i class="bi bi-caret-{{ $sortOrder === 'asc' ? 'up-fill' : 'down-fill' }}"></i>
                                        @endif
                                    </a>
                                </th>
                                <th>
                                    <a href="{{ route('admin.school-resources', array_merge(request()->query(), ['sort_by' => 'type', 'sort_order' => $sortBy === 'type' && $sortOrder === 'asc' ? 'desc' : 'asc'])) }}" class="text-decoration-none text-dark">
                                        Type
                                        @if($sortBy === 'type')
                                            <i class="bi bi-caret-{{ $sortOrder === 'asc' ? 'up-fill' : 'down-fill' }}"></i>
                                        @endif
                                    </a>
                                </th>
                                <th>
                                    <a href="{{ route('admin.school-resources', array_merge(request()->query(), ['sort_by' => 'grade_levels', 'sort_order' => $sortBy === 'grade_levels' && $sortOrder === 'asc' ? 'desc' : 'asc'])) }}" class="text-decoration-none text-dark">
                                        Grade Level
                                        @if($sortBy === 'grade_levels')
                                            <i class="bi bi-caret-{{ $sortOrder === 'asc' ? 'up-fill' : 'down-fill' }}"></i>
                                        @endif
                                    </a>
                                </th>
                                <th>
                                    <a href="{{ route('admin.school-resources', array_merge(request()->query(), ['sort_by' => 'subjects', 'sort_order' => $sortBy === 'subjects' && $sortOrder === 'asc' ? 'desc' : 'asc'])) }}" class="text-decoration-none text-dark">
                                        Learning Area
                                        @if($sortBy === 'subjects')
                                            <i class="bi bi-arrow-{{ $sortOrder === 'asc' ? 'up' : 'down' }}"></i>
                                        @endif
                                    </a>
                                </th>
                                <th>Actions</th>
                            </tr>
                        </thead>                        
                        <tbody>
                            @foreach($resources as $resource)
                                <tr class="align-middle">
                                    <td>
                                        <span data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $resource->title }}"> {{ $resource->title }} </span>
                                    </td>
                                    <td>
                                        <span class="badge rounded-pill bg-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $resource->type }}">{{ ucfirst($resource->type) }}</span>
                                    </td>
                                    <td>
                                        @if($resource->grade_levels)
                                            <span data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $resource->grade_levels }}">{{ $resource->grade_levels }}</span>
                                        @else
                                            <span class="text-muted">—</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($resource->subjects)
                                            <span data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $resource->subjects }}">{{ $resource->subjects }}</span>
                                        @else
                                            <span class="text-muted">—</span>
                                        @endif
                                    </td>
                                    <td>
                                        <a 
                                            href="{{ route('admin.school-resources.show', [$resource->lr_id, 'page' => $resources->currentPage()]) }}"
                                            class="btn btn-outline-primary btn-sm"
                                            title="View"
                                            data-bs-toggle="tooltip"
                                            data-bs-placement="top"
                                        >
                                            <i class="bi bi-eye"></i>
                                        </a>
                                        <a 
                                            href="{{ route('admin.school-resources.edit', $resource->lr_id) }}" 
                                            class="btn btn-sm btn-outline-warning"
                                            title="Edit"
                                            data-bs-toggle="tooltip"
                                            data-bs-placement="top"
                                        >
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                        <span data-bs-toggle="tooltip" data-bs-placement="top" title="Delete">
                                            <button 
                                                type="button" 
                                                class="btn btn-sm btn-outline-danger"
                                                data-bs-toggle="modal" 
                                                data-bs-target="#deleteModal"
                                                data-resource-id="{{ $resource->lr_id }}"
                                                data-resource-title="{{ $resource->title }}"
                                            >
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </span>

                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="cstm-pagination">
                    <div class="d-flex justify-content-between align-items-center mt-4 pt-4 border-top">
                        <div class="text-muted small">                            
                            Showing <strong>{{ $resources->firstItem() }}</strong> to <strong>{{ $resources->lastItem() }}</strong> of <strong>{{ $resources->total() }}</strong> resources
                        </div>
                        {{ $resources->appends(request()->query())->links('pagination::bootstrap-5') }}
                    </div>
                </div>
            @else
                <div class="text-center py-5">
                    <p class="text-muted">
                        @if($search)
                            No resources found matching "<strong>{{ $search }}</strong>"
                            <br>
                            <a href="{{ route('admin.school-resources') }}">Clear search</a>
                        @else
                            No learning resources available yet.
                            <br>
                            <a href="{{ route('admin.school-resources.create') }}">Create one now</a>
                        @endif
                    </p>
                </div>
            @endif
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Delete Resource</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete?</p>
                    <p class="fw-semibold" id="deleteResourceTitle"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <form id="deleteForm" method="POST" style="display: inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl, {
                    trigger: 'hover' 
                })
            })
                    
            const gradeLevel = document.getElementById('grade_level').value;
            const selectedSubject = '{{ $selectedSubject ?? "" }}'; 
                        
            if (gradeLevel) {            
                loadSubjects(gradeLevel, selectedSubject);
            } else {            
                loadFullSubjects(selectedSubject);
            }

            // Event listeners
            document.getElementById('grade_level')?.addEventListener('change', async function() {            
                await loadSubjects(this.value);
                filterResources();
            });

            document.getElementById('learning_area')?.addEventListener('change', function() {
                filterResources();
            });
        });

        const deleteModal = document.getElementById('deleteModal');
        deleteModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const resourceId = button.getAttribute('data-resource-id');
            const resourceTitle = button.getAttribute('data-resource-title');
            
            document.getElementById('deleteResourceTitle').textContent = resourceTitle;
            document.getElementById('deleteForm').action = `/sa-resources/${resourceId}`;
        });

        function filterResources() {
            const gradeLevel = document.getElementById('grade_level').value;
            const subject = document.getElementById('learning_area').value;
            
            // Build URL with filter parameters
            let url = '{{ route("admin.school-resources") }}';
            let params = [];
            
            if (gradeLevel) params.push(`grade_level=${gradeLevel}`);
            if (subject) params.push(`learning_area=${subject}`);
            
            if (params.length > 0) {
                url += '?' + params.join('&');
            }
            
            window.location.href = url;
        }

        async function loadFullSubjects(selectedSubjectId = null) {
            const url = '/sa/api/subjects';        
            const learningAreaSelect = document.getElementById('learning_area');
            const loadingSpinner = document.getElementById('subjectLoadingSpinner');

            loadingSpinner.style.display = 'block';

            try {
                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const result = await response.json();  

                // Since result IS the array, check directly
                if (Array.isArray(result) && result.length > 0) {
                    learningAreaSelect.innerHTML = '<option value="">Select Learning Area</option>';
                    result.forEach(subject => {
                        const option = document.createElement('option');
                        option.value = subject.id;
                        option.textContent = subject.title;

                        if (selectedSubjectId && subject.id == selectedSubjectId) {
                            option.selected = true;
                        }

                        learningAreaSelect.appendChild(option);
                    });
                    learningAreaSelect.disabled = false;
                } 
                else {
                    learningAreaSelect.innerHTML = '<option value="">No learning area available</option>';
                    learningAreaSelect.disabled = true;
                }

            } catch (error) {
                console.error('Error loading subjects:', error);
                learningAreaSelect.innerHTML = '<option value="">Error loading subjects</option>';
                learningAreaSelect.disabled = true;
            } finally {
                loadingSpinner.style.display = 'none';
            }
        }


        async function loadSubjects(gradeLevelId, selectedSubjectId = null) {
            const learningAreaSelect = document.getElementById('learning_area');
            const loadingSpinner = document.getElementById('subjectLoadingSpinner');

            learningAreaSelect.innerHTML = '<option value="">Select Learning Area</option>';
            loadingSpinner.style.display = 'none';

            if (!gradeLevelId) {
                learningAreaSelect.innerHTML = '<option value="">Select Grade Level First</option>';
                learningAreaSelect.disabled = true;
                return;
            }

            loadingSpinner.style.display = 'block';

            try {
                const url = '{{ route("admin.school-resources.api.subjects-by-gradelevel", ":id") }}'.replace(':id', gradeLevelId);
                const response = await fetch(url);
                const result = await response.json();

                loadingSpinner.style.display = 'none';

                if (result.success && result.data.length > 0) {
                    learningAreaSelect.innerHTML = '<option value="">Select Learning Area</option>';
                    result.data.forEach(subject => {
                        const option = document.createElement('option');
                        option.value = subject.id;
                        option.textContent = subject.title;
                        
                        // Set as selected if it matches the current selection
                        if (selectedSubjectId && subject.id == selectedSubjectId) {
                            option.selected = true;
                        }
                        
                        learningAreaSelect.appendChild(option);
                    });
                    learningAreaSelect.disabled = false;
                } else {
                    learningAreaSelect.innerHTML = '<option value="">No learning area available</option>';
                    learningAreaSelect.disabled = true;
                }
            } catch (error) {
                console.error('Error loading subjects:', error);
                loadingSpinner.style.display = 'none';
                learningAreaSelect.innerHTML = '<option value=""></option>';
                learningAreaSelect.disabled = true;
            }
        }
    </script>
@endpush