
<div class="form-container">
    <div class="form-header">
        <h3>Edit Ageing Analysis</h3>
    </div>

    <form id="ageingForm" method="POST" action="<?php echo e(route('ageing.update', $ageingAnalysis->id)); ?>">
        <?php echo csrf_field(); ?>
        <?php echo method_field('PUT'); ?>
        <!-- Age Code and Description -->
        <div class="form-section">
            <h4>Age Code and Description</h4>
            <div class="form-group">
                <label for="ageCode">Age Code:</label>
                <input type="text" id="ageCode" name="ageCode" value="<?php echo e($ageingAnalysis->age_code); ?>" required>
            </div>
            <div class="form-group">
                <label for="description">Description:</label>
                <input type="text" id="description" name="description" value="<?php echo e($ageingAnalysis->description); ?>" required>
            </div>
        </div>

        <!-- Ageing Group Descriptions -->
        <div style="display: flex; flex-direction: row; justify-content: space-between;">
            <div class="form-section">
                <h3>Ageing Group Descriptions</h3>
                <div class="form-group">
                    <label class="radio-label">
                        <input type="radio" name="ageingGroup" value="monthly" <?php echo e($ageingAnalysis->ageing_group === 'monthly' ? 'checked' : ''); ?>> Monthly
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="ageingGroup" value="daily" <?php echo e($ageingAnalysis->ageing_group === 'daily' ? 'checked' : ''); ?>> Daily
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="ageingGroup" value="custom" <?php echo e($ageingAnalysis->ageing_group === 'custom' ? 'checked' : ''); ?>> Custom
                    </label>
                </div>
                <div class="dynamic-fields" id="ageingGroupFields"></div>
            </div>

            <!-- Ageing Intervals -->
            <div class="form-section">
                <h3>Ageing Intervals</h3>
                <div class="form-group">
                    <label class="radio-label">
                        <input type="radio" name="intervalType" value="invoiceDate" <?php echo e($ageingAnalysis->interval_type === 'invoiceDate' ? 'checked' : ''); ?>> Date of Invoice
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="intervalType" value="statementDate" <?php echo e($ageingAnalysis->interval_type === 'statementDate' ? 'checked' : ''); ?>> Date of Statement
                    </label>
                </div>
                <div class="form-group">
                    <label class="radio-label">
                        <input type="radio" name="interval" value="30" <?php echo e($ageingAnalysis->interval === '30' ? 'checked' : ''); ?>> 30 Days Interval
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="interval" value="7" <?php echo e($ageingAnalysis->interval === '7' ? 'checked' : ''); ?>> 7 Days Interval
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="interval" value="customInterval" <?php echo e($ageingAnalysis->interval === 'customInterval' ? 'checked' : ''); ?>> Custom Interval
                    </label>
                </div>
                <div class="dynamic-fields" id="intervalFields"></div>
            </div>
        </div>

        <!-- Hidden Fields for Dynamic Data -->
        <input type="hidden" id="customAgeGroups" name="customAgeGroups" value="<?php echo e(json_encode($ageingAnalysis->custom_age_groups)); ?>">
        <input type="hidden" id="customIntervals" name="customIntervals" value="<?php echo e(json_encode($ageingAnalysis->custom_intervals)); ?>">

        <div class="form-footer">
            <button type="submit" class="btn">Update Changes</button>
        </div>
    </form>
</div>

<script>
    const ageingGroupFields = document.getElementById("ageingGroupFields");
    const intervalFields = document.getElementById("intervalFields");

    // Function to render Ageing Group fields
    const renderAgeingGroupFields = (type, customGroups = []) => {
        let fields;
        if (type === "monthly") {
            fields = ["Current", "30 Days", "60 Days", "90 Days", "120 Days", "150 Days", "180 Days"];
        } else if (type === "daily") {
            fields = ["Today", "1 Day", "2 Days", "3 Days", "4 Days", "5 Days", "6 Days"];
        } else {
            fields = customGroups.length > 0 ? customGroups : Array.from({ length: 7 }, (_, i) => `Custom Age ${i + 1}`);
        }

        ageingGroupFields.innerHTML = fields
            .map(
                (field, index) =>
                    `<div>Age ${index + 1}: <input type="text" value="${field}" ${type === "custom" ? "" : "readonly"}></div>`
            )
            .join("");
    };

    // Function to render Interval fields
    const renderIntervalFields = (type, customIntervals = []) => {
        let intervals;
        if (type === "30") {
            intervals = ["30 Days", "60 Days", "90 Days", "120 Days", "150 Days", "180 Days"];
        } else if (type === "7") {
            intervals = ["7 Days", "14 Days", "21 Days", "28 Days", "35 Days", "42 Days"];
        } else {
            intervals = customIntervals.length > 0 ? customIntervals : Array.from({ length: 6 }, (_, i) => `Custom Interval ${i + 1}`);
        }

        intervalFields.innerHTML = intervals
            .map(
                (interval, index) =>
                    `<div>Interval ${index + 1}: <input type="text" value="${interval}" ${type === "customInterval" ? "" : "readonly"}></div>`
            )
            .join("");
    };

    // Initialize fields based on selected values
    const ageingGroup = document.querySelector('input[name="ageingGroup"]:checked').value;
    const interval = document.querySelector('input[name="interval"]:checked').value;
    const customAgeGroups = JSON.parse(document.getElementById("customAgeGroups").value || "[]");
    const customIntervals = JSON.parse(document.getElementById("customIntervals").value || "[]");

    renderAgeingGroupFields(ageingGroup, customAgeGroups);
    renderIntervalFields(interval, customIntervals);

    // Event listeners for dynamic changes
    document.querySelectorAll('input[name="ageingGroup"]').forEach((radio) => {
        radio.addEventListener("change", (e) => renderAgeingGroupFields(e.target.value, customAgeGroups));
    });

    document.querySelectorAll('input[name="interval"]').forEach((radio) => {
        radio.addEventListener("change", (e) => renderIntervalFields(e.target.value, customIntervals));
    });
</script>
<?php /**PATH C:\pinetops\re.pro\resources\views/ageing/edit.blade.php ENDPATH**/ ?>