<main id="js-page-content" role="main" class="page-content">
    <ol class="breadcrumb page-breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
        <li class="breadcrumb-item active">Hotel Form</li>
        <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
    </ol>
 <div id="panel-2" class="panel">
    <div class="panel-hdr">
        <h2>
            Hotel Form <span class="fw-300"></span>
        </h2>
    </div>
    <div class="panel-container show">
        <div class="panel-content p-0">

            <form class="needs-validation"  action="<?php echo $action; ?>"   method="post" enctype="multipart/form-data" novalidate >
                <div class="panel-content">
                    
                    <div class="form-row" style="position: relative;">
                        <div class="col-md-12 mb-3">
                            <label class="form-label" for="validationCustom01">Hotel Name<span class="text-danger">*</span> </label>
                            <input type="text" class="form-control" id="validationCustom01" name="fsName" id="fsName" placeholder="Hotel name" value="<?php echo $fsName; ?>" required>
                            <div class="valid-feedback">
                                Looks good!
                            </div>
                        </div> 
                    </div>    
                    <div class="form-row">    
                        <div class="col-md-6 mb-3">
                            <label class="form-label" for="validationCustom01">Mobile No</label>
                            <input type="text" class="form-control" id="validationCustom01" name="fiMobileNo" id="fiMobileNo" placeholder="MobileNo" value="<?php echo $fiMobileNo; ?>">
                            <div class="valid-feedback">
                                Looks good!
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label" for="validationCustomUsername">Email Id <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="inputGroupPrepend">@</span>
                                </div>
                                <input type="text" class="form-control" id="validationCustomUsername"  name="fsEmail" id="fsEmail" placeholder="Username" aria-describedby="inputGroupPrepend" value="<?php echo $fsEmail; ?>" required>
                                <div class="invalid-feedback">
                                    Please choose a username.
                                </div>
                            </div>    
                        </div>
                    </div>



                    <?php if($Id==""): ?>
                    
                    <div class="form-row">    
                        <div class="col-md-6 mb-3">
                            <label class="form-label" for="customControlValidationSuccess6">Multiple Select Menu</label>
                            <div class="form-group">
                                <select id="customControlValidationSuccess6 fiMenu" name="fiMenu[]" multiple="" class="form-control is-valid"  required>

                                    <!-- <option style=" padding-top: 5px;  padding-bottom: 5px;   ">Select Menu</option>     -->
                                        <!--****************************************** Get data in droudown menu ******************************************-->
                                        <?php

                                           if(count($menuLists) > 0){
                                              foreach($menuLists as $menulistvalue){
                                        ?>
                                        <option style="  padding-top: 5px;  padding-bottom: 5px;" value="<?php echo $menulistvalue['id'] ?>" <?php echo in_array($menulistvalue['id'], $fiMenu)?'selected':''; ?>> <?php echo $menulistvalue['fsTitle'] ?></option>

                                        <?php

                                          }
                                        }
                                        ?> 
                                </select>
                            </div>
                        </div>
                    </div>

                    <?php endif; ?>

                    
                    <div class="form-row">
                      <div class="col-md-6 mb-3 display-flex-image" style="display: flex;">
                            <div style="max-width: 250px;">
                              <label class="form-label" for="validationCustom01">Hotel Logo Image (250x250)<span class="text-danger">*</span> </label>
                              <input style="padding-top: 5px;" accept=".jpeg,.png,.jpg" cols="12" rows="5" type="file" class="form-control form-control-file" name="fsImage" id="fsImage" placeholder="Description" value="<?php echo $fsImage; ?>" ></input>
                              <?php
                                if(!empty($_FILES['fsImage']['name']) && ($_FILES['fsImage']['error']==1 || $_FILES['fsImage']['size']>2097152))
                                {
                                    echo "<div class='alert alert-danger' style='padding: 5px 0px 5px 9px; margin-top: 5px;     margin-bottom: 5px !important;'>Max 2MB file is allowed for image.</div>";
                                }
                              ?>
                            </div>
                            <div>
                            <?php if($fsImage!=""): ?>
                               <img style="background: #CCC; padding: 1px; max-width: auto;  margin-bottom:  10px; margin-left: 10px;  object-fit: cover; object-position: center; height: 60px;" class="alignment_speech" target="_blank" src="<?php echo base_url().$fsImage; ?>"></img> 
                            <?php endif; ?>
                          </div>
                        </div>
                        <div class="col-md-6 mb-3 display-flex-image" style="display: flex;">
                            <div style="max-width: 250px;">
                              <label class="form-label" for="validationCustom01">Hotel Background Image (1000x500)<span class="text-danger">*</span> </label>
                              <input style="padding-top: 5px;" accept=".jpeg,.png,.jpg" cols="12" rows="5" type="file" class="form-control form-control-file" name="fsBannerImage" id="fsBannerImage" placeholder="Description" value="<?php echo $fsBannerImage; ?>" ></input>
                              <?php
                                if(!empty($_FILES['fsImage']['name']) && ($_FILES['fsImage']['error']==1 || $_FILES['fsImage']['size']>2097152))
                                {
                                    echo "<div class='alert alert-danger' style='padding: 5px 0px 5px 9px; margin-top: 5px;     margin-bottom: 5px !important;'>Max 2MB file is allowed for image.</div>";
                                }
                                ?>
                            </div>
                            <div>
                             <?php if($fsBannerImage!=""): ?>
                                 <img style="background: #CCC; padding: 1px; max-width: auto;  margin-bottom:  10px; margin-left: 10px;  object-fit: cover; object-position: center; height: 60px;" class="alignment_speech" target="_blank" src="<?php echo base_url().$fsBannerImage; ?>"></img> 
                              <?php endif; ?>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-row">                    
                      <div class="col-md-12 mb-3">
                          <label class="form-label" for="fsShortDesc">Short Description<span class="text-danger">*</span> </label>
                          <textarea class="form-control" id="fsShortDesc" name="fsShortDesc" placeholder="Short Description" required><?php echo $fsShortDesc; ?></textarea>
                      </div>
                    </div>

                    <div class="form-row">                    
                      <div class="col-md-12 mb-3" style="height: 300px;">
                          <input id="pac-input" class="controls" type="text" placeholder="Search Box">
                          <div id="map"></div>
                      </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="col-md-3 mb-3">
                            <label class="form-label" for="validationCustom01">Country<span class="text-danger">*</span> </label>
                            <input type="text" class="form-control" id="country" name="fsCountry" placeholder="Country" value="<?php echo $fsCountry; ?>" required >
                            <div class="valid-feedback">
                                Looks good!
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label" for="validationCustom01">State<span class="text-danger">*</span> </label>
                            <input type="text" class="form-control" id="state" name="fsState" placeholder="State" value="<?php echo $fsState; ?>" required>
                            <div class="valid-feedback">
                                Looks good!
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label" for="validationCustom01">City<span class="text-danger">*</span> </label>
                            <input type="text" class="form-control" id="city" name="fsCity" placeholder="City" value="<?php echo $fsCity; ?>" required>
                            <div class="valid-feedback">
                                Looks good!
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label" for="validationCustom01">TimeZone<span class="text-danger">*</span> </label>
                            <input type="text" class="form-control" id="validationCustom01" name="ftTimeZone" id="ftTimeZone" placeholder="TimeZone" value="<?php echo $ftTimeZone; ?>" required>
                            <div class="valid-feedback">
                                Looks good!
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-md-3 mb-3">
                            <label class="form-label" for="validationCustom01">Latitude<span class="text-danger">*</span> </label>
                            <input type="text" class="form-control" id="lat" name="fiLatitude"  placeholder="Latitude" value="<?php echo $fiLatitude; ?>" required>
                            <div class="valid-feedback">
                                Looks good!
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label" for="validationCustom01">Longitude<span class="text-danger">*</span> </label>
                            <input type="text" class="form-control" id="long" name="fiLongitude" placeholder="Longitude" value="<?php echo $fiLongitude; ?>" required>
                            <div class="valid-feedback">
                                Looks good!
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label" for="validationCustom01">Locality<span class="text-danger">*</span> </label>
                            <input type="text" class="form-control" id="fsLocality" name="fsLocality" placeholder="Locality" value="<?php echo $fsLocality; ?>" required>
                            <div class="valid-feedback">
                                Looks good!
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label" for="validationCustom01">Address<span class="text-danger">*</span> </label>
                            <input type="text" class="form-control" id="full-address" name="fsAddress" placeholder="Address" value="<?php echo $fsAddress; ?>" required>

                            <div class="valid-feedback">
                                Looks good!
                            </div>
                        </div>
                    </div>

                    <div class="form-row">   
                      <?php if($Id > 0): ?> 
                        <div class="col-md-12 mb-3">
                            <label class="form-label" for="validationCustom01">Password <i>(Leave blank if not need to change password)</i></label>
                            <input type="text" class="form-control" id="validationCustom01" name="fsPassword" id="fsPassword" placeholder="Password">
                            <div class="valid-feedback">
                                Looks good!
                            </div>
                        </div>
                      <?php else: ?>
                          <div class="col-md-12 mb-3">
                              <label class="form-label" for="validationCustom01">Password<span class="text-danger">*</span> </label>
                              <input type="text" class="form-control" id="validationCustom01" name="fsPassword" id="fsPassword" placeholder="Password" required>
                              <div class="valid-feedback" >
                                  Looks good!
                              </div>
                          </div>
                      <?php endif; ?>
                    </div>

                </div>
                <div class="panel-content border-faded border-left-0 border-right-0 border-bottom-0 d-flex flex-row align-items-center">
                    <input type="hidden" name="Id" value="<?php echo $Id; ?>" /> 
                    <button class="btn btn-primary ml-auto" type="submit">Submit</button>
                    <a style="    margin-left: 5px;" href="<?php echo site_url('dashboard') ?>" class="btn btn-danger">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>
