@php
    $oldInputForJs = session()->getOldInput();
    $validationErrorsForJs = [];
    if (isset($errors) && method_exists($errors, 'getMessages')) {
        $validationErrorsForJs = $errors->getMessages();
    }
@endphp

<style id="ngbvd-standard-form-feedback-style">
    .ngbvd-invalid,
    .is-invalid,
    .ngbvd-invalid .selectize-input,
    .selectize-control.ngbvd-invalid .selectize-input,
    .select2-container.ngbvd-invalid .select2-selection {
        border-color: #dc3545 !important;
        box-shadow: 0 0 0 0.18rem rgba(220, 53, 69, 0.18) !important;
    }

    .ngbvd-required-label-error,
    .ngbvd-client-field-error,
    .invalid-feedback.server-feedback {
        color: #dc3545 !important;
        font-size: 0.86rem;
        margin-top: 0.35rem;
        display: block !important;
        font-weight: 600;
    }

    .ngbvd-feedback-stack {
        margin-bottom: 1rem;
    }

    .ngbvd-feedback-alert {
        border-radius: 12px;
        border-left: 5px solid #dc3545;
        padding: 12px 16px;
        margin-bottom: 1rem;
    }

    .ngbvd-feedback-alert ul {
        margin-bottom: 0;
        padding-left: 1.25rem;
    }
</style>

