donation/app/Views/subscription_form.php

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <!-- < -->
                <p class="sub-header"> </p>
                <form class="needs-validation" method="POST" enctype="multipart/form-data"
                action="<?= base_url() . "add_subscription";?>"  id="myForm">
                    <div class="form-group">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="scheme" class="col-form-label">Scheme<span
                                        class="text-danger">*</span></label>
                                <select class="form-control" id="scheme" name="scheme" required>
                                    <option value="">Select Scheme</option>
                                    <?php foreach ($scheme_names as $scheme_id => $scheme_info): ?>
                                    <option value="<?= $scheme_id ?>" data-duration="<?= $scheme_info['duration'] ?>">
                                        <?= $scheme_info['scheme_name'] ?>
                                    </option>
                                    <?php endforeach; ?>
                                </select>
                                <div class="invalid-feedback"> Please select a scheme. </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="customer" class="col-form-label">Customer<span
                                        class="text-danger">*</span></label>
                                <select class="form-control" id="customer" name="customer" required>
                                    <option value="">Select Customer</option>
                                    <?php foreach ($customers as  $customer): ?>
                                    <option value="<?= $customer->customer_id ?>"><?= $customer->full_name ?></option>
                                    <?php endforeach; ?>
                                </select>
                                <div class="invalid-feedback"> Please select a customer. </div>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="from_date" class="col-form-label">From Date<span
                                        class="text-danger">*</span></label>
                                <input type="date" class="form-control" id="from_date" name="from_date" required
                                    onchange="calculateToDate()">
                                <div class="invalid-feedback"> Please provide a from date. </div>
                            </div>


                            <input type="hidden" class="form-control" id="scheme_duration" name="scheme_duration"
                                required readonly>


                            <div class="form-group col-md-6">
                                <label for="to_date" class="col-form-label">To Date<span
                                        class="text-danger">*</span></label>
                                <input type="date" class="form-control" id="to_date" name="to_date" required readonly>
                                <div class="invalid-feedback"> The "to date" will be auto-calculated based on the scheme
                                    duration and "from date." </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="mode" class="col-form-label">Mode<span class="text-danger">*</span></label>
                                <select class="form-control" name="mode" required>

                                    <option value="selct">select</option>

                                    <option value="ONLINE">online</option>
                                    <option value="OFFLINE">ofline</option>
                                    </selct>


                                    <div class="invalid-feedback"> Please provide. </div>
                            </div>
                        

                        <div class="form-group text-right m-b-0 checkbox checkbox-purple">
                            <input type="hidden" id="isactive" name="isactive" class="form-control">
                           
                        </div>
                                    </div>
                        

                        <div class="form-group text-right m-b-0">
                            <button class="btn btn-success waves-effect waves-light mr-1" type="submit" id="submitBtn">
                                Submit
                            </button>
                            <button type="reset" class="btn btn-primary waves-effect mr-1">
                                Reset
                            </button>
                            <a href="<?= base_url() . "subscribers_list"; ?>"
                                class="btn btn-secondary waves-effect">Cancel</a>
                        </div>
                    </div>
                </form>
            </div> <!-- end card-body-->
        </div> <!-- end card-->
    </div> <!-- end col-->
</div>
</div>
<!-- end row -->
<script>
function calculateToDate() {
    const schemeSelect = document.getElementById('scheme');
    const fromDatePicker = document.getElementById('from_date');
    const schemeDurationInput = document.getElementById('scheme_duration');
    const toDatePicker = document.getElementById('to_date');

    // Check if a scheme is selected and a from date is provided
    if (schemeSelect.value && fromDatePicker.value) {
        const schemeDuration = parseInt(schemeSelect.options[schemeSelect.selectedIndex].getAttribute('data-duration'));
        const fromDate = new Date(fromDatePicker.value);

        // Calculate the "to date" based on the scheme duration
        const toDate = new Date(fromDate);
        toDate.setMonth(toDate.getMonth() + schemeDuration);

        // Format the to date as 'YYYY-MM-DD' and set it in the toDatePicker
        const year = toDate.getFullYear();
        const month = String(toDate.getMonth() + 1).padStart(2, '0');
        const day = String(toDate.getDate()).padStart(2, '0');
        const formattedToDate = `${year}-${month}-${day}`;
        toDatePicker.value = formattedToDate;

        // Populate the scheme duration input
        schemeDurationInput.value = schemeDuration;
    } else {
        // Clear the to date and scheme duration if no scheme or from date is selected
        toDatePicker.value = '';
        schemeDurationInput.value = '';
    }
}

// Attach the 'calculateToDate' function to the 'from_date' input's change event
const fromDatePicker = document.getElementById('from_date');
fromDatePicker.addEventListener('change', calculateToDate);
</script>
<script>
// Get the Invoice Date input element by its ID
const invoiceDateInput = document.getElementById("from_date");

// Get the current date
const currentDate = new Date();

// Set the minimum date attribute to today's date (YYYY-MM-DD format)
const minDate = currentDate.toISOString().split("T")[0];
invoiceDateInput.setAttribute("min", minDate);

// Optional: Set the default value to today's date

</script>
<script>
    document.getElementById('myForm').addEventListener('submit', function(event) {
        var form = event.target;
        
        if (form.checkValidity() === false) {
            console.log('clicked but false valid');
            form.reportValidity(); // Display validation error messages
            event.preventDefault(); // Prevent form submission if it's not valid
            $('#submitBtn').prop('disabled', false);
        } else {
        
            $('#submitBtn').prop('disabled', true);
        }
   });
</script>