</main>

<script>
            // Example starter JavaScript for disabling form submissions if there are invalid fields
            (function()
            {
                'use strict';
                window.addEventListener('load', function()
                {
                    var forms = document.getElementsByClassName('needs-validation');
                    var validation = Array.prototype.filter.call(forms, function(form)
                    {
                        form.addEventListener('submit', function(event)
                        {
                            if (form.checkValidity() === false)
                            {
                                event.preventDefault();
                                event.stopPropagation();
                            }
                            form.classList.add('was-validated');
                        }, false);
                    });
                }, false);
            })();

              var map;
              var markers = [];
              var geocoder;

              function initAutocomplete() {
                var defulCenter = {lat: -33.8688, lng: 151.2195};
                <?php if($fiLongitude!="" || $fiLatitude!="" ):  ?>
                    defulCenter = {lat: parseFloat(<?php echo $fiLatitude; ?>), lng: parseFloat(<?php echo $fiLongitude ?>)};
                <?php endif; ?>
                map = new google.maps.Map(document.getElementById('map'), {
                  center: defulCenter,
                  zoom: 16.3,
                  mapTypeId: 'terrain',
                });

                geocoder = new google.maps.Geocoder();

                // Create the search box and link it to the UI element.
                var input = document.getElementById('pac-input');
                var searchBox = new google.maps.places.SearchBox(input);
                map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

                <?php if($fiLongitude!="" || $fiLatitude!="" ):  ?>

                    var myLatlng = new google.maps.LatLng(parseFloat(<?php echo $fiLatitude; ?>), parseFloat(<?php echo $fiLongitude; ?>));
                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        map: map
                    });

                <?php endif; ?>

                // Bias the SearchBox results towards current map's viewport.
                map.addListener('bounds_changed', function() {
                  searchBox.setBounds(map.getBounds());
                });



                // This event listener will call addMarker() when the map is clicked.
                map.addListener('click', function(event) {
                  if (markers.length >= 1) {
                      deleteMarkers();
                  }

                  addMarker(event.latLng);

                  document.getElementById('lat').value = event.latLng.lat();
                  document.getElementById('long').value =  event.latLng.lng();
                });

     
                // Listen for the event fired when the user selects a prediction and retrieve
                // more details for that place.
                searchBox.addListener('places_changed', function() {
                  var places = searchBox.getPlaces();

                  if (places.length == 0) {
                    return;
                  }

                  // Clear out the old markers.
                  markers.forEach(function(marker) {
                    marker.setMap(null);
                  });
                  markers = [];

                  // For each place, get the icon, name and location.
                  var bounds = new google.maps.LatLngBounds();
                  places.forEach(function(place) {
                    if (!place.geometry) {
                      console.log("Returned place contains no geometry");
                      return;
                    }
                    var icon = {
                      url: place.icon,
                      size: new google.maps.Size(71, 71),
                      origin: new google.maps.Point(0, 0),
                      anchor: new google.maps.Point(17, 34),
                      scaledSize: new google.maps.Size(25, 25)
                    };

                    // Create a marker for each place.
                    markers.push(new google.maps.Marker({
                      map: map,
                      icon: icon,
                      title: place.name,
                      position: place.geometry.location
                    }));

                    if (place.geometry.viewport) {
                      // Only geocodes have viewport.
                      bounds.union(place.geometry.viewport);
                    } else {
                      bounds.extend(place.geometry.location);
                    }
                  });
                  map.fitBounds(bounds);
                });
              }

              // Adds a marker to the map and push to the array.
              function addMarker(location) {
                var marker = new google.maps.Marker({
                  position: location,
                  map: map
                });
                getAddress(marker);
                markers.push(marker);
              }

              // Sets the map on all markers in the array.
              function setMapOnAll(map) {
                for (var i = 0; i < markers.length; i++) {
                  markers[i].setMap(map);
                }
              }

              // Removes the markers from the map, but keeps them in the array.
              function clearMarkers() {
                setMapOnAll(null);
              }

              // Deletes all markers in the array by removing references to them.
              function deleteMarkers() {
                clearMarkers();
                markers = [];
              }

              function markerLocation(counter) {
              //Get location.
              //alert(counter);
              var currentLocation = marker.getPosition();
              getAddress(currentLocation);
            }


              function getAddress(marker) {
                var currentLocation = marker.getPosition();
                geocoder.geocode( {'latLng': currentLocation},
                function(results, status) {
                  //alert(results[0].address_components[4].long_name)
                  //alert(JSON.stringify(results));
                  if(status == google.maps.GeocoderStatus.OK) {
                    if(results[0]) {
                      console.log(results);

                      var length_address = results[0].address_components.length;
                      document.getElementById('full-address').value = results[0].formatted_address;
                      document.getElementById('country').value = results[0].address_components[length_address - 2].long_name;
                      document.getElementById('state').value = results[0].address_components[length_address - 3].long_name;
                      document.getElementById('city').value = results[0].address_components[length_address - 4].long_name;
                      document.getElementById('fsLocality').value = results[0].address_components[length_address - 6].long_name;
                    } else {
                      //document.getElementById(address).value = "No results";
                    }
                  }
                  else {
                    //document.getElementById(address).value = status;
                  }
                });
              }
 
