  <?php
  $id=$this->session->userdata('id_user');
  $query_str="SELECT * FROM `reservasi` where id_user='$id'";
  $query=$this->db->query($query_str);
  $data=$this->db->get_where('reservasi',array('id_user'=>$id))->row_array();  
  ?>
  <div class="content-wrapper">
    <div class="container">
      <!-- Content Header (Page header) -->
      <section class="content-header">
        <h1>
          Reservasi
        </h1>
      </section>

      <!-- Main content -->
      <section class="content">
      <?php if ($data['id_user'] == null) : ?>
      <div class="row justify-content-center">
         <div class="col-md-9">
            <div class="justify-content-center">
               <div class="alert alert-danger" role="alert">
                  <h1 class="mb-4 text-center"><i class="fa fa-frown-o"></i></h1>
                  <h2 class="alert-heading text-center">Data Reservasi tidak ditemukan!</h2>
                  <p class="text-center">Sepertinya anda belum melakukan reservasi</p>
               </div>
            </div>
         </div>
      </div>
   <?php else : ?>
       <div class="box box-default">
          <div class="box-header with-border">
            <h3 class="box-title">Reservasi</h3>
          </div>
          <div class="box-body">
          <form method="post" action="<?= base_url('home/tambah_keranjang'); ?>">
          <div class="row">
            <div class="col-md-5">
              <div class="form-group">
                <label>Tanggal Masuk:</label>
                <label class="form-control pull-right"><?=date('d F Y', strtotime($data['tgl_in'])) ?></label>
              </div>
              </div>
            <div class="col-md-5">
              <div class="form-group">
                <label>Tanggal Keluar:</label>
                <label class="form-control pull-right"><?=date('d F Y', strtotime($data['tgl_out'])) ?></label>
              </div>
            </div>
            <div class="col-md-2">
              <div class="form-group">
                <label>~</label>
                <button type="submit" name="kirim" class="form-control pull-right" >Kirim</button>
              </div>
            </div>
            </div>
            </form>
          </div>
          <!-- /.box-body -->
        </div>
       <div class="box box-default">
          <div class="box-header with-border">
            <h3 class="box-title">Mapping Area Camping</h3><br>
            <i class="fa fa-dot-circle-o" style="font-size:16px;color:red"></i> Sudah ada yang mereservasi |
            <i class="fa fa-dot-circle-o" style="font-size:16px;color:purple"></i> Kosong |
            <i class="fa fa-dot-circle-o" style="font-size:16px;color:blue"></i> Sedang Direservasi
          </div>
          <div class="box-body">
          <div id='printoutPanel'></div>
          
          <div id='myMap' style='position:relative;width:100%;height:700px;'></div>

          </div>
          <!-- /.box-body -->
        </div>

        
        <!-- /.box -->
        <?php endif; ?>
      </section>
      <!-- /.content -->
    </div>
    <!-- /.container -->
  </div>
  <script type='text/javascript'>
    var map, infobox;

    function GetMap() {
        
        map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
        /* No need to set credentials if already passed in URL */
        center: new Microsoft.Maps.Location(-7.679388, 112.598252),
        mapTypeId: Microsoft.Maps.MapTypeId.aerial,
        zoom: 20
    });

        infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
            visible: false
        });

        //Assign the infobox to a map instance.
        infobox.setMap(map);

        //Create random locations in the map bounds.

        <?php
         
                 foreach ($query->result_array() as $row){
            if ($row['status']==0){
              $cl='purple';
              $link ="$row[blok] <br> <a href=pilih_ok/$row[id_reservasi]> Pilih</a>";
            } elseif ($row['status']==1){
              $cl='blue';
              $link ="$row[blok] <br> <a href=pilih_batal/$row[id_reservasi]> Batal</a>";
            } elseif ($row['status']==2){
              $cl='red';
              $link ="Sudah direservasi";
            }
            
         ?>
            var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(<?=$row['latlng']?>), {text: "<?=$row['blok']?>", color: '<?=$cl?>'});

            pin.metadata = {
                description: "<?=$link?>"
            };

            //Add a click event handler to the pushpin.
            Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);

            //Add pushpin to the map.
            map.entities.push(pin);
               
         <?php }  ?> 
    }

    function pushpinClicked(e) {
        //Make sure the infobox has metadata to display.
        if (e.target.metadata) {
            //Set the infobox options with the metadata of the pushpin.
            infobox.setOptions({
                location: e.target.getLocation(),
                title: e.target.metadata.title,
                description: e.target.metadata.description,
                visible: true
            });
        }
    }
    </script>
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=U4VD6Xi1NuVkAaN8KvJF~dereRmfzkm5VdVorK5lmlA~Ar4MuDpGzRmqdUtbXYvjm31t06tAU-400GnsVAY8Zna23hb05WjeiHiszdHOEAXU' async defer></script>