@php use App\Data\Languages; @endphp
<div class="modal fade" id="editVideoModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable um-dialog">

        <form id="edit-form" enctype="multipart/form-data" class="modal-content um-content">
            @csrf
            @method('PUT')

            {{-- Core hidden inputs --}}
            <input type="hidden" name="type"            id="edit-type-val" value="generic">
            <input type="hidden" name="visibility"      id="edit-vis-val"  value="public">
            <input type="hidden" name="download_access" id="edit-dl-val"   value="disabled">
            {{-- Optional replacement video/audio file --}}
            <input type="file" name="video" id="edit-video-file"
                   accept="video/*,audio/mpeg,audio/mp4,audio/aac,audio/flac,audio/wav,.mp3,.m4a,.aac,.flac,.wav"
                   style="display:none;">

            {{-- ── Discard confirm overlay ── --}}
            <div id="edit-close-confirm" style="display:none;position:absolute;inset:0;z-index:50;background:rgba(0,0,0,.88);border-radius:20px;align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:40px;text-align:center;">
                <div style="width:60px;height:60px;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;color:#f59e0b;">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                </div>
                <div>
                    <p style="color:#f1f1f1;font-size:17px;font-weight:700;margin:0 0 6px;">Discard changes?</p>
                    <p style="color:#777;font-size:13px;margin:0;line-height:1.5;">Any unsaved changes will be lost.</p>
                </div>
                <div style="display:flex;gap:10px;">
                    <button type="button" class="action-btn" onclick="_editHideConfirm()"><span>Keep editing</span></button>
                    <button type="button" class="action-btn action-btn-danger" onclick="_editDoClose()"><i class="bi bi-trash"></i><span>Discard</span></button>
                </div>
            </div>

            {{-- ── Header ── --}}
            <div class="um-header">
                <div class="um-header-left">
                    <div class="um-header-icon"><i class="bi bi-pencil-fill"></i></div>
                    <div>
                        <div class="um-header-title">Edit</div>
                        <div class="um-header-sub" id="edit-modal-label">Loading…</div>
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white" onclick="closeEditVideoModal()" aria-label="Close"></button>
            </div>

            {{-- ── Body ── --}}
            <div class="um-body">

                {{-- ── Global Settings ── --}}
                <div class="um-gs-row">
                    <div class="um-gs-wrap">
                        <span class="um-gs-lbl">Content Type</span>
                        <button type="button" class="um-gs-btn" id="edit-gs-type-btn">
                            <i class="bi bi-film um-gs-ico" id="edit-gs-type-ico"></i>
                            <span class="um-gs-txt" id="edit-gs-type-txt">Generic</span>
                            <i class="bi bi-chevron-down um-gs-arr"></i>
                        </button>
                        <ul class="um-gs-menu" id="edit-gs-type-menu" hidden>
                            <li class="um-gs-opt active" data-egs="type" data-value="generic" data-icon="bi-film"              data-label="Generic"><i class="bi bi-film"></i><span>Generic</span></li>
                            <li class="um-gs-opt"        data-egs="type" data-value="music"   data-icon="bi-music-note-beamed" data-label="Music">  <i class="bi bi-music-note-beamed"></i><span>Music</span></li>
                            <li class="um-gs-opt"        data-egs="type" data-value="match"   data-icon="bi-trophy"            data-label="Match">   <i class="bi bi-trophy"></i><span>Match</span></li>
                        </ul>
                    </div>
                    <div class="um-gs-wrap">
                        <span class="um-gs-lbl">Visibility</span>
                        <button type="button" class="um-gs-btn" id="edit-gs-vis-btn">
                            <i class="bi bi-globe um-gs-ico" id="edit-gs-vis-ico"></i>
                            <span class="um-gs-txt" id="edit-gs-vis-txt">Public</span>
                            <i class="bi bi-chevron-down um-gs-arr"></i>
                        </button>
                        <ul class="um-gs-menu" id="edit-gs-vis-menu" hidden>
                            <li class="um-gs-opt active" data-egs="vis" data-value="public"   data-icon="bi-globe"      data-label="Public">   <i class="bi bi-globe"></i><span>Public</span></li>
                            <li class="um-gs-opt"        data-egs="vis" data-value="unlisted" data-icon="bi-link-45deg" data-label="Unlisted"> <i class="bi bi-link-45deg"></i><span>Unlisted</span></li>
                            <li class="um-gs-opt"        data-egs="vis" data-value="private"  data-icon="bi-lock"       data-label="Private">  <i class="bi bi-lock"></i><span>Private</span></li>
                        </ul>
                    </div>
                    <div class="um-gs-wrap">
                        <span class="um-gs-lbl">Downloads</span>
                        <button type="button" class="um-gs-btn" id="edit-gs-dl-btn">
                            <i class="bi bi-slash-circle um-gs-ico" id="edit-gs-dl-ico"></i>
                            <span class="um-gs-txt" id="edit-gs-dl-txt">Off</span>
                            <i class="bi bi-chevron-down um-gs-arr"></i>
                        </button>
                        <ul class="um-gs-menu" id="edit-gs-dl-menu" hidden>
                            <li class="um-gs-opt active" data-egs="dl" data-value="disabled"    data-icon="bi-slash-circle"  data-label="Off">         <i class="bi bi-slash-circle"></i><span>Off</span></li>
                            <li class="um-gs-opt"        data-egs="dl" data-value="everyone"    data-icon="bi-globe"          data-label="Everyone">    <i class="bi bi-globe"></i><span>Everyone</span></li>
                            <li class="um-gs-opt"        data-egs="dl" data-value="registered"  data-icon="bi-person-check"   data-label="Members">     <i class="bi bi-person-check"></i><span>Members</span></li>
                            <li class="um-gs-opt"        data-egs="dl" data-value="subscribers" data-icon="bi-star"           data-label="Subscribers"> <i class="bi bi-star"></i><span>Subscribers</span></li>
                        </ul>
                    </div>
                </div>

                <div class="um-rule"></div>

                {{-- ── Track Cards Section ── --}}
                <div class="um-tracks-header">
                    <div>
                        <span class="um-tracks-title" id="edit-tracks-section-label">Language Tracks</span>
                        <span class="um-tracks-sub" id="edit-tracks-section-sub">Add audio tracks in different languages</span>
                    </div>
                    <button type="button" class="action-btn" id="edit-add-track-btn" onclick="editAddExtraTrack()" style="display:none;font-size:12px;">
                        <i class="bi bi-plus-circle"></i> <span>Add Language Track</span>
                    </button>
                </div>

                <input type="hidden" name="promote_track_id" id="edit-promote-track-id" value="">
                <div id="edit-tc-list">
                    {{-- Track 1 card always visible in edit mode --}}
                    <div class="um-track-card" id="edit-tc-t1-card">
                        <div class="um-tc-body">
                            <div class="um-tc-left">
                                <span class="um-tc-drag" title="Drag to reorder"><i class="bi bi-grip-vertical"></i></span>
                                <div class="um-tc-num">1</div>
                                <span class="fi fi-xx um-tc-flag" id="edit-tc-flag-t1"></span>
                                <div class="um-tc-info">
                                    <span class="um-tc-title" id="edit-tc-title-t1"></span>
                                    <span class="um-tc-primary" id="edit-tc-t1-primary-badge"><i class="bi bi-star-fill"></i> Primary</span>
                                </div>
                            </div>
                            <div class="um-tc-right">
                                <button type="button" class="action-btn" onclick="editOpenTrackPopup('t1')">
                                    <i class="bi bi-pencil"></i> <span>Edit</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    {{-- Secondary track cards appended here by JS --}}
                </div>

                {{-- Status --}}
                <div id="edit-status-msg" class="status-message-modal"></div>

                {{-- Submit --}}
                <button type="submit" id="edit-submit-btn" class="action-btn action-btn-primary um-submit">
                    <i class="bi bi-check-lg"></i> <span>Save Changes</span>
                </button>

            </div>{{-- /um-body --}}

            {{-- ── Track Editor Mini-Popup ── --}}
            <div id="edit-track-popup" class="um-track-popup" style="display:none;">
                <div class="um-track-popup-box">
                    <div class="um-tp-header">
                        <div class="um-tp-header-left">
                            <div class="um-tp-header-icon"><i class="bi bi-translate"></i></div>
                            <div class="um-tp-header-title">Track Editor</div>
                        </div>
                        <button type="button" class="btn-close btn-close-white" onclick="editCloseTrackPopup()" aria-label="Close"></button>
                    </div>
                    <div class="um-tp-body">

                        {{-- Track 1 form (primary) --}}
                        <x-track-editor-form
                            :is-primary="true"
                            prefix="t1"
                            language-name="primary_language"
                            language-id="edit_primary_language"
                            title-name="title"
                            title-id="edit-track1-title"
                            desc-name="description"
                            desc-id="edit-track1-desc"
                            video-file-input-id="edit-video-file"
                        />

                        {{-- Extra track forms appended by JS --}}
                        <div id="edit-tf-extra"></div>

                    </div>{{-- /um-tp-body --}}

                    <div class="um-tp-footer">
                        <button type="button" class="action-btn action-btn-primary" onclick="editCloseTrackPopup()">
                            <i class="bi bi-check-lg"></i> <span>Done</span>
                        </button>
                    </div>
                </div>{{-- /um-track-popup-box --}}
            </div>{{-- /edit-track-popup --}}

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