</script>
<script defer
   src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD308hLo8de_lGRrE7ewz89uQfG04BiaEY&libraries=places&callback=initAutocomplete">
    </script>
<!-- <script src="https://maps.googleapis.com/maps/api/js?AIzaSyD308hLo8de_lGRrE7ewz89uQfG04BiaEY&libraries=places&callback=initAutocomplete"
         async defer></script> -->
         <!-- key=AIzaSyAPHnw9tDjgI0Ab_Fn4ylpbP9PcKMebkrE& -->
<style type="text/css">
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {height: 100%; }

      /* Optional: Makes the sample page fill the window. */
      #description {font-family: Roboto; font-size: 15px; font-weight: 300; }
      #infowindow-content .title {font-weight: bold; }
      #infowindow-content {display: none; }
      #map #infowindow-content {display: inline; }
      .pac-card {margin: 10px 10px 0 0; border-radius: 2px 0 0 2px; box-sizing: border-box; -moz-box-sizing: border-box; outline: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); background-color: #fff; font-family: Roboto; }
      #pac-container {padding-bottom: 12px; margin-right: 12px; }
      .pac-controls {display: inline-block; padding: 5px 11px; }
      .pac-controls label {font-family: Roboto; font-size: 13px; font-weight: 300; }
      #pac-input {font-size: 15px; font-weight: 300; margin-top: 10px; padding: 0 10px 0 13px; width: 230px; height: 30px;}
      #pac-input:focus {border-color: #4d90fe; }
      #title {color: #fff; background-color: #4d90fe; font-size: 25px; font-weight: 500; padding: 6px 12px; }
      #target {width: 345px; }
</style>