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

@section('title', 'Create Learning Resource')

@section('content')
    <div class="page-header">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h1>Add New Resource</h1>
                <p>Register and manage a new learning resource</p>
            </div>            
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center" style="background-color: #E8F0FF;">
                    <div class="text-primary">                        
                        <i class="bi bi-bookmark-plus me-1"></i>
                        Learning Resource Metadata
                    </div>
                    <a href="{{ route('admin.school-resources') }}" class="btn btn-outline-secondary btn-sm">
                        <i class="bi bi-arrow-left"></i> Back
                    </a>
                </div>
                <div class="card-body">
                    {{-- Display Success Message --}}
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">                            
                            <i class="bi bi-check-circle-fill me-2"></i>
                                <strong>{{ session('success_title') }} </strong> <span>{{ session('success') }}</span>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    {{-- Display Error Message --}}
                    @if(session('error'))
                        <div class="alert alert-danger fade show" role="alert">    
                            <i class="bi bi-exclamation-circle-fill me-2"></i>                  
                                {{ session('error') }}                            
                        </div>
                    @endif

                    {{-- Display Duplicate Found Message --}}
                    @if(session('duplicate_found'))
                        <div class="alert alert-warning fade show" role="alert">
                            <i class="bi bi-exclamation-triangle-fill"></i>
                            <strong>Duplicate Learning Resource Found</strong>
                            @if($resource = session('existing_resource'))
                                <div class="table-responsive mt-2">
                                    <table class="table table-hover mb-0">
                                        @foreach([
                                            'Title' => 'title',
                                            'Type' => 'type',
                                            'Authors' => 'authors',
                                            'Grade Level' => 'grade_levels',
                                            'Subject' => 'subjects',
                                            'Volume' => 'volume',
                                            'Edition' => 'edition',
                                            'Copyright Year' => 'copyright_year',
                                            'No. of Pages' => 'pages',
                                            'ISBN' => 'isbn',
                                            'Language' => 'lrlanguage',
                                            'Publisher' => 'publisher',
                                        ] as $label => $key)
                                            <tr class="table-warning">
                                                <th>{{ $label }}:</th>
                                                <td>{{ $resource[$key] ?? 'N/A' }}</td>
                                            </tr>
                                        @endforeach
                                    </table>
                                </div>
                            @endif                            
                        </div>
                    @endif

                    <form action="{{ route('admin.school-resources.store') }}" method="POST" enctype="multipart/form-data" id="resourceForm">
                        @csrf

                        <!-- Title -->
                        <div class="mb-4">
                            <label for="title" class="form-label">Title </label>
                            <input type="text" class="form-control @error('title') is-invalid @enderror" 
                                   id="title" name="title" value="{{ old('title') }}"  >
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Learning Resource Type -->
                        <div class="mb-4">
                            <label for="type" class="form-label">Learning Resource Type </label>
                            <select class="form-select @error('type') is-invalid @enderror" id="type" name="type"  >
                                <option value="">Select Resource Type</option>
                                @php
                                    $groupedTypes = $typeNames->groupBy('cat_name');
                                @endphp
                                @foreach($groupedTypes as $category => $types)
                                    <optgroup label="{{ $category }}">
                                        @foreach($types as $type)
                                            <option value="{{ $type->id }}" @selected(old('type') == $type->id)>
                                                {{ $type->type_name }}
                                            </option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </select>
                            @error('type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Authors -->
                        <div class="mb-4" id="author-section">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <label class="form-label mb-0">Authors</label>
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="noAuthorCheckbox"
                                        {{ old('no_author') ? 'checked' : '' }}>
                                    <label class="form-check-label small" for="noAuthorCheckbox">No Author</label>
                                </div>
                            </div>

                            <div id="author-fields-container">
                                @foreach(old('authors', ['']) as $index => $value)
                                    <div class="input-group mb-2 author-row">
                                        <input type="text" name="authors[]" value="{{ $value }}" 
                                            class="form-control author-input @error("authors.$index") is-invalid @enderror">
                                            <button type="button" class="btn btn-outline-danger remove-author" 
                                                style="{{ count(old('authors', [''])) <= 1 ? 'display:none' : '' }}">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                        @error("authors.$index")
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                @endforeach
                            </div>

                            @error('authors')
                                <div class="alert alert-danger small" role="alert">{{ $message }}</div>
                            @enderror

                            <button type="button" id="add-author-btn" class="btn btn-sm btn-link text-decoration-none ps-0">
                                + Add another author
                            </button>
                        </div>

                        <!-- Volume, Edition, Copyright Year -->
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-4">
                                    <label for="volume" class="form-label">Volume</label>
                                    <input type="text" class="form-control" id="volume" name="volume" value="{{ old('volume') }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-4">
                                    <label for="edition" class="form-label">Edition</label>
                                    <input type="text" class="form-control" id="edition" name="edition" value="{{ old('edition') }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-4">
                                    <label for="copyright_year" class="form-label">Copyright Year</label>
                                    <input type="number" class="form-control" id="copyright_year" name="copyright_year" 
                                           value="{{ old('copyright_year') }}" min="1900" max="{{ date('Y') }}">
                                </div>
                            </div>
                        </div>

                        <!-- Pages, ISBN, Publisher -->
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-4">
                                    <label for="no_of_pages" class="form-label">No. of Pages</label>
                                    <input type="number" class="form-control" id="no_of_pages" name="no_of_pages" 
                                           value="{{ old('no_of_pages') }}" min="1">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-4">
                                    <label for="isbn" class="form-label">ISBN</label>
                                    <input type="text" class="form-control" id="isbn" name="isbn" value="{{ old('isbn') }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-4">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <label for="publisher" class="form-label mb-0">Publisher</label>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="noPublisherCheckbox" name="no_publisher">
                                            <label class="form-check-label small" for="noPublisherCheckbox">No Publisher</label>
                                        </div>
                                    </div>
                                    <input type="text" class="form-control" id="publisher" name="publisher" value="{{ old('publisher') }}">
                                </div>
                            </div>
                        </div>

                        <!-- Language -->
                        <div class="mb-4">
                            <label for="language" class="form-label">Language</label>
                            <select class="form-select @error('language') is-invalid @enderror" id="language" name="language"  >
                                <option value="">Select Language</option>
                                <option value="English" @selected(old('language') === 'English')>English</option>
                                <option value="Tagalog" @selected(old('language') === 'Tagalog')>Tagalog</option>
                                <option value="Mother Tongue" @selected(old('language') === 'Mother Tongue')>Mother Tongue</option>
                                <option value="others" @selected(old('language') === 'others')>Others</option>
                            </select>
                            @error('language')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Language Others -->
                        <div id="languageOthersContainer" style="display: none;" class="mb-4">
                            <label for="language_others" class="form-label">Specify Language</label>
                            <input type="text" class="form-control" id="language_others" name="language_others" 
                                   value="{{ old('language_others') }}" placeholder="Enter language">
                            @error('language_others')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Grade Level -->
                        <div class="mb-4">
                            <label for="grade_level" class="form-label">Grade Level</label>
                            <select class="form-select @error('grade_level') is-invalid @enderror" id="grade_level" name="grade_level"  >
                                <option value="">Select Grade Level</option>
                                @foreach($gradeLevels as $gradeLevel)
                                    <option value="{{ $gradeLevel->id }}" @selected(old('grade_level') == $gradeLevel->id)>
                                        {{ $gradeLevel->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('grade_level')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Learning Area (Subject) -->
                        <div class="mb-4">
                            <label for="learning_area" class="form-label">Learning Area / Subject</label>
                            <select class="form-select @error('learning_area') is-invalid @enderror" id="learning_area" 
                                    name="learning_area"   disabled>
                                <option value="">Select Grade Level First</option>
                            </select>
                            <div id="subjectLoadingSpinner" style="display: none; margin-top: 8px;">
                                <small class="text-muted">
                                    <span class="spinner-border spinner-border-sm me-2"></span>Loading subjects...
                                </small>
                            </div>
                            @error('learning_area')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Book Cover (OPTIONAL) with Image Editor -->
                        <div class="mb-4">
                            <label for="book_cover_input" class="form-label">Book Cover <span class="text-muted">(Optional)</span></label>
                            
                            <!-- Hidden File Input -->
                            <input type="file" id="book_cover_input" name="book_cover" accept="image/*" style="display: none;">
                            
                            <!-- Upload Area -->
                            <div id="uploadArea" class="border border-2 border-dashed rounded p-5 text-center cursor-pointer transition-all" 
                                 style="background: #f8f9fa; border-color: #dee2e6; cursor: pointer;">
                                <i class="bi bi-image text-muted" style="font-size: 3rem;"></i>
                                <p class="mt-3 mb-2 text-dark fw-500">Click to upload or drag and drop</p>
                                <small class="text-muted">JPG and PNG (Compressed on server)</small>
                            </div>

                            <!-- Image Preview Area (shown when image is selected) -->
                            <div id="previewArea" style="display: none; margin-top: 1rem;">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h6 class="mb-0">Preview</h6>
                                    <button type="button" id="removeImageBtn" class="btn btn-sm btn-outline-danger">
                                        <i class="bi bi-trash"></i> Remove
                                    </button>
                                </div>
                                <img id="previewImage" src="" alt="Preview" class="img-fluid rounded" style="max-height: 250px; object-fit: contain;">
                            </div>

                            <!-- Edit Button -->
                            <div id="editButtonContainer" style="display: none; margin-top: 1rem;">
                                <button type="button" id="editImageBtn" class="btn btn-primary btn-sm">
                                    <i class="bi bi-crop"></i> Crop & Rotate
                                </button>
                            </div>

                            @error('book_cover')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Submit Button -->
                        <div class="mb-4">
                            <button id="btn-saveresource" type="submit" class="btn btn-primary btn-md w-100">
                                Save Resource
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Image Editing Modal -->
    <div class="modal fade" id="imageEditorModal" tabindex="-1">
    <!-- Make it wide; fullscreen on small screens if you like -->
        <div class="modal-dialog modal-xl modal-fullscreen-lg-down">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Image Editor - Crop & Rotate</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <!-- Image Container for Cropper -->
                <div class="editor-stage d-flex justify-content-center align-items-center">
                <img id="cropperImage" src="" alt="">
                </div>

                <!-- Controls -->
                <div class="d-flex gap-2 justify-content-center flex-wrap mt-3">
                <button type="button" id="rotateLeftBtn" class="btn btn-outline-secondary" title="Rotate 90° Counter-clockwise">
                    <i class="bi bi-arrow-counterclockwise"></i> Rotate Left
                </button>
                <button type="button" id="rotateRightBtn" class="btn btn-outline-secondary" title="Rotate 90° Clockwise">
                    <i class="bi bi-arrow-clockwise"></i> Rotate Right
                </button>
                <div class="vr"></div>
                <button type="button" id="flipHBtn" class="btn btn-outline-secondary" title="Flip Horizontally">
                    <i class="bi bi-arrow-left-right"></i> Flip H
                </button>
                <button type="button" id="flipVBtn" class="btn btn-outline-secondary" title="Flip Vertically">
                    <i class="bi bi-arrow-up-down"></i> Flip V
                </button>
                <div class="vr"></div>
                <button type="button" id="resetBtn" class="btn btn-outline-warning">
                    <i class="bi bi-arrow-clockwise"></i> Reset
                </button>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" id="confirmCropBtn" class="btn btn-primary">
                <i class="bi bi-check-circle"></i> Apply &amp; Save
                </button>
            </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <!-- Cropper.js Library -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>

    <script>
        let cropper = null;
        let originalImageFile = null;

        document.addEventListener('DOMContentLoaded', function () {
            const uploadArea = document.getElementById('uploadArea');
            const fileInput = document.getElementById('book_cover_input');
            const previewArea = document.getElementById('previewArea');
            const previewImage = document.getElementById('previewImage');
            const editButtonContainer = document.getElementById('editButtonContainer');
            const editImageBtn = document.getElementById('editImageBtn');
            const removeImageBtn = document.getElementById('removeImageBtn');
            const imageEditorModal = new bootstrap.Modal(document.getElementById('imageEditorModal'));
            const cropperImage = document.getElementById('cropperImage');

            // ===== UPLOAD AREA CLICK & DRAG DROP =====
            uploadArea.addEventListener('click', () => fileInput.click());
            
            uploadArea.addEventListener('dragover', (e) => {
                e.preventDefault();
                uploadArea.style.borderColor = '#0d6efd';
                uploadArea.style.backgroundColor = '#e7f1ff';
            });

            uploadArea.addEventListener('dragleave', () => {
                uploadArea.style.borderColor = '#dee2e6';
                uploadArea.style.backgroundColor = '#f8f9fa';
            });

            uploadArea.addEventListener('drop', (e) => {
                e.preventDefault();
                uploadArea.style.borderColor = '#dee2e6';
                uploadArea.style.backgroundColor = '#f8f9fa';
                
                const files = e.dataTransfer.files;
                if (files.length > 0) {
                    handleImageSelect(files[0]);
                }
            });

            fileInput.addEventListener('change', (e) => {
                if (e.target.files.length > 0) {
                    handleImageSelect(e.target.files[0]);
                }
            });

            // ===== HANDLE IMAGE SELECTION =====
            function handleImageSelect(file) {
                if (!file.type.startsWith('image/')) {
                    alert('Please select a valid image file');
                    return;
                }

                originalImageFile = file;
                const reader = new FileReader();
                
                reader.onload = (e) => {
                    previewImage.src = e.target.result;
                    previewArea.style.display = 'block';
                    editButtonContainer.style.display = 'block';
                    uploadArea.style.display = 'none';
                };
                
                reader.readAsDataURL(file);
            }

            // ===== REMOVE IMAGE =====
            removeImageBtn.addEventListener('click', () => {
                fileInput.value = '';
                originalImageFile = null;
                previewArea.style.display = 'none';
                editButtonContainer.style.display = 'none';
                uploadArea.style.display = 'block';
                uploadArea.style.borderColor = '#dee2e6';
                uploadArea.style.backgroundColor = '#f8f9fa';
            });

            // ===== OPEN IMAGE EDITOR =====
            const modalEl = document.getElementById('imageEditorModal');            
            let cropper; // make sure this is scoped so other handlers can use it

            editImageBtn.addEventListener('click', () => {
            cropperImage.src = previewImage.src;
            imageEditorModal.show();
            });

            // Initialize/destroy Cropper at the right time
            modalEl.addEventListener('shown.bs.modal', () => {
            // Ensure previous instance is gone
            if (cropper) cropper.destroy();

            cropper = new Cropper(cropperImage, {
                viewMode: 1,                 // keep image within the canvas
                autoCropArea: 1,             // fit crop box to image initially
                responsive: true,
                restore: true,
                guides: true,
                center: true,
                highlight: true,

                // Dragging & resizing
                dragMode: 'move',            // <-- drag image by default (pan)
                movable: true,               // allow moving the image
                cropBoxMovable: true,
                cropBoxResizable: true,
                toggleDragModeOnDblclick: true,

                // Zooming / panning comfort
                zoomable: true,
                zoomOnWheel: true,
                zoomOnTouch: true,
                wheelZoomRatio: 0.1,         // gentler zoom
                minCanvasWidth: 0,
                minCanvasHeight: 0,

                // Free-form aspect ratio
                aspectRatio: NaN,

                // Respect our larger container
                minContainerWidth: 600,
                minContainerHeight: 400,
                background: true,
            });
            });

            modalEl.addEventListener('hidden.bs.modal', () => {
            if (cropper) {
                cropper.destroy();
                cropper = null;
            }
            });

            // ===== ROTATION & FLIP CONTROLS =====
            document.getElementById('rotateLeftBtn').addEventListener('click', () => {
                cropper.rotate(-90);
            });

            document.getElementById('rotateRightBtn').addEventListener('click', () => {
                cropper.rotate(90);
            });

            document.getElementById('flipHBtn').addEventListener('click', () => {
                const scaleX = cropper.getData().scaleX || 1;
                cropper.scaleX(-scaleX);
            });

            document.getElementById('flipVBtn').addEventListener('click', () => {
                const scaleY = cropper.getData().scaleY || 1;
                cropper.scaleY(-scaleY);
            });

            document.getElementById('resetBtn').addEventListener('click', () => {
                cropper.reset();
            });

            // ===== CONFIRM CROP =====
            document.getElementById('confirmCropBtn').addEventListener('click', () => {
                const canvas = cropper.getCroppedCanvas({
                    maxWidth: 2000,
                    maxHeight: 2000,
                    fillColor: '#fff',
                    imageSmoothingEnabled: true,
                    imageSmoothingQuality: 'high',
                });

                canvas.toBlob((blob) => {
                    // Create a File object from the blob
                    const croppedFile = new File([blob], originalImageFile.name, { type: 'image/jpeg' });
                    
                    // Create a DataTransfer object and add the file to it
                    const dataTransfer = new DataTransfer();
                    dataTransfer.items.add(croppedFile);
                    
                    // Update the file input
                    fileInput.files = dataTransfer.files;
                    
                    // Update preview
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        previewImage.src = e.target.result;
                    };
                    reader.readAsDataURL(croppedFile);

                    // Close modal
                    imageEditorModal.hide();
                }, 'image/jpeg', 0.95);
            });

            // ===== ORIGINAL FORM SCRIPTS =====
            const noAuthorCheck = document.getElementById('noAuthorCheckbox');
            const container = document.getElementById('author-fields-container');
            const addBtn = document.getElementById('add-author-btn');

            // --- INITIALIZE ON PAGE LOAD ---
            function initializeForm() {
                updateRemoveButtonVisibility();
                
                // If checkbox is checked on page load (from old() data), apply the disabled state
                if (noAuthorCheck.checked) {
                    applyNoAuthorState();
                }
            }

            // --- HELPER: UPDATE REMOVE BUTTON VISIBILITY ---
            function updateRemoveButtonVisibility() {
                const rows = container.querySelectorAll('.author-row');
                const removeButtons = container.querySelectorAll('.remove-author');
                
                removeButtons.forEach(btn => {
                    btn.style.display = rows.length > 1 ? 'block' : 'none';
                });
            }

            // --- HELPER: APPLY NO AUTHOR STATE ---
            function applyNoAuthorState() {
                const rows = container.querySelectorAll('.author-row');
                
                container.classList.add('opacity-50');
                addBtn.style.pointerEvents = 'none';
                addBtn.classList.add('text-muted');

                // Remove all but first row
                for (let i = rows.length - 1; i > 0; i--) {
                    rows[i].remove();
                }

                // Disable first input
                const firstInput = container.querySelector('input');
                if (firstInput) {
                    firstInput.value = '';
                    firstInput.readOnly = true;
                    firstInput.style.backgroundColor = '#e9ecef';
                }
                
                const removeBtn = container.querySelector('.remove-author');
                if (removeBtn) {
                    removeBtn.style.display = 'none';
                }
            }

            // --- HELPER: REMOVE NO AUTHOR STATE ---
            function removeNoAuthorState() {
                container.classList.remove('opacity-50');
                addBtn.style.pointerEvents = 'auto';
                addBtn.classList.remove('text-muted');

                const firstInput = container.querySelector('input');
                if (firstInput) {
                    firstInput.readOnly = false;
                    firstInput.style.backgroundColor = '#fff';
                }
                
                updateRemoveButtonVisibility();
            }

            // --- ADD AUTHOR LOGIC ---
            addBtn.addEventListener('click', function () {
                if (noAuthorCheck.checked) return;

                const rows = container.querySelectorAll('.author-row');
                const lastRow = rows[rows.length - 1];
                const newRow = lastRow.cloneNode(true);

                const input = newRow.querySelector('input');
                input.value = '';
                input.classList.remove('is-invalid');
                input.disabled = false;
                input.readOnly = false;
                input.style.backgroundColor = '#fff';

                const removeBtn = newRow.querySelector('.remove-author');
                removeBtn.style.display = 'block';

                container.appendChild(newRow);
                updateRemoveButtonVisibility();
            });

            // --- REMOVE AUTHOR LOGIC ---
            container.addEventListener('click', function (e) {
                if (e.target.closest('.remove-author')) {
                    const rows = container.querySelectorAll('.author-row');
                    if (rows.length > 1) {
                        e.target.closest('.author-row').remove();
                        updateRemoveButtonVisibility();
                    }
                }
            });

            // --- NO AUTHOR TOGGLE ---
            noAuthorCheck.addEventListener('change', function () {
                if (this.checked) {
                    applyNoAuthorState();
                } else {
                    removeNoAuthorState();
                }
            });

            // --- PERSIST CHECKBOX STATE ON FORM SUBMIT ---
            const form = document.querySelector('form');
            if (form) {
                form.addEventListener('submit', function () {
                    // Create or update hidden input for checkbox state
                    let hiddenCheckbox = form.querySelector('input[name="no_author"][type="hidden"]');
                    if (!hiddenCheckbox) {
                        hiddenCheckbox = document.createElement('input');
                        hiddenCheckbox.type = 'hidden';
                        hiddenCheckbox.name = 'no_author';
                        form.appendChild(hiddenCheckbox);
                    }
                    hiddenCheckbox.value = noAuthorCheck.checked ? '1' : '0';
                });
            }

            // --- INITIALIZE ON DOM READY ---
            document.addEventListener('DOMContentLoaded', initializeForm);

            // --- PUBLISHER CHECKBOX HANDLER ---
            document.getElementById('noPublisherCheckbox')?.addEventListener('change', function() {
                const publisherInput = document.getElementById('publisher');
                if (this.checked) {
                    publisherInput.disabled = true;
                    publisherInput.value = '';
                } else {
                    publisherInput.disabled = false;
                }
            });

            // --- LANGUAGE SELECTION HANDLER ---
            document.getElementById('language')?.addEventListener('change', function() {
                const othersContainer = document.getElementById('languageOthersContainer');
                othersContainer.style.display = this.value === 'others' ? 'block' : 'none';            
            });

            // --- INITIALIZATION ON PAGE LOAD ---
            window.addEventListener('load', function() {
                const languageSelect = document.getElementById('language');
                if (languageSelect?.value === 'others') {
                    document.getElementById('languageOthersContainer').style.display = 'block';
                }
            });

            // --- GRADE LEVEL & SUBJECT LOADING ---
            document.getElementById('grade_level')?.addEventListener('change', async function() {
                await loadSubjects(this.value);
            });

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

                learningAreaSelect.innerHTML = '<option value="">Select Subject</option>';
                learningAreaSelect.disabled = true;
                loadingSpinner.style.display = 'none';

                if (!gradeLevelId) {
                    learningAreaSelect.innerHTML = '<option value="">Select Grade Level First</option>';
                    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 Subject</option>';
                        result.data.forEach(subject => {
                            const option = document.createElement('option');
                            option.value = subject.id;
                            option.textContent = subject.title;
                            learningAreaSelect.appendChild(option);
                        });
                        learningAreaSelect.disabled = false;

                        // Restore old value if it exists
                        const oldValue = '{{ old("learning_area") }}';
                        if (oldValue) {
                            learningAreaSelect.value = oldValue;
                        }
                    } else {
                        learningAreaSelect.innerHTML = '<option value="">No subjects available</option>';
                        learningAreaSelect.disabled = true;
                    }
                } catch (error) {
                    console.error('Error loading subjects:', error);
                    loadingSpinner.style.display = 'none';
                    learningAreaSelect.innerHTML = '<option value="">Error loading subjects</option>';
                    learningAreaSelect.disabled = true;
                }
            }

            // Restore on page load if there's old data
            window.addEventListener('load', function() {
                const oldGradeLevel = '{{ old("grade_level") }}';
                const oldLearningArea = '{{ old("learning_area") }}';
                
                if (oldGradeLevel && oldLearningArea) {
                    // Set the grade level first
                    document.getElementById('grade_level').value = oldGradeLevel;
                    // Then load subjects for that grade level (which will restore the old learning_area)
                    loadSubjects(oldGradeLevel);
                }
            });

            // Function to check for duplicates across all inputs
            function checkDuplicateAuthors() {
                const inputs = document.querySelectorAll('.author-input');
                const names = Array.from(inputs).map(i => i.value.trim().toLowerCase());
                const btnSaveResource = document.getElementById('btn-saveresource');

                inputs.forEach((input, index) => {
                    const value = input.value.trim().toLowerCase();
                    
                    // If the value exists more than once in our array
                    if (value !== '' && names.indexOf(value) !== names.lastIndexOf(value)) {
                        input.classList.add('is-invalid');
                        // Optional: Add a custom title/tooltip
                        input.title = "Duplicate author detected";
                        btnSaveResource.title = "Duplicate author detected";
                        btnSaveResource.disabled = true;
                    } else {
                        input.classList.remove('is-invalid');
                        btnSaveResource.disabled = false;
                        
                    }
                });
            }

            // Attach the listener using Event Delegation
            document.getElementById('author-fields-container').addEventListener('input', function(e) {
                if (e.target.classList.contains('author-input')) {
                    checkDuplicateAuthors();
                }
            });

        });
    </script>
@endsection