<?php include('header.php');?>
<div class="container content-wrapper">
  <div class="col-lg-12">
  <form  action="javascript:;" method="post" id="reservationFrom">
      <div>
          <h3><i class="fa fa-calendar" aria-hidden="true"></i> <?=$text['dateHeader'];?></h3>
          <section>
            <?php include('forms/step1.php');?>
          </section>

          <h3><i class="fa fa-bed" aria-hidden="true"></i> <br><?=$text['roomHeader'];?></h3>
          <section>
            <?php include('forms/step2.php');?>
          </section>

          <h3><i class="fa fa-info-circle" aria-hidden="true"></i> <br><?=$text['informationHeader'];?></h3>
          <section>
            <?php include('forms/step3.php');?>
          </section>

          <h3><i class="fa fa-credit-card-alt" aria-hidden="true"></i> <br><?=$text['paymentHeader'];?></h3>
          <section>
            <?php include('forms/step4.php');?>
          </section> 
      </div>
  </form>
  </div>
</div>

<?php include('footer.php');?>
<script type="text/javascript">
var form = $("#reservationFrom");
form.validate({
  errorPlacement: function errorPlacement(error, element) { element.before(error); },
  rules: {
      confirm: {
          equalTo: "#resortId",
          equalTo: "#checkInDate",
          equalTo: "#checkOutDate",
          equalTo: "#numberOfRooms",
      }
  }
});
form.children("div").steps({
  headerTag: "h3",
  bodyTag: "section",
  transitionEffect: "fade",
  onStepChanging: function (event, currentIndex, newIndex)
  {
      form.validate().settings.ignore = ":disabled,:hidden";
      return form.valid();

      var resortId = $('select[name="resortId"]').val();

       var site_url='http://localhost/reservation.exelcior.com/';

       var api_url='http://localhost:8000';

       var api_key='8E19B3FE0C8603C3F8A6453F3EDBFB12';

      var url = api_url+'/api?apikey='+api_key+'&resort='+resortId;

      var roomCount = {};

      $.getJSON(url,function (data){

          console.log(data);
          $('#reservationFrom').append('<input type="hidden" name="_token" value="'+data['token']+'"/>');

          $.each(data['rooms'],function(key,value){
            $.each(value,function(i,item){
              $('.selectRoom').append('<option value="'+value[i].id+'">'+value[i].room_title+'</option>');
            })
          });

      });



        $('.priceTable tbody').empty();

        var total = 0;

        var curreny = 1;

        $.ajax({

            type: "POST",
            url: url,
            data: $('#reservationFrom').serialize(),
            error : function(error){ console.log(error); },
            success: function(requestData) {

                console.log("Requested data:",requestData);

                var checkInDate = $('input[name="checkInDate"]').val();
                var checkOutDate = $('input[name="checkOutDate"]').val();
                var roomAmount = $('input[name="roomAmount"]').val();

                 var adultValues = document.getElementsByName('adult[]');
                 var totalAdult = 0;
                 for (var i = 0; i <adultValues.length; i++) {
                     var adult=adultValues[i];
                     totalAdult += adult.value << 0;
                     //alert("adult["+i+"].value="+adult.value);
                 }
                 var childValues = document.getElementsByName('child[]');
                 var totalChild = 0;
                 for (var i = 0; i <childValues.length; i++) {
                     var child=childValues[i];
                     totalChild += child.value << 0;
                     //alert("adult["+i+"].value="+adult.value);
                 }

                 /*Step 2*/
                 $('#resortNameWrapper').html($("#resortId option:selected").text());
                 $('#totalRoomWrapper').html($("#numberOfRooms option:selected").text());
                 $('#totalAdultWrapper').html(totalAdult);
                 $('#totalChildWrapper').html(totalChild);


                $('.priceTable tbody td').remove();
                $('.priceTable tfoot td').eq(2).html('');

                $('#checkInDateWrapper').html(checkInDate);
                $('#checkOutDateWrapper').html(checkOutDate);

                var dataReq = jQuery.parseJSON(requestData);
                if(dataReq['error']){
                    $('.priceTable tbody').append('<tr><td colspan="3">'+dataReq['error']+'</td></tr>');
                }else{
                $(dataReq['prices']).each(function(i){
                  var selectRoom ='';
                  var roomPrice =  dataReq['prices'][i]['room']['total'];
                  var roomID =  dataReq['prices'][i]['room'].id;
                   // console.log("Selected room:",selectRoom)
                    $('.priceTable tbody').append('<div class="row roomWrapper"><div class="col-md-2 hidden-sm hidden-xs"><a data-fancybox="ajax" href="'+site_url+'/single-room.php?roomId='+roomID+'" data-type="ajax" class="offer-link yacht-offer"><img src="https://www.exelsiorhotels.com/reservation/'+dataReq['prices'][i]['roomImage'].galery_path+'/'+dataReq['prices'][i]['roomImage'].galery_image+'" width="150" height="150" class="img-responsive"  alt="" /></a></div><div class="col-md-3 room-detail"><p><strong>'+dataReq['prices'][i]['room'].room_title+' <br></strong></p><a data-fancybox="ajax" href="'+site_url+'/single-room.php?roomId='+dataReq['prices'][i]['room'].id+'" data-type="ajax" class="offer-link yacht-offer"><i class="fa fa-search-plus" aria-hidden="true"></i> DETAILS</a></div><div class="col-md-4 room_content_search_list"><p><i class="fa fa-user" aria-hidden="true"></i> '+totalAdult+'</p><p><i class="fa fa-child" aria-hidden="true"></i> '+totalChild+'</p><p><strong>Total : </strong> '+ dataReq['prices'][i]['room']['total'] +' GBP </p></div><div class="col-md-3 search_btn_wrapper"><form action="/rooms_reservation.php" method="post">' +
                    '<input type="hidden" name="roomID" value="'+dataReq['prices'][i]['room'].id+'"/>'+
                    '<input type="hidden" name="adult" value="'+adult+'" />'+
                    '<input type="hidden" name="checkInDate" value="'+checkInDate+'" />'+
                    '<input type="hidden" name="checkOutDate" value="'+checkOutDate+'" />'+
                    '<input type="hidden" name="child" value="'+child+'" />'+
                    '<input type="hidden" name="roomAmount" value="'+roomAmount+'" />'+
                    '<input type="hidden" name="selectRoom" value="'+selectRoom+'" />'+
                    '<a data-fancybox="ajax" href="'+site_url+'/select-room.php?roomId='+roomID+'" data-type="ajax"  class="btn btn-primary btn-sm btn-orange">Select Room</a></form></div></div>');
                 //   }
                    // dataReq['prices'][i]['room']['currency']
                  total += dataReq['prices'][i]['price'];

                  /*Select Room*/
                  $('#selectRoomLink'+dataReq['prices'][i]['room'].id).click(function(){
                    $('#totalPriceAmount').html(roomPrice);
                   });
                  /*Select Room*/
                });
               }//else
                $('.priceTable tfoot td').eq(1).html(total+" TL");



                /*Step 3*/

            }
        });
  },
  onFinishing: function (event, currentIndex)
  {
      form.validate().settings.ignore = ":disabled";
      return form.valid();
  },
  onFinished: function (event, currentIndex)
  {
      alert("Submitted!");
  }
});
</script>
