JezK

Edit File: warehousedemo.php

<?php
   // include("app/checkSession.php");
   // include_once("app/adminObj.php");
   // if(!isset($_SESSION['user_id'])){
   //    //$customerObj->redirect('login.php'); // commented on 27th dec sriram
   // }
   include("header.php");
   $warehouse_sql ="";
   ?>
<style>
   .card-text {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   max-width: 85px;
   font-size: 14px;
   }
   .book-now{
   background:lightgreen;
   position:absolute;
   right:15px;
   top:20px;
   }
   .bg-list-color, .custom-template {
   border-top-left-radius: 10px  !important;
   border-bottom-left-radius: 10px !important;
   }
   .custom-template{    top: 53% !important;
   }
   .menu-item-has-children .dropdown-toggle{
   font-size:19px!important;
   font-family: 'Roboto'!important;
   }
   .first-position{
   top: 20px;
   }
   .round {
   width: 10px;
   height: 10px;
   border-radius: 50px;
   background: #1ed114;
   }
   /* .right-button {
   display: flex;
   justify-content: flex-end;
   padding-top:20px;
   color:white;
   } */
   /* .blue-box {
   width: 90px;
   background: #3663c8;
   border-radius: 4px;
   display: flex;
   justify-content: space-around;
   align-items: baseline;
   padding: 5px;
   } */
   .detail{
   color:black;
   }
   body{
   overflow-x: hidden;
   }
   .col-sm-12.card.mt-1{
   border:0px ;
   }
   .warehouse,.id,.type,.location{
   color:#2f58c9;
   }
   .card-horizontal {
   display: flex;
   flex: 1 1 auto;
   }
   .checked{
   content: "\f005";
   color: #3663c8;
   }
   .uncheked{
   -webkit-text-fill-color: white;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color:#3663c8;
   }

.search::placeholder{
     padding-left:20px !important;
     /* margin-left:25px !important; */
   }

/* .now{

background-color:#2f58c9;
   color:white;
   border:none;
   border-radius: 10px;
   padding:5px 25px;
} */
 
.search{
    background-image: url("pictures/search.png");
    background-repeat: no-repeat;
    height:30px;
    /* padding-left:40px; */
    background-position: left; 
    background-origin:content-box;
    padding:17px;padding-left:10px;width:300px;
    font-size:13px;
}

.spantag{
    position:absolute;
}
/* .search{
        padding:17px;padding-left:55px;width:300px;border:1px solid #f5f5f5;
        font-size:13px;color:gray;
        background-image:url('pictures/search.png');
        background-repeat:no-repeat;
        background-position:left center;
    } */

/* 
@media screen and (min-width: 760px){
    .book{
        flex-wrap:wrap;
    }

}  */
</style>

<link href="css/demo.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="row justify-content-end col-sm-9 pr-0">
                    <div class="form-inline  col-offset-sm-3 col-sm-9 row justify-content-end mb-3" style="display:absloute;">
                        <input type="text" placeholder="Name or Location"
                            class=" search form-control col-sm-7">&nbsp;&nbsp;&nbsp;
                            <div class="spantag">
                            <span><img src="pictures/search.png"></span>
                            </div>
                        <button type="button" class=" btn col-sm-3 py-2" value="Search">Search</button>
                    </div>
                </div>
   <div class = "col-9" >
      <div class="card">
         <div class="card-horizontal book">
            <div class="img-square-wrapper pt-4 pb-3 pl-3 align-self-right">
               <img src="pictures/img1.png" alt="image1" height="200px" width="200%">
            </div>
            <div class="card-body">
               <div class="row">
               <div class="col-sm-6 text-right">
                    
                    
                     
                  </div>
             
                  <div class="col-sm-6 text-right">
                  <button class=" btn "> Request Quote</button>
                     <button class=" btn ">
                     <i class="fa fa-circle now" style="color: #25d118;"></i>
                     Book Now
                     </button>
                   
                     
                  </div>
                 
                 
                  <div class="col-md-6">
                     <h6 class = "warehouse pt-3"><b>Warehouse Name</b></h6>
                     <p class = "pt-2" style="color: black;">UPS WORLDPORT</p>
                  </div>
                  <div class="col-md-6">
                     <h6 class = "location pt-3"><b>Location</b></h6>
                    <img src="pictures/location.png" alt="" height="15px">
                        <label>
                           <h5 class = "pt-2">Jordan</h5>
                        </label>
                     </i>
                  </div>
                  
                  <div class="col-md-6">
                     <h6 class = "type pt-4 "><b>Warehouse ID</b></h6>
                     <h5 class = "pt-2">558ac5</h5>
                  </div>
                  <div class="col-md-6">
                     <h6 class = "type pt-4"><b>Warehouse Type</b></h6>
                     <h5 class = "pt-2">Gold</h5>
                  </div>
               </div>
               <div class="col-md-12 text-right">
                  <span class="fa fa-star checked"></span>
                  <span class="fa fa-star checked"></span>
                  <span class="fa fa-star checked"></span>
                  <span class="fa fa-star checked"></span>
                  <span class="fa fa-star uncheked"></span>
               </div>
            </div>
         </div>
      </div>

