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

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

@section('content')

<div class="">

    {{-- ── Page Header ── --}}
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <div class="page-header m-0"><h1 class="mb-0">Edit Learning Resource</h1></div>
            
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 small">
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.school-resources') }}">Resources</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.school-resources.show', parameters: $resource->id) }}">
                            {{ Str::limit($resource->title, 40) }}
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Edit</li>
                </ol>
            </nav>
        </div>
        <a href="{{ url()->previous() }}"
           class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-left me-1"></i> Back
        </a>
    </div>

    {{-- ── Flash Messages ── --}}
    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle-fill me-2"></i>
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></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-2"></i>
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- ── Form ── --}}
    <form action="{{ route('admin.school-resources.update', $resource->id) }}"
          method="POST"
          enctype="multipart/form-data"
          id="editResourceForm">
        @csrf
        @method('PUT')

        <div class="row g-4">

            {{-- ══════════════════════════════════════════
                 LEFT COLUMN — Core Details
            ══════════════════════════════════════════ --}}
            <div class="col-lg-8">

                {{-- ── Basic Information ── --}}
                <div class="card shadow-sm mb-4">
                    <div class="card-header text-primary fw-semibold border-bottom" style="background-color: #E8F0FF;">
                        <i class="bi bi-book me-2"></i>Basic Information
                    </div>
                    <div class="card-body">

                        {{-- Title --}}
                        <div class="mb-3">
                            <label for="title" class="form-label fw-semibold">
                                Title <span class="text-danger"></span>
                            </label>
                            <input type="text"
                                   id="title"
                                   name="title"
                                   class="form-control @error('title') is-invalid @enderror"
                                   value="{{ old('title', $resource->title) }}"
                                   placeholder="Enter resource title"
                                   required>
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Type --}}
                        <div class="mb-3">
                            <label for="type" class="form-label fw-semibold">
                                Resource Type <span class="text-danger"></span>
                            </label>
                            <select id="type"
                                    name="type"
                                    class="form-select @error('type') is-invalid @enderror"
                                    required>
                                <option value="" disabled>Select type</option>
                                @foreach ($types as $type)
                                    <option value="{{ $type->id }}"
                                        {{ old('type', $resource->type_id) == $type->id ? 'selected' : '' }}>
                                        {{ $type->type_name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Learning Area & Grade Level (side by side) --}}
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="grade_level" class="form-label fw-semibold">
                                    Grade Level <span class="text-danger"></span>
                                </label>
                                <select id="grade_level"
                                        name="grade_level"
                                        class="form-select @error('grade_level') is-invalid @enderror"
                                        required>
                                    <option value="" disabled>Select grade</option>
                                    @foreach ($gradeLevels as $grade)
                                        <option value="{{ $grade->id }}"
                                            {{ old('grade_level', $subjectGradeLevel->grade_level ?? '') == $grade->id ? 'selected' : '' }}>
                                            {{ $grade->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('grade_level')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="learning_area" class="form-label fw-semibold">
                                    Learning Area <span class="text-danger"></span>
                                </label>
                                <select id="learning_area"
                                        name="learning_area"
                                        class="form-select @error('learning_area') is-invalid @enderror"
                                        required>
                                    <option value="" disabled>Select area</option>
                                    @foreach ($learningAreas as $area)
                                        <option value="{{ $area->id }}"
                                            {{ old('learning_area', $subjectGradeLevel->learning_area ?? '') == $area->id ? 'selected' : '' }}>
                                            {{ $area->subject_name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('learning_area')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Language --}}
                        <div class="mb-3">
                            <label for="language" class="form-label fw-semibold">
                                Language <span class="text-danger"></span>
                            </label>
                            <select id="language"
                                    name="language"
                                    class="form-select @error('language') is-invalid @enderror"
                                    required>
                                <option value="" disabled>Select language</option>
                                @foreach (['Filipino', 'English', 'Bicolano', 'Cebuano', 'Ilocano', 'Waray'] as $lang)
                                    <option value="{{ $lang }}"
                                        {{ old('language', $isOtherLanguage ? 'others' : $resource->language) === $lang ? 'selected' : '' }}>
                                        {{ $lang }}
                                    </option>
                                @endforeach
                                <option value="others"
                                    {{ old('language', $isOtherLanguage ? 'others' : '') === 'others' ? 'selected' : '' }}>
                                    Others
                                </option>
                            </select>
                            @error('language')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Language (Others) — hidden by default --}}
                        <div class="mb-3 {{ ($isOtherLanguage || old('language') === 'others') ? '' : 'd-none' }}"
                             id="language_others_wrapper">
                            <label for="language_others" class="form-label fw-semibold">
                                Specify Language <span class="text-danger"></span>
                            </label>
                            <input type="text"
                                   id="language_others"
                                   name="language_others"
                                   class="form-control @error('language_others') is-invalid @enderror"
                                   value="{{ old('language_others', $isOtherLanguage ? $resource->language : '') }}">
                            @error('language_others')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                    </div>
                </div>

                {{-- ── Authors ── --}}
                <div class="card shadow-sm mb-4">
                    <div class="card-header fw-semibold text-primary border-bottom" style="background-color: #E8F0FF;">
                        <div class="d-flex justify-content-between align-items-center">
                            <span><i class="bi bi-people me-2"></i>Authors</span>
                            <div class="form-check mb-0">
                                <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>
                    <div class="card-body">
                        <div id="author-fields-container">
                            @php
                                $authorsList = old('authors', $authors ?? ['']);
                                if (empty($authorsList)) {
                                    $authorsList = [''];
                                }
                            @endphp

                            @foreach($authorsList as $index => $author)
                                <div class="input-group mb-2">
                                    <span class="input-group-text text-muted">
                                        <i class="bi bi-person"></i>
                                    </span>
                                    <input type="text" 
                                           name="authors[]" 
                                           value="{{ $author }}" 
                                           class="form-control authors_input @error("authors.$index") is-invalid @enderror">
                                    <button type="button" 
                                            class="btn btn-outline-danger remove-author-btn" 
                                            {{ count($authorsList) <= 1 ? 'style=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 mb-2" role="alert">
                                <i class="bi bi-exclamation-circle me-1"></i>{{ $message }}
                            </div>
                        @enderror

                        <button type="button" 
                                id="add-author-btn" 
                                class="btn btn-sm btn-link text-decoration-none ps-0">
                            <i class="bi bi-plus-lg me-1"></i> Add another author
                        </button>
                    </div>
                </div>

                {{-- ── Publication Details ── --}}
                <div class="card shadow-sm mb-4">
                    <div class="card-header fw-semibold text-primary border-bottom" style="background-color: #E8F0FF;">
                        <i class="bi bi-journal-text me-2"></i>Publication Details
                    </div>
                    <div class="card-body">

                        {{-- Publisher --}}
                        <div class="mb-3">
                            <label for="publisher" class="form-label fw-semibold">Publisher</label>
                            <input type="text"
                                   id="publisher"
                                   name="publisher"
                                   class="form-control @error('publisher') is-invalid @enderror"
                                   value="{{ old('publisher', $resource->publisher) }}">
                            @error('publisher')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            {{-- Volume --}}
                            <div class="col-md-6 mb-3">
                                <label for="volume" class="form-label fw-semibold">Volume</label>
                                <input type="text"
                                       id="volume"
                                       name="volume"
                                       class="form-control @error('volume') is-invalid @enderror"
                                       value="{{ old('volume', $resource->volume) }}">
                                @error('volume')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Edition --}}
                            <div class="col-md-6 mb-3">
                                <label for="edition" class="form-label fw-semibold">Edition</label>
                                <input type="text"
                                       id="edition"
                                       name="edition"
                                       class="form-control @error('edition') is-invalid @enderror"
                                       value="{{ old('edition', $resource->edition) }}">
                                @error('edition')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Copyright Year --}}
                            <div class="col-md-4 mb-3">
                                <label for="copyright_year" class="form-label fw-semibold">Copyright Year</label>
                                <input type="number"
                                       id="copyright_year"
                                       name="copyright_year"
                                       class="form-control @error('copyright_year') is-invalid @enderror"
                                       value="{{ old('copyright_year', $resource->copyright_year) }}"
                                       min="1900"
                                       max="{{ date('Y') }}">
                                @error('copyright_year')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- No. of Pages --}}
                            <div class="col-md-4 mb-3">
                                <label for="no_of_pages" class="form-label fw-semibold">No. of Pages</label>
                                <input type="number"
                                       id="no_of_pages"
                                       name="no_of_pages"
                                       class="form-control @error('no_of_pages') is-invalid @enderror"
                                       value="{{ old('no_of_pages', $resource->no_of_pages) }}"
                                       min="1">
                                @error('no_of_pages')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- ISBN --}}
                            <div class="col-md-4 mb-3">
                                <label for="isbn" class="form-label fw-semibold">ISBN</label>
                                <input type="text"
                                       id="isbn"
                                       name="isbn"
                                       class="form-control @error('isbn') is-invalid @enderror"
                                       value="{{ old('isbn', $resource->isbn) }}"
                                       maxlength="20">
                                @error('isbn')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                    </div>
                </div>

            </div>{{-- /col-lg-8 --}}

            {{-- ══════════════════════════════════════════
                 RIGHT COLUMN — Book Cover + Actions
            ══════════════════════════════════════════ --}}
            <div class="col-lg-4">

                {{-- ── Book Cover ── --}}
                <div class="card shadow-sm mb-4">
                    <div class="card-header fw-semibold text-primary border-bottom" style="background-color: #E8F0FF;">
                        <i class="bi bi-image me-2"></i>Book Cover
                    </div>
                    <div class="card-body text-center">

                        {{-- Current / New cover preview --}}
                        <div id="coverPreviewWrapper" class="mb-3">
                            @if ($resource->book_cover)
                                <img id="coverPreview"
                                     src="{{ asset('image/lr_cover/'  . $resource->book_cover) }}"
                                     alt="Book Cover"
                                     class="img-thumbnail rounded"
                                     style="max-height: auto; object-fit: cover; width: 100%;">
                            @else
                                <div id="coverPlaceholder"
                                     class="border rounded d-flex align-items-center justify-content-center bg-light"
                                     style="height: 200px;">
                                    <div class="text-muted text-center">
                                        <i class="bi bi-image fs-1 d-block mb-2"></i>
                                        <small>No cover image</small>
                                    </div>
                                </div>
                                <img id="coverPreview"
                                     class="img-thumbnail rounded d-none"
                                     alt="Book Cover Preview"
                                     style="max-height: 220px; object-fit: cover; width: 100%;">
                            @endif
                        </div>

                        {{-- Hidden file input --}}
                        <input type="file"
                               id="book_cover"
                               name="book_cover"
                               class="d-none @error('book_cover') is-invalid @enderror"
                               accept=".jpg,.jpeg,.png">

                        {{-- Upload / Change button --}}
                        <label for="book_cover" id="uploadCoverLabel" class="btn btn-outline-secondary btn-sm w-100">
                            <i class="bi bi-upload me-1"></i>
                            {{ $resource->book_cover ? 'Change Cover' : 'Upload Cover' }}
                        </label>
                        <small class="text-muted d-block mt-2">JPG or PNG (Compressed on server)</small>

                        @error('book_cover')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror

                        {{-- Crop & Rotate button — shown only after a new image is selected --}}
                        <button type="button"
                                id="editCoverBtn"
                                class="btn btn-primary btn-sm w-100 mt-2 d-none">
                            <i class="bi bi-crop me-1"></i> Crop &amp; Rotate
                        </button>

                        {{-- Remove new selection button --}}
                        <button type="button"
                                id="removeCoverBtn"
                                class="btn btn-outline-danger btn-sm w-100 mt-2 d-none">
                            <i class="bi bi-trash me-1"></i> Remove New Image
                        </button>

                    </div>
                </div>

                {{-- ── Action Buttons ── --}}
                <div class="card shadow-sm">
                    <div class="card-body d-flex gap-2">
                        <a href="{{ route('admin.school-resources') }}"
                        class="btn btn-outline-primary btn-sm w-100">
                            <i class="bi bi-x-circle me-1"></i> Cancel
                        </a>

                        <button type="submit" class="btn btn-primary btn-sm w-100" id="btn-saveresource">
                            <i class="bi bi-floppy me-1"></i> Save Changes
                        </button>
                    </div>
                </div>

            </div>{{-- /col-lg-4 --}}

        </div>{{-- /row --}}
    </form>

