<?php



function convertNumber($n)

{

    $string = "";

    if($n == 1) $string = "one";

    else if ($n == 2) $string = "two";

    else if ($n == 3) $string = "three";

    else if ($n == 4) $string = "four";

    else if ($n == 5) $string = "five";

    else if ($n == 6) $string = "six";

    else if ($n == 7) $string = "seven";

    else if ($n == 8) $string = "eight";

    else if ($n == 9) $string = "nine";

    else if ($n == 10) $string = "ten";



    return $string;

}



?>

<!DOCTYPE html>

<!-------------------- New  2023/3/1 5:53 PM-------------------- -->

<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=0.8">

    <!------------ Global css  ----------->

    <link rel="stylesheet" href="<?=base_url("assets/css/global.css")?>">

    <!-- Add use css  -->

    <?php if(isset($css)): ?>
    <link rel="stylesheet" href="<?=base_url("assets/css/" . $css)?>">
    <?php endif; ?>

    <!----------- 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'>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

        <!-- Select2 CSS --> 
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" /> 

    <!-- Select2 JS --> 
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

    <title>Seat Management - Seating Plan</title>

</head>

<body>

    <div class="landing-page">

        <!------------------------Start  sidebar ------------------->

        <?php echo $this->include('parts/side_menu.php'); ?>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />



        <div id="download_modal" class="modal">



          <form action="<?=base_url('download-seating-plan')?>" method="get">
            <input type=hidden name=session_id value=<?=$id?> />
                    <div>

                        <h3>Select Fields: </h3>

                       <div class="select-categ">
                            <label><input type=checkbox value=name name="fields[]" > Name </label>
                            <label> <input type=checkbox value=country name="fields[]" > Country </label>
                            <label> <input type=checkbox value=seating name="fields[]" > Seat No</label>
                             <label> <input type=checkbox value=profile_image name="fields[]" > Image </label>
                        <!-- <input type=checkbox value=stage name="fields[]" > Table/Row -->

                       </div>
                    </div>

                    <div class="secound-column">

                        <h3>Select File Type: </h3> 

                       <div class="select-type">
                            <select name=type>

                            <option>PDF</option>

                            <option>EXCEL</option>

                        </select>

                        <input type="submit" value="Download" style="float: right;">
                       </div>

                    </div>

            </form>



        </div>

        <!------------------------End sidebar ------------------->

            <div class="content">

                <!-- -----------------Logo ---------------------->

                <header>

                    <img src="<?=base_url('logo.png')?>"  style="width: 250px;" alt="">

                    <div class="links"><a href="#download_modal" rel="modal:open">Download Plan</a>

                    

                    <!--<a href="<?=base_url('set-seating-plan/' . $id)?>">Change Seating Plan</a></div>-->

                    

                </header>
                            
                        <?php echo view('plans/parts/cards'); ?>
                        
                        <?php echo view('plans/seatingplan.html'); ?>



                <div class="attendees-info">
                    <?php if($plan[0] == 's'): ?>
                        <?=view('plans/parts/square-table')?>
                    <?php else: ?>
                    <div class="tables-section-r" id="capture">
                        <div class="row">
                        <div class="tables">


                            <?php for($i = 1; $i <= $plan[1]; $i++): ?> 

                            <div  class="table">

                                <h5>T<?=$i?></h5>
                                <?php echo view('plans/parts/seat', array('i' => $i)); ?>
                                

                            </div>

                            <?php endfor; ?>







                        </div>
                        </div>

                    </div>
                    <?php endif; ?>

                </div>

            </div>

    </div>


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

         function closeFilter(){

        

        document.getElementById('card').style.display = 'none';

    }

     function closeFilter2(){

        

        document.getElementById('remove_card').style.display = 'none';

    }

        $(document).ready(function() {


            $("#search_text").on("keyup", function() {

                var value = $(this).val().toLowerCase();

                $(".attendees .attendee").filter(function() {

                    $(this).toggle($(this).text()

                    .toLowerCase().indexOf(value) > -1)

                });

            });



            $('.chair.empty').on('click', function() {

                var row  = "T" + $(this).parent().parent().data('row');

                var seat = "S" + $(this).parent().parent().data('seat');

                $('#seat_no').html(row + seat);

                $('[name="seat_no"]').val(row + seat);

                $('#remove_card').css('display', 'none');

                $('#card').css('display', 'block');

                

            });



            $('.chair.booked').on('click', function() {

                var userid = $(this).parent().parent().data('id');
                var name = $(this).parent().parent().data('name');
                var type   = $(this).parent().parent().data('type');
                var row  = "T" + $(this).parent().parent().data('row');
                var seat = "S" + $(this).parent().parent().data('seat');

                $('#card').css('display', 'none');
                $('#remove_card').css('display', 'block');
                $('#remove_seat_no').html(row + seat);

                $('#remove_name_id').html(name);

                if(type == 'guest') {
                    $('#remove_designation_id').html(guests[userid]['designation']);
                    $('#remove_image_id').attr('src', base_url + "/assets/images/profiles/" + guests[userid]['profile_image']);
                }


                $('#removes_user_id').attr('href', base_url + 'remove-seating/' + type + '/' + userid + '/' + <?=$id?>);

            });

        });



        const guests = <?=json_encode($guests)?>;

        const booked = <?=json_encode($booked)?>;

        var groups = <?=json_encode($groups)?>;

        var base_url = '<?=base_url()?>';

    </script>


    <script type="text/javascript">

function hiddenP_events(active) {
    if(active == false) {
        $('.booking-plan').off('mouseover');
        $('.booking-plan').off('mouseout');    
    } else {
        $('.booking-plan').mouseover(function () {
            $(this).find(".hiddenP").css('display', 'flex');
        });
        $('.booking-plan').mouseout(function () {
            $(this).find(".hiddenP").css('display', 'none');
        });    
    }
}


hiddenP_events(true);
    </script>
    <div class="zoom-content seating-plan-zoom" style="display:flex;">
                      <div class="zoom-tools">
                       <img class="range-minus" data-rangeid="zoomrange" src="<?=base_url("assets/images/minus.png")?>" alt="">
                        <input id="zoomrange" min="1" max="10" value='1' step="1" onchange="showVal(this.value)"  type="range" style="accent-color: #012861;"/>
                        <img class="range-plus" data-rangeid="zoomrange" src="<?=base_url("assets/images/plus.png")?>" alt="">
                        </div>
                         <div>
                         <a class="view-icons" href='<?=base_url('seating-plan/list/' . $id)?>'><img src="/public/list-view.png" /></a>
                         </div>
                         
                   </div>
</body>

</html>