<div class="card">
         <div class="card-horizontal">
            <div class="img-square-wrapper pt-3 pb-3 pl-3 align-self-right">
               <img src="pictures/img2.png" alt="image2" height="200px" width="200%">
            </div>
            <div class="card-body">
               <div class="row">
                  <div class="col-sm-12 text-right">
                     <button class=" btn ">
                     <i class="fa fa-circle" style="color: #25d118;"></i>
                     Book Now
                     </button>
                  </div>
                  <div class="col-md-6">
                     <h6 class = "warehouse"><b>Warehouse Name</b></h6>
                     <p class = "pt-2" style="color: black;">WALMART</p>
                  </div>
                  <div class="col-md-6">
                     <h6 class = "location"><b>Location</b></h6>
                     <img src="pictures/location.png" alt=""  height="15px">
                        <label>
                           <h5 class = "pt-2">Jordan</h5>
                        </label>
                     </i>
                  </div>
                  <div class="col-md-6">
                     <h6 class = "type pt-4"><b>Warehouse ID</b></h6>
                     <h5 class = "pt-2">5582d9</h5>
                  </div>
                  <div class="col-md-6">
                     <h6 class = "type pt-4"><b>Warehouse Type</b></h6>
                     <h5 class = "pt-2">Gold</h5>
                  </div>
               </div>
               <div class="col-md-12 text-right">
                  <span class="fa fa-star checked"></span>
                  <span class="fa fa-star checked"></span>
                  <span class="fa fa-star checked"></span>
                  <span class="fa fa-star checked"></span>
                  <span class="fa fa-star uncheked"></span>
               </div>
            </div>
         </div>
      </div>
      <div class="card">
         <div class="card-horizontal">
            <div class="img-square-wrapper pt-3 pb-3 pl-3 align-self-right">
               <img src="pictures/img3.png" alt="image3" height="200px" width="200%">
            </div>
            <div class="card-body">
               <div class="row">
                  <div class="col-sm-12 text-right">
                     <button class=" btn ">
                     <i class="fa fa-circle" style="color: #25d118;"></i>
                     Book Now
                     </button>
                  </div>
                  <div class="col-md-6">
                     <h6 class = "warehouse"><b>Warehouse Name</b></h6>
                     <p class = "pt-2" style="color: black;">AGARWAL PACKERS</p>
                  </div>
                  <div class="col-md-6">
                     <h6 class = "location"><b>Location</b></h6>
                     <img src="pictures/location.png" alt=""  height="15px">
                        <label>
                           <h5 class = "pt-2">Jordan</h5>
                        </label>
                     
                  </div>
                  <div class="col-md-6">
                     <h6 class = "type pt-4"><b>Warehouse ID</b></h6>
                     <h5 class = "pt-2">558fg6</h5>
                  </div>
                  <div class="col-md-6">
                     <h6 class = "type pt-4"><b>Warehouse Type</b></h6>
                     <h5 class = "pt-2">Gold</h5>
                  </div>
               </div>
               <div class="col-md-12 text-right">
                  <span class="fa fa-star checked"></span>
                  <span class="fa fa-star checked"></span>
                  <span class="fa fa-star checked"></span>
                  <span class="fa fa-star checked"></span>
                  <span class="fa fa-star uncheked"></span>
               </div>
            </div>
         </div>
      </div>
   </div>      
   
    <div class="custom-template col-sm-3 pr-0">
    <div class="custom-content">
        <nav class="navbar navbar-expand-sm navbar-default nav-side">
            <ul class="nav navbar-nav w-100">
                <li class="menu-item-has-children dropdown bg-list-color px-3 my-1 show" >
                <a href="#" class="dropdown-toggle text-primary" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">Storage Type</a>
                <ul class="sub-menu children dropdown-menu bg-list-color mb-3 pl-md-0 show" >
                    <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
                            </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
                            </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
                            </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)
                            </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
                            </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
                            </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
                            </label>
                            </div>
                        </div>
                        <a href="#collapse" class="nav-toggle pl-3 ml-1 text-primary f-13">View All</a>
                    </form>
                </ul>
                </li>
                <li class="menu-item-has-children dropdown bg-list-color px-3 my-1">
                <a href="#" class="dropdown-toggle text-primary" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">Category</a>
                <ul class="sub-menu children dropdown-menu bg-list-color 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">Option 1
                            </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">Option 2
                            </label>
                        </div>
                    </form>
                </ul>
                </li>
                <li class="menu-item-has-children dropdown bg-list-color px-3 my-1">
                <a href="#" class="dropdown-toggle text-primary" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">Services</a>
                <ul class="sub-menu children dropdown-menu bg-list-color mb-3 pl-md-0">
                    <form action="" class="font-small">
                        <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="option5">Option 1
                            </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="option6">Option 2
                            </label>
                        </div>
                    </form>
                </ul>
                </li>
            </ul>
        </nav>
    </div>
    <div class="custom-toggle d-md-none d-block">
        <i class="fa fa-bars mt-2 pt-1"></i>
    </div>
    </div>
</div>

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



<script>
   let $ =jQuery;
   // $(document).ready(function() {
   
   //     $('#example').DataTable({
   //        language: { search: '', searchPlaceholder: "Search",
//paginate: {previous: 'Prev',next:     'Next'}, "sLengthMenu": "Show Entries _MENU_" },
   //         "processing": true,
   //         "dataSrc": "",
   //         "sDom": 'Rfrtlip'
        
   //     });
   // });
   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');
              }
          });
      });
</script>