</div>{{-- /container-fluid --}}


{{-- ══════════════════════════════════════════
     Image Editor Modal (Cropper.js)
══════════════════════════════════════════ --}}
<div class="modal fade" id="imageEditorModal" tabindex="-1">
    <div class="modal-dialog modal-xl modal-fullscreen-lg-down">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-crop me-2"></i>Image Editor — Crop &amp; Rotate
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                {{-- Cropper stage --}}
                <div class="d-flex justify-content-center align-items-center"
                     style="min-height: 400px; background: #1a1a2e; border-radius: .5rem; overflow: hidden;">
                    <img id="cropperImage" src="" alt="Crop target" style="max-width: 100%;">
                </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="resetCropBtn" class="btn btn-outline-warning">
                        <i class="bi bi-arrow-counterclockwise"></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 me-1"></i> Apply &amp; Save
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
{{-- Cropper.js --}}
<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>
document.addEventListener('DOMContentLoaded', function () {

    // ═══════════════════════════════════════════════════════════════
    // BOOK COVER — FILE SELECTION, PREVIEW & CROPPER
    // ═══════════════════════════════════════════════════════════════

    const bookCoverInput   = document.getElementById('book_cover');
    const coverPreview     = document.getElementById('coverPreview');
    const coverPlaceholder = document.getElementById('coverPlaceholder');   // may be null
    const editCoverBtn     = document.getElementById('editCoverBtn');
    const removeCoverBtn   = document.getElementById('removeCoverBtn');
    const uploadLabel      = document.getElementById('uploadCoverLabel');

    const modalEl          = document.getElementById('imageEditorModal');
    const cropperImage     = document.getElementById('cropperImage');
    const imageEditorModal = new bootstrap.Modal(modalEl);

    let cropper             = null;
    let originalImageFile   = null;   // the raw File chosen by the user

    // ── Handle file selection ──
    bookCoverInput.addEventListener('change', function () {
        const file = this.files[0];
        if (!file) return;

        if (!file.type.startsWith('image/')) {
            alert('Please select a valid image file (JPG or PNG).');
            this.value = '';
            return;
        }

        originalImageFile = file;

        const reader = new FileReader();
        reader.onload = e => {
            // Show preview
            coverPreview.src = e.target.result;
            coverPreview.classList.remove('d-none');

            // Hide placeholder if present
            if (coverPlaceholder) coverPlaceholder.classList.add('d-none');

            // Show crop / remove controls
            editCoverBtn.classList.remove('d-none');
            removeCoverBtn.classList.remove('d-none');
        };
        reader.readAsDataURL(file);
    });

    // ── Remove newly selected image ──
    removeCoverBtn.addEventListener('click', function () {
        bookCoverInput.value = '';
        originalImageFile    = null;

        // Restore original cover or placeholder
        @if ($resource->book_cover)
            coverPreview.src = '{{ asset('image/lr_cover/'  . $resource->book_cover) }}';
            coverPreview.classList.remove('d-none');
        @else
            coverPreview.src = '';
            coverPreview.classList.add('d-none');
            if (coverPlaceholder) coverPlaceholder.classList.remove('d-none');
        @endif

        editCoverBtn.classList.add('d-none');
        removeCoverBtn.classList.add('d-none');
    });

    // ── Open Image Editor modal ──
    editCoverBtn.addEventListener('click', function () {
        cropperImage.src = coverPreview.src;
        imageEditorModal.show();
    });

    // ── Initialize Cropper when modal is fully shown ──
    modalEl.addEventListener('shown.bs.modal', function () {
        if (cropper) cropper.destroy();

        cropper = new Cropper(cropperImage, {
            viewMode        : 1,
            autoCropArea    : 1,
            responsive      : true,
            restore         : true,
            guides          : true,
            center          : true,
            highlight       : true,
            dragMode        : 'move',
            movable         : true,
            cropBoxMovable  : true,
            cropBoxResizable: true,
            toggleDragModeOnDblclick: true,
            zoomable        : true,
            zoomOnWheel     : true,
            zoomOnTouch     : true,
            wheelZoomRatio  : 0.1,
            aspectRatio     : NaN,
            minContainerWidth : 600,
            minContainerHeight: 400,
            background      : true,
        });
    });

    // ── Destroy Cropper when modal closes ──
    modalEl.addEventListener('hidden.bs.modal', function () {
        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('resetCropBtn').addEventListener('click', () => cropper?.reset());

    // ── Confirm crop — replace the file input with the cropped blob ──
    document.getElementById('confirmCropBtn').addEventListener('click', function () {
        if (!cropper) return;

        const canvas = cropper.getCroppedCanvas({
            maxWidth : 2000,
            maxHeight: 2000,
            fillColor: '#fff',
            imageSmoothingEnabled : true,
            imageSmoothingQuality : 'high',
        });

        canvas.toBlob(function (blob) {
            const fileName    = originalImageFile ? originalImageFile.name : 'cover.jpg';
            const croppedFile = new File([blob], fileName, { type: 'image/jpeg' });

            // Push the cropped file back into the input
            const dt = new DataTransfer();
            dt.items.add(croppedFile);
            bookCoverInput.files = dt.files;

            // Update the visible preview
            const reader = new FileReader();
            reader.onload = e => { coverPreview.src = e.target.result; };
            reader.readAsDataURL(croppedFile);

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


    // ═══════════════════════════════════════════════════════════════
    // AUTHOR MANAGEMENT
    // ═══════════════════════════════════════════════════════════════

    const noAuthorCheckbox = document.getElementById('noAuthorCheckbox');
    const authorContainer  = document.getElementById('author-fields-container');
    const addAuthorBtn     = document.getElementById('add-author-btn');
    const saveBtn          = document.getElementById('btn-saveresource');

    function updateRemoveButtonVisibility() {
        const rows          = authorContainer.querySelectorAll('.input-group');
        const removeButtons = authorContainer.querySelectorAll('.remove-author-btn');
        removeButtons.forEach(btn => {
            btn.style.display = rows.length > 1 ? 'block' : 'none';
        });
    }

    function applyNoAuthorState() {
        const rows = authorContainer.querySelectorAll('.input-group');
        authorContainer.classList.add('opacity-50');
        addAuthorBtn.style.pointerEvents = 'none';
        addAuthorBtn.classList.add('text-muted');

        for (let i = rows.length - 1; i > 0; i--) rows[i].remove();

        const firstInput = authorContainer.querySelector('input');
        if (firstInput) {
            firstInput.value = '';
            firstInput.readOnly = true;
            firstInput.style.backgroundColor = '#e9ecef';
        }

        const removeBtn = authorContainer.querySelector('.remove-author-btn');
        if (removeBtn) removeBtn.style.display = 'none';
    }

    function removeNoAuthorState() {
        authorContainer.classList.remove('opacity-50');
        addAuthorBtn.style.pointerEvents = 'auto';
        addAuthorBtn.classList.remove('text-muted');

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

        updateRemoveButtonVisibility();
    }

    function checkDuplicateAuthors() {
        const inputs = authorContainer.querySelectorAll('.authors_input');
        const names  = Array.from(inputs)
            .map(i => i.value.trim().toLowerCase())
            .filter(v => v !== '');

        let hasDuplicates = false;

        inputs.forEach(input => {
            const value = input.value.trim().toLowerCase();
            if (value !== '') {
                const isDuplicate = names.filter(n => n === value).length > 1;
                input.classList.toggle('is-invalid', isDuplicate);
                input.title = isDuplicate ? 'Duplicate author detected' : '';
                if (isDuplicate) hasDuplicates = true;
            } else {
                input.classList.remove('is-invalid');
                input.title = '';
            }
        });

        saveBtn.disabled = hasDuplicates;
        saveBtn.title    = hasDuplicates ? 'Duplicate author detected' : '';
    }

    function attachRemoveListener(btn) {
        btn.addEventListener('click', function (e) {
            e.preventDefault();
            const rows = authorContainer.querySelectorAll('.input-group');
            if (rows.length > 1) {
                this.closest('.input-group').remove();
                updateRemoveButtonVisibility();
                checkDuplicateAuthors();
            }
        });
    }

    authorContainer.querySelectorAll('.remove-author-btn').forEach(btn => attachRemoveListener(btn));

    addAuthorBtn.addEventListener('click', function (e) {
        e.preventDefault();
        if (noAuthorCheckbox.checked) return;

        const rows   = authorContainer.querySelectorAll('.input-group');
        const newRow = rows[rows.length - 1].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-btn');
        removeBtn.style.display = 'block';
        attachRemoveListener(removeBtn);

        const errorDiv = newRow.querySelector('.invalid-feedback');
        if (errorDiv) errorDiv.remove();

        authorContainer.appendChild(newRow);
        updateRemoveButtonVisibility();
        setTimeout(() => input.focus(), 0);
    });

    noAuthorCheckbox.addEventListener('change', function () {
        this.checked ? applyNoAuthorState() : removeNoAuthorState();
    });

    authorContainer.addEventListener('input', function (e) {
        if (e.target.classList.contains('authors_input')) checkDuplicateAuthors();
    });

    const form = document.getElementById('editResourceForm');
    if (form) {
        form.addEventListener('submit', function () {
            let hidden = form.querySelector('input[name="no_author"][type="hidden"]');
            if (!hidden) {
                hidden = document.createElement('input');
                hidden.type = 'hidden';
                hidden.name = 'no_author';
                form.appendChild(hidden);
            }
            hidden.value = noAuthorCheckbox.checked ? '1' : '0';
        });
    }

    // ── Initialize ──
    updateRemoveButtonVisibility();
    checkDuplicateAuthors();
    if (noAuthorCheckbox.checked) applyNoAuthorState();


    // ═══════════════════════════════════════════════════════════════
    // LANGUAGE TOGGLE
    // ═══════════════════════════════════════════════════════════════

    const languageSelect  = document.getElementById('language');
    const othersWrapper   = document.getElementById('language_others_wrapper');
    const othersInput     = document.getElementById('language_others');

    if (languageSelect) {
        languageSelect.addEventListener('change', function () {
            if (this.value === 'others') {
                othersWrapper.classList.remove('d-none');
                othersInput.setAttribute('required', 'required');
            } else {
                othersWrapper.classList.add('d-none');
                othersInput.removeAttribute('required');
                othersInput.value = '';
            }
        });
    }

});
</script>
@endsection