JezK

Edit File: addpackage.php

<?php
include "sidemenu-start.php";
include "app/adminObject.php";
?>

<?php

$where['type'] = 3;

$servicesDetails = $admin->getServices($where);

$subAdminDetails = $admin->getAllSubAdmins();

.dropdown-list {
            padding: 12px;
            background: #fff;
            position: absolute;
            top: 30px;
            left: 2px;
            right: 2px;
            box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .15);
            transform-origin: 50% 0;
            transform: scale(1, 0);
            transition: transform .15s ease-in-out .15s;
            max-height: 66vh;
            overflow-y: scroll;
            font-weight: 400;

}

.dropdown-option {
            display: flex;
            align-items: center;
            padding: 2px 12px;
            opacity: 0;
            transition: opacity .15s ease-in-out;
            font-weight: 400;

}

.dropdown-label {
            display: block;
            height: 30px;
            background: #fff;
            border: 1px solid #ccc;
            padding: 6px 12px;
            line-height: 1;
            cursor: pointer;
            font-weight: 400;

&:before {
                content: '▼';
                float: right;
            }
        }

&.on {
            .dropdown-list {
                transform: scale(1, 1);
                transition-delay: 0s;

.dropdown-option {
                    opacity: 1;
                    transition-delay: .2s;
                }
            }

.dropdown-label:before {
                content: '▲';
            }
        }

[type="checkbox"] {
            position: relative;
            top: -1px;
            margin-right: 4px;
            width: 12px !important;

}
    }
</style>

<div class="row mt-5">
        <div class="col-sm-3 col-md-4">
            <div class="admin-forms">
                <form id="addpackage">
                    <div class="mb-3">
                        <label for="title" class="form-label">Title</label>
                        <input type="text" class="form-control" id="title" name="title">
                        <p class="error title_error"></p>
                    </div>
                    <div class="mb-3">
                        <label for="amount" class="form-label">Amount</label>
                        <input type="number" class="form-control" id="amount" name="amount">
                        <p class="error amount_error"></p>
                    </div>

<div class="col-6"> <label for="duration" class="form-label">Year/Month</label>
                                        <input type="number" class="form-control" id="duration" name="duration" onkeyup="caliculateNoOfServices(1)">
                                        <p class="error duration_error"></p>
                                    </div>
                                    <div class="col-6">

<label for="months" class="form-label"></label>
                                        <select class="form-select" name="expiry_duration_type" id="expiry_duration_type" onchange="caliculateNoOfServices(2)">
                                            <option value="0" selected>Select</option>
                                            <option value="1">Month</option>
                                            <option value="2">Year</option>

</select>
                                        <p class="error expiry_duration_type_error"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <label for="services" class="form-label">Services</label>
                                <input type="number" class="form-control" id="total_services_count" name="total_services_count">

</div>
                    </div>
                    <div class="mb-3">
                        <label for="branch" class="form-label">Branch</label>
                        <div class="month-picker">

<div class="dropdown" data-control="checkbox-dropdown">
                                <label class="dropdown-label">Select</label>

<div class="dropdown-list">
                                    <a href="#" data-toggle="check-all" class="dropdown-option">
                                        Check All
                                    </a>

<?php foreach ($subAdminDetails as $row) { ?>

<?php } ?>

</div>
                            </div>
                        </div>
                        <p class="error points_error"></p>
                    </div>

</div>

</div>
        <div class="col-md-1"></div>

<h5>
                Services
            </h5>
            <div class="row mt-4">

<?php foreach ($servicesDetails as $row) { ?>

<span id="select_service_span<?php echo $row['service_id'] ?>">0</span>
                                <input type="text" id="select_service_<?php echo $row['service_id'] ?>" name="select_service_<?php echo $row['service_id'] ?>" value="0">

<?php }  ?>

<div class="row justify-content-end mt-3 me-2">
                        <div class="col-lg-2 col-md-12 col-sm-12 ">
                            <div class="form-group">

<button type="submit" class="de-btn-small text-uppercase">Submit</button>

</div>
                        </div>
                    </div>

</div>
            </div>
        </div>
        </form>

</div>
</div>
<?php
include "sidemenu-end.php";
?>

this.onCheckBox();

