<?php $__env->startSection('css'); ?>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css"
          integrity="sha512-ELV+xyi8IhEApPS/pSj66+Jiw+sOT1Mqkzlh8ExXihe4zfqbWkxPRi8wptXIO9g73FSlhmquFlUOuMSoXz5IRw=="
          crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="<?php echo e(asset('assets/web/css/book_now.css')); ?>">
    <!-- ----- new style ----- -->
    <!--    <style>-->

    <!--    </style>-->
<?php $__env->stopSection(); ?>


<?php $__env->startSection('content'); ?>
<section class="hotel_request section-padding bg-light">
        <div class="container">
            <div class="hotel_request_form">
                <div class="form_title">
                    <h3> <?php echo e(__('bookings.booking_info')); ?> </h3>
                    <div class="steps">
                        <span class="active"></span>
                        <span class="active"></span>
                        <span class="active"></span>
                        <span class=""></span>
                    </div>
                </div>
                <form action="<?php echo e(route('checkStep_3')); ?>" method="post" class="add_form">
                    <?php echo csrf_field(); ?>
                <div class="form_body">
                    <div class="choose_rooms_container">
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for=""> <?php echo e(__('bookings.participants_no')); ?> <span class="text-danger"> * </span> </label>
                                    <input type="text" name="participants_no" value="" class="form-control" placeholder="0">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for=""> <?php echo e(__('bookings.reserved_number')); ?> <span class="text-danger" style="color: transparent !important;"> * </span> </label>
                                    <input type="text" value="" class="form-control reserved_number" readonly placeholder="0">
                                    
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for=""> <?php echo e(__('bookings.remaining_number')); ?> <span class="text-danger" style="color: transparent !important;"> * </span> </label>
                                    <input type="text" value="" class="form-control remaining_number" readonly placeholder="0">
                                </div>
                            </div>
                        </div>
                        <div class="rooms_items">
                            <div class="room_item">
                                <div class="form-group">
                                    <label for="" class="mb-0"> <?php echo e(__('bookings.rt_single')); ?> <span class="text-danger"> * </span> </label>
                                    <!--<input type="text" class="form-control text-danger" placeholder="" value="" readonly>-->
                                    <input type="text" name="rt_single" class="form-control d-none" value="single">
                                    <small class="d-block"> <?php echo e($fieldTitles->title_1); ?> </small>
                                    <div class="add-more">
                                        <span class="qt-minus"><i class="fa fa-minus"></i></span>
                                        <input type="text" class="quantity_input qt form-control text-center" name="rn_single" placeholder="0" readonly value="">
                                        <span class="qt-plus"><i class="fa fa-plus"></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="room_item">
                                <div class="form-group">
                                    <label for="" class="mb-0"> <?php echo e(__('bookings.rt_double')); ?> <span class="text-danger"> * </span> </label>
                                    <!--<input type="text" class="form-control text-danger" placeholder="" value="" readonly>-->
                                    <input type="text" name="rt_double" class="form-control d-none" value="double">
                                    <small class="d-block"> <?php echo e($fieldTitles->title_2); ?> </small>
                                    <div class="add-more">
                                        <span class="qt-minus"><i class="fa fa-minus"></i></span>
                                        <input type="text" class="quantity_input qt form-control text-center" name="rn_double" placeholder="0" readonly value="">
                                        <span class="qt-plus"><i class="fa fa-plus"></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="room_item">
                                <div class="form-group">
                                    <label for="" class="mb-0"> <?php echo e(__('bookings.rt_triple')); ?> <span class="text-danger"> * </span> </label>
                                    <!--<input type="text" class="form-control text-danger" placeholder="" value="" readonly>-->
                                    <input type="text" name="rt_triple" class="form-control d-none" value="triple">
                                    <small class="d-block"> <?php echo e($fieldTitles->title_3); ?> </small>
                                    <div class="add-more">
                                        <span class="qt-minus"><i class="fa fa-minus"></i></span>
                                        <input type="text" class="quantity_input qt form-control text-center" name="rn_triple" placeholder="0" readonly value="">
                                        <span class="qt-plus"><i class="fa fa-plus"></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="room_item">
                                <div class="form-group">
                                    <label for="" class="mb-0"> <?php echo e(__('bookings.rt_quadruple')); ?> <span class="text-danger"> * </span> </label>
                                    <!--<input type="text" class="form-control text-danger" placeholder="" value="" readonly>-->
                                    <input type="text" name="rt_quadruple" class="form-control d-none" value="quadruple">
                                    <small class="d-block"> <?php echo e($fieldTitles->title_4); ?> </small>
                                    <div class="add-more">
                                        <span class="qt-minus"><i class="fa fa-minus"></i></span>
                                        <input type="text" class="quantity_input qt form-control text-center" name="rn_quadruple" placeholder="0" readonly value="">
                                        <span class="qt-plus"><i class="fa fa-plus"></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="room_item">
                                <div class="form-group">
                                    <label for="" class="mb-0"> <?php echo e(__('bookings.rt_quintuple')); ?> <span class="text-danger"> * </span> </label>
                                    <!--<input type="text" class="form-control text-danger" placeholder="" value="" readonly>-->
                                    <input type="text" name="rt_quintuple" class="form-control d-none" value="quintuple">
                                    <small class="d-block"> <?php echo e($fieldTitles->title_5); ?> </small>
                                    <div class="add-more">
                                        <span class="qt-minus"><i class="fa fa-minus"></i></span>
                                        <input type="text" class="quantity_input qt form-control text-center" name="rn_quintuple" placeholder="0" readonly value="">
                                        <span class="qt-plus"><i class="fa fa-plus"></i></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--<div class="row">-->
                        <!--    <div class="col-lg-6">-->
                        <!--        <div class="room_item">-->
                        <!--            <div class="row">-->
                        <!--                <div class="col-8">-->
                        <!--                    <div class="form-group">-->
                        <!--                        <label for="" class="mb-0"> <?php echo e(__('bookings.rt_single')); ?> <span class="text-danger"> * </span> </label>-->
                                                <!--<input type="text" class="form-control text-danger" placeholder="" value="" readonly>-->
                        <!--                        <input type="text" name="rt_single" class="form-control d-none" value="single">-->
                        <!--                        <small class="d-block"> <?php echo e($fieldTitles->title_1); ?> </small>-->
                        <!--                    </div>-->
                        <!--                </div>-->
                        <!--                <div class="col-4">-->
                        <!--                    <div class="form-group">-->
                        <!--                        <label for=""> <?php echo e(__('bookings.room_number')); ?> <span class="text-danger"> * </span> </label>-->
                        <!--                        <div class="add-more">-->
                        <!--                            <span class="qt-minus"><i class="fa fa-minus"></i></span>-->
                        <!--                            <input type="text" class="quantity_input qt form-control text-center" name="rn_single" placeholder="0" readonly value="">-->
                        <!--                            <span class="qt-plus"><i class="fa fa-plus"></i></span>-->
                        <!--                        </div>-->
                        <!--                    </div>-->
                        <!--                </div>-->
                        <!--            </div>-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--    <div class="col-lg-6">-->
                        <!--        <div class="room_item">-->
                        <!--            <div class="row">-->
                        <!--                <div class="col-8">-->
                        <!--                    <div class="form-group">-->
                        <!--                        <label for="" class="mb-0"> <?php echo e(__('bookings.rt_double')); ?> <span class="text-danger"> * </span> </label>-->
                                                <!--<input type="text" class="form-control text-danger" placeholder="" value="" readonly>-->
                        <!--                        <input type="text" name="rt_double" class="form-control d-none" value="double">-->
                        <!--                        <small class="d-block"> <?php echo e($fieldTitles->title_2); ?> </small>-->
                        <!--                    </div>-->
                        <!--                </div>-->
                        <!--                <div class="col-4">-->
                        <!--                    <div class="form-group">-->
                        <!--                        <label for=""> <?php echo e(__('bookings.room_number')); ?> <span class="text-danger"> * </span> </label>-->
                        <!--                        <div class="add-more">-->
                        <!--                            <span class="qt-minus"><i class="fa fa-minus"></i></span>-->
                        <!--                            <input type="text" class="quantity_input qt form-control text-center" name="rn_double" placeholder="0" readonly value="">-->
                        <!--                            <span class="qt-plus"><i class="fa fa-plus"></i></span>-->
                        <!--                        </div>-->
                        <!--                    </div>-->
                        <!--                </div>-->
                        <!--            </div>-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--    <div class="col-lg-6">-->
                        <!--        <div class="room_item">-->
                        <!--            <div class="row">-->
                        <!--                <div class="col-8">-->
                        <!--                    <div class="form-group">-->
                        <!--                        <label for="" class="mb-0"> <?php echo e(__('bookings.rt_triple')); ?> <span class="text-danger"> * </span> </label>-->
                                                <!--<input type="text" class="form-control text-danger" placeholder="" value="" readonly>-->
                        <!--                        <input type="text" name="rt_triple" class="form-control d-none" value="triple">-->
                        <!--                        <small class="d-block"> <?php echo e($fieldTitles->title_3); ?> </small>-->
                        <!--                    </div>-->
                        <!--                </div>-->
                        <!--                <div class="col-4">-->
                        <!--                    <div class="form-group">-->
                        <!--                        <label for=""> <?php echo e(__('bookings.room_number')); ?> <span class="text-danger"> * </span> </label>-->
                        <!--                        <div class="add-more">-->
                        <!--                            <span class="qt-minus"><i class="fa fa-minus"></i></span>-->
                        <!--                            <input type="text" class="quantity_input qt form-control text-center" name="rn_triple" placeholder="0" readonly value="">-->
                        <!--                            <span class="qt-plus"><i class="fa fa-plus"></i></span>-->
                        <!--                        </div>-->
                        <!--                    </div>-->
                        <!--                </div>-->
                        <!--            </div>-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--    <div class="col-lg-6">-->
                        <!--        <div class="room_item">-->
                        <!--            <div class="row">-->
                        <!--                <div class="col-8">-->
                        <!--                    <div class="form-group">-->
                        <!--                        <label for="" class="mb-0"> <?php echo e(__('bookings.rt_quadruple')); ?> <span class="text-danger"> * </span> </label>-->
                                                <!--<input type="text" class="form-control text-danger" placeholder="" value="" readonly>-->
                        <!--                        <input type="text" name="rt_quadruple" class="form-control d-none" value="quadruple">-->
                        <!--                        <small class="d-block"> <?php echo e($fieldTitles->title_4); ?> </small>-->
                        <!--                    </div>-->
                        <!--                </div>-->
                        <!--                <div class="col-4">-->
                        <!--                    <div class="form-group">-->
                        <!--                        <label for=""> <?php echo e(__('bookings.room_number')); ?> <span class="text-danger"> * </span> </label>-->
                        <!--                        <div class="add-more">-->
                        <!--                            <span class="qt-minus"><i class="fa fa-minus"></i></span>-->
                        <!--                            <input type="text" class="quantity_input qt form-control text-center" name="rn_quadruple" placeholder="0" readonly value="">-->
                        <!--                            <span class="qt-plus"><i class="fa fa-plus"></i></span>-->
                        <!--                        </div>-->
                        <!--                    </div>-->
                        <!--                </div>-->
                        <!--            </div>-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--    <div class="col-lg-6">-->
                        <!--        <div class="room_item">-->
                        <!--            <div class="row">-->
                        <!--                <div class="col-8">-->
                        <!--                    <div class="form-group">-->
                        <!--                        <label for="" class="mb-0"> <?php echo e(__('bookings.rt_quintuple')); ?> <span class="text-danger"> * </span> </label>-->
                                                <!--<input type="text" class="form-control text-danger" placeholder="" value="" readonly>-->
                        <!--                        <input type="text" name="rt_quintuple" class="form-control d-none" value="quintuple">-->
                        <!--                        <small class="d-block"> <?php echo e($fieldTitles->title_5); ?> </small>-->
                        <!--                    </div>-->
                        <!--                </div>-->
                        <!--                <div class="col-4">-->
                        <!--                    <div class="form-group">-->
                        <!--                        <label for=""> <?php echo e(__('bookings.room_number')); ?> <span class="text-danger"> * </span> </label>-->
                        <!--                        <div class="add-more">-->
                        <!--                            <span class="qt-minus"><i class="fa fa-minus"></i></span>-->
                        <!--                            <input type="text" class="quantity_input qt form-control text-center" name="rn_quintuple" placeholder="0" readonly value="">-->
                        <!--                            <span class="qt-plus"><i class="fa fa-plus"></i></span>-->
                        <!--                        </div>-->
                        <!--                    </div>-->
                        <!--                </div>-->
                        <!--            </div>-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--</div>-->
                    </div>
                    <!-- ----- -->
                    <div class="text-center">
                        <button class="butn color my-4 rounded-lg py-3 px-5 w-25 add_button">
                            <span> <i class="fas fa-angle-right mr-2"></i> <?php echo e(__('bookings.next')); ?> </span>
                        </button>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </section>
    <?php $__env->stopSection(); ?>

