File: //var/www/html/qcr24/app/application/views/admin/accommodation/add.php.bk
<style>
#map {
height: 400px;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#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;
}
</style>
<div class="app-content pt-3 p-md-3 p-lg-3">
<div class="container-xl">
<div class="row g-3 mb-4 align-items-center justify-content-between">
<div class="col-auto">
<h1 class="app-page-title mb-0">Add New Accommodation </h1>
</div>
<div class="col-auto">
<div class="page-utilities">
<div class="row g-2 justify-content-start justify-content-md-end align-items-center">
<!--//col-->
<div class="col-auto">
<a class="btn app-btn-secondary" href="<?= base_url('admin/accommodation') ?>">
View All Accommodation
</a>
</div>
</div>
<!--//row-->
</div>
<!--//table-utilities-->
</div>
<!--//col-auto-->
</div>
<!--//row-->
<div class="app-card app-card-settings shadow-sm p-4">
<form class="settings-form" method="post" action="" enctype="multipart/form-data" autocomplete="off">
<input type="hidden" name="slug" value="<?=$slug;?>">
<div class="app-card-body">
<form class="settings-form">
<div class="row g-3">
<div class="col-lg-6 col-sm-12 col-md-6 mb-3">
<label for="" class="form-label">Accommodation Category Name<span class="asterisk"> *</span></label>
<input type="text" class="form-control" name="accommodation_name" placeholder="Accommodation Category Name" required>
</div>
<div class="col-lg-6 col-sm-12 col-md-6 mb-3">
<label for="" class="form-label">Property<span class="asterisk"> *</span></label>
<select name="property_id" class="form-select" id="property_id" required>
<option value="" selected disabled>Select Property</option>
<?php foreach ($property_details as $property) { ?>
<option value="<?= $property['property_id'] ?>"><?= $property['property_name'] ?></option>
<?php } ?>
</select>
</div>
<div class="col-lg-12 col-sm-12 col-md-12 mb-3">
<label for="" class="form-label">Accommodation Detail Information</label>
<textarea class="form-control" name="accommodation_information" placeholder="Accommodation Detail Information..."></textarea>
</div>
<div class="col-lg-6 col-sm-12 col-md-6 mb-3">
<label for="" class="form-label">Accommodation Classification<span class="asterisk"> *</span></label>
<select name="accomm_class_id" class="form-select" id="accomm_class_id" required>
<option value="" selected disabled>Select Accommodation Classification</option>
<?php foreach ($accomm_class as $accomm) { ?>
<option value="<?= $accomm['accomm_class_id'] ?>"><?= $accomm['accomm_class_name'] ?></option>
<?php } ?>
</select>
</div>
<div class="col-lg-6 col-sm-12 col-md-6 mb-3">
<label for="" class="form-label">Accommodation Type<span class="asterisk"> *</span></label>
<select name="accomm_type_id" class="form-select" id="" required>
<option value="" selected disabled>Select Accommodation Type</option>
<?php foreach ($accomm_type as $accommType) { ?>
<option value="<?= $accommType['accomm_type_id'] ?>"><?= $accommType['accomm_type_name'] ?></option>
<?php } ?>
</select>
</div>
<div class="col-lg-6 col-sm-12 col-md-6 mb-3">
<label for="" class="form-label">No. of Accommodation <span class="asterisk"> *</span></label>
<select class="form-select" name="no_of_accomm" required>
<option value="">Select No. of Accommodation</option>
<?php for ($x = 1; $x <= 10; $x++) { ?>
<option value="<?=$x?>"><?= $x ?></option>
<?php } ?>
</select>
</div>
<div class="col-lg-6 col-sm-12 col-md-6 mb-3">
<label for="" class="form-label">Extra Bed</label>
<select class="form-select" name="extra_bed">
<option value="">Select Extra Bed</option>
<?php for ($x = 1; $x <= 5; $x++) { ?>
<option value="<?=$x?>"><?= $x ?></option>
<?php } ?>
</select>
</div>
<div class="col-lg-6 col-sm-12 col-md-6 mb-3">
<label for="" class="form-label">Allowed Adult</label>
<select class="form-select" name="adult">
<option value="">Select Allowed Adult</option>
<?php for ($x = 1; $x <= 10; $x++) { ?>
<option value="<?=$x?>"><?= $x ?></option>
<?php } ?>
</select>
</div>
<div class="col-lg-6 col-sm-12 col-md-6 mb-3">
<label for="" class="form-label">Maximum Allowed Adult</label>
<select class="form-select" name="max_adult">
<option value="">Select Maximum Allowed Adult</option>
<?php for ($x = 1; $x <= 10; $x++) { ?>
<option value="<?=$x?>"><?= $x ?></option>
<?php } ?>
</select>
</div>
<div class="col-lg-6 col-sm-12 col-md-6 mb-3">
<label for="" class="form-label">Allowed Child</label>
<select class="form-select" name="child">
<option value="">Select Allowed Child</option>
<?php for ($x = 1; $x <= 5; $x++) { ?>
<option value="<?=$x?>"><?= $x ?></option>
<?php } ?>
</select>
</div>
<!-- <div class="col-lg-4 col-sm-12 col-md-6 mb-3">
<label for="" class="form-label"><span class="asterisk"> *</span></label>
<input type="text" class="form-control" name="" placeholder="Allowed Child" required>
</div> -->
<div class="col-lg-6 col-sm-12 col-md-6 mb-3">
<label for="" class="form-label">Status<span class="asterisk"> *</span></label>
<select name="is_active" class="form-select" id="is_active" required>
<option value="">Select Status</option>
<option value="1" selected>Active</option>
<option value="0" >Inactive</option>
</select>
</div>
<div class="col-md-12">
<h4>Facilities</h4>
</div>
<div class="col-lg-12 col-sm-12 col-md-12 mb-3">
<div class="d-flex flex-wrap">
<?php
if (isset($facilities))
foreach ($facilities as $f) {
?>
<div class="p-2 me-2">
<label><input type="checkbox" name="property_facilities[]" value="<?= $f['facility_id']; ?>" class="me-1"><?= $f['facility_name']; ?></label>
</div>
<?php } ?>
</div>
</div>
<div class="col-md-12">
<h4>Images</h4>
</div>
<div class="col-lg-3 col-sm-12 col-md-6 mb-3">
<label for="" class="form-label">Image 1<span class="asterisk"> </span></label>
<img src="https://panchayet.syscentricdev.com/public/admin_assets/images/property_default_image.png" id="image1" alt="" height="50" width="75">
<input id="image1Upload" style="display:none;" class="imageUpload" type="file" accept="image/*" name="image1" placeholder="Photo" capture>
<div id="delete_image1_div" style="display:none;">
<button id="delete_image1" class="btn btn-theme-warn" style="margin-top: 10px;"><i class="fa fa-trash"></i></button>
</div>
<input type="hidden" id="imageUpload_base64" value="">
</div>
<div class="col-lg-3 col-sm-12 col-md-6 mb-3">
<label for="" class="form-label">Image 2<span class="asterisk"> </span></label>
<img src="https://panchayet.syscentricdev.com/public/admin_assets/images/property_default_image.png" id="image2" alt="" height="50" width="75">
<input id="image2Upload" style="display:none;" class="imageUpload" type="file" accept="image/*" name="image2" placeholder="Photo" >
<div id="delete_image2_div" style="display:none;">
<button id="delete_image2" class="btn btn-theme-warn" style="margin-top: 10px;"><i class="fa fa-trash"></i></button>
</div>
</div>
<div class="col-lg-3 col-sm-12 col-md-6 mb-3">
<label for="" class="form-label">Image 3<span class="asterisk"> </span></label>
<img src="https://panchayet.syscentricdev.com/public/admin_assets/images/property_default_image.png" id="image3" alt="" height="50" width="75">
<input id="image3Upload" style="display:none;" class="imageUpload" type="file" accept="image/*" name="image3" placeholder="Photo" >
<div id="delete_image3_div" style="display:none;">
<button id="delete_image3" class="btn btn-theme-warn" style="margin-top: 10px;"><i class="fa fa-trash"></i></button>
</div>
</div>
<div class="col-lg-3 col-sm-12 col-md-6 mb-3">
<label for="" class="form-label">Image 4<span class="asterisk"> </span></label>
<img src="https://panchayet.syscentricdev.com/public/admin_assets/images/property_default_image.png" id="image4" alt="" height="50" width="75">
<input id="image4Upload" style="display:none;" class="imageUpload" type="file" accept="image/*" name="image4" placeholder="Photo" >
<div id="delete_image4_div" style="display:none;">
<button id="delete_image4" class="btn btn-theme-warn" style="margin-top: 10px;"><i class="fa fa-trash"></i></button>
</div>
</div>
<!-- <div class="col-lg-6 col-sm-12 col-md-6 mb-3">
<div class="mb-3">
<label for="" class="form-label">Facilities Amenitis<span class="asterisk"> *</span></label>
<div class="select2-purple">
<select class="select2" multiple="multiple" name="facilities[]" data-placeholder="Select Available Facilities" data-dropdown-css-class="select2-purple" style="width: 100%;" required>
<option value="">Select Facilities Amenitis</option>
<?php foreach($facility_dropdown as $key => $val): ?>
<option value="<?=$val['facility_id']?>"><?=$val['facility_name']?></option>
<?php endforeach; ?>
</select>
<?php
// echo '<pre>';
// print_r($facility_dropdown);
?>
</div>
</div>
</div> -->
</div>
</div>
<input type="hidden" name="submit" value="1"/>
<button type="submit" class="btn app-btn-primary">SUBMIT</button>
<a class="btn app-btn-danger" href="">CANCEL</a>
</form>
</div>
<!--//app-card-body-->
</div>
</div>
<script type='text/javascript'>
$(document).ready(function(){
$("#image1").click(function(e) {
$("#image1Upload").click();
});
$("#image2").click(function(e) {
$("#image2Upload").click();
});
$("#image3").click(function(e) {
$("#image3Upload").click();
});
$("#image4").click(function(e) {
$("#image4Upload").click();
});
});
function fasterPreview( uploader) {
if ( uploader.files && uploader.files[0] ){
$('#'+uploader.name).attr('src',window.URL.createObjectURL(uploader.files[0]) );
}
}
$("#image1Upload").change(function(){
//$("#delete_profile_image_div").show();
//console.log(this.name);
fasterPreview( this );
});
$("#image2Upload").change(function(){
//$("#delete_profile_image_div").show();
fasterPreview( this );
});
$("#image3Upload").change(function(){
//$("#delete_profile_image_div").show();
fasterPreview( this );
});
$("#image4Upload").change(function(){
//$("#delete_profile_image_div").show();
fasterPreview( this );
});
</script>
<script type="text/javascript">
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
window.initMap = initMap;
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 40.749933, lng: -73.98633 },
zoom: 13,
mapTypeControl: false,
});
const input = document.getElementById("address_autocomplete");
const options = {
fields: ["formatted_address", "geometry", "name"],
strictBounds: false,
types: ["establishment"],
};
const autocomplete = new google.maps.places.Autocomplete(input, options);
// Bind the map's bounds (viewport) property to the autocomplete object,
// so that the autocomplete requests use the current map bounds for the
// bounds option in the request.
autocomplete.bindTo("bounds", map);
const infowindow = new google.maps.InfoWindow();
const infowindowContent = document.getElementById("infowindow-content");
infowindow.setContent(infowindowContent);
const marker = new google.maps.Marker({
map,
anchorPoint: new google.maps.Point(0, -29),
});
autocomplete.addListener("place_changed", () => {
infowindow.close();
marker.setVisible(false);
const place = autocomplete.getPlace();
if (!place.geometry || !place.geometry.location) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No details available for input: '" + place.name + "'");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setPosition(place.geometry.location);
marker.setVisible(true);
infowindowContent.children["place-name"].textContent = place.name;
infowindowContent.children["place-address"].textContent =
place.formatted_address;
infowindow.open(map, marker);
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-nrrt7qM9VkwOfkWQCG5161Y4W024yG8&callback=initMap&libraries=places"></script>