JezK

Edit File: bookNow.php

<?php
include_once("common-header.php");
?>
<style>
.container.row.pb-5 {
    display: none;
}

#main {
    height: 400px;
    margin-top: -8%;
}
.col-sm-3.custom-content ,.booknow-nav-side .navbar-nav{
    background: #f5fdff;
}
.col-sm-3.custom-content {border-right: 2px solid #dae9ec;}
.booknow-nav-side  ul.sub-menu.children {
    background: transparent !important;
}
.booknow-nav-side li.menu-item-has-children h4 {
    color: #1f58c9;
    font-size: 18px;
    font-weight: 600;
}
.booknow-h2{
	color: #1f58c9;
    font-size: 20px;
}
.booknow-nav-side form a.nav-toggle.float-right {
    color: #1f58c9;
    font-size: 15px !important;
}
.booknow-nav-side .font-small label {
    font-size: 14px;
}
p.text-clr-blue{
	 font-size: 14px;
color: #1f58c9;
margin-bottom:0px;
font-weight:600;
}
span.text-clr-gray{
	 font-size: 16px;
color: #565656;
margin-bottom:0px
}
.w-40 strong{
	color:#1f58c9;
}
.w-40 span {
	width:20px;
	height:2px;
	background:#1f58c9;
}
#bookNow-submit{
	background: #2c62ce;
    border: initial;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    border-radius: 6px;
}
.select:after {
    top: -28px;
width:10%;
    }
.select-icon {
    position: absolute !important;
    top: 37px;
    left: 20px;
}
nav.booknow-nav-side{
	height:100%;
}
.form-check-label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.form-check-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color:transparent;
  border-radius: 50%;
  border:1px solid #1f58c9;
}

/* When the radio button is checked, add a blue background */
input:checked ~ .checkmark {
  background-color: #1f58c9;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
 input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #1f58c9;
}

}
input#sqmts{
    border:none;
    width:80%;
    text-indent:10px;

}
.sqmts{
    border:none;
    width:80%;
    text-indent:10px;
}

.spaceborder{

height: calc(2.25rem + 2px);
    /* font-size: 10px; */
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.spaceborder:focus{
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25)
}

@media (min-width:768px){
.w-40{width:40%;}
}
</style>

<section id="main" class="">
    <div class="container-fluid ">
    </div>
</section>
<div class="container-fluid first-position ">
    <div class="row ">
        
        <div class="col-sm-3 custom-content pl-0">
            <div class="custom-content">
                <nav class="navbar navbar-expand-sm navbar-default booknow-nav-side">
                  	<ul class="nav navbar-nav w-100">
                        <li class="menu-item-has-children dropdown border-0 pl-5  w-100">
                            <h4 class="mt-5">Storage Type</h4>
                            <ul class="sub-menu children  mb-3 pl-md-0">
                                
                                <form action="" class="font-small">
                                    <div class="form-check my-2">
                                        <label class="form-check-label" for="all">
                                            <input type="radio" class="form-check-input wh-18" id="all" name="storage_type" value="all">All
											 <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="form-check my-2">
                                        <label class="form-check-label" for="no_pallets">
                                            <input type="radio" class="form-check-input wh-18" id="no_pallets" name="storage_type" value="no_pallets">No Pallets
											<span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="form-check my-2">
                                        <label class="form-check-label" for="pallet_period">
                                            <input type="radio" class="form-check-input wh-18" id="pallet_period" name="storage_type" value="pallet_period">Pallet Period
                                    		<span class="checkmark"></span>    
                                   		 </label>
                                    </div>
                                    <div class="form-check my-2">
                                        <label class="form-check-label" for="amt_space">
                                            <input type="radio" class="form-check-input wh-18" id="amt_space" name="storage_type" value="amt_space">Amt Space(sqm)
                                        	<span class="checkmark"></span>
                                    	</label>
                                    </div>
                                    <div class="form-check my-2">
                                        <label class="form-check-label" for="space_period">
                                            <input type="radio" class="form-check-input wh-18" id="space_period" name="storage_type" value="space_period">Space Period
                                        	<span class="checkmark"></span>
                                    	</label>
                                    </div>
                                    <div id="collapse" style="display:none">
                                        <div class="form-check my-2">
                                            <label class="form-check-label" for="dummy1">
                                                <input type="radio" class="form-check-input wh-18" id="dummy1" name="storage_type" value="dummy1">dummy1
												<span class="checkmark"></span>
                                            </label>
                                        </div>
                                        <div class="form-check my-2">
                                            <label class="form-check-label" for="dummy2">
                                                <input type="radio" class="form-check-input wh-18" id="dummy2" name="storage_type" value="dummy2">dummy2
												<span class="checkmark"></span>
                                            </label>
                                        </div>
                                    </div>
                                    <a href="#collapse" class="nav-toggle pr-3 ml-1 float-right">View
                                        All</a>
                                </form>

