<?php

$zipErr="";
//error_reporting(E_ERROR);

if (!isset($_POST['zip_search'])){

}else if(trim($_POST['zip_search'])==""){
	$zipErr="Please enter a zip code!";
}else if (!preg_match("/^([0-9]{5})?$/i",trim($_POST['zip_search']))){
	$zipErr="Please enter a 5 digits valid zip code!";
}else{
$zip = trim($_POST['zip_search']);
$check=0;
$con = mysqli_connect("localhost","netvatise_btdt_postal_search","dge@$23f35!@","netvatise_btdt_postal_search");	
	
if ($con->connect_error) {
    die("Connection failed: " . $con->connect_error);
} 

$sql = "SELECT DISTINCT * FROM postalsearch2 p,price pr, dumpster d WHERE postal= '".$zip."' AND p.group_id=d.group_id AND d.price_id=pr.price_id";

$result = $con->query($sql);

if($row=$result->fetch_assoc()){
	$price1=$row['price1'];
	$price2=$row['price2'];
	$price3=$row['price3'];
	$price4=$row['price4'];
	$price5=$row['price5'];
	$size1=$row['size1'];
	$size2=$row['size2'];
	$size3=$row['size3'];
	$size4=$row['size4'];
	$size5=$row['size5'];
	$check=1;
}else if($zip!=""){
	session_start();
	$_SESSION['display'] = 1; //display heading on the request a quote page
	header('Location:request-a-quote.php');
}

}
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Bin There Dump That Woodbridge</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="css/mdb.min.css" rel="stylesheet">
    <!-- Your custom styles (optional) -->
    <link href="css/style.css" rel="stylesheet">
	<!-- Magnific Popup core CSS file -->
	<link rel="stylesheet" href="css/popup/magnific-popup.css">

    <style>

    .aligner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.aligner-item {
  max-width: 50%;
  z-index: 50;
}
.chevy{position:absolute;right:10px;top:45%}
        .righttab{    
          background: green;
    -webkit-transition: width 0.5s; /* For Safari 3.1 to 6.0 */
    transition: width 0.5s;
width:30px;
height:100%;
position:absolute;
right:-2px;
margin-right:1rem;
  }
/* Required for full background image */

.righttab:hover {
    width: 100%;
    height: 100%;

}

#section1:hover, #section2:hover, #section3:hover, #section4:hover, #section5:hover{
	cursor: pointer;
}

#section1:hover .righttab, #section2:hover .righttab, #section3:hover .righttab, #section4:hover .righttab, #section5:hover .righttab {
    width: 100%;
    height: 100%;
}


.faded{height:100%;width:100%;}
.hero {
  height: 800px;
}


        .wow {
            visibility: hidden;
        }

.navbar.navbar-dark .breadcrumb .nav-item.active>.nav-link, .navbar.navbar-dark .navbar-nav .nav-item.active>.nav-link{background-color:#9fcf67;color:#000;}
.flinks{float:left;padding-right:20px;}

.rgba-gradient {
  background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(72, 15, 144, 0.5) 100%);
  background: -webkit-gradient(linear, 45deg, from(rgba(0, 0, 0, 0.8), rgba(72, 15, 144, 0.5) 100%)));
  background: linear-gradient(to 45deg, rgba(0, 0, 0, 0.8), rgba(72, 15, 144, 0.5) 100%);
}

.card {
  background-color: rgba(228, 228, 228, 0.6);
}

.md-form label {
  color: #ffffff;
}