<script id="ngbvd-standard-form-state">
(function(){
    var oldInput = @json($oldInputForJs ?? []);
    var validationErrors = @json($validationErrorsForJs ?? []);

    function hasOwn(obj, key){ return Object.prototype.hasOwnProperty.call(obj, key); }
    function isEmptyObject(obj){ if (!obj) return true; for (var key in obj) { if (hasOwn(obj, key)) return false; } return true; }

    function flatten(input, prefix, output){
        output = output || {};
        if (input === null || typeof input === 'undefined') return output;
        if (Array.isArray(input)) {
            if (prefix) { output[prefix] = input; output[prefix + '[]'] = input; }
            input.forEach(function(value, index){
                var dotKey = prefix ? prefix + '.' + index : String(index);
                var bracketKey = prefix ? prefix + '[' + index + ']' : '[' + index + ']';
                if (value !== null && typeof value === 'object') { flatten(value, dotKey, output); flatten(value, bracketKey, output); }
                else { output[dotKey] = value; output[bracketKey] = value; }
            });
            return output;
        }
        if (typeof input === 'object') {
            Object.keys(input).forEach(function(key){
                var value = input[key];
                var dotKey = prefix ? prefix + '.' + key : key;
                var bracketKey = prefix ? prefix + '[' + key + ']' : key;
                if (value !== null && typeof value === 'object') { flatten(value, dotKey, output); flatten(value, bracketKey, output); }
                else { output[dotKey] = value; output[bracketKey] = value; }
            });
            return output;
        }
        if (prefix) output[prefix] = input;
        return output;
    }

    function variantsForName(name){
        if (!name) return [];
        var base = name.replace(/\[\]$/, '');
        var dot = base.replace(/\[(\w+)\]/g, '.$1');
        var underscore = dot.replace(/\./g, '_');
        var variants = [name, base, dot, underscore];
        return variants.filter(function(value, index){ return value && variants.indexOf(value) === index; });
    }

    function findValue(flat, name){
        var variants = variantsForName(name);
        for (var i = 0; i < variants.length; i++) { if (hasOwn(flat, variants[i])) return flat[variants[i]]; }
        return undefined;
    }

    function toArray(value){ if (Array.isArray(value)) return value.map(String); if (value === null || typeof value === 'undefined') return []; return [String(value)]; }

    function triggerChange(element){
        try {
            if (window.jQuery) { window.jQuery(element).trigger('change').trigger('input'); }
            else { element.dispatchEvent(new Event('change', { bubbles: true })); element.dispatchEvent(new Event('input', { bubbles: true })); }
        } catch(e) {}
    }

    function restoreOldInput(){
        if (isEmptyObject(oldInput)) return;
        var flat = flatten(oldInput);
        document.querySelectorAll('form input[name], form select[name], form textarea[name]').forEach(function(element){
            var name = element.getAttribute('name');
            if (!name || name === '_token' || name === '_method' || name === '_hp') return;
            if (element.type === 'file' || element.type === 'password') return;
            var value = findValue(flat, name);
            if (typeof value === 'undefined') return;
            if (element.type === 'radio') { element.checked = String(element.value) === String(value); return; }
            if (element.type === 'checkbox') { var values = toArray(value); element.checked = values.indexOf(String(element.value)) !== -1 || value === true || String(value) === '1' || String(value).toLowerCase() === 'on'; return; }
            if (element.tagName === 'SELECT' && element.multiple) {
                var selectedValues = toArray(value);
                Array.prototype.forEach.call(element.options, function(option){ option.selected = selectedValues.indexOf(String(option.value)) !== -1; });
                if (element.selectize) element.selectize.setValue(selectedValues, true);
                triggerChange(element); return;
            }
            element.value = value;
            if (element.selectize) element.selectize.setValue(value, true);
            triggerChange(element);
        });
    }

    function cssEscape(value){ if (window.CSS && CSS.escape) return CSS.escape(value); return String(value).replace(/([ #;?%&,.+*~\':"!^$[\]()=>|\/\\@])/g,'\\$1'); }

    function findFieldsForError(key){
        var variants = variantsForName(key), selectors = [];
        variants.forEach(function(name){ selectors.push('[name="' + cssEscape(name) + '"]'); selectors.push('[name="' + cssEscape(name + '[]') + '"]'); });
        return Array.prototype.slice.call(document.querySelectorAll(selectors.join(',')));
    }

    function feedbackTarget(element){
        if (!element) return null;
        if (element.selectize && element.selectize.$control && element.selectize.$control.length) return element.selectize.$control[0];
        var selectizeControl = element.parentElement ? element.parentElement.querySelector('.selectize-control') : null;
        if (selectizeControl) return selectizeControl;
        if (window.jQuery) {
            var select2 = window.jQuery(element).next('.select2-container');
            if (select2.length) return select2[0];
        }
        return element;
    }

    function fieldLabel(element){
        var id = element.getAttribute('id');
        var label = id ? document.querySelector('label[for="' + cssEscape(id) + '"]') : null;
        if (!label) {
            var group = element.closest('.form-group, .row, [class*="col-"]');
            label = group ? group.querySelector('label') : null;
        }
        return label ? label.textContent.replace('*','').trim().replace(/:$/,'') : (element.getAttribute('name') || 'This field');
    }

    function isEffectivelyVisible(element){
        if (!element) return false;
        if (element.type === 'hidden') return false;
        if (element.closest('[hidden], .d-none, .hide')) return false;
        if (element.selectize) return true;
        var style = window.getComputedStyle(element);
        if (style.display === 'none' || style.visibility === 'hidden') return false;
        return true;
    }

    function clearFieldError(element){
        var target = feedbackTarget(element);
        if (target) target.classList.remove('ngbvd-invalid', 'is-invalid', 'ngbvd-field-error-anchor');
        element.classList.remove('ngbvd-invalid', 'is-invalid');
        element.removeAttribute('aria-invalid');
        var parent = (target && target.parentElement) || element.parentElement;
        if (parent) parent.querySelectorAll('.ngbvd-client-field-error').forEach(function(node){ node.remove(); });
    }

    function markFieldError(element, message){
        var target = feedbackTarget(element) || element;
        target.classList.add('ngbvd-invalid', 'is-invalid', 'ngbvd-field-error-anchor');
        element.classList.add('ngbvd-invalid', 'is-invalid');
        element.setAttribute('aria-invalid', 'true');
        var parent = target.parentElement || element.parentElement;
        if (parent && !parent.querySelector('.ngbvd-client-field-error')) {
            var feedback = document.createElement('div');
            feedback.className = 'ngbvd-client-field-error';
            feedback.textContent = message;
            target.insertAdjacentElement('afterend', feedback);
        }
    }

    function validateRequiredField(element, form){
        if (element.disabled || !element.required || !isEffectivelyVisible(element)) return null;
        var name = element.getAttribute('name') || '';
        var label = fieldLabel(element);

        if (element.type === 'radio') {
            var radios = Array.prototype.slice.call(form.querySelectorAll('input[type="radio"][name="' + cssEscape(name) + '"]')).filter(isEffectivelyVisible);
            var checked = radios.some(function(r){ return r.checked; });
            if (!checked) { radios.forEach(function(r){ markFieldError(r, label + ' is required.'); }); return { element: radios[0] || element, message: label + ' is required.' }; }
            return null;
        }

        if (element.type === 'checkbox') {
            var boxes = Array.prototype.slice.call(form.querySelectorAll('input[type="checkbox"][name="' + cssEscape(name) + '"]')).filter(isEffectivelyVisible);
            var boxChecked = boxes.some(function(b){ return b.checked; });
            if (!boxChecked) { markFieldError(element, label + ' is required.'); return { element: element, message: label + ' is required.' }; }
            return null;
        }

        var value = element.value;
        if (element.tagName === 'SELECT' && element.multiple) {
            var any = Array.prototype.some.call(element.options, function(option){ return option.selected && option.value !== ''; });
            if (!any) { markFieldError(element, label + ' is required.'); return { element: element, message: label + ' is required.' }; }
            return null;
        }

        if (String(value || '').trim() === '') {
            markFieldError(element, label + ' is required.');
            return { element: element, message: label + ' is required.' };
        }

        if (element.type === 'email' && value && !/^\S+@\S+\.\S+$/.test(value)) {
            markFieldError(element, label + ' must be a valid email address.');
            return { element: element, message: label + ' must be a valid email address.' };
        }

        if (element.type === 'number') {
            var numberValue = Number(value);
            if (Number.isNaN(numberValue)) { markFieldError(element, label + ' must be a valid number.'); return { element: element, message: label + ' must be a valid number.' }; }
            if (element.min !== '' && numberValue < Number(element.min)) { markFieldError(element, label + ' is below the allowed minimum.'); return { element: element, message: label + ' is below the allowed minimum.' }; }
            if (element.max !== '' && numberValue > Number(element.max)) { markFieldError(element, label + ' is above the allowed maximum.'); return { element: element, message: label + ' is above the allowed maximum.' }; }
        }

        return null;
    }

    function showClientValidationMessage(form, errors){
        var container = document.getElementById('ngbvd-feedback-stack');
        if (!container) {
            container = document.createElement('div');
            container.id = 'ngbvd-feedback-stack';
            container.className = 'ngbvd-feedback-stack';
            var page = form.closest('.pcoded-content, .ngbvd-page-container, .page-wrapper, .card, main') || document.body;
            page.insertBefore(container, page.firstChild);
        }
        var existing = document.getElementById('ngbvd-client-validation-alert');
        if (existing) existing.remove();

        var alert = document.createElement('div');
        alert.id = 'ngbvd-client-validation-alert';
        alert.className = 'alert alert-danger ngbvd-feedback-alert';
        var list = errors.slice(0, 8).map(function(error){ return '<li>' + error.message + '</li>'; }).join('');
        alert.innerHTML = '<strong>Please review the form.</strong><br><span>Some mandatory fields are missing or invalid. Complete the highlighted fields and try again.</span>' + (list ? '<ul>' + list + '</ul>' : '');
        container.insertBefore(alert, container.firstChild);
        alert.scrollIntoView({behavior:'smooth', block:'start'});
    }

    function validateForm(form){
        var errors = [];
        form.querySelectorAll('.ngbvd-client-field-error').forEach(function(node){ node.remove(); });
        form.querySelectorAll('.ngbvd-invalid, .is-invalid').forEach(function(node){ node.classList.remove('ngbvd-invalid', 'is-invalid'); });
        form.querySelectorAll('[aria-invalid="true"]').forEach(function(node){ node.removeAttribute('aria-invalid'); });

        var fields = Array.prototype.slice.call(form.querySelectorAll('input[required], select[required], textarea[required]'));
        fields.forEach(function(element){
            var error = validateRequiredField(element, form);
            if (error) errors.push(error);
        });

        if (errors.length) {
            showClientValidationMessage(form, errors);
            var firstTarget = feedbackTarget(errors[0].element) || errors[0].element;
            setTimeout(function(){ try { firstTarget.scrollIntoView({behavior:'smooth', block:'center'}); errors[0].element.focus({preventScroll:true}); } catch(e) {} }, 120);
            return false;
        }
        return true;
    }

    function applyValidationErrors(){
        if (isEmptyObject(validationErrors)) return;
        var first = null;
        Object.keys(validationErrors).forEach(function(key){
            var messages = validationErrors[key] || [];
            var message = Array.isArray(messages) ? messages[0] : String(messages);
            var fields = findFieldsForError(key);
            fields.forEach(function(field){ markFieldError(field, message); if (!first) first = feedbackTarget(field) || field; });
        });
        var summary = document.getElementById('ngbvd-validation-summary') || document.getElementById('ngbvd-feedback-stack');
        if (summary) setTimeout(function(){ summary.scrollIntoView({behavior:'smooth', block:'start'}); }, 150);
        else if (first) setTimeout(function(){ first.scrollIntoView({behavior:'smooth', block:'center'}); }, 150);
    }

    function addClientValidation(){
        document.querySelectorAll('form').forEach(function(form){
            if (form.getAttribute('data-ngbvd-client-validation') === '1') return;
            form.setAttribute('data-ngbvd-client-validation', '1');
            if (!form.hasAttribute('novalidate')) form.setAttribute('novalidate', 'novalidate');

            form.addEventListener('submit', function(event){
                if (!validateForm(form)) { event.preventDefault(); event.stopPropagation(); return false; }
            }, true);

            form.addEventListener('input', function(event){ if (event.target && event.target.name) clearFieldError(event.target); }, true);
            form.addEventListener('change', function(event){ if (event.target && event.target.name) clearFieldError(event.target); }, true);
        });
    }

    document.addEventListener('DOMContentLoaded', function(){
        restoreOldInput();
        setTimeout(function(){
            if (window.NGBVDRefreshCaseStatusCascades) window.NGBVDRefreshCaseStatusCascades();
            applyValidationErrors();
            addClientValidation();
        }, 50);
    });
})();
</script>