@extends('layouts.nav')
@section('title')
@endsection
@section('content')               

      
<style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
        }
        .form-container {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
            background: #ffffff;
            border-radius: 8px;
            display:flex;
            flex-direction:column;
            gap:30px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .form-header {
            text-align: center;
            margin-bottom: 20px;
        }
        .form-header h2 {
        }
        .form-section {
            margin-bottom: 20px;
            width: 49%;
        }
        .form-section h3 {
            margin-bottom: 10px;
        }
        .form-group {
            display:flex;
            align-items: center;
            gap:10px;
            width: 100%;
        }
        .form-group label {
            margin-bottom: 5px;
            width: 20%;
        }
        .form-group input,
        .form-group select {
            width: 50%;
            padding: 3px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .form-group input[type="radio"] {
            width: auto;
        }
        .form-group .radio-label {
        width: 30%;
        }
        .dynamic-fields {
            margin-top: 10px;
        }
        .form-footer {
            text-align: center;
        }
        .btn {
            padding: 10px 20px;
            color: #fff;
            background: #007BFF;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .btn:hover {
            background: #0056b3;
        }
    </style>
</head>
    <div class="form-container">
        <div class="form-header">
            <h3> Ageing Analysis Form</h3>
        </div>

        <form style="display:flex; flex-direction:column; gap:30px;" id="ageingForm">
            <!-- 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" required>
                </div>
                <div class="form-group">
                    <label for="description">Description:</label>
                    <input type="text" id="description" name="description" required>
                </div>
            </div>

            <!-- Ageing Group Descriptions -->
             <div style="display:flex; flex-direction:row; justify-content:space-between;">
             <div style="display:flex; flex-direction:column; gap:10px;"  class="form-section">
                <h3>Ageing Group Descriptions</h3>
                <div class="form-group">
                    <label  class="radio-label">
                        <input type="radio" name="ageingGroup" value="monthly" checked> Monthly
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="ageingGroup" value="daily"> Daily
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="ageingGroup" value="custom"> 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"> Date of Invoice
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="intervalType" value="statementDate"> Date of Statement
                    </label>
                </div>
                <div class="form-group">
                    <label class="radio-label">
                        <input type="radio" name="interval" value="30" checked> 30 Days Interval
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="interval" value="7"> 7 Days Interval
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="interval" value="customInterval"> Custom Interval
                    </label>
                </div>
                <div class="dynamic-fields" id="intervalFields"></div>
            </div>
             </div>
      

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

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

        const renderAgeingGroupFields = (type) => {
            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 = 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("");
        };

        const renderIntervalFields = (type) => {
            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 = 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 defaults
        renderAgeingGroupFields("monthly");
        renderIntervalFields("30");

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

        document.querySelectorAll('input[name="interval"]').forEach((radio) => {
            radio.addEventListener("change", (e) => renderIntervalFields(e.target.value));
        });
    </script>
    </section>

@endsection