<!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")?>">
    <!-- Add use css  -->
    <link rel="stylesheet" href="<?=base_url("assets/css/create-standing-plan.css")?>">
    <!----------- Font Awesome icons  ------>
    <link rel="stylesheet" href="<?=base_url("assets/css/all.min.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'>
    <!-- Js Countries  -->
    <title>Seat Management - Create a Standing Plan</title>
</head>
<body>
    <div class="landing-page">
        <!------------------------Start  sidebar ------------------->
        <?php echo $this->include('parts/side_menu.php'); ?>
        <!------------------------End sidebar ------------------->
            <div class="content">
                <!-- -----------------Logo ---------------------->
                <header>
                    <img src="<?=base_url('logo.png')?>"  style="width:250px" alt="">
                </header>
                <div class="title">
                    <h2>Change Standing Plan</h2>
                </div>
                <div class="sign-in">
                    <div class="input-panel">
                        <div class="title-panel">
                            <h3>Standing Plan </h3>
                        </div>
                            <form method=post action="<?=base_url('save-stage-setup')?>">
                                <input type=hidden name="id" value="<?=$id?>">
                                <div class="input-fields" id="standingNumbers">
                                           
                                    <label for="number-of-rows">Number of Rows</label>
                                    <input type="text" name="number-of-rows" required placeholder="00" id="inputNumberRows">
                                    <div class="submit">  <input type="submit" value="Create Rows" id="filldetails" onclick="addFields()"></input></div>
                                </div>
                                <div class="submit"><input type="submit" value="Create Layout" style="display:none;" id="buttonCreate" onclick="return confirm('All the existing data will be wiped out? Are you sure?')"></input></div>
                            </form>
                    </div>
                </div>
            </div>
    </div>


    <script type='text/javascript'>
        function addFields(){
            var number = document.getElementById("inputNumberRows").value;
            var container = document.getElementById("standingNumbers");
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }
            for (i=0;i<number;i++){
               
               
                container.appendChild(document.createTextNode("Number of People in Row " + (i+1) ));
                container.appendChild(document.createElement("br"));
                container.appendChild(document.createElement("br"));
                var input = document.createElement("input");
                input.type = "text";
                input.name = "people[]";
                container.appendChild(input);
                container.appendChild(document.createElement("br"));
            }
            document.getElementById("buttonCreate").style.display='block';
        }
  


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