<?php
    session_start();
?>
<!DOCTYPE html>
<html>
    <head>
        <?php include("library/head.php");?>
        <title>Waiter Login | <?php echo $_SESSION["systemName"]; ?></title>
        <style>
            .logo-section {
                width: 75%;
                margin-top: -50px;
                background: cyan;
                border-radius: 20px;
                position: relative;
                left: 12%;
            }
        </style>
    </head>
    <body>
        <div class="container-fluid waiter-login-cover">
            <div class="row p-5">
                <div class="col-md-12">
                    <div class="row pt-5 pb-3 pl-3 pr-3">
                        <div class="col-md-7 text-center pr-5 border-right border-white">
                            <div class="row">
                                <div class="col-md-12 mt-3 mb-5">
                                    <img style="filter: brightness(0) invert(1);" src="img/african-logo.png"/>
                                    <h1 class="text-white mt-5">African Daafi & Pizza</h1>
                                </div>
                                
                                <div class="col-md-12">
                                    <div class="row mt-1">
                                        <div class="col-md-1 p-1">
                                            <img class="img-fluid img-thumbnail" src="img/products/african special.png" width="100%" />
                                        </div>
                                        <div class="col-md-1 p-1">
                                            <img class="img-fluid img-thumbnail" src="img/products/aliija.png" width="100%" />
                                        </div>
                                        <div class="col-md-1 p-1">
                                            <img class="img-fluid img-thumbnail" src="img/products/baycenat.png" width="100%" />
                                        </div>
                                        <div class="col-md-1 p-1">
                                            <img class="img-fluid img-thumbnail" src="img/products/firfir.png" width="100%" />
                                        </div>
                                        <div class="col-md-1 p-1">
                                            <img class="img-fluid img-thumbnail" src="img/products/full chicken.png" width="100%" />
                                        </div>
                                        <div class="col-md-1 p-1">
                                            <img class="img-fluid img-thumbnail" src="img/products/IMG_7185.png" width="100%" />
                                        </div>
                                        <div class="col-md-1 p-1">
                                            <img class="img-fluid img-thumbnail" src="img/products/IMG_7225.png" width="100%" />
                                        </div>
                                        <div class="col-md-1 p-1">
                                            <img class="img-fluid img-thumbnail" src="img/products/IMG_8148.png" width="100%" />
                                        </div>
                                        <div class="col-md-1 p-1">
                                            <img class="img-fluid img-thumbnail" src="img/products/IMG_E7205.png" width="100%" />
                                        </div>
                                        <div class="col-md-1 p-1">
                                            <img class="img-fluid img-thumbnail" src="img/products/IMG_E8066.png" width="100%" />
                                        </div>
                                        <div class="col-md-1 p-1">
                                            <img class="img-fluid img-thumbnail" src="img/products/IMG_E8068.png" width="100%" />
                                        </div>
                                        <div class="col-md-1 p-1">
                                            <img class="img-fluid img-thumbnail" src="img/products/neef.png" width="100%" />
                                        </div>
                                        <div class="col-md-4 p-1">
                                            &nbsp;
                                        </div>
                                        <div class="col-md-1 p-1">
                                            <img class="img-fluid img-thumbnail" src="img/products/qeywot.png" width="100%" />
                                        </div>
                                        <div class="col-md-1 p-1">
                                            <img class="img-fluid img-thumbnail" src="img/products/rubuc.png" width="100%" />
                                        </div>
                                        <div class="col-md-1 p-1">
                                            <img class="img-fluid img-thumbnail" src="img/products/tips.png" width="100%" />
                                        </div>
                                        <div class="col-md-4 p-1">
                                            &nbsp;
                                        </div>
                                    </div> 
                                </div>
                                
                                <div class="col-md-12 mt-5">
                                    <div class="row mt-4">
                                        <div class="col-md-12 bg-white rounded-lg pt-3 pb-2 text-center">
                                            <h3 class="text-primary"><i class="fa fa-mobile fa-lg text-success"></i> +252 615676978 <i class="fa fa-phone text-warning ml-5"></i> 5858 <i class="fa fa-envelope text-danger ml-5"></i> info@africandaafi.so</h3>
                                        </div>
                                    </div>
                                </div>
                                 

                            </div>

                        </div>

                        <div class="col-md-1 text-center border-left border-white">
                            &nbsp;
                        </div>
                            
                        <div class="col-md-4 pt-3 pb-3 pl-4 pr-4 bg-white rounded-lg" style="opacity: 0.9;">
                            <form action="#" method="POST" id="waiterLoginPageForm">
                                <div class="row mb-3">
                                    <div class="col-md-12 p-2">
                                        <input type="password" class="form-control p-4 font-weight-bold text-center" style="font-size: 35px;" id="txtWaiterPasswordWaitersLoginPage" required/>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4 p-2">
                                        <button type="button" class="bnt btn-primary btn-lg col-md-12 pt-3 pb-3 font-weight-bold btnWaiterKeyboardNumbersWaitersLoginPage">1</button>
                                    </div>
                                    <div class="col-md-4 p-2">
                                        <button type="button" class="bnt btn-primary btn-lg col-md-12 pt-3 pb-3 font-weight-bold btnWaiterKeyboardNumbersWaitersLoginPage">2</button>
                                    </div>
                                    <div class="col-md-4 p-2">
                                        <button type="button" class="bnt btn-primary btn-lg col-md-12 pt-3 pb-3 font-weight-bold btnWaiterKeyboardNumbersWaitersLoginPage">3</button>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4 p-2">
                                        <button type="button" class="bnt btn-primary btn-lg col-md-12 pt-3 pb-3 font-weight-bold btnWaiterKeyboardNumbersWaitersLoginPage">4</button>
                                    </div>
                                    <div class="col-md-4 p-2">
                                        <button type="button" class="bnt btn-primary btn-lg col-md-12 pt-3 pb-3 font-weight-bold btnWaiterKeyboardNumbersWaitersLoginPage">5</button>
                                    </div>
                                    <div class="col-md-4 p-2">
                                        <button type="button" class="bnt btn-primary btn-lg col-md-12 pt-3 pb-3 font-weight-bold btnWaiterKeyboardNumbersWaitersLoginPage">6</button>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4 p-2">
                                        <button type="button" class="bnt btn-primary btn-lg col-md-12 pt-3 pb-3 font-weight-bold btnWaiterKeyboardNumbersWaitersLoginPage">7</button>
                                    </div>
                                    <div class="col-md-4 p-2">
                                        <button type="button" class="bnt btn-primary btn-lg col-md-12 pt-3 pb-3 font-weight-bold btnWaiterKeyboardNumbersWaitersLoginPage">8</button>
                                    </div>
                                    <div class="col-md-4 p-2">
                                        <button type="button" class="bnt btn-primary btn-lg col-md-12 pt-3 pb-3 font-weight-bold btnWaiterKeyboardNumbersWaitersLoginPage">9</button>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4 p-2">
                                        <button type="button" class="bnt btn-primary btn-lg col-md-12 pt-3 pb-3 font-weight-bold btnWaiterKeyboardNumbersWaitersLoginPage">#</button>
                                    </div>
                                    <div class="col-md-4 p-2">
                                        <button type="button" class="bnt btn-primary btn-lg col-md-12 pt-3 pb-3 font-weight-bold btnWaiterKeyboardNumbersWaitersLoginPage">0</button>
                                    </div>
                                    <div class="col-md-4 p-2">
                                        <button type="button" class="bnt btn-primary btn-lg col-md-12 pt-3 pb-3 font-weight-bold btnWaiterKeyboardNumbersWaitersLoginPage">*</button>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-8 p-2">
                                        <button type="submit" class="bnt btn-success btn-lg col-md-12 pt-3 pb-3 font-weight-bold" id="btnLoginWaitersLoginPage"><i class="fa fa-sign-in"></i> Login</button>
                                    </div>
                                    <div class="col-md-4 p-2">
                                        <button type="button" class="bnt btn-danger btn-lg col-md-12 pt-3 pb-3 font-weight-bold btnClearNumbersWaitersLoginPage"><i class="fa fa-trash"></i> Clear</button>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>

                   


                </div>
                <div class="col-md-12">
                    <!-- <div class="row">
                        <div class="col-md-1 p-2">
                            <img class="img-fluid img-thumbnail" src="img/products/african special.png" width="100%" />
                        </div>
                        <div class="col-md-1 p-2">
                            <img class="img-fluid img-thumbnail" src="img/products/aliija.png" width="100%" />
                        </div>
                        <div class="col-md-1 p-2">
                            <img class="img-fluid img-thumbnail" src="img/products/baycenat.png" width="100%" />
                        </div>
                        <div class="col-md-1 p-2">
                            <img class="img-fluid img-thumbnail" src="img/products/firfir.png" width="100%" />
                        </div>
                        <div class="col-md-1 p-2">
                            <img class="img-fluid img-thumbnail" src="img/products/full chicken.png" width="100%" />
                        </div>
                        <div class="col-md-1 p-2">
                            <img class="img-fluid img-thumbnail" src="img/products/IMG_7185.png" width="100%" />
                        </div>
                        <div class="col-md-1 p-2">
                            <img class="img-fluid img-thumbnail" src="img/products/IMG_7225.png" width="100%" />
                        </div>
                        <div class="col-md-1 p-2">
                            <img class="img-fluid img-thumbnail" src="img/products/IMG_8148.png" width="100%" />
                        </div>
                        <div class="col-md-1 p-2">
                            <img class="img-fluid img-thumbnail" src="img/products/IMG_E7205.png" width="100%" />
                        </div>
                        <div class="col-md-1 p-2">
                            <img class="img-fluid img-thumbnail" src="img/products/IMG_E8066.png" width="100%" />
                        </div>
                        <div class="col-md-1 p-2">
                            <img class="img-fluid img-thumbnail" src="img/products/IMG_E8068.png" width="100%" />
                        </div>
                        <div class="col-md-1 p-2">
                            <img class="img-fluid img-thumbnail" src="img/products/neef.png" width="100%" />
                        </div>
                        <div class="col-md-4 p-2">
                            &nbsp;
                        </div>
                        <div class="col-md-1 p-2">
                            <img class="img-fluid img-thumbnail" src="img/products/qeywot.png" width="100%" />
                        </div>
                        <div class="col-md-1 p-2">
                            <img class="img-fluid img-thumbnail" src="img/products/rubuc.png" width="100%" />
                        </div>
                        <div class="col-md-1 p-2">
                            <img class="img-fluid img-thumbnail" src="img/products/tips.png" width="100%" />
                        </div>
                        <div class="col-md-4 p-2">
                            &nbsp;
                        </div>

                    </div> -->
                </div>
            </div>
        </div>
        
        
        <!-- Essential javascripts for application to work-->
        <?php include("library/scripts.php"); ?>

    </body>
</html>