h6 {
  line-height: 1.7;
}
        
        
                 /* Carousel*/
    .carousel,
    .carousel-item,
    .carousel-item.active {
      height: 100%;
    }
    .carousel-inner {
      height: 100%;
    }
    .carousel-item:nth-child(1) {
      background-image: url("img/bg.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
    }
    .carousel-item:nth-child(2) {
      background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/30.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
    }
    .carousel-item:nth-child(3) {
      background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img%20(10).jpg");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
    }

.fixed-header {
  position: fixed;
  top:0; left:0;
  width: 100%; 
}
.headInfo{float:right;text-align:right}
@media (max-width: 500px){
.headInfo{float:none;text-align:center;display:block;width:100%;}
}
@media (max-width:767px){
 .hero {height:1200px;}
 .col {flex-basis:100%;margin-bottom:20px;}
 .flex-center{display:block;}
 .headerLogo{margin-left:21%}
}

body {
    transition: background-color .5s;
}
/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Stay on top */
    top: 0; /* Stay at the top */
    right: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
  </style>

<script>
function myFunction() {
        $.magnificPopup.open({

            items: {
                src: 'zipsearch.php?err=<?php echo $zipErr?>'
            },
            type: 'ajax',
			closeOnContentClick: false,
        	closeOnBgClick:false,
			//showCloseBtn:false,
			enableEscapeKey:false


          // You may add options here, they're exactly the same as for $.fn.magnificPopup call
          // Note that some settings that rely on click event (like disableOn or midClick) will not work here
        }, 0);
    }
</script>

<!-- SMS -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- End SMS -->
</head>
<?php
if($check==1){
?>
<body>
<?php	
}else{
?>
<body onload='myFunction()'>
<?php
}
?>
<!--Main Navigation -->
    
    <?php include('includes/_header.php'); ?>

     <div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="pl-4">
   <h4 class="green-text font-weight-bold"><?php if($check<1){echo 4;}else{ echo $size1;} ?> Yard Dumpster <?php if($check==1){ echo '$'.$price1." Base Price";} ?> </h4>
            <!--Text--><br />
            <p class="white-text">
                9' long, 6' wide, 2' high</p>
            <ul class="white-text">
				<h5>What's included:</h5>
              <li>7 Day Dumpster Rental</li>
              <li>1 Ton of Disposal</li>
            </ul><br />
            <ul class="white-text">
				<h5>What's extra:</h5>
              <li>$10/Additional day usage</li>
              <li>$100/Additional tonnage</li>
            </ul>
            </div>
  <a href="checkout.php?zip=<?php echo $zip;?>&select=1">Order Now</a>

</div>

         <div id="mySidenav2" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="pl-4">
   <h4 class="green-text font-weight-bold"><?php if($check<1){echo 9;}else{ echo $size2;} ?> Yard Dumpster <?php if($check==1){ echo '$'.$price2." Base Price";} ?></h4>
            <!--Text-->
            <p class="white-text">
                9' long, 6' wide, 2' high</p>
            <ul class="white-text">
				<h5>What's included:</h5>
              <li>7 Day Dumpster Rental</li>
              <li>1 Ton of Disposal</li>
            </ul><br />
            <ul class="white-text">
				<h5>What's extra:</h5>
              <li>$10/Additional day usage</li>
              <li>$100/Additional tonnage</li>
            </ul>
            </div>
  <a href="checkout.php?zip=<?php echo $zip;?>&select=2">Order Now</a>

</div> 

         <div id="mySidenav3" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="pl-4">
   <h4 class="green-text font-weight-bold"><?php if($check<1){echo 12;}else{ echo $size3;} ?> Yard Dumpster <?php if($check==1){ echo '$'.$price3." Base Price";} ?></h4>
            <!--Text-->
            <p class="white-text">12' long, 7' wide, 4' high</p>
            <ul class="white-text">
				<h5>What's included:</h5>
              <li>7 Day Dumpster Rental</li>
              <li>1 Ton of Disposal</li>
            </ul><br />
            <ul class="white-text">
				<h5>What's extra:</h5>
              <li>$10/Additional day usage</li>
              <li>$100/Additional tonnage</li>
            </ul>
            </div>
  <a href="checkout.php?zip=<?php echo $zip;?>&select=3">Order Now</a>

</div> 

         <div id="mySidenav4" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="pl-4">
            <h4 class="green-text font-weight-bold"><?php if($check<1){echo 14;}else{ echo $size4;} ?> Yard Dumpster <?php if($check==1){ echo '$'.$price4." Base Price";} ?></h4>
            <!--Text-->
            <p class="white-text"> 11' long, 8' wide, 4.5' high</p>
            <ul class="white-text">
				<h5>What's included:</h5>
              <li>7 Day Dumpster Rental</li>
              <li>1 Ton of Disposal</li>
            </ul><br />
            <ul class="white-text">
				<h5>What's extra:</h5>
              <li>$10/Additional day usage</li>
              <li>$100/Additional tonnage</li>
            </ul>
            </div>
  <a href="checkout.php?zip=<?php echo $zip;?>&select=4">Order Now</a>

</div> 

         <div id="mySidenav5" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="pl-4">
            <h4 class="green-text font-weight-bold"><?php if($check<1){echo 20;}else{ echo $size5;} ?> Yard Dumpster <?php if($check==1){ echo '$'.$price5." Base Price";} ?></h4>
            <!--Text-->
            <p class="white-text">11' long, 8' wide, 6' high</p>
            <ul class="white-text">
				<h5>What's included:</h5>
              <li>7 Day Dumpster Rental</li>
              <li>1 Ton of Disposal</li>
            </ul><br />
            <ul class="white-text">
				<h5>What's extra:</h5>
              <li>$10/Additional day usage</li>
              <li>$100/Additional tonnage</li>
            </ul>
            </div>
  <a href="checkout.php?zip=<?php echo $zip;?>&select=5">Order Now</a>

</div> 
    
 <div class="container mt-3">
	<?php if($check<1){ ?>
	<h2><a href="order.php">Please Enter Zip Code For Dumpster Rental Prices</a></h2><br />
	<?php }?>
       <!--Grid row-->
      <span onclick="openNav()">
       <div id="section1" style="border:1px solid #ccc">
            <div class="row">

                <!--Grid column-->
                <div class="col-lg-4 col-xl-4">
                    <!--Featured image-->
                    <div class="view overlay" >
                        <img src="img/4-yard-fancy.jpg" class="img-fluid" alt="">
                        <a>
                            <div class="mask"></div>
                        </a>
                    </div>
                </div>
                <!--Grid column-->
              
                
                <!--Grid column-->
                <div class="col-lg-6 col-xl-6 px-4 py-4">
                    <!--Excerpt-->
              
                    <h3 class="mb-4 font-weight-bold green-text">
                        <?php if($check<1){echo 4;}else{ echo $size1;} ?> Yard Dumpster
                    </h3>
                    <strong>9' long, 6' wide, 2' high</strong>
                      <p>Construction / Landscaping Debris, Topsoil, Gravel, Heavy items like bricks or concrete, Small home cleanout jobs, Useful with small driveways</p>
                   
                </div>
             
                <div class="col-lg-2 col-xl-2 aligner">
<div class="righttab aligner"><div class="aligner-item"><i class="fa fa-chevron-right white-text chevy" aria-hidden="true"></i></div></div>
<div class="aligner-item">
  <h3 class="font-weight-bold">
                    <?php if($check==1){ echo '$'.$price1; ?> <span style="font-size:1rem;font-weight:500;">Base Price</span><?php } ?></h3>
                    
                  </div>
                </div>
                <!--Grid column-->
 </div>
            </div></span>
            <!--Grid row-->
            
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>




   

  <span onclick="openNav2()">
       <!--Grid row-->
       <div id="section2" style="border:1px solid #ccc" class="mt-4">
            <div class="row">

                <!--Grid column-->
                <div class="col-lg-4 col-xl-4">
                    <!--Featured image-->
                    <div class="view overlay">
                        <img src="img/9-yard-fancy.jpg" class="img-fluid" alt="">
                        <a>
                            <div class="mask"></div>
                        </a>
                    </div>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-lg-6 col-xl-6 pt-4">
                    <!--Excerpt-->
              
                    <h3 class="mb-4 font-weight-bold green-text">
                        <?php if($check<1){echo 9;}else{ echo $size2;} ?> Yard Dumpster
                    </h3>
                    <strong>9' long, 7' wide, 4' high</strong>
                      <p>Construction / Landscaping Debris, Household Debris, Roof Shingles, Small home cleanout jobs</p>
                   
                </div>
             
                <div class="col-lg-2 col-xl-2 aligner">
<div class="righttab aligner"><div class="aligner-item"><i class="fa fa-chevron-right white-text chevy" aria-hidden="true"></i></div></div>
<div class="aligner-item">
  <h3 class="font-weight-bold">
                    <?php if($check==1){ echo '$'.$price2; ?> <span style="font-size:1rem;font-weight:500;">Base Price</span><?php } ?></h3>
                    
                  </div>
                </div>
                <!--Grid column-->
 </div>
            </div></span>
            <!--Grid row-->




  <span onclick="openNav3()">
       <!--Grid row-->
       <div id="section3" style="border:1px solid #ccc" class="mt-4">
            <div class="row">

                <!--Grid column-->
                <div class="col-lg-4 col-xl-4">
                    <!--Featured image-->
                    <div class="view overlay">
                        <img src="img/12-yard-fancy.jpg" class="img-fluid" alt="">
                        <a>
                            <div class="mask"></div>
                        </a>
                    </div>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-lg-6 col-xl-6 pt-4">
                    <!--Excerpt-->
              
                    <h3 class="mb-4 font-weight-bold green-text">
                        <?php if($check<1){echo 12;}else{ echo $size3;} ?> Yard Dumpster
                    </h3>
                    <strong>12' long, 7' wide, 4' high</strong>
                      <p>Construction, Household Debris, Furniture, Medium to large home, cleanout jobs, Flood Restoration, Fire Restoration</p>
                   
                </div>
             
                <div class="col-lg-2 col-xl-2 aligner">
<div class="righttab aligner"><div class="aligner-item"><i class="fa fa-chevron-right white-text chevy" aria-hidden="true"></i></div></div>
<div class="aligner-item">
  <h3 class="font-weight-bold">
                    <?php if($check==1){ echo '$'.$price3; ?> <span style="font-size:1rem;font-weight:500;">Base Price</span><?php } ?></h3>
                    
                  </div>
                </div>
                <!--Grid column-->
 </div>
            </div></span>
            <!--Grid row-->






  <span onclick="openNav4()">
       <!--Grid row-->
       <div id="section4" style="border:1px solid #ccc" class="mt-4">
            <div class="row">

                <!--Grid column-->
                <div class="col-lg-4 col-xl-4">
                    <!--Featured image-->
                    <div class="view overlay">
                        <img src="img/14-yard-fancy.jpg" class="img-fluid" alt="">
                        <a>
                            <div class="mask"></div>
                        </a>
                    </div>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-lg-6 col-xl-6 pt-4">
                    <!--Excerpt-->
              
                    <h3 class="mb-4 font-weight-bold green-text">
                        <?php if($check<1){echo 14;}else{ echo $size4;} ?> Yard Dumpster
                    </h3>
                    <strong>11' long, 8' wide, 4.5' high</strong>
                      <p>Construction, Household Debris, Furniture, Medium to large home, cleanout jobs, Flood Restoration, Fire Restoration</p>
                   
                </div>
             
                <div class="col-lg-2 col-xl-2 aligner">
<div class="righttab aligner"><div class="aligner-item"><i class="fa fa-chevron-right white-text chevy" aria-hidden="true"></i></div></div>
<div class="aligner-item">
  <h3 class="font-weight-bold">
                    <?php if($check==1){ echo '$'.$price4; ?> <span style="font-size:1rem;font-weight:500;">Base Price</span><?php } ?></h3>
                    
                  </div>
                </div>
                <!--Grid column-->
 </div>
            </div></span>
            <!--Grid row-->




  <span onclick="openNav5()">
    <!--Grid row-->
       <div id="section5" style="border:1px solid #ccc" class="mt-4">
            <div class="row">

                <!--Grid column-->
                <div class="col-lg-4 col-xl-4">
                    <!--Featured image-->
                    <div class="view overlay">
                        <img src="img/20-yard-fancy.jpg" class="img-fluid" alt="">
                        <a>
                            <div class="mask"></div>
                        </a>
                    </div>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-lg-6 col-xl-6 pt-4">
                    <!--Excerpt-->
              
                    <h3 class="mb-4 font-weight-bold green-text">
                        <?php if($check<1){echo 20;}else{ echo $size5;} ?> Yard Dumpster
                    </h3>
                    <strong>11' long, 8' wide, 6' high</strong>
                      <p>Construction, Household Debris, Furniture, Medium to large home, cleanout jobs, Flood Restoration, Fire Restoration</p>
                   
                </div>
             
                <div class="col-lg-2 col-xl-2 aligner">
<div class="righttab aligner"><div class="aligner-item"><i class="fa fa-chevron-right white-text chevy" aria-hidden="true"></i></div></div>
<div class="aligner-item">
  <h3 class="font-weight-bold">
                    <?php if($check==1){ echo '$'.$price5; ?> <span style="font-size:1rem;font-weight:500;">Base Price</span><?php } ?></h3>
                    
                  </div>
                </div>
                <!--Grid column-->
 </div>
            </div></span>
            <!--Grid row-->











     </div>
        
    <!-- end container fluid -->

<?php include('includes/_footer.php'); ?>

<script>
/* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */
function openNav() {
    document.getElementById("mySidenav").style.width = "380px";
        document.getElementById("mySidenav2").style.width = "0";
            document.getElementById("mySidenav3").style.width = "0";
                document.getElementById("mySidenav4").style.width = "0";
                    document.getElementById("mySidenav5").style.width = "0";
    document.getElementById("main").style.marginLeft = "380px";
    document.getElementById("faded").style.backgroundColor = "rgba(0,0,0,0.4)";
}

function openNav2() {
    document.getElementById("mySidenav2").style.width = "380px";
        document.getElementById("mySidenav").style.width = "0";
            document.getElementById("mySidenav3").style.width = "0";
                document.getElementById("mySidenav4").style.width = "0";
                    document.getElementById("mySidenav5").style.width = "0";
    document.getElementById("main").style.marginLeft = "380px";
    document.getElementById("faded").style.backgroundColor = "rgba(0,0,0,0.4)";
}

function openNav3() {
    document.getElementById("mySidenav3").style.width = "380px";
        document.getElementById("mySidenav2").style.width = "0";
            document.getElementById("mySidenav").style.width = "0";
                document.getElementById("mySidenav4").style.width = "0";
                    document.getElementById("mySidenav5").style.width = "0";
    document.getElementById("main").style.marginLeft = "380px";
    document.getElementById("faded").style.backgroundColor = "rgba(0,0,0,0.4)";
}

function openNav4() {
    document.getElementById("mySidenav4").style.width = "380px";
       document.getElementById("mySidenav2").style.width = "0";
            document.getElementById("mySidenav3").style.width = "0";
                document.getElementById("mySidenav").style.width = "0";
                    document.getElementById("mySidenav5").style.width = "0";
    document.getElementById("main").style.marginLeft = "380px";
    document.getElementById("faded").style.backgroundColor = "rgba(0,0,0,0.4)";
}

function openNav5() {
    document.getElementById("mySidenav5").style.width = "380px";
        document.getElementById("mySidenav2").style.width = "0";
            document.getElementById("mySidenav3").style.width = "0";
                document.getElementById("mySidenav4").style.width = "0";
                    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft = "380px";
    document.getElementById("faded").style.backgroundColor = "rgba(0,0,0,0.4)";
}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("mySidenav2").style.width = "0";
    document.getElementById("mySidenav3").style.width = "0";
    document.getElementById("mySidenav4").style.width = "0";
    document.getElementById("mySidenav5").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
    document.getElementById("faded").style.backgroundColor = "white";
}
</script>

<!-- Magnific Popup core JS file -->
<script src="js/popup/jquery.magnific-popup.js"></script>

</body>

</html>