</ul>
                        </li>
                        <li class="menu-item-has-children dropdown  border-0  pl-5  w-100">
                            <h4 class="mt-3">Category</h4>
                            <ul class="sub-menu children mb-3 pl-md-0">
                                
                                <form action="" class="font-small">
                                    <div class="form-check my-2">
                                        <label class="form-check-label" for="radio3">
                                            <input type="radio" class="form-check-input wh-18" id="radio3" name="optradio" value="option3">All
											<span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="form-check my-2">
                                        <label class="form-check-label" for="radio4">
                                            <input type="radio" class="form-check-input wh-18" id="radio4" name="optradio" value="option4">Electronics
                                        	<span class="checkmark"></span>
                                    	</label>
                                    </div>
                                    <div class="form-check my-2">
                                        <label class="form-check-label" for="radio5">
                                            <input type="radio" class="form-check-input wh-18" id="radio5" name="optradio" value="option3">Spare Parts
                                       		<span class="checkmark"></span>
                                    	</label>
                                    </div>
                                    <div class="form-check my-2">
                                        <label class="form-check-label" for="radio6">
                                            <input type="radio" class="form-check-input wh-18" id="radio6" name="optradio" value="option4">Machine Parts
                                        	<span class="checkmark"></span>
                                    	</label>
                                    </div>
                                    <div class="form-check my-2">
                                        <label class="form-check-label" for="radio7">
                                            <input type="radio" class="form-check-input wh-18" id="radio7" name="optradio" value="option3">Equipments
											<span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="form-check my-2">
                                        <label class="form-check-label" for="radio8">
                                            <input type="radio" class="form-check-input wh-18" id="radio8" name="optradio" value="option4">Personal Items
											<span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="form-check my-2">
                                        <label class="form-check-label" for="radio9">
                                            <input type="radio" class="form-check-input wh-18" id="radio9" name="optradio" value="option3">Printed Material
											<span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div id="collapse1" style="display:none">
                                        <div class="form-check my-2">
                                            <label class="form-check-label" for="dummy3">
                                                <input type="radio" class="form-check-input wh-18" id="dummy3" name="storage_type" value="dummy3">dummy1
												<span class="checkmark"></span>
                                            </label>
                                        </div>
                                        <div class="form-check my-2">
                                            <label class="form-check-label" for="dummy4">
                                                <input type="radio" class="form-check-input wh-18" id="dummy4" name="storage_type" value="dummy4">dummy2
												<span class="checkmark"></span>
                                            </label>
                                        </div>
                                    </div>
                                    <a href="#collapse1" class="nav-toggle pr-3 ml-1 float-right">View
                                        All</a>
                                </form>
                            </ul>
                        </li>
                        <li class="menu-item-has-children dropdown border-0 pl-5 w-100">
                            <h4 class="mt-3">Services</h4>
                            <ul class="sub-menu children mb-3 pl-md-0">
                                
                                <form action="" class="font-small">
                                    <div class="form-check my-2">
                                        <label class="form-check-label" for="radio11">
                                            <input type="radio" class="form-check-input wh-18" id="radio11" name="optradio" value="option5">All
											<span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="form-check my-2">
                                        <label class="form-check-label" for="radio12">
                                            <input type="radio" class="form-check-input wh-18" id="radio12" name="optradio" value="option6">Hand Lift
											<span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="form-check my-2">
                                        <label class="form-check-label" for="radio13">
                                            <input type="radio" class="form-check-input wh-18" id="radio13" name="optradio" value="option5">Delivery Service
											<span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="form-check my-2">
                                        <label class="form-check-label" for="radio14">
                                            <input type="radio" class="form-check-input wh-18" id="radio14" name="optradio" value="option6">Pallet Repairs
											<span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="form-check my-2">
                                        <label class="form-check-label" for="radio15">
                                            <input type="radio" class="form-check-input wh-18" id="radio15" name="optradio" value="option5">Forkift
											<span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div id="collapse3" style="display:none">
                                        <div class="form-check my-2">
                                            <label class="form-check-label" for="dummy5">
                                                <input type="radio" class="form-check-input wh-18" id="dummy5" name="storage_type" value="dummy5">dummy5
												<span class="checkmark"></span>
                                            </label>
                                        </div>
                                        <div class="form-check my-2">
                                            <label class="form-check-label" for="dummy6">
                                                <input type="radio" class="form-check-input wh-18" id="dummy6" name="storage_type" value="dummy6">dummy6
												<span class="checkmark"></span>
                                            </label>
                                        </div>
                                    </div>
                                    <a href="#collapse3" class="nav-toggle pr-3 ml-1 float-right">View All</a>
                                </form>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>           
        </div>
        <div class="col-sm-9">
			<div class="pt-md-5 pl-md-4 pr-md-4">
				<div class="text-center">
                	<img src="images/booknow-img.png" class="w-100">
                </div>
            	<div class="pl-md-5 pr-md-5">
                <div class="row">
                    <div class="col-sm-4 p-md-4">
                        <p class="text-clr-blue">Warehouse Name</p>
                        <span class="text-clr-gray">UPS WORLDPORT</span>
                    </div>
                    <div class="col-sm-4 p-md-4">
                        <p class="text-clr-blue">Warehouse ID</p>
                        <span class="text-clr-gray">558ac5</span>
                    </div>
                    <div class="col-sm-4 p-md-4">
                        <p class="text-clr-blue">Quotation ID</p>
                        <span class="text-clr-gray">58951</span>
                    </div>
                    <div class="col-sm-4 p-md-4">
                        <p class="text-clr-blue">Customer Name</p>
                        <span class="text-clr-gray">Williams</span>
                    </div>
                    <div class="col-sm-4 p-md-4">
                        <p class="text-clr-blue">Customer Type</p>
                        <span class="text-clr-gray">Gold</span>
                    </div>
                </div>
                <h2 class="booknow-h2 mt-5 mb-4">Product we deal with</h2>
                <div class="row">
                    <div class="col-sm-3 p-md-3">
                        <span class="text-clr-gray">Electronics</span>
                    </div>
                    <div class="col-sm-3 p-md-3">
                        <span class="text-clr-gray">Electronics</span>
                    </div>
                    <div class="col-sm-3 p-md-3">
                        <span class="text-clr-gray">Machine Parts</span>
                    </div>
                    <div class="col-sm-3 p-md-3">
                        <span class="text-clr-gray">Equipment</span>
                    </div>
                    <div class="col-sm-3 p-md-3">
                        <span class="text-clr-gray">Printed Materials</span>
                    </div>
                    <div class="col-sm-3 p-md-3">
                        <span class="text-clr-gray">Stationery</span>
                    </div>
                    <div class="col-sm-3 p-md-3">
                        <span class="text-clr-gray">TeleCommunication Equipment</span>
                    </div>
                    <div class="col-sm-3 p-md-3">
                        <span class="text-clr-gray">Trade fair and exhibition exhibits</span>
                    </div>
                    <div class="col-sm-3 p-md-3">
                        <span class="text-clr-gray">Glass</span>
                    </div>
                    <div class="col-sm-3 p-md-3">
                        <span class="text-clr-gray">Dry and liquid goods</span>
                    </div>
                    <div class="col-sm-3 p-md-3">
                        <span class="text-clr-gray">Sporting Equipment</span>
                    </div>
                    <div class="col-sm-3 p-md-3">
                        <span class="text-clr-gray">Personal items</span>
                    </div>
                </div>
                <h2 class="booknow-h2 mt-5 mb-4">Warehouse working hours</h2>
                	<div class="pl-md-5  w-40">
						<div class="d-flex justify-content-between">
                        	<strong>Mon</strong>
							<p class="w-50 d-flex justify-content-around align-items-center">9:30 <span></span> 18:00</p>
                        </div>
						<div class="d-flex justify-content-between">
                        	<strong>Tue</strong>
							<p class="w-50 d-flex justify-content-around align-items-center">9:30 <span></span> 18:00</p>
                        </div>
						<div class="d-flex justify-content-between">
                        	<strong>Wed</strong>
							<p class="w-50 d-flex justify-content-around align-items-center">9:30 <span></span> 18:00</p>
                        </div>
						<div class="d-flex justify-content-between">
                        	<strong>Thr</strong>
							<p class="w-50 d-flex justify-content-around align-items-center">9:30 <span></span> 18:00</p>
                        </div>
                    	<div class="d-flex justify-content-between">
                        	<strong>Fri</strong>
							<p class="w-50 d-flex justify-content-around align-items-center">9:30 <span></span> 18:00</p>
                        </div>
                    	<div class="d-flex justify-content-between">
                        	<strong>Sat</strong>
							<p class="w-50 d-flex justify-content-around align-items-center">Off</p>
                        </div>
                    	<div class="d-flex justify-content-between">
                        	<strong>Sun</strong>
							<p class="w-50 d-flex justify-content-around align-items-center">Off</p>
                        </div>
                    </div>
                	<div class="mt-5">
                    	<form class="mb-3">
                        	<div class="row">

