
<?php 

   $this->load->view('common_front/header');

?>

<link rel="stylesheet" href="<?php echo base_url(); ?>public/css/plugins.css" type="text/css">
  <style type="text/css">
      .title-p
      {
        color: #2fca2f;
        text-align: center;
      }
      .date{

      }

      .datepicker table tr td:not(.disabled),
.datepicker table tr td.active:hover {
    background: rgb(64, 243, 26) ;
    text-shadow: none;
}
  </style>

    <div class="page_banner">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h4>Fill Choose Date</h4>
                    <p><a href="<?= base_url() ?>">Home</a> | Choose Date</p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="section">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="fill_deatil_box">
                        <div class="fill_deatil_box_heading">
                            <span>Choose Dates</span>
                        </div>
                        <div class="fill_deatil_box_body">
                                <div class="query-form-box">
                                      <h3 class="title-p"><?= $post['tittle']?></h3>
                                      <div class="col-md-4 col-md-offset-5">
                                          <div class="date">
                                              
                                          </div>

                                          </div>

                                          <input type="hidden" id="set_val" name="tour_date">
                                          <div class="row">
                                              <div class="col-md-4 col-md-offset-5">
                                                   <span id="selected_date" style="display: none">Selected Date :</span>
                                              </div>
                                              <div class="col-md-offset-2 col-md-1">
                                                  <input type="submit" class="btn btn-success" value="Book">
                                              </div>
                                          </div>
                                    
                                 </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

 





<?php 
 
   $this->load->view('common_front/footer');

?>
<script src="<?php echo base_url(); ?>public/js/bootstrap-datepicker.js"></script>
<script>
    $=jQuery;
            
var availableDates = <?= json_encode(explode(',',$post['tour_date']));?>;
            $('.date').datepicker({

    format: 'dd-mm-yyyy'
    ,
    beforeShowDay:
      function(dt)
      { 
        return available(dt);
      }
   , changeMonth: true, changeYear: true,show: true
});

            function available(date) {
  dmy = (("0"+date.getDate()).slice(-2)) + "-" + (("0"+(date.getMonth()+1)).slice(-2)) + "-" + date.getFullYear();
  console.log(dmy);
  //console.log($.inArray(dmy, availableDates));
  if ($.inArray(dmy, availableDates) != -1) {
    return true;
  } else {
    return false;
  }
}


            //$('.date').datepicker('setDates', availableDates);
            $('.date').datepicker('show');

            $('.date').on("changeDate", function () {
        var the_dates = $('.date').datepicker('getFormattedDate');
        $('#set_val').val(the_dates);
        //this does not work
        $('#selected_date').html('Selected Date : '+the_dates);
        $('#selected_date').show();
        //console.log($('.date').datepicker('getFormattedDate'))
    });
            </script>