<?php session_start(); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 

<html lang="en">

<head>
    <title>Hotel Management System- Booking</title>
    <link rel="icon" href="images/logoFooter.jpg" />
    <!-- Basic Page Needs -->
    <meta charset="utf-8">
    
    <!-- Page Descruiptipn -->
    <meta name="description" content="Hotel Management System" />
    
    <!-- Mobile Specific Metas -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="viewport" content="width=device-width, initial-scale=0.41, maximum-scale=1" />

    <!-- CSSs -->

    <!-- Bootstrap -->
    <link href="venders/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <!-- Font Awesome -->
    <link href="venders/fontawesome/css/all.min.css" rel="stylesheet" type="text/css"/>
    <link href="venders/fontawesome/css/fontawesome.min.css" rel="stylesheet" type="text/css"/>

    <!-- Owl Carousel -->
    <link href="venders/owl-carousel/css/owl.carousel.min.css" rel="stylesheet" type="text/css"/>
    <link href="venders/owl-carousel/css/owl.theme.default.min.css" rel="stylesheet" type="text/css"/>
    <!-- Wow Animate -->
    <link href="venders/wow/css/animate.css" rel="stylesheet" type="text/css"/>
    <!-- Bootstrap Date Time Picker -->
    <link href="venders/bootstrap-datetimepicker/css/bootstrap-datepicker.css" rel="stylesheet" type="text/css"/>
    <link href="venders/bootstrap-datetimepicker/css/jquery.timepicker.css" rel="stylesheet" type="text/css"/>
    <!-- Page Style -->
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
        


</head>