<div class="col-sm-4">
                            <label for="servicetype" class="inpt-label d-block">Service Type</label>
                                <div class="input-container">
                                    <select id="service" name="service" class="form-control frm-input"
                                        onChange="return serviceType()">
                                        <option>select</option>
                                        <option value="1">Pallet</option>
                                        <option value="2">Service</option>
                            
                                        
                                    </select>
                                </div>
                               	</div>

<div class="pallet pt-2 col-sm-4" style="display:block">
                                <label for="pallet" class="inpt-label"></label>
                                <div class="input-container">
                                    <input type="text" id="none" name="pallet" value="" class="form-control frm-input"
                                        placeholder="" />
                                </div>
                            </div>
                            <div class="pallet  col-sm-4" style="display:none">
                                <label for="pallet" class="inpt-label">Number of Pallets</label>
                                <div class="input-container">
                                    <input type="text" id="pallet" name="pallet" value="" class="form-control frm-input"
                                       />
                                </div>
                            </div>
                            <div class="space col-sm-4" style="display:none">
                                <label for="space" class="inpt-label">Number of Square Meters</label>
                                    <div class="d-flex spaceborder align-items-center">
                                    <input type="text" id="sqmts" name="sqmts" value="" class="sqmts"/>
                                    <span>Sqmts</span>
                                </div>
                            </div>
                    </div>
                    <div class="row">
                            	<div class="col-sm-4 pt-2">
                                	<div class="form-group search p-relative form-h">
                                    	<label><strong>Date From</strong></label>
                                   		 <span class="select-icon"><img src="images/Home_Croppings/date-pic.png"></span>
                                  		  <input name="date" type="text" class="form-control" id="datepicker1">
                                	</div>
                               	</div>
                            	<div class="col-sm-4 pt-2">
                            		<div class="form-group search p-relative form-h">
										<label><strong>Date To</strong></label>
                             			 <span class="select-icon"><img src="images/Home_Croppings/date-pic.png"></span>
                             			 <input name="date" type="text" class="form-control" id="datepicker2">
                                    </div>
                                </div>
                            	<div class="col-sm-4 pt-2">
									<label><strong>Price</strong></label>
                                	<div class="form-group p-relative form-h">
                             			 <input name="price" type="text" class="form-control" id="price">
                                    </div>
                                </div>
                            </div>
                        	<div class="w-100 text-right">
                            	<button type="submit" name="submit" id="bookNow-submit" class="pl-4 pr-4 pt-2 pb-2">Book Now</button>
                            </div>
                    	</form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<section class="footer top-footer  bg-dark">
    <div class="container">
        <div class="row">
            <div class="col-md-2"></div>
            <div class="footer col-md-3 mt-3">
                <ul style="list-style:none;">
                    <li class="text-white">Home</li>
                    <li class="text-white">About us</li>
                    <li class="text-white">Contact us</li>
                </ul>
            </div>
            <div class="footer col-md-3 mt-3">
                <ul style="list-style:none;">
                    <li class="text-white">Warehouse</li>
                    <li class="text-white">Facilities</li>
                    <li class="text-white">Terms & Conditions</li>
                </ul>
            </div>
            <div class="footer col-md-3 mt-3">
                <ul style="list-style:none;">
                    <li class="text-white">Get in touch for on demand warehouse</li>
                    <li class="text-white pl-3">info@uflexit.com</li>
                    <li class="text-white pl-3">+900 123 456</li>
                </ul>
            </div>
        </div>
        <h6 class="text-center bottom-footer pb-2">Copyright 2021 All right reserved</h6>
    </div>