{{-- Secondary tracks in this modal are cloned from the SHARED
     #um-track-form-template defined in layouts.partials.upload-modal. One
     template → identical UX in both the create (upload) modal and this modal. --}}

<style>
#editVideoModal .modal-dialog { opacity: 0; transition: opacity .25s ease; }
#editVideoModal.show .modal-dialog { opacity: 1; }

/* ── Track drag-and-drop reorder ─────────────────────────────── */
#edit-tc-list .um-track-card { position: relative; }
#edit-tc-list .um-tc-drag {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; margin-right: 2px;
    color: #666; cursor: grab; user-select: none;
    border-radius: 6px; transition: color .15s, background .15s;
    flex-shrink: 0;
}
#edit-tc-list .um-tc-drag:hover { color: #e5e5e5; background: rgba(255,255,255,.05); }
#edit-tc-list .um-tc-drag:active { cursor: grabbing; }
#edit-tc-list .um-tc-drag i { font-size: 14px; line-height: 1; }
#edit-tc-list .um-track-card.dragging {
    opacity: .4; outline: 2px dashed #e61e1e; outline-offset: -2px;
}
#edit-tc-list .um-track-card.drop-before { box-shadow: 0 -3px 0 0 #e61e1e inset; }
#edit-tc-list .um-track-card.drop-after  { box-shadow: 0  3px 0 0 #e61e1e inset; }
</style>

<script>
// ── Init primary track CSD ────────────────────────────────────────────────────
if (window.CSD) new CSD('csd_t1');

// ── State ─────────────────────────────────────────────────────────────────────
let _editSaving    = false;
let _editExtraCount = 0;
let _editMode      = 'generic';
let _editSlidesData    = {};   // keyed by track id, array of {id?, url, file?}
let _editSlidesDragSrc = null;
let _editDeleteTrackIds = [];
window._editCurrentVideoId = null;