<body>
    
    <!-- Top Info Bar -->
    <div class="container-fluid elegant-color-bg pt-3 pb-3">
        <div class="row clearfix">
            <div class="col-md-4 clearfix">
                <div class="icon-round float-left mr-2 mb-2">
                    <i class="fa fa-location-arrow flex-icon"></i>
                </div>
                <div class="text-white" style="line-height: 1px;">
                    <h6>Address: </h6>
                    <p>Home, Locality, Street, City, State, Pin, Nation</p>
                </div>
            </div>
            <div class="col-md-3 clearfix">
                <div class="icon-round float-left mr-2 mb-2">
                    <i class="fa fa-envelope flex-icon"></i>
                </div>
                <div class="text-white" style="line-height: 1px;">
                    <h6>Email: </h6>
                    <p>comapnyid@company.com</p>
                </div>
            </div>
            <div class="col-md-3 clearfix">
                <div class="icon-round float-left mr-2 mb-2">
                    <i class="fa fa-phone-alt flex-icon"></i>
                </div>
                <div class="text-white" style="line-height: 1px;">
                    <h6>Contact: </h6>
                    <p><a href="tel:0000000000" class="text-white">+00-0000000000</a></p>
                </div>
            </div>
            <div class="col-md-2 clearfix">
                <a href="#" class="icon-link mr-2 mb-2"><i class="fab fa-facebook-f icon-link-flex"></i></a>
                <a href="#" class="icon-link mr-2 mb-2"><i class="fab fa-instagram icon-link-flex"></i></a>
                <a href="#" class="icon-link mr-2 mb-2"><i class="fab fa-youtube icon-link-flex"></i></a>
            </div>
        </div>
    </div>
    <!-- Top Info Bar End -->
    <!-- Navigation Menu -->
    <nav class="navbar navbar-expand-lg" id="">
        <div class="container">
            <a class="navbar-brand" href="index.html">
                <span class="text-black"><strong>Hot</strong></span><span class="green-accent"><strong>el</strong></span>
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-container" aria-controls="navbar-container" aria-expanded="false" aria-label="Toggle navigation">
                <span class="fa fa-bars"></span> Menu
            </button>
            <div class="collapse navbar-collapse" id="navbar-container">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item"><a href="index.html" class="nav-link">Home</a></li>
                    <li class="nav-item"><a href="about.html" class="nav-link">About</a></li>
                    <li class="nav-item"><a href="rooms.html" class="nav-link">Rooms</a></li>
                    <li class="nav-item"><a href="services.html" class="nav-link">Services</a></li>
                    <li class="nav-item"><a href="book-room.php" class="nav-link nav-link-active">Booking</a></li>
                    <li class="nav-item"><a href="track-booking.html" class="nav-link">Track Booking</a></li>
                    <li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
                </ul>
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item"><a href="login.php" class="nav-link"><i class="fa fa-user-circle fa-fw"></i> Login</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- Navigation Menu End -->
    
    <!-- Breadcrumb -->
    <section class="breadcrumb-section">
        <div class="overlay"></div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12 breadcrumb-col">
                    <div class="breadcrumb-wrapper">
                        <ul class="list-inline">
                            <li class="list-inline-item"><a href="index.html">Home</a></li>
                            <li class="list-inline-item">/</li>
                            <li class="list-inline-item">Booking</li>
                        </ul>
                        <h1>Book You Room</h1>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Breadcrumb End -->
    
    <!-- About Us -->
    <section class="section-start">
        <div class="container">
            <div class="row">
                <div class="col-md-12 section-col">
                    <?php
                        if(isset($_SESSION['bookStatus'])){
                            if($_SESSION['bookStatus'] == "recieved"){
                                echo '<div class="alert alert-success" role="alert">Your booking is recieved. It is under process. Track your bookin via track id: <strong>'.$_SESSION['trackId'].'</strong></div>';
                            }else{
                                echo '<div class="alert alert-danger" role="alert">Your booking is denied. Please Try Again.</div>';
                            }
                            session_destroy();
                        }
                    ?>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 section-col">
                    <h1>Book Your Room</h1>
                    <hr class="green-accent-bg"/>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 section-col">
                    <p><strong>Note: </strong> <span class="text-danger">Red * </span>represents important fields. <span class="text-success">Green * </span>represent valid fields.</p>
                </div>
            </div>
            <form method="post" action="scripts/submit-booking-script.php" autocomplete="off">
            <div class="row">
                <div class="col-md-6 section-col wow slideInRight" data-wow-duration=".3" data-wow-delay=".1s">
                    <div class="section-wrapper">
                        <div class="form-group">
                            <label for="customerName" class="form-control-label">Full Name</label> <span id="nameWarning" class="text-danger"><strong>*</strong></span>
                            <input type="text" class="form-control" placeholder="Enter Your Full Name" id="customerName" name="customerName" onchange="checkNameScript();">
                        </div>
                        <div class="form-group">
                            <label for="customerEmail" class="form-control-label">Email Address</label> <span id="emailwarning" class="text-danger"><strong>*</strong></span>
                            <input type="email" class="form-control" placeholder="Enter Your Email Address" id="customerEmail" name="customerEmail" onchange="checkEmailScript();">
                        </div>
                        <div class="form-group">
                            <label for="customerContact" class="form-control-label">Contact Number</label> <span id="contactWarning" class="text-danger"><strong>*</strong></span>
                            <input type="number" class="form-control" placeholder="Enter Your Contact Number" id="customerContact" name="customerContact" onchange="checkContactScript();">
                        </div>
                        <div class="form-group">
                            <label for="customerAddress" class="form-control-label">Permanent Address</label> <span id="addressWarning" class="text-danger"><strong>*</strong></span>
                            <textarea class="form-control" placeholder="Enter Your Permanent Address" id="customerAddress" name="customerAddress" onchange="checkAddressScript();"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="customerAdhar" class="form-control-label">Adhar Number</label> <span id="adharWarning" class="text-danger"><strong>*</strong></span>
                            <input type="number" class="form-control" placeholder="Enter Your Adhar Card Number" id="customerAdhar" name="customerAdhar" onchange="checkAdharScript();">
                        </div>
                        <div class="form-group clearfix">
                            <div class="float-left">
                                <label for="checkInDate" class="form-control-label">Check In Date</label> <span id="checkInDateWarning" class="text-danger"><strong>*</strong></span>
                                <input type="text" class="form-control" placeholder="Check In Date" id="checkInDate" name="checkInDate" onchange="checkInDateScript();">
                            </div>
                            <div class="float-right">
                                <label for="checkInTime" class="form-control-label">Check In Time</label> <span id="checkInTimeWarning" class="text-danger"><strong>*</strong></span>
                                <input type="text" class="form-control" placeholder="Check In Time" id="checkInTime" name="checkInTime" onchange="checkInTimeScript();">
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <div class="float-left">
                                <label for="checkOutDate" class="form-control-label">Check Out Date</label> <span id="checkOutDateWarning" class="text-danger"><strong>*</strong></span>
                                <input type="text" class="form-control" placeholder="Check In Date" id="checkOutDate" name="checkOutDate" onchange="checkOutDateScript();">
                            </div>
                            <div class="float-right">
                                <label for="checkOutTime" class="form-control-label">Check Out Time</label>  <span id="checkOutTimeWarning" class="text-danger"><strong>*</strong></span>
                                <input type="text" class="form-control" placeholder="Check In Time" id="checkOutTime" name="checkOutTime" onchange="checkOutTimeScript();">
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <div class="float-left">
                                <label for="totalAdults" class="form-control-label">Adults</label> <span id="adultWarning" class="text-danger"><strong>*</strong></span>
                                <select class="form-control" id="totalAdults" name="totalAdults" onchange="checkAdultScript();">
                                    <option value="a">Number of Adults</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select>
                            </div>
                            <div class="float-right">
                                <label for="totalChildren" class="form-control-label">Children</label> <span id="childrenWarning" class="text-danger"><strong>*</strong></span>
                                <select class="form-control" id="totalChildren" name="totalChildren" onchange="checkChildrenScript();">
                                    <option value="c">Number of Children</option>
                                    <option value="0">0</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="roomType" class="form-control-label">Room Type</label> <span id="roomTypeWarning" class="text-danger"><strong>*</strong></span>
                            <select class="form-control" id="roomType" name="roomType" onchange="checkRoomTypeScript();">
                                    <option value="s">Select Room Type</option>
                                    <option value="suite">Suite Room</option>
                                    <option value="standard">Standard Room</option>
                                    <option value="family">Family Room</option>
                                    <option value="premium">Premium Room</option>
                                    <option value="deluxe">Deluxe Room</option>
                                    <option value="superDeluxe">Super Deluxe Room</option>
                                </select>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-primary" name="previewButton" id="previewButton" onclick="previewButtonScript();">Preview</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 section-col wow zoomIn" data-wow-duration=".3" data-wow-delay=".1s">
                    <div class="section-wrapper">
                        <img src="images/about/about.jpg" alt="About Us Image" class="img-fluid rounded w-100"/>
                        <div class="dis-none mt-2 pt-2" id="previewBlock">
                            <h3>Booking Preview</h3>
                            <hr class="green-accent-bg"/>
                            <p><strong>Name: </strong><span id="namePreview"></span></p>
                            <p><strong>Email: </strong><span id="emailPreview"></span></p>
                            <p><strong>Contact: </strong><span id="contactPreview"></span></p>
                            <p><strong>Address: </strong><span id="addressPreview"></span></p>
                            <p><strong>Adhar Card Number: </strong><span id="adharPreview"></span></p>
                            <p><strong>Check In: </strong><span id="checkInDatePreview"></span> at <span id="checkInTimePreview"></span></p>
                            <p><strong>Check Out: </strong><span id="checkOutDatePreview"></span> at <span id="checkOutTimePreview"></span></p>
                            <p>
                                <strong>Adults: </strong><span id="adultsPreview"></span>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <strong>Children: </strong><span id="childrenPreview"></span></p>
                            <p><strong>Room Type: </strong><span id="roomTypePreview"></span></p>
                            <button type="button" class="btn btn-success" onclick="alert('Booking Submitted Successfully');">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
            </form>
        </div>
    </section>
    <!-- About Us End -->
    
    <!-- Footer -->
    <footer class="footer-section">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-4 footer">
                    <div class="footer-wrap">
                        <h3>Hot<span class="green-accent">el</span></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inci done idunt ut labore et dolore magna aliqua.</p>
                        <a href="about.html" class="footer-link">Know More</a>
                    </div>
                </div>
                <div class="col-md-4 footer">
                    <div class="footer-wrap text-center">
                        <h3>Links</h3>
                        <ul class="list-unstyled">
                            <li><a href="home.html" class="footer-list-link">Home</a></li>
                            <li><a href="about.html" class="footer-list-link">About</a></li>
                            <li><a href="rooms.html" class="footer-list-link">Rooms</a></li>
                            <li><a href="services.html" class="footer-list-link">Services</a></li>
                            <li><a href="book-room.php" class="footer-list-link">Booking</a></li>
                            <li><a href="track-booking.html" class="footer-list-link">Track Booking</a></li>
                            <li><a href="contact.html" class="footer-list-link">Contact</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4 footer">
                    <div class="footer-wrap">
                        <h3>Contact Us</h3>
                        <p><strong>Address: </strong>Home, Locality, Street, City, State, Pin, Nation</p>
                        <p><strong>Contact: </strong>+00-0000000000</p>
                        <p><strong>Email: </strong>comapnyid@company.com</p>
                        <p>
                            <a href="#" class="footer-icon wow fadeInUp" data-wow-duration=".3" data-wow-delay=".1s">
                                <i class="fab fa-facebook-f fa-fw footer-icon-flex"></i>
                            </a>
                            <a href="#" class="footer-icon wow fadeInUp" data-wow-duration=".3" data-wow-delay=".3s">
                                <i class="fab fa-instagram fa-fw footer-icon-flex"></i>
                            </a>
                            <a href="#" class="footer-icon wow fadeInUp" data-wow-duration=".3" data-wow-delay=".5s">
                                <i class="fab fa-youtube fa-fw footer-icon-flex"></i>
                            </a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 copyright">
                    <p class="copyright-flex">Copyright <i class="fa fa-copyright fa-fw"></i> Hotel | Designed & Developed by <a href="https://www.lynxsia.com" class="footer-link"><em>Lynxsia</em> IT Solutions</a></p>
                </div>
            </div>
        </div>
    </footer>
    <!-- Footer End -->
    
    <!-- Back To Top Button -->
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <button onclick="topFunction()" id="backToTop"><i class="fa fa-arrow-up"></i></button>
            </div>
        </div>        
    </div>
    <!-- Back To Top Button End -->
    
    
    
    <!-- Javascript Files
	================================================== -->

    <!-- initialize jQuery Library -->
    <script src="venders/jquery/jquery.js" type="text/javascript"></script>
    <script src="venders/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="venders/jquery/jquery.easing.1.3.js" type="text/javascript"></script>
    <!-- Bootstrap jQuery -->
    <script src="venders/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- FontAwesome jQuery -->
    <script src="venders/fontawesome/js/all.min.js" type="text/javascript"></script>
    <script src="venders/fontawesome/js/fontawesome.min.js" type="text/javascript"></script>
    <!-- Owl Carousel -->
    <script src="venders/owl-carousel/js/owl.carousel.min.js" type="text/javascript"></script>
    <!-- Wow Animate -->
    <script src="venders/wow/js/jquery.wow.min.js" type="text/javascript"></script>
    <script src="venders/wow/js/wow.min.js" type="text/javascript"></script>
    <!-- Bootstrap Date Time Picker -->
    <script src="venders/bootstrap-datetimepicker/js/bootstrap-datepicker.js" type="text/javascript"></script>
    <script src="venders/bootstrap-datetimepicker/js/jquery.timepicker.min.js" type="text/javascript"></script>
    <!-- Page Script -->
    <script src="js/script.js" type="text/javascript"></script>
    <!-- Form Validation -->
    <script src="js/form-validation.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        $('#checkInDate').datepicker({
	  'format': 'dd-mm-yyyy',
	  'autoclose': true
	});
        $('#checkInTime').timepicker();
        
        $('#checkOutDate').datepicker({
	  'format': 'dd-mm-yyyy',
	  'autoclose': true
	});
        $('#checkOutTime').timepicker();
    </script>


                	
</body>
</html>