studiobeve.no/application/views/admin/includes/update-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">
    <input type="hidden" name="booking_id" value="<?php echo $selectedItem->booking_id;?>">
        <div class="formRow">
            <label class="formTitle">Vendég neve</label>
            <input type="text" class="formInputBox" name="guest_name" value="<?php echo htmlspecialchars($selectedItem->guest_name, ENT_QUOTES, 'UTF-8');?>">
        </div>
        <div class="formRow">
            <label class="formTitle">Email</label>
            <input type="text" class="formInputBox" name="guest_email" value="<?php echo htmlspecialchars($selectedItem->guest_email, ENT_QUOTES, 'UTF-8');?>">
        </div>
        <div class="formRow">
            <label class="formTitle">Telefon</label>
            <input type="text" class="formInputBox" name="guest_phone" value="<?php echo htmlspecialchars($selectedItem->guest_phone, ENT_QUOTES, 'UTF-8');?>">
        </div>
        <div class="formRow">
            <label class="formTitle">Dolgozó</label>
            <select class="formDropdownBox" style="padding:0;" name="worker_id" id="worker_id">
            <?php
                foreach($workers as $workerItem){
                    echo '<option value="'.htmlspecialchars($workerItem->worker_id, ENT_QUOTES, 'UTF-8').'" '.($workerItem->worker_id == $selectedItem->worker_id?'selected':'').'>'.htmlspecialchars($workerItem->worker_name, ENT_QUOTES, 'UTF-8').'</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 $selectedItem->booking_date;?>">
        </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 $selectedItem->booking_date;?>">
        </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="/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="1"
                        multiple="multiple"
                        name="service_ids"
                        value="<?php 
                        if($selectedItem->service_ids != ''){
                            $services = unserialize($selectedItem->service_ids);
                            echo implode(',',$services);
                        }
                        ?>"
                        id="serviceList" required style="background-color:white;">
        </div>
        <div class="formRow">
            <label class="formTitle">Kezdő időpont</label>
            <input type="time" class="formInputBox" name="booking_start_time" id="booking_start_time" value="<?php echo $selectedItem->booking_start_time;?>">
        </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="<?php echo $selectedItem->booking_finish_time;?>">
        </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">
            <label class="formTitle">Értesítés nyelve</label>
            <select class="formDropdownBox" style="padding:0;" name="lang">
                <option value="no" selected>norvég</option>
                <option value="en">angol</option>
                <option value="hu">magyar</option>
            </select>
        </div>
        <div class="formRow">
            <input type="submit" class="submitButton" name="updateBookingManual" value="Módosítá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="10:00:00">10:00:00</option>');

                $('#booking_start_time').val('10: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(){
            if($('#free_day').val() != '1'){
                $.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();
                    }
                });
                
            }
        });

        $('#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();
                    }
                });
        });


        $('#worker_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',
            worker_id:$('#worker_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>