// ── Modal open / close ────────────────────────────────────────────────────────
function openEditVideoModal(videoId) {
    // Always resolve type first so a match video opens the sports-match sheet
    // instead of the generic video-edit modal — same for mobile.
    fetch(`/videos/${videoId}/edit`, {
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(r => r.json())
    .then(data => {
        if (!data.success) { showToast('Failed to load video data', 'error'); return; }
        const v = data.video;

        // Match videos always route to the sports-match sheet — edit the existing
        // match if one is linked, otherwise open create-mode with the video already
        // attached so the user can add the match details.
        if (v.type === 'match' && typeof window.openSportsMatchModal === 'function') {
            if (v.sports_match_id) {
                window.openSportsMatchModal(v.sports_match_id);
            } else {
                window.openSportsMatchModal({ videoId: v.id, videoTitle: v.title });
            }
            return;
        }

        // Mobile fallback for non-match videos: full-page edit view
        if (window.innerWidth < 992) {
            window.location.href = `/videos/${videoId}/edit`;
            return;
        }
        window._editCurrentVideoId = videoId;

        document.getElementById('edit-form').action = `/videos/${videoId}`;

        // Header
        const lbl = document.getElementById('edit-modal-label');
        if (lbl) lbl.textContent = v.title || 'Video';

        // Reset everything first
        _editResetForm();

        // Global settings
        const typeMap  = {generic:'bi-film',music:'bi-music-note-beamed',match:'bi-trophy'};
        const typeLabels = {generic:'Generic',music:'Music',match:'Match'};
        const t = v.type || 'generic';
        _editGsSet('type', t, typeMap[t]||'bi-film', typeLabels[t]||'Generic');

        const visMap   = {public:'bi-globe',unlisted:'bi-link-45deg',private:'bi-lock'};
        const visLabel = {public:'Public',unlisted:'Unlisted',private:'Private'};
        const vis = v.visibility || 'public';
        _editGsSet('vis', vis, visMap[vis]||'bi-globe', visLabel[vis]||'Public');

        const dlMap   = {disabled:'bi-slash-circle',everyone:'bi-globe',registered:'bi-person-check',subscribers:'bi-star'};
        const dlLabel = {disabled:'Off',everyone:'Everyone',registered:'Members',subscribers:'Subscribers'};
        const dl = v.download_access || 'disabled';
        _editGsSet('dl', dl, dlMap[dl]||'bi-slash-circle', dlLabel[dl]||'Off');

        _editApplyMode(t);

        // Track 1 popup fields
        const titleEl = document.getElementById('edit-track1-title');
        const descEl  = document.getElementById('edit-track1-desc');
        if (titleEl) titleEl.value = v.title       || '';
        if (descEl) { descEl.value = v.description || ''; descEl.dispatchEvent(new Event('rte:refresh')); }
        _editSetLangSelect(v.language || '');

        // Thumbnail
        if (v.thumbnail && v.thumbnail_url) {
            const prev = document.getElementById('edit-t1-thumbnail-preview');
            const ph   = document.getElementById('edit-t1-thumbnail-ph');
            const info = document.getElementById('edit-t1-thumbnail-info');
            const fn   = document.getElementById('edit-t1-thumbnail-fname');
            if (prev) prev.src = v.thumbnail_url;
            if (fn)   fn.textContent = 'Current thumbnail';
            if (ph)   ph.style.display   = 'none';
            if (info) info.style.display = 'flex';
        }

        // Slides
        _editSlidesData['t1'] = (v.slides || []).map(s => ({ id: s.id, url: s.url }));
        _editRenderSlides('t1');

        // Extra tracks — show whenever the row is declared music, even if the
        // primary file is still a video (mid-conversion state).
        if ((v.type === 'music' || v.is_audio) && v.audio_tracks) {
            v.audio_tracks.forEach(track => _editAddExistingTrack(track));
        }

        // Update track 1 card
        editUpdateTrackCard('t1');

        // Open modal
        const modal = new bootstrap.Modal(document.getElementById('editVideoModal'));
        modal.show();
        setTimeout(() => document.getElementById('editVideoModal').classList.add('show'), 10);
    })
    .catch(() => showToast('Failed to load video data', 'error'));
}

function closeEditVideoModal() {
    const el = document.getElementById('editVideoModal');
    const m  = bootstrap.Modal.getInstance(el);
    if (m) m.hide();
    el.addEventListener('hidden.bs.modal', () => {
        el.classList.remove('show');
        window._editCurrentVideoId = null;
    }, { once: true });
}

function _editHideConfirm() { document.getElementById('edit-close-confirm').style.display = 'none'; }
function _editDoClose()     { _editHideConfirm(); closeEditVideoModal(); }

// ── Form reset ────────────────────────────────────────────────────────────────
function _editResetForm() {
    _editSaving     = false;
    _editExtraCount = 0;
    _editDeleteTrackIds = [];

    document.getElementById('edit-form').reset();

    document.getElementById('edit-status-msg').className = 'status-message-modal';
    const btn = document.getElementById('edit-submit-btn');
    btn.disabled = false;
    btn.innerHTML = '<i class="bi bi-check-lg"></i> <span>Save Changes</span>';

    document.getElementById('edit-track-popup').style.display = 'none';
    document.getElementById('edit-tf-t1').style.display = 'none';

    // Clear extra track cards (leave only the primary card in #edit-tc-list)
    const _tcList = document.getElementById('edit-tc-list');
    const _primaryCard = document.getElementById('edit-tc-t1-card');
    Array.from(_tcList.children).forEach(c => { if (c !== _primaryCard) c.remove(); });
    document.getElementById('edit-promote-track-id').value = '';
    document.getElementById('edit-tf-extra').innerHTML = '';
    _editUpdateTrackPositions();

    // Clear slides data
    _editSlidesData = {};
    _editRenderSlides('t1');

    // Reset video dropzone
    document.getElementById('edit-t1-dz-idle').style.display = '';
    document.getElementById('edit-t1-file-info').style.display = 'none';

    // Reset thumbnail
    document.getElementById('edit-t1-thumbnail-ph').style.display   = '';
    document.getElementById('edit-t1-thumbnail-info').style.display = 'none';
    const prev = document.getElementById('edit-t1-thumbnail-preview');
    if (prev) prev.src = '';

    // Reset audio box
    const fn = document.getElementById('edit-t1-fname');
    if (fn) fn.textContent = 'Keep existing / choose new…';
    const audioBox = document.getElementById('edit-tf-t1-audio-box');
    if (audioBox) audioBox.style.borderColor = '';

    // Reset language CSD
    _editSetLangSelect('');
}

function _editGsSet(name, value, icon, label) {
    const ico  = document.getElementById('edit-gs-' + name + '-ico');
    const txt  = document.getElementById('edit-gs-' + name + '-txt');
    const menu = document.getElementById('edit-gs-' + name + '-menu');
    const btn  = document.getElementById('edit-gs-' + name + '-btn');
    if (ico)  ico.className = 'bi ' + icon + ' um-gs-ico';
    if (txt)  txt.textContent = label;
    if (menu) menu.querySelectorAll('[data-egs]').forEach(li => li.classList.toggle('active', li.dataset.value === value));
    if (btn)  { btn.classList.remove('open'); if (menu) menu.hidden = true; }
    const inputId = {type:'edit-type-val', vis:'edit-vis-val', dl:'edit-dl-val'}[name];
    if (inputId) document.getElementById(inputId).value = value;
}

// ── Apply mode ────────────────────────────────────────────────────────────────
function _editApplyMode(type) {
    _editMode = type;
    const isMusic = type === 'music';
    document.getElementById('edit-add-track-btn').style.display = isMusic ? '' : 'none';
    const lbl = document.getElementById('edit-tracks-section-label');
    const sub = document.getElementById('edit-tracks-section-sub');
    if (isMusic) {
        if (lbl) lbl.textContent = 'Language Tracks';
        if (sub) sub.textContent = 'Add audio tracks in different languages';
    } else {
        if (lbl) lbl.textContent = type === 'match' ? 'Match Video' : 'Video Details';
        if (sub) sub.textContent = 'Click Edit to update title, description and media';
    }
    const videoZone = document.getElementById('edit-tf-t1-video-zone');
    const thumbWrap = document.getElementById('edit-tf-t1-thumb-wrap');
    const musicPair = document.getElementById('edit-tf-t1-music-pair');
    if (isMusic) {
        if (videoZone) videoZone.style.display = 'none';
        if (thumbWrap) thumbWrap.style.display = 'none';
        if (musicPair) musicPair.style.display = 'flex';
    } else {
        if (videoZone) videoZone.style.display = 'flex';
        if (thumbWrap) thumbWrap.style.display = 'flex';
        if (musicPair) musicPair.style.display = 'none';
    }
    document.getElementById('edit-type-val').value = type;
}

// ── Global Settings dropdowns ─────────────────────────────────────────────────
document.querySelectorAll('#editVideoModal .um-gs-btn').forEach(btn => {
    btn.addEventListener('click', function(e) {
        e.stopPropagation();
        const name = this.id.replace('edit-gs-', '').replace('-btn', '');
        const menu = document.getElementById('edit-gs-' + name + '-menu');
        const wasOpen = !menu.hidden;
        document.querySelectorAll('#editVideoModal .um-gs-menu').forEach(m => m.hidden = true);
        document.querySelectorAll('#editVideoModal .um-gs-btn').forEach(b => b.classList.remove('open'));
        if (!wasOpen) { menu.hidden = false; this.classList.add('open'); }
    });
});

document.addEventListener('click', function(e) {
    if (!e.target.closest('#editVideoModal .um-gs-wrap')) {
        document.querySelectorAll('#editVideoModal .um-gs-menu').forEach(m => m.hidden = true);
        document.querySelectorAll('#editVideoModal .um-gs-btn').forEach(b => b.classList.remove('open'));
    }
});

document.querySelectorAll('[data-egs]').forEach(opt => {
    opt.addEventListener('click', function() {
        const name  = this.dataset.egs;
        const value = this.dataset.value;
        const icon  = this.dataset.icon;
        const label = this.dataset.label;
        _editGsSet(name, value, icon, label);
        if (name === 'type') _editApplyMode(value);
    });
});

// ── Helpers ───────────────────────────────────────────────────────────────────
function _editFmtSize(bytes) {
    if (!bytes) return '0 B';
    const k = 1024, sizes = ['B','KB','MB','GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k,i)).toFixed(2)) + ' ' + sizes[i];
}

// ── Track ordering (drag-and-drop) ────────────────────────────────────────────
function _editUpdateTrackPositions() {
    const list  = document.getElementById('edit-tc-list');
    if (!list) return;
    const cards = Array.from(list.querySelectorAll(':scope > .um-track-card'));
    cards.forEach((card, i) => {
        const numEl = card.querySelector('.um-tc-num');
        if (numEl) numEl.textContent = i + 1;
        const badge = card.querySelector('.um-tc-primary');
        if (badge) badge.style.display = i === 0 ? '' : 'none';
    });
    // Set promote_track_id: non-empty only when a secondary is at position 1
    const first     = cards[0];
    const promoteEl = document.getElementById('edit-promote-track-id');
    if (promoteEl) {
        const isSecondary = first && first.id !== 'edit-tc-t1-card';
        promoteEl.value = isSecondary ? (first.dataset.trackId || '') : '';
        console.log('%c[EditTrack] Position 1 is now:', 'color:#3b82f6',
            isSecondary ? ('secondary track ' + promoteEl.value + ' (will be promoted to primary)') : 'original primary (no promotion)');
    }
}

// HTML5 drag-and-drop: bind once on the shared parent so newly appended cards
// pick it up without extra wiring. The card starts non-draggable so text
// selection / button clicks work; grabbing the grip handle flips draggable=on
// for the duration of the drag.
(function () {
    const list = document.getElementById('edit-tc-list');
    if (!list || list.dataset.dndWired) return;
    list.dataset.dndWired = '1';

    // Reset any draggable="true" set by the initial HTML — we only enable it
    // on demand via the grip handle.
    list.querySelectorAll('.um-track-card').forEach(c => c.removeAttribute('draggable'));

    let dragged = null;

    list.addEventListener('mousedown', function (e) {
        const handle = e.target.closest('.um-tc-drag');
        if (!handle) return;
        const card = handle.closest('.um-track-card');
        if (!card || card.parentElement !== list) return;
        card.setAttribute('draggable', 'true');
    });
    list.addEventListener('mouseup', function () {
        list.querySelectorAll('.um-track-card[draggable="true"]').forEach(c => c.removeAttribute('draggable'));
    });

    list.addEventListener('dragstart', function (e) {
        const card = e.target.closest('.um-track-card');
        if (!card || card.parentElement !== list || card.getAttribute('draggable') !== 'true') {
            e.preventDefault();
            return;
        }
        dragged = card;
        card.classList.add('dragging');
        try { e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', card.id); } catch (_) {}
    });

    list.addEventListener('dragend', function () {
        if (dragged) dragged.classList.remove('dragging');
        list.querySelectorAll('.drop-before, .drop-after').forEach(c => c.classList.remove('drop-before', 'drop-after'));
        list.querySelectorAll('.um-track-card[draggable="true"]').forEach(c => c.removeAttribute('draggable'));
        dragged = null;
    });

    // Always accept drops anywhere inside the list so the browser doesn't
    // veto the drop when the cursor slips into gaps between cards.
    list.addEventListener('dragover', function (e) {
        if (!dragged) return;
        e.preventDefault();
        try { e.dataTransfer.dropEffect = 'move'; } catch (_) {}
        const over = e.target.closest('.um-track-card');
        list.querySelectorAll('.drop-before, .drop-after').forEach(c => c.classList.remove('drop-before', 'drop-after'));
        if (!over || over === dragged || over.parentElement !== list) return;
        const r = over.getBoundingClientRect();
        const after = (e.clientY - r.top) > (r.height / 2);
        over.classList.add(after ? 'drop-after' : 'drop-before');
    });

    list.addEventListener('drop', function (e) {
        if (!dragged) return;
        e.preventDefault();
        const cards = Array.from(list.querySelectorAll(':scope > .um-track-card'));
        const over  = e.target.closest('.um-track-card');
        let refNode;
        if (over && over !== dragged && over.parentElement === list) {
            const r = over.getBoundingClientRect();
            const after = (e.clientY - r.top) > (r.height / 2);
            refNode = after ? over.nextSibling : over;
        } else {
            // Cursor fell into a gap or outside a card — figure out the closest slot
            // by comparing cursor Y against each card's midpoint.
            let insertBefore = null;
            for (const c of cards) {
                if (c === dragged) continue;
                const r = c.getBoundingClientRect();
                if (e.clientY < r.top + r.height / 2) { insertBefore = c; break; }
            }
            refNode = insertBefore; // null → append to end
        }
        if (refNode === dragged) refNode = dragged.nextSibling;
        list.insertBefore(dragged, refNode);
        list.querySelectorAll('.drop-before, .drop-after').forEach(c => c.classList.remove('drop-before', 'drop-after'));
        console.log('%c[EditTrack] Drag-reordered:', 'color:#3b82f6', { moved: dragged.id, refNode: refNode?.id || '(end)' });
        _editUpdateTrackPositions();
    });
})();

function _editSetLangCsd(wrap, code) {
    if (!wrap || !code) return;
    const opt   = wrap.querySelector(`.csd-opt[data-v="${code}"]`);
    const ico   = wrap.querySelector('.csd-ico');
    const valEl = wrap.querySelector('.csd-val');
    if (!opt) return;
    if (ico)   ico.innerHTML = opt.querySelector('.csd-opt-ico').innerHTML;
    if (valEl) { valEl.textContent = opt.querySelector('.csd-opt-main').textContent; valEl.classList.remove('ph'); }
    wrap.querySelectorAll('.csd-opt').forEach(o => o.setAttribute('aria-selected', o === opt ? 'true' : 'false'));
}

function _editSetLangSelect(code) {
    const inp = document.getElementById('edit_primary_language');
    if (!inp) return;
    inp.value = code;
    const wrap = inp.closest('.csd-wrap');
    if (!wrap) return;
    const ico  = wrap.querySelector('.csd-ico');
    const valEl = wrap.querySelector('.csd-val');
    if (!code) {
        if (ico)  ico.innerHTML = '<span class="fi fi-xx lsd-flag"></span>';
        if (valEl) { valEl.textContent = 'Select language'; valEl.classList.add('ph'); }
        wrap.querySelectorAll('.csd-opt').forEach(o => o.setAttribute('aria-selected','false'));
    } else {
        const opt = wrap.querySelector(`.csd-opt[data-v="${code}"]`);
        if (opt) {
            if (ico)  ico.innerHTML = opt.querySelector('.csd-opt-ico').innerHTML;
            if (valEl) { valEl.textContent = opt.querySelector('.csd-opt-main').textContent; valEl.classList.remove('ph'); }
            wrap.querySelectorAll('.csd-opt').forEach(o => o.setAttribute('aria-selected', o===opt ? 'true':'false'));
        }
    }
}

// ── Video file handling ───────────────────────────────────────────────────────
const editVideoFile = document.getElementById('edit-video-file');
editVideoFile.addEventListener('change', function() { editHandleVideoSelect(this); });

const EDIT_AUDIO_EXTS = ['mp3','m4a','aac','flac','wav'];
function _editIsAudio(file) {
    const ext = file.name.split('.').pop().toLowerCase();
    return EDIT_AUDIO_EXTS.includes(ext) || file.type.startsWith('audio/');
}

function editHandleVideoSelect(input) {
    if (!input.files || !input.files[0]) return;
    const file  = input.files[0];
    const audio = _editIsAudio(file);

    if (audio && _editMode !== 'music') {
        _editApplyMode('music');
        _editGsSet('type','music','bi-music-note-beamed','Music');
    } else if (!audio && _editMode === 'music') {
        _editApplyMode('generic');
        _editGsSet('type','generic','bi-film','Generic');
    }

    if (audio) {
        const fn = document.getElementById('edit-t1-fname');
        if (fn) fn.textContent = file.name;
        const audioBox = document.getElementById('edit-tf-t1-audio-box');
        if (audioBox) audioBox.style.borderColor = '#22c55e';
    } else {
        document.getElementById('edit-t1-filename').textContent = file.name;
        document.getElementById('edit-t1-filesize').textContent = _editFmtSize(file.size);
        document.getElementById('edit-t1-dz-idle').style.display = 'none';
        document.getElementById('edit-t1-file-info').style.display = 'flex';
    }
    editUpdateTrackCard('t1');
}

function editRemoveVideo(e) {
    e.preventDefault(); e.stopPropagation();
    editVideoFile.value = '';
    document.getElementById('edit-t1-dz-idle').style.display = '';
    document.getElementById('edit-t1-file-info').style.display = 'none';
}

// ── Thumbnail ─────────────────────────────────────────────────────────────────
const editThumbDz  = document.getElementById('edit-t1-thumbnail-dropzone');
let   editThumbInp = document.getElementById('edit-t1-thumbnail-input');

editThumbDz.addEventListener('click', function(e) {
    if (e.target.closest('.btn-remove-file')) return;
    if (typeof window.openCropperModal_thumb_edit === 'function') {
        window.openCropperModal_thumb_edit();
        const internal = document.getElementById('tcInput_thumb_edit');
        if (internal) internal.click();
    } else { editThumbInp.click(); }
});
editThumbDz.addEventListener('dragover',  e => { e.preventDefault(); editThumbDz.style.borderColor='#e61e1e'; });
editThumbDz.addEventListener('dragleave', () => { editThumbDz.style.borderColor=''; });
editThumbDz.addEventListener('drop', e => {
    e.preventDefault(); editThumbDz.style.borderColor='';
    if (e.dataTransfer.files.length) {
        if (typeof window.tcPreload_thumb_edit === 'function') {
            window.tcPreload_thumb_edit(e.dataTransfer.files[0]);
            window.openCropperModal_thumb_edit();
        } else { editThumbInp.files = e.dataTransfer.files; editHandleThumbnail(editThumbInp, 't1'); }
    }
});

function editHandleThumbnail(input, prefix) {
    if (!input.files || !input.files[0]) return;
    const file = input.files[0];
    document.getElementById('edit-' + prefix + '-thumbnail-fname').textContent = file.name;
    document.getElementById('edit-' + prefix + '-thumbnail-fsize').textContent = _editFmtSize(file.size);
    const reader = new FileReader();
    reader.onload = e => { document.getElementById('edit-' + prefix + '-thumbnail-preview').src = e.target.result; };
    reader.readAsDataURL(file);
    document.getElementById('edit-' + prefix + '-thumbnail-ph').style.display   = 'none';
    document.getElementById('edit-' + prefix + '-thumbnail-info').style.display = 'flex';
}

function editRemoveThumbnail(e, prefix) {
    prefix = prefix || 't1';
    if (e) { e.preventDefault(); e.stopPropagation(); }
    if (prefix === 't1') {
        const fresh = editThumbInp.cloneNode(false);
        editThumbInp.parentNode.replaceChild(fresh, editThumbInp);
        editThumbInp = fresh;
        fresh.setAttribute('onchange', "editHandleThumbnail(this,'t1')");
    }
    document.getElementById('edit-' + prefix + '-thumbnail-ph').style.display   = '';
    document.getElementById('edit-' + prefix + '-thumbnail-info').style.display = 'none';
    document.getElementById('edit-' + prefix + '-thumbnail-preview').src = '';
}

// ── Slides ────────────────────────────────────────────────────────────────────
function editSlidesZoneClick(e, tid)    { tid=tid||'t1'; if (e.target.closest('button')) return; document.getElementById('edit-'+tid+'-slides-input').click(); }
function editSlidesZoneDragover(e, tid) { tid=tid||'t1'; if (Array.from(e.dataTransfer.types||[]).includes('Files')) { e.preventDefault(); document.getElementById('edit-'+tid+'-slides-zone').classList.add('dragover'); } }
function editSlidesZoneDragleave(tid)   { tid=tid||'t1'; document.getElementById('edit-'+tid+'-slides-zone').classList.remove('dragover'); }
function editSlidesZoneDrop(e, tid)     { tid=tid||'t1'; e.preventDefault(); document.getElementById('edit-'+tid+'-slides-zone').classList.remove('dragover'); if (e.dataTransfer.files.length) editHandleSlides(e.dataTransfer.files, tid); }

function editHandleSlides(fileList, tid) {
    tid = tid || 't1';
    _editSlidesCropStart(fileList, tid, _editRenderSlides);
    const inp = document.getElementById('edit-' + tid + '-slides-input');
    if (inp) inp.value = '';
}

// ── Slides crop queue: every added image is cropped before it enters the strip ──
let _editSlidesCropQueue  = [];
let _editSlidesCropTid    = null;
let _editSlidesCropRender = null;

function _editSlidesCropStart(fileList, tid, renderFn) {
    const imgs = Array.from(fileList || []).filter(f => f.type && f.type.startsWith('image/'));
    if (!imgs.length) return;
    _editSlidesCropTid    = tid;
    _editSlidesCropRender = renderFn;
    _editSlidesCropQueue  = imgs;
    _editSlidesCropLoadNext();
}

function _editSlidesCropLoadNext() {
    if (!_editSlidesCropQueue.length) { window.closeCropperModal('slides_edit'); return; }
    const f = _editSlidesCropQueue.shift();
    if (typeof window.tcPreload_slides_edit === 'function') {
        // Open modal first so the cropper canvas has a real layout box when
        // initCropper measures. Preloading first (prior order) caused the
        // second batch to open with stale zero-sized measurements and a Save
        // button that silently did nothing.
        window.openCropperModal_slides_edit();
        requestAnimationFrame(() => window.tcPreload_slides_edit(f));
    }
}

function editSlidesCropDone(file) {
    const tid = _editSlidesCropTid;
    if (tid && file) {
        if (!_editSlidesData[tid]) _editSlidesData[tid] = [];
        if (_editSlidesData[tid].length < 10) {
            const reader = new FileReader();
            reader.onload = ev => {
                _editSlidesData[tid].push({ file, url: ev.target.result });
                if (_editSlidesCropRender) _editSlidesCropRender(tid);
                _editSlidesCropLoadNext();
            };
            reader.readAsDataURL(file);
            return;
        }
    }
    _editSlidesCropLoadNext();
}

function editClearSlides(e, tid) {
    tid = tid || 't1';
    if (e) { e.preventDefault(); e.stopPropagation(); }
    _editSlidesData[tid] = [];
    const inp = document.getElementById('edit-' + tid + '-slides-input');
    if (inp) { const fresh = inp.cloneNode(false); fresh.setAttribute('onchange',"editHandleSlides(this.files,'"+tid+"')"); inp.parentNode.replaceChild(fresh, inp); }
    _editRenderSlides(tid);
}

let _editSlidesDrag = null;
function _editRenderSlides(tid) {
    const files = _editSlidesData[tid] || [];
    const strip = document.getElementById('edit-' + tid + '-slides-strip');
    const ph    = document.getElementById('edit-' + tid + '-slides-ph');
    const prev  = document.getElementById('edit-' + tid + '-slides-preview');
    const cnt   = document.getElementById('edit-' + tid + '-slides-count');
    if (!strip) return;
    strip.innerHTML = '';
    if (!files.length) {
        if (ph)   ph.style.display   = '';
        if (prev) prev.style.display = 'none';
        document.getElementById('edit-' + tid + '-slides-order').value = '[]';
        return;
    }
    files.forEach((item, index) => {
        const wrap = document.createElement('div');
        wrap.style.cssText = 'position:relative;flex-shrink:0;cursor:grab;';
        wrap.draggable = true; wrap.dataset.index = index;
        wrap.addEventListener('dragstart', ev => { _editSlidesDrag = index; ev.dataTransfer.effectAllowed='move'; setTimeout(()=>{wrap.style.opacity='.4';},0); });
        wrap.addEventListener('dragend',   ()  => { _editSlidesDrag = null; wrap.style.opacity=''; });
        wrap.addEventListener('dragover',  ev  => { if (_editSlidesDrag==null) return; ev.preventDefault(); wrap.style.outline='2px solid #e61e1e'; });
        wrap.addEventListener('dragleave', ()  => { wrap.style.outline=''; });
        wrap.addEventListener('drop', ev => {
            ev.preventDefault(); ev.stopPropagation(); wrap.style.outline='';
            if (_editSlidesDrag==null || _editSlidesDrag===index) return;
            const arr = _editSlidesData[tid];
            const [moved] = arr.splice(_editSlidesDrag, 1);
            arr.splice(index, 0, moved);
            _editRenderSlides(tid);
        });
        const rb = document.createElement('button');
        rb.type='button'; rb.style.cssText='position:absolute;top:-4px;right:-4px;width:16px;height:16px;background:#e61e1e;border:none;border-radius:50%;color:#fff;font-size:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:1;';
        rb.innerHTML='<i class="bi bi-x"></i>';
        rb.addEventListener('click', ev => { ev.stopPropagation(); _editSlidesData[tid].splice(index,1); _editRenderSlides(tid); });
        const img = document.createElement('img');
        img.style.cssText='width:52px;height:52px;object-fit:cover;border-radius:6px;border:1px solid rgba(255,255,255,.12);display:block;'; img.alt=''; img.src=item.url;
        wrap.appendChild(img); wrap.appendChild(rb); strip.appendChild(wrap);
    });
    const ids = files.filter(s => s.id).map(s => s.id);
    document.getElementById('edit-' + tid + '-slides-order').value = JSON.stringify(ids);
    if (cnt)  cnt.textContent = files.length===1 ? '1 image — static cover' : files.length+' images — will crossfade during playback';
    if (ph)   ph.style.display   = 'none';
    if (prev) prev.style.display = '';
    document.getElementById('edit-' + tid + '-slides-zone').style.borderColor = '#22c55e';
}

// ── Slides helpers for extra tracks ──────────────────────────────────────────
function editSlidesZoneClickE(e, tid)    { if (e.target.closest('button')) return; document.getElementById('edit-slides-input-'+tid).click(); }
function editSlidesZoneDragoverE(e, tid) { if (Array.from(e.dataTransfer.types||[]).includes('Files')) { e.preventDefault(); document.getElementById('edit-slides-zone-'+tid).classList.add('dragover'); } }
function editSlidesZoneDragleaveE(tid)   { document.getElementById('edit-slides-zone-'+tid).classList.remove('dragover'); }
function editSlidesZoneDropE(e, tid)     { e.preventDefault(); document.getElementById('edit-slides-zone-'+tid).classList.remove('dragover'); if (e.dataTransfer.files.length) editHandleSlidesForTrack(tid, e.dataTransfer.files); }

function editHandleSlidesForTrack(tid, fileList) {
    _editSlidesCropStart(fileList, tid, _editRenderSlidesForTrack);
    const inp = document.getElementById('edit-slides-input-' + tid);
    if (inp) inp.value = '';
}

function editClearSlidesForTrack(e, tid) {
    if (e) { e.preventDefault(); e.stopPropagation(); }
    _editSlidesData[tid] = [];
    const inp = document.getElementById('edit-slides-input-'+tid);
    if (inp) { const fresh = inp.cloneNode(false); fresh.setAttribute('onchange', "editHandleSlidesForTrack('"+tid+"',this.files)"); inp.parentNode.replaceChild(fresh, inp); }
    _editRenderSlidesForTrack(tid);
}

let _editExtraSlidesDrag = null;
function _editRenderSlidesForTrack(tid) {
    const files = _editSlidesData[tid] || [];
    const strip = document.getElementById('edit-slides-strip-'+tid);
    const ph    = document.getElementById('edit-slides-ph-'+tid);
    const prev  = document.getElementById('edit-slides-preview-'+tid);
    const cnt   = document.getElementById('edit-slides-count-'+tid);
    const zone  = document.getElementById('edit-slides-zone-'+tid);
    if (!strip) return;
    strip.innerHTML = '';
    if (!files.length) {
        if (ph)   ph.style.display   = '';
        if (prev) prev.style.display = 'none';
        return;
    }
    files.forEach((item, index) => {
        const wrap = document.createElement('div');
        wrap.style.cssText = 'position:relative;flex-shrink:0;cursor:grab;';
        wrap.draggable = true; wrap.dataset.index = index;
        wrap.addEventListener('dragstart', ev => { _editExtraSlidesDrag = {tid, index}; ev.dataTransfer.effectAllowed='move'; setTimeout(()=>{wrap.style.opacity='.4';},0); });
        wrap.addEventListener('dragend',   ()  => { _editExtraSlidesDrag = null; wrap.style.opacity=''; });
        wrap.addEventListener('dragover',  ev  => { if (!_editExtraSlidesDrag || _editExtraSlidesDrag.tid !== tid) return; ev.preventDefault(); wrap.style.outline='2px solid #e61e1e'; });
        wrap.addEventListener('dragleave', ()  => { wrap.style.outline=''; });
        wrap.addEventListener('drop', ev => {
            ev.preventDefault(); ev.stopPropagation(); wrap.style.outline='';
            if (!_editExtraSlidesDrag || _editExtraSlidesDrag.tid !== tid || _editExtraSlidesDrag.index === index) return;
            const arr = _editSlidesData[tid];
            const [moved] = arr.splice(_editExtraSlidesDrag.index, 1);
            arr.splice(index, 0, moved);
            _editRenderSlidesForTrack(tid);
        });
        const rb = document.createElement('button');
        rb.type='button'; rb.style.cssText='position:absolute;top:-4px;right:-4px;width:16px;height:16px;background:#e61e1e;border:none;border-radius:50%;color:#fff;font-size:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:1;';
        rb.innerHTML='<i class="bi bi-x"></i>';
        rb.addEventListener('click', ev => { ev.stopPropagation(); _editSlidesData[tid].splice(index,1); _editRenderSlidesForTrack(tid); });
        const img = document.createElement('img');
        img.style.cssText='width:52px;height:52px;object-fit:cover;border-radius:6px;border:1px solid rgba(255,255,255,.12);display:block;'; img.alt=''; img.src=item.url;
        wrap.appendChild(img); wrap.appendChild(rb); strip.appendChild(wrap);
    });
    if (cnt)  cnt.textContent = files.length===1 ? '1 image — static cover' : files.length+' images — will crossfade during playback';
    if (ph)   ph.style.display   = 'none';
    if (prev) prev.style.display = '';
    if (zone) zone.style.borderColor = '#22c55e';
}

// ── Track popup ───────────────────────────────────────────────────────────────
function editOpenTrackPopup(trackId) {
    document.querySelectorAll('#edit-track-popup .um-track-form').forEach(f => f.style.display = 'none');
    // Primary track form uses the legacy id (edit-tf-t1); extra tracks are
    // cloned from the SHARED #um-track-form-template and use id um-tf-{id}.
    const form = document.getElementById('edit-tf-' + trackId) || document.getElementById('um-tf-' + trackId);
    if (form) form.style.display = 'block';
    const popup = document.getElementById('edit-track-popup');
    popup.style.opacity = '0';
    popup.style.display = 'flex';
    requestAnimationFrame(() => { popup.style.opacity = '1'; });
}

function editCloseTrackPopup() {
    document.querySelectorAll('#edit-track-popup .um-track-form').forEach(f => f.style.display = 'none');
    document.getElementById('edit-track-popup').style.display = 'none';
    editUpdateTrackCard('t1');
    for (let i = 1; i <= _editExtraCount; i++) {
        if (document.getElementById('edit-tc-e'+i)) editUpdateTrackCard('e'+i);
    }
}

// For t1 the inputs are the primary-track Blade ids. For extra tracks (both
// newly-added and existing-track rows) the inputs come from the SHARED
// #um-track-form-template, so they use the shared ids track-lang-{id} /
// track-title-{id}. One function reads whichever is present.
function editUpdateTrackCard(trackId) {
    let langCode = '', title = '';
    if (trackId === 't1') {
        const li = document.getElementById('edit_primary_language');
        const ti = document.getElementById('edit-track1-title');
        langCode = li ? li.value : '';
        title    = ti ? ti.value.trim() : '';
    } else {
        const li = document.getElementById('track-lang-'  + trackId);
        const ti = document.getElementById('track-title-' + trackId);
        langCode = li ? li.value : '';
        title    = ti ? ti.value.trim() : '';
    }
    const OPTS  = LANG_OPTIONS_EDIT_MODAL;
    const lang  = OPTS.find(o => o.value === langCode);
    const flagEl  = document.getElementById('edit-tc-flag-'  + trackId);
    const titleEl = document.getElementById('edit-tc-title-' + trackId);
    if (flagEl)  flagEl.className = 'fi fi-' + (lang ? lang.flag : 'xx') + ' um-tc-flag';
    if (titleEl) {
        if (lang && title)  titleEl.textContent = title + ' — ' + lang.label;
        else if (lang)      titleEl.textContent = lang.label;
        else if (title)     titleEl.textContent = title;
        else                titleEl.textContent = '';
    }
}

// ── Extra track management ────────────────────────────────────────────────────
const LANG_OPTIONS_EDIT_MODAL = @json(\App\Data\Languages::forLanguage());

// Clone the SHARED upload-modal track-form partial into the edit popup. Both
// "add new track" and "load existing track" go through here, so there is one
// source of truth for the form markup. The caller picks the submission names:
//   - new track         → extra_track_*[]
//   - existing track    → track_*_updates[trackId]
function _editCloneTrackForm(prefix, langName, titleName, descName, audioName) {
    const frag = window.cloneTrackFormTemplate({
        key: prefix, langName, titleName, descName, audioName,
    });
    if (!frag) return null;
    const host   = document.getElementById('edit-tf-extra');
    host.appendChild(frag);
    // _slidesData is the shared state used by the shared slides-zone handlers.
    // Mirror the handle under _editSlidesData so the edit submit code stays
    // oblivious to the migration (one array, two aliases).
    window._slidesData = window._slidesData || {};
    _slidesData[prefix] = [];
    _editSlidesData[prefix] = _slidesData[prefix];
    window.initTrackFormNode(prefix, pfx => editUpdateTrackCard(pfx));
    return document.getElementById('um-tf-' + prefix);
}

function _editTrackCard(n, trackId, isExisting) {
    const card = document.createElement('div');
    card.className = 'um-track-card'; card.id = 'edit-tc-e' + n;
    card.dataset.trackId = trackId || '';
    const deleteBtn = isExisting
        ? `<button type="button" class="action-btn action-btn-danger icon-only" onclick="editDeleteTrack(${trackId},${n})" title="Delete"><i class="bi bi-trash"></i></button>`
        : `<button type="button" class="action-btn action-btn-danger icon-only" onclick="editRemoveNewTrack(${n})" title="Remove"><i class="bi bi-trash"></i></button>`;
    card.innerHTML = `
        <div class="um-tc-body">
            <div class="um-tc-left">
                <span class="um-tc-drag" title="Drag to reorder"><i class="bi bi-grip-vertical"></i></span>
                <div class="um-tc-num">${n + 1}</div>
                <span class="fi fi-xx um-tc-flag" id="edit-tc-flag-e${n}"></span>
                <div class="um-tc-info">
                    <span class="um-tc-title" id="edit-tc-title-e${n}"></span>
                    <span class="um-tc-primary" style="display:none;"><i class="bi bi-star-fill"></i> Primary</span>
                </div>
            </div>
            <div class="um-tc-right">
                <button type="button" class="action-btn" onclick="editOpenTrackPopup('e${n}')"><i class="bi bi-pencil"></i> <span>Edit</span></button>
                ${deleteBtn}
            </div>
        </div>`;
    document.getElementById('edit-tc-list').appendChild(card);
    return card;
}

function _editAddExistingTrack(track) {
    const n   = ++_editExtraCount;
    const pfx = 'e' + n;
    _editTrackCard(n, track.id, true);
    _editCloneTrackForm(
        pfx,
        'track_language_updates[' + track.id + ']',
        'track_title_updates[' + track.id + ']',
        'track_description_updates[' + track.id + ']',
        'track_file_updates[' + track.id + ']'
    );
    // Shared partial field ids: track-title-{pfx} / track-desc-{pfx} / track-lang-{pfx}
    const titleEl = document.getElementById('track-title-' + pfx);
    if (titleEl) titleEl.value = track.title || '';
    const descEl = document.getElementById('track-desc-' + pfx);
    if (descEl) { descEl.value = track.description || ''; descEl.dispatchEvent(new Event('rte:refresh')); }
    if (track.language && window.CSD) {
        const hi   = document.getElementById('track-lang-' + pfx);
        const wrap = document.getElementById('lsd_track_'  + pfx);
        if (hi)   hi.value = track.language;
        if (wrap) _editSetLangCsd(wrap, track.language);
    }
    editUpdateTrackCard(pfx);
    _editUpdateTrackPositions();
}

function _editRemoveTrackForms(n) {
    const pfx = 'e' + n;
    document.getElementById('edit-tc-' + pfx)?.remove();
    // Form id depends on which cloner built it: shared template → um-tf-{pfx},
    // legacy edit template → edit-tf-{pfx}. Clean up whichever exists.
    document.getElementById('um-tf-'  + pfx)?.remove();
    document.getElementById('edit-tf-' + pfx)?.remove();
    delete _editSlidesData[pfx];
    delete (window._slidesData || {})[pfx];
    const popup = document.getElementById('edit-track-popup');
    if (popup.style.display !== 'none') {
        const vis = popup.querySelector('.um-track-form:not([style*="none"])');
        if (!vis || vis.id === 'edit-tf-' + pfx || vis.id === 'um-tf-' + pfx) popup.style.display = 'none';
    }
}

function editDeleteTrack(trackId, n) {
    _editDeleteTrackIds.push(trackId);
    _editRemoveTrackForms(n);
    _editUpdateTrackPositions();
}

function editRemoveNewTrack(n) {
    _editRemoveTrackForms(n);
}

function editAddExtraTrack() {
    const n   = ++_editExtraCount;
    const pfx = 'e' + n;
    _editTrackCard(n, null, false);
    _editCloneTrackForm(
        pfx,
        'extra_track_languages[]',
        'extra_track_titles[]',
        'extra_track_descriptions[]',
        'extra_track_files[]'
    );
    _editUpdateTrackPositions();
    editOpenTrackPopup(pfx);
}

// Wire primary language → update card
;(function() {
    const li = document.getElementById('edit_primary_language');
    if (li) li.addEventListener('change', () => editUpdateTrackCard('t1'));
}());

// ── Form submission ───────────────────────────────────────────────────────────
document.getElementById('edit-form').addEventListener('submit', function(e) {
    e.preventDefault();

    const titleVal = (document.getElementById('edit-track1-title')?.value || '').trim();
    if (!titleVal) {
        document.getElementById('edit-status-msg').innerHTML = '<i class="bi bi-exclamation-circle-fill"></i> Please enter a title';
        document.getElementById('edit-status-msg').className = 'status-message-modal error';
        editOpenTrackPopup('t1');
        return;
    }

    const formData = new FormData(this);

    // Append new slide files (track 1)
    (_editSlidesData['t1'] || []).filter(s => s.file).forEach(s => formData.append('slides_add[]', s.file, s.file.name));

    // Append new slide files for extra tracks
    for (let i = 1; i <= _editExtraCount; i++) {
        const tid = 'e'+i;
        (_editSlidesData[tid] || []).filter(s => s.file).forEach(s => formData.append('extra_track_slides_'+tid+'[]', s.file, s.file.name));
    }

    // Append delete IDs
    _editDeleteTrackIds.forEach(id => formData.append('delete_track_ids[]', id));

    // Ordered list of track IDs as displayed. Index 0 is the primary slot;
    // "primary" is the sentinel for the original primary track row, since
    // the primary isn't a video_audio_tracks row of its own.
    Array.from(document.querySelectorAll('#edit-tc-list > .um-track-card')).forEach(card => {
        const val = (card.id === 'edit-tc-t1-card') ? 'primary' : (card.dataset.trackId || '');
        if (val) formData.append('track_order[]', val);
    });

    // ── Log tracker: dump the exact track-related payload being submitted ──────
    (function () {
        const promoteId = document.getElementById('edit-promote-track-id')?.value || '(none)';
        const order = Array.from(document.querySelectorAll('#edit-tc-list > .um-track-card')).map((c, i) => ({
            pos: i + 1,
            card: c.id,
            trackId: c.dataset.trackId || 'primary',
            title: c.querySelector('.um-tc-title')?.textContent?.trim() || ''
        }));
        const trackFields = {};
        for (const [k, v] of formData.entries()) {
            if (/^(promote_track_id|primary_language|title|description|track_|extra_track_|delete_track_ids)/.test(k)) {
                trackFields[k] = (v instanceof File) ? `[File: ${v.name}]` : v;
            }
        }
        console.groupCollapsed('%c[EditTrack] Submitting edit for video ' + window._editCurrentVideoId, 'color:#e61e1e;font-weight:700');
        console.log('Primary language:', document.getElementById('edit_primary_language')?.value || '(none)');
        console.log('Promote track id (secondary→primary):', promoteId);
        console.table(order);
        console.log('Delete track ids:', _editDeleteTrackIds);
        console.log('Track form fields:', trackFields);
        console.groupEnd();
    })();

    const btn = document.getElementById('edit-submit-btn');
    const st  = document.getElementById('edit-status-msg');
    btn.disabled = true;
    btn.innerHTML = '<i class="bi bi-arrow-repeat"></i> Saving…';
    if (st) st.className = 'status-message-modal';

    fetch(`/videos/${window._editCurrentVideoId}`, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(r => { if (!r.ok) throw new Error('Server error'); return r.json(); })
    .then(data => {
        console.log('%c[EditTrack] Server response:', 'color:#22c55e;font-weight:700', data);
        if (data.success) {
            if (st) {
                st.innerHTML = '<i class="bi bi-check-circle-fill"></i> ' + (data.message || 'Saved!');
                st.className = 'status-message-modal success';
            }
            setTimeout(() => { closeEditVideoModal(); window.location.reload(); }, 1200);
        } else {
            throw new Error(data.message || 'Update failed');
        }
    })
    .catch(err => {
        console.error('%c[EditTrack] Save failed:', 'color:#e61e1e;font-weight:700', err);
        if (st) {
            st.innerHTML = '<i class="bi bi-exclamation-circle-fill"></i> ' + (err.message || 'Save failed');
            st.className = 'status-message-modal error';
        }
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-check-lg"></i> <span>Save Changes</span>';
    });
});

// Initialise
_editApplyMode('generic');
</script>

<x-image-cropper
    id="thumb_edit"
    :width="448"
    :height="252"
    shape="square"
    target-input="edit-t1-thumbnail-input"
    preview-img="edit-t1-thumbnail-preview"
    output-width="1280"
    title="Crop Thumbnail"
/>

<x-image-cropper
    id="slides_edit"
    :width="448"
    :height="252"
    shape="square"
    output-width="1280"
    title="Crop Cover Slide"
    result-callback="editSlidesCropDone"
/>