<div class="container" style="font-size:13px;">
   <div class="row">
      <div class="col-md">
         <div class="card shadow">
            <div class="card-header">
               <h6 class="m-0 font-weight-bold text-dark">Detail Reservasi Area Camping</h6>
            </div>
            <div class="card-body">
               <table class="table table-sm table-borderless">
                  <tr>
                     <th>#</th>
                     <th>Nama Blok</th>
                     <th>Tanggal Masuk</th>
                     <th>Tanggal Keluar</th>
                     <th>Reservasi</th>
                  </tr>
                  <?php $i = 1; ?>
                  <?php foreach ($detail as $value) : ?>
                     <tr>
                        <td><?= $i++; ?></td>
                        <td><?= $value['blok']; ?></td>
                        <td><?= $value['tgl_in']; ?></td>
                        <td><?= $value['tgl_out']; ?></td>
                        <td><?= $value['qty'] . " Hari"; ?></td>
                     </tr>
                  <?php endforeach; ?>
               </table>
            </div>
         </div>
         <div class="card shadow mt-3">
            <div class="card-header">
               <h6 class="m-0 font-weight-bold text-dark">Mapping Area Camping</h6>
            </div>
            <div class="card-body">
              <div id='printoutPanel'></div>
          
          <div id='myMap' style='position:relative;width:100%;height:700px;'></div>
            </div>
         </div>
      </div>
   </div>
</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 ($detail as $value) :
              $cl='red';
              $link ="Sudah direservasi";

            
         ?>
            var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(<?=$value['latlng']?>), {text: "<?=$value['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 endforeach; ?>
    }

    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>