</section>

<?php 
 include("footer.php"); 
?>
<script>

var toggle_customSidebar = false,
    custom_open = 0;

if (!toggle_customSidebar) {
    var toggle = $('.custom-template .custom-toggle');

toggle.on('click', (function() {
        if (custom_open == 1) {
            $('.custom-template').removeClass('open');
            toggle.removeClass('toggled');
            custom_open = 0;
        } else {
            $('.custom-template').addClass('open');
            toggle.addClass('toggled');
            custom_open = 1;
        }
    }));
    toggle_customSidebar = true;
}
$('.nav-toggle').click(function() {
    var collapse_content_selector = $(this).attr('href');
    var toggle_switch = $(this);
    $(collapse_content_selector).toggle(function() {
        if ($(this).css('display') == 'none') {
            toggle_switch.html('View All');
        } else {
            toggle_switch.html('Hide');
        }
    });
});
	 jQuery(document).ready(function(){
     
        $('#datepicker1').datetimepicker({
            defaultDate: '',
            format: 'DD-MM-YYYY',
            minDate : new Date()
         });
		$('#datepicker2').datetimepicker({
            defaultDate: '',
            format: 'DD-MM-YYYY',
            minDate : new Date()
         });
      });

function serviceType() {
   
  var x = document.getElementById("service").value;
  if (x =='1')
  {     
      $(".pallet").attr("style", "display:block")
      $(".space").attr("style", "display:none")
      $("#none").parent().parent().attr("style", "display:none")
  }
  else if(x=='2'){
      $(".space").attr("style", "display:block")
      $(".pallet").attr("style", "display:none")
      $("#none").parent().parent().attr("style", "display:none")

}
  
}

</script>
</body>

</html>