{{-- resources/views/manager/access-script.blade.php --}}

<script>
document.addEventListener('DOMContentLoaded', function () {

    // Any checkbox with .apply-to-all
    document.querySelectorAll('.apply-to-all').forEach(function (checkbox) {

        checkbox.addEventListener('change', function () {

            if (!this.checked) return;

            let field = this.dataset.field;
            let callId = this.dataset.call;
            let valueInput = document.querySelector(
                'input[name="access[' + callId + '][' + field + ']"], ' +
                'select[name="access[' + callId + '][' + field + ']"]'
            );

            if (!valueInput) return;

            let value = valueInput.value;

            // Set this value across all other calls
            document.querySelectorAll('[name^="access"]').forEach(function (el) {
                if (el.name.includes('[' + field + ']')) {
                    el.value = value;
                }
            });

            alert('Applied "' + field + '" to all calls.');
        });

    });

});
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {

    // Find all call tab panels
    const callPanels = document.querySelectorAll("[id^='access-call-']");

    callPanels.forEach(panel => {

        // Inside THIS panel, get fields safely
        function getField(field) {
            return panel.querySelector(`[name="answers[${field}]"]`);
        }

        const noMenus   = getField('no_menus');
        const numLayers = getField('number_of_menu_layers');

        // These fields become NA when "No Menus = Yes"
        const affectedFields = [
            'max_3_menu_layers',
            'max_4_options_to_selection',
            'required_options_obvious_in_all_menus',
            'accepted_all_responses_selections',
            'all_messages_relevant_to_selections',
            'clear_concise_options'
        ];

        function setSelectValue(el, value, label=null) {
            if (!el) return;

            if (value && label && ![...el.options].some(o => o.value === value)) {
                el.add(new Option(label, value));
            }

            el.value = value;
            el.dispatchEvent(new Event("change", { bubbles: true }));
        }

        function applyDependencies() {
            affectedFields.forEach(field => {
                const el = getField(field);
                if (!el) return;

                if (noMenus?.value === "1") {
                    setSelectValue(el, "-", "Not applicable");
                    el.disabled = true;
                } else {
                    if (el.value === "-") setSelectValue(el, "");
                    el.disabled = false;
                }
            });
        }

        function applyRules() {

            if (!noMenus) return;

            if (numLayers && numLayers.value === "0") {
                if (noMenus.value !== "1") {
                    setSelectValue(noMenus, "1");
                }
            }

            if (numLayers && numLayers.value !== "0") {
                if (noMenus.value !== "0") {
                    setSelectValue(noMenus, "0");
                }
            }

            applyDependencies();
        }

        applyRules();

        if (numLayers) {
            numLayers.addEventListener("input", applyRules);
            numLayers.addEventListener("change", applyRules);
        }
        if (noMenus) {
            noMenus.addEventListener("change", applyRules);
        }

    }); // end foreach panel

});
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Update progress badges by scanning each accordion item inside a call block
    function updateBadgesForCall(callBlock) {
        // for each accordion-item in this call block
        const items = callBlock.querySelectorAll('.accordion-item');
        items.forEach(item => {
            const badge = item.querySelector('.manager-badge');
            if (!badge) return;

            // Count answered / total inside this accordion-body
            const body = item.querySelector('.accordion-body');
            if (!body) return;

            const inputs = body.querySelectorAll('[name]');
            let total = 0, answered = 0;
            inputs.forEach(inp => {
                // only count manager input fields (skip checkboxes)
                if (inp.type === 'checkbox') return;
                // field name includes [] nested; treat present -> count
                total++;
                const v = inp.value;
                if (v !== null && v !== '') answered++;
            });
            badge.textContent = answered + '/' + total;
            if (answered === total && total>0) {
                badge.classList.add('complete');
            } else {
                badge.classList.remove('complete');
            }
        });
    }

    // initialize all calls
    document.querySelectorAll('.call-block').forEach(cb => updateBadgesForCall(cb));

    // watch for input changes -> update badge for the parent call block
    document.body.addEventListener('input', function (e) {
        const el = e.target;
        const callBlock = el.closest('.call-block');
        if (!callBlock) return;
        updateBadgesForCall(callBlock);
    }, {passive: true});

    // APPLY TO ALL behavior: when manager checks 'apply-to-all', copy the value to all other calls
    function applyToAllHandler(e) {
        const chk = e.target;
        if (!chk.classList.contains('apply-to-all-access') && !chk.classList.contains('apply-to-all-quality')) return;
        const field = chk.getAttribute('data-field');
        const callId = chk.getAttribute('data-call');
        const callBlock = document.querySelector('#manager-call-block-' + callId) || document.querySelector('#manager-quality-call-' + callId);
        if (!callBlock) return;

        // value from this input
        // find input/select inside callBlock by data-field
        const source = callBlock.querySelector('[data-field="' + field + '"]');
        if (!source) return;
        const val = source.value;

        // apply to all other calls
        document.querySelectorAll('.call-block').forEach(cb => {
            if (cb.isSameNode(callBlock)) return;
            const target = cb.querySelector('[data-field="' + field + '"]');
            if (!target) return;
            // only copy if checkbox is checked (we're in event because clicked)
            if (chk.checked) {
                target.value = val;
                // fire change/input events
                target.dispatchEvent(new Event('input', {bubbles: true}));
                target.dispatchEvent(new Event('change', {bubbles: true}));
            }
        });

        // uncheck after applying to avoid accidental re-apply
        setTimeout(() => { chk.checked = false; }, 300);
    }

    document.body.addEventListener('change', applyToAllHandler, {passive: true});

    // Quality-specific: when call_answered_quality becomes '0', set other fields to '-' and disable them (per call)
    document.body.addEventListener('change', function (e) {
        const el = e.target;
        if (!el || !el.name) return;
        if (!el.name.includes('call_answered_quality') && !el.name.includes('answers[call_answered_quality]')) return;
        // find parent call-block
        const callBlock = el.closest('.call-block');
        if (!callBlock) return;

        const val = (el.value || '').toString();
        const isNo = (val === '0');

        const fields = callBlock.querySelectorAll('[name]');
        fields.forEach(f => {
            // skip trigger itself and comments
            if (f === el) return;
            if (f.name && f.name.includes('comments')) return;

            if (isNo) {
                // if select: add NA option if not present then set to '-'
                if (f.tagName === 'SELECT') {
                    if (!f.querySelector('option[value="-"]')) {
                        const opt = new Option('Not applicable', '-');
                        try { f.add(opt); } catch (err) { /* ignore if select2/tomselect */ }
                    }
                    f.value = '-';
                    f.setAttribute('disabled','disabled');
                } else {
                    // text area or input -> set to '-' and disable
                    f.value = '-';
                    f.setAttribute('disabled','disabled');
                }
            } else {
                // return to editable state: if select and has '-' remove it (unless in keep list)
                if (f.tagName === 'SELECT') {
                    // Do not remove '-' for a small keep-list; otherwise remove
                    const keep = ['welcome','questions','gratitude','thanks','revealed_pricing'];
                    const keyMatch = f.name.match(/answers\[(.*?)\]/);
                    const key = keyMatch ? keyMatch[1] : null;
                    if (f.querySelector('option[value="-"]') && (!key || !keep.includes(key))) {
                        try {
                            const na = f.querySelector('option[value="-"]');
                            if (na) na.remove();
                        } catch(e){}
                    }
                    if (f.value === '-') f.value = '';
                    f.removeAttribute('disabled');
                } else {
                    if (f.value === '-') f.value = '';
                    f.removeAttribute('disabled');
                }
            }
            // fire change/input to update badges
            f.dispatchEvent(new Event('input', {bubbles:true}));
            f.dispatchEvent(new Event('change', {bubbles:true}));
        });
    }, {passive: true});

});
</script>
<script>
(function () {

    function openTabFromQuery() {
        const params = new URLSearchParams(window.location.search);

        // -------- ACCESS --------
        if (params.has('access_call_id')) {
            const id = params.get('access_call_id');

            setTimeout(function () {
                const accessTab = document.querySelector('#access-tab');
                if (accessTab) {
                    accessTab.click(); // parent (if exists)
                }

                setTimeout(function () {
                    const callTab = document.querySelector('#access-call-' + id + '-tab');
                    if (callTab) {
                        callTab.click(); // child
                    }
                }, 100);
            }, 100);
        }

        // -------- QUALITY (HAS PARENT TAB) --------
        if (params.has('quality_call_id')) {
            const id = params.get('quality_call_id');

            setTimeout(function () {

                const qualityParent = document.querySelector('#quality-tab');
                if (qualityParent) {
                    qualityParent.click();
                }

    
                setTimeout(function () {
                    const callTab = document.querySelector('#quality-call-' + id + '-tab');
                    if (callTab) {
                        callTab.click();
                    }
                }, 150);

            }, 100);
        }
    }

    // Orchid navigation (Turbo)
    document.addEventListener('turbo:load', openTabFromQuery);

    // Hard reload fallback
    document.addEventListener('DOMContentLoaded', openTabFromQuery);

})();
</script>