<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- global css  -->
    <link rel="stylesheet" href="<?=base_url("assets/css/global.css")?>">
    <!-- main css  -->
    <link rel="stylesheet" href="<?=base_url("assets/css/choose-sitting-plan.css")?>">
            <!-- Google Font Roboto  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Cairo' rel='stylesheet'>
    <title>Seat Management - Choose a Seating Plan</title>
</head>
<body>
    <div class="landing-page">
        <!------------------------Start  sidebar ------------------->
        <?php echo $this->include('parts/side_menu.php'); ?>
        <!-- ----------    Sidebar  ------------->
        <div class="content">
            <!-- -----------------Logo ---------------------->
            <header>
                <img src="<?=base_url('logo.png')?>"  style="width:250px" alt="">
            </header>
            <div class="title">
                <h2>Seating Plan</h2>
            </div>
            <div class="create-plan">
                <div class="panel">
                    <div class="title-panel">
                        <h3>Create Seating Plan</h3>
                    </div>
                    <div class="tables">
                        <form action="<?=base_url('save-seating-plan')?>" method="post">
                            <input type=hidden name="session_id" value="<?=$session_id?>">
                        <div class="tables-info">
                            <div class="round-table">
                                <input type="checkbox" name="table_type" value="r" id="checkbox-1" class="chk" onchange="cbChange(this)">
                                    <label for="checkbox-1">
                                        <img src="<?=base_url("assets/images/seating-round.png")?>" alt="">
                                    </label>
                                <p>Round Table</p>
                            </div>
                            <div class="square-table">
                                <input type="checkbox" name="table_type" value="s" id="checkbox-2" class="chk"onchange="cbChange(this)">
                                    <label for="checkbox-2">
                                        <img src="<?=base_url("assets/images/seating-squre.png")?>" alt="">
                                    </label>
                                <p>Square Table</p>
                            </div>
                        </div>
                            <div class="input-fields">
                                <div class="for-numbers">
                                    <input type="text" name="tables" required placeholder="25">
                                    <label for="number-of-table">Number of Table</label>
                                </div>
                                <div class="for-rows">
                                    <input type="text" name="seats" required placeholder="8">
                                    <label for="number-of-rows">Number of Seats</label>
                                </div>
                            </div>
                            <div class="create">
                                <input type="submit" value="Create" onclick="return confirm('Your existing plan will be wiped out. Are you sure?')">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="<?=base_url("assets/Js/main.js")?>"></script>
</body>
</html>