dinbestehjelper.no/application/views/admin/includes/add-booking-form.php

<div class="mainContentContainer" style="top:100px">
    <div class="pageTitle"><?php echo $pageTitle;?></div>
    <form method="post" action="<?php echo base_url();?>bookings/booking-process">
    <input type="hidden" name="servicelength" id="servicelength" value="00:00:00">
        <div class="formRow">
            <label class="formTitle">Vendég neve</label>
            <input type="text" class="formInputBox" name="guest_name" value="">
        </div>
        <div class="formRow">
            <label class="formTitle">Email</label>
            <input type="text" class="formInputBox" name="guest_email" value="">
        </div>
        <div class="formRow">
            <label class="formTitle">Telefon</label>
            <input type="text" class="formInputBox" name="guest_phone" value="">
        </div>
        <div class="formRow">
            <label class="formTitle">Csoport</label>
            <select class="formDropdownBox" style="padding:0;" name="group_id" id="group_id">
            <?php
                foreach($workgroups as $workgroupItem){
                    echo '<option value="'.$workgroupItem->group_id.'">'.$workgroupItem->group_name.'</option>';
                }
            ?>
            </select>
        </div>
        <div class="formRow">
            <label class="formTitle">Kezdő dátum</label>
            <input type="date" class="formInputBox" name="booking_date" id="booking_date" value="<?php echo date('Y-m-d');?>">
        </div>
        <div class="formRow">
            <label class="formTitle">Záró dátum</label>
            <input type="date" class="formInputBox" name="end_booking_date" id="end_booking_date" value="<?php echo date('Y-m-d');?>">
        </div>
        <div class="formRow">
            <label class="formTitle">Egész nap szabadnap</label>
            <select class="formDropdownBox" style="padding:0;" name="free_day" id="free_day">
                <option value="1">igen</option>
                <option value="0" selected>nem</option>
            </select>
        </div>
        <div class="formRow">
            <label class="formTitle">Szolgáltatás(ok)</label>
            <input type="text"
                        class="flexdatalist formInputBox"
                        data-data="<?php echo SITEURL;?>load_services.json"
                        data-search-in="service_name"
                        data-visible-properties='["service_name"]'
                        data-selection-required="true"
                        data-value-property="service_id"
                        data-text-property="{service_name}"
                        data-min-length="0"
                        multiple="multiple"
                        name="service_ids"
                        id="serviceList" style="background-color:white;">
        </div>
        <div class="formRow">
            <label class="formTitle">Kezdő időpont</label>
            <select class="formDropdownBox" style="padding:0;" name="booking_start_time" id="booking_start_time">
                
            </select>
        </div>
        <div class="formRow">
            <label class="formTitle">Záró időpont</label>
            <input type="time" class="formInputBox" name="booking_finish_time" id="booking_finish_time" value="">
        </div>
        <div class="formRow">
            <label class="formTitle">Értesítés küldése</label>
            <select class="formDropdownBox" style="padding:0;" name="send_notification">
                <option value="1">igen</option>
                <option value="0" selected>nem</option>
            </select>
        </div>
        <div class="formRow">
            <input type="submit" class="submitButton" name="addNewBookingManual" value="Hozzáadás">
            <a href="<?php echo base_url();?>bookings" class="cancelButton" >Mégsem</a>
        </div>
    </form>
    
</div>

<script>
    $(document).ready(function(){
        getAvaliableTimesOfTheDay();

        $('#free_day').change(function(){
            if($('#free_day').val() == '1'){
                $('#booking_start_time').html('<option value="09:00:00">09:00:00</option>');

                $('#booking_start_time').val('09:00:00');
                $('#booking_finish_time').val('18:00:00');
                $('#serviceList').val('');
            }
            else{
                getAvaliableTimesOfTheDay();
            }
            
        });

        $('#booking_date').change(function(){
            if($('#free_day').val() != '1'){
                $('#end_booking_date').val($('#booking_date').val());
                getAvaliableTimesOfTheDay();
                $("#booking_start_time option:first").attr('selected', true);
            }
        });

        $('#booking_start_time').change(function(){
            //getAvaliableTimesOfTheDay();
            if($('#free_day').val() != '1'){
                calculateServiceEndTime();
            }
        });

        $('#serviceList').change(function(){
            
            $.ajax({
                url: '<?php echo base_url();?>ajax',
                type: 'POST',
                data: {
                    action:'calculate_service_length',
                    service_ids: $('#serviceList').val()
                    },
                    error: function() {
                    },
                    //dataType: 'json',
                    success: function(data) {
                    },
                }).done(function(result){
                    $('#servicelength').val(result);
                    if($('#free_day').val() != '1'){
                        getAvaliableTimesOfTheDay();
                        calculateServiceEndTime();
                    }
                });
        });


        $('#group_id').change(function(){
            if($('#free_day').val() != '1'){
                getAvaliableTimesOfTheDay();
            }
        });
    });

    function getAvaliableTimesOfTheDay(){
        var selectedDate = $('#booking_date').val();        

        $.ajax({
        url: '<?php echo base_url();?>ajax',
        type: 'POST',
        data: {
            action:'getAvailableTimeOptions',
            group_id:$('#group_id').val(),
            servicelength:$('#servicelength').val(),
            selectedDate:selectedDate
            },
            error: function() {
            },
            //dataType: 'json',
            success: function(data) {
            },
        }).done(function(result){
            if(result != 0){
                $('#booking_start_time').html(result);
                calculateServiceEndTime();
            }
            else{
                $('#booking_start_time').html('<option value="">Nincs erre a napra szabad időpont!</option>');
            }
        });
        
    }

    function calculateServiceEndTime(){
        var selectedTotalTime = $('#booking_start_time').val();
                const selectedServiceDatetime = new Date('<?php echo date('Y-m-d');?> ' + $('#servicelength').val());
                //console.log($('#servicelength').val());
                var subTotalTimeHours = moment.utc(selectedTotalTime,'HH:mm').add(selectedServiceDatetime.getHours(),'hour').format('HH:mm');
                var subTotalTimeMinutes = moment.utc(subTotalTimeHours,'HH:mm').add(selectedServiceDatetime.getMinutes(),'minutes').format('HH:mm');
                //console.log(subTotalTimeMinutes);
                    
                $('#booking_finish_time').val(subTotalTimeMinutes);
                
    }
    
</script>