<?php $__env->startSection('inner_js'); ?>

        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>

        let participants = $('input[name="participants_no"]'),
            allQuantityInput = $('.quantity_input'),
            reservedNumber = $('.reserved_number'),
            remainingNumber = $('.remaining_number'),
            alertMessage = "<?php echo e(__('bookings.alert_message')); ?>",
            participants_static_val = 0,
            reservedNumberValue = 0;

        $('.add_button').click(async function (e) {
            e.preventDefault();

            $(this).prop('disabled', true);

            let form = $('.add_form'),
                data = new FormData(form[0]),
                url = form.attr('action'),
                method = form.attr('method');

            data.append('reserved_number', reservedNumberValue);

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method
            });


            if (response.errors){
                $(this).prop('disabled', false);
                toasterError(response.errors);
            }

            if (response.url){
                window.location.href = response.url;
            }

        });


        participants.change(function () {
            participants_static_val = +$(this).val();

            if(+$(this).val() <= 0 || $(this).val().toString().includes('-')){
                $(this).val('');
                reservedNumber.val(0);
                remainingNumber.val(0);
            } else {
                $(this).val(+participants_static_val);
                remainingNumber.val(+participants_static_val);
            }
            reservedNumber.val(0);
            allQuantityInput.val(0);
        });


        $('.qt-plus').click(function() {

            if(+remainingNumber.val() <= 0){
                return false;
            }

            let quantityInput = $(this).siblings('input.quantity_input');
            let calc = calcParticipants(quantityInput, 'plus');
            if(calc === 'stop'){
                toasterError(alertMessage);
                return false
            }
            quantityInput.val(+quantityInput.val() + 1);
        });

        $('.qt-minus').click(function() {

            let quantityInput = $(this).siblings('input.quantity_input');
            calcParticipants(quantityInput, 'minus');
            if (+quantityInput.val() > 0) {
                quantityInput.val(+quantityInput.val() - 1);
            }

        });

        function calcParticipants(quantityInput = null, operation = null){

            let name = quantityInput.attr('name'),
                currentParticipantsVal = +remainingNumber.val();

            if(operation === 'plus'){

                if(name === 'rn_single'){
                    if(+remainingNumber.val() === 0){
                        console.log('rn_double');
                        return 'stop';
                    }
                    remainingNumber.val(currentParticipantsVal - 1);
                    reservedNumber.val(+participants.val() - (currentParticipantsVal - 1));
                    reservedNumberValue = +reservedNumber.val();
                }
                if(name === 'rn_double'){
                    if(+remainingNumber.val() === 1){
                        console.log('rn_double');
                        return 'stop';
                    }
                    remainingNumber.val(currentParticipantsVal - 2);
                    reservedNumber.val(+participants.val() - (currentParticipantsVal - 2));
                    reservedNumberValue = +reservedNumber.val();
                }
                if(name === 'rn_triple'){
                    if(+remainingNumber.val() <= 2){
                        console.log('rn_triple');
                        return 'stop';
                    }
                    remainingNumber.val(currentParticipantsVal - 3);
                    reservedNumber.val(+participants.val() - (currentParticipantsVal - 3));
                    reservedNumberValue = +reservedNumber.val();
                }
                if(name === 'rn_quadruple'){
                    if(+remainingNumber.val() <= 3){
                        console.log('rn_quadruple');
                        return 'stop';
                    }
                    remainingNumber.val(currentParticipantsVal - 4);
                    reservedNumber.val(+participants.val() - (currentParticipantsVal - 4));
                    reservedNumberValue = +reservedNumber.val();
                }
                if(name === 'rn_quintuple'){
                    if(+remainingNumber.val() <= 4){
                        console.log('rn_quintuple');
                        return 'stop';
                    }
                    remainingNumber.val(currentParticipantsVal - 5);
                    reservedNumber.val(+participants.val() - (currentParticipantsVal - 5));
                    reservedNumberValue = +reservedNumber.val();
                }


            }

            if(operation === 'minus'){

                if(+quantityInput.val() === 0){
                    return false;
                }

                if(name === 'rn_single'){
                    remainingNumber.val(currentParticipantsVal + 1);
                    reservedNumber.val(+participants.val() - (currentParticipantsVal+1));
                    reservedNumberValue = +reservedNumber.val();

                }
                if(name === 'rn_double'){
                    remainingNumber.val(currentParticipantsVal + 2);
                    reservedNumber.val(+participants.val() - (currentParticipantsVal+2));
                    reservedNumberValue = +reservedNumber.val();
                }
                if(name === 'rn_triple'){
                    remainingNumber.val(currentParticipantsVal + 3);
                    reservedNumber.val(+participants.val() - (currentParticipantsVal+3));
                    reservedNumberValue = +reservedNumber.val();
                }
                if(name === 'rn_quadruple'){
                    remainingNumber.val(currentParticipantsVal + 4);
                    reservedNumber.val(+participants.val() - (currentParticipantsVal+4));
                    reservedNumberValue = +reservedNumber.val();
                }
                if(name === 'rn_quintuple'){
                    remainingNumber.val(currentParticipantsVal + 5);
                    reservedNumber.val(+participants.val() - (currentParticipantsVal+5));
                    reservedNumberValue = +reservedNumber.val();
                }

                if(currentParticipantsVal === participants_static_val){
                    allQuantityInput.val(0);
                }

            }

        }


    </script>

    <script>
    $( function() {
      $.widget( "custom.combobox", {
        _create: function() {
          this.wrapper = $( "<span>" )
            .addClass( "custom-combobox" )
            .insertAfter( this.element );

          this.element.hide();
          this._createAutocomplete();
          this._createShowAllButton();
        },

        _createAutocomplete: function() {
          var selected = this.element.children( ":selected" ),
            value = selected.val() ? selected.text() : "";

          this.input = $( "<input>" )
            .appendTo( this.wrapper )
            .val( value )
            .attr( "title", "" )
            .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
            .autocomplete({
              delay: 0,
              minLength: 0,
              source: this._source.bind( this )
            })
            .tooltip({
              classes: {
                "ui-tooltip": "ui-state-highlight"
              }
            });

          this._on( this.input, {
            autocompleteselect: function( event, ui ) {
              ui.item.option.selected = true;
              this._trigger( "select", event, {
                item: ui.item.option
              });
            },

            autocompletechange: "_removeIfInvalid"
          });
        },

        _createShowAllButton: function() {
          var input = this.input,
            wasOpen = false;

          $( "<a>" )
            .attr( "tabIndex", -1 )
            // .attr( "title", "Show All Items" )
            .tooltip()
            .appendTo( this.wrapper )
            .button({
              icons: {
                primary: "ui-icon-triangle-1-s"
              },
              text: false
            })
            .removeClass( "ui-corner-all" )
            .addClass( "custom-combobox-toggle ui-corner-right" )
            .on( "mousedown", function() {
              wasOpen = input.autocomplete( "widget" ).is( ":visible" );
            })
            .on( "click", function() {
              input.trigger( "focus" );

              // Close if already visible
              if ( wasOpen ) {
                return;
              }

              // Pass empty string as value to search for, displaying all results
              input.autocomplete( "search", "" );
            });
        },

        _source: function( request, response ) {
          var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
          response( this.element.children( "option" ).map(function() {
            var text = $( this ).text();
            if ( this.value && ( !request.term || matcher.test(text) ) )
              return {
                label: text,
                value: text,
                option: this
              };
          }) );
        },

        _removeIfInvalid: function( event, ui ) {

          // Selected an item, nothing to do
          if ( ui.item ) {
            return;
          }

          // Search for a match (case-insensitive)
          var value = this.input.val(),
            valueLowerCase = value.toLowerCase(),
            valid = false;
          this.element.children( "option" ).each(function() {
            if ( $( this ).text().toLowerCase() === valueLowerCase ) {
              this.selected = valid = true;
              return false;
            }
          });

          // Found a match, nothing to do
          if ( valid ) {
            return;
          }

          // Remove invalid value
          this.input
            .val( "" )
            .attr( "title", value + " didn't match any item" )
            .tooltip( "open" );
          this.element.val( "" );
          this._delay(function() {
            this.input.tooltip( "close" ).attr( "title", "" );
          }, 2500 );
          this.input.autocomplete( "instance" ).term = "";
        },

        _destroy: function() {
          this.wrapper.remove();
          this.element.show();
        }
      });

      $( "#country_id" ).combobox();
      $( "#toggle" ).on( "click", function() {
        $( "#country_id" ).toggle();
      });
    } );
    </script>


<?php $__env->stopSection(); ?>

<?php echo $__env->make('web.layouts.container', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/nesmaalyomhost/public_html/mawada/resources/views/web/bookings/step_3.blade.php ENDPATH**/ ?>