this.$label.on('click', function(e) {
                e.preventDefault();
                _this.toggleOpen();
            });

this.$checkAll.on('click', function(e) {
                e.preventDefault();
                _this.onCheckAll();
            });

this.$inputs.on('change', function(e) {
                _this.onCheckBox();
            });
        };

CheckboxDropdown.prototype.onCheckBox = function() {
            this.updateStatus();
        };

CheckboxDropdown.prototype.updateStatus = function() {
            var checked = this.$el.find(':checked');

this.areAllChecked = false;
            this.$checkAll.html('Check All');

if (checked.length <= 0) {
                this.$label.html('Select Options');
            } else if (checked.length === 1) {
                this.$label.html(checked.parent('label').text());
            } else if (checked.length === this.$inputs.length) {
                this.$label.html('All Selected');
                this.areAllChecked = true;
                this.$checkAll.html('Uncheck All');
            } else {
                this.$label.html(checked.length + ' Selected');
            }
        };

CheckboxDropdown.prototype.onCheckAll = function(checkAll) {
            if (!this.areAllChecked || checkAll) {
                this.areAllChecked = true;
                this.$checkAll.html('Uncheck All');
                this.$inputs.prop('checked', true);
            } else {
                this.areAllChecked = false;
                this.$checkAll.html('Check All');
                this.$inputs.prop('checked', false);
            }

this.updateStatus();
        };

CheckboxDropdown.prototype.toggleOpen = function(forceOpen) {
            var _this = this;

if (!this.isOpen || forceOpen) {
                this.isOpen = true;
                this.$el.addClass('on');
                $(document).on('click', function(e) {
                    if (!$(e.target).closest('[data-control]').length) {
                        _this.toggleOpen();
                    }
                });
            } else {
                this.isOpen = false;
                this.$el.removeClass('on');
                $(document).off('click');
            }
        };

var checkboxesDropdowns = document.querySelectorAll('[data-control="checkbox-dropdown"]');
        for (var i = 0, length = checkboxesDropdowns.length; i < length; i++) {
            new CheckboxDropdown(checkboxesDropdowns[i]);
        }
    })(jQuery);

let baseUrl = "<?php echo $baseUrl;   ?>"
    let userSelectedServicesCount = 0;

function caliculateNoOfServices(type) {

$('#total_services_count').val('');

let duration = $('#duration').val();
        let durationType = $('#expiry_duration_type').val();
        let totalDuration;

if (durationType == 1) {
            totalDuration = duration
        } else if (durationType == 2) {
            totalDuration = duration * 12
        }

$('#total_services_count').val(totalDuration);

}

function changeServiceCount(serviceId, type) {

$('.error').html('')

let totalServicesCount = $('#total_services_count').val();

if (totalServicesCount == "") {
            className = '.select_service_error_' + serviceId
            $(className).html('Enter Duration Period')
        }

if (userSelectedServicesCount <= totalServicesCount) {

let selectedServiceId = '#select_service_' + serviceId;

let selectedServiceCount = $(selectedServiceId).val();
            selectedServiceCount = parseInt(selectedServiceCount)

if (userSelectedServicesCount < totalServicesCount && type == 1) {
                selectedServiceCount += 1;
                userSelectedServicesCount += 1;
            }

if (type == 2 && selectedServiceCount > 0) {
                selectedServiceCount -= 1;
                userSelectedServicesCount -= 1;
            }

let selectedServiceSpanId = '#select_service_span' + serviceId;
            $(selectedServiceSpanId).html(selectedServiceCount)
            $(selectedServiceId).val(selectedServiceCount)

}

$('#addpackage').submit(function(event) {
        event.preventDefault();

let title = $('#title').val()

let amount = $('#amount').val()

let formData = $('#addpackage').serialize();

formData += '&addedBy=1&addCareClub=addCareClub';

$.ajax({
            type: 'POST',
            url: 'app/careClub.php',
            data: formData,
            success: function(data) {

if (data == 1) {
                    toastr.success('Care Club Added')

setTimeout(() => {
                        window.location = 'careClubs.php';
                    }, 2000)

} else {
                    toastr.warning('Unable To Add Care Club')

$('#addpackage').val('');

}

}
        })

})
</script>