<!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/stage.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'>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.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>Opening Ceremony Management</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-stage-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=id name="fields[]" checked> ID </label>
                  <label><input type=checkbox value=name name="fields[]" checked> Name </label>
                  <label><input type=checkbox value=country name="fields[]" > Country </label>
                  <label><input type=checkbox value=stage name="fields[]" checked > Table/Row</label>
                  <label> <input type=checkbox value=profile_image name="fields[]" > Image </label>
                
                  <!-- <input type=checkbox value=seating name="fields[]" > Seat No  -->
                </div>
        
                
              
                
            </div>
            <div>
              <h3 class="heading-type">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-stage/' . $id)?>">Create a Standing plan</a></div>-->
                    
                </header>
                
                <?php echo view('plans/parts/cards'); ?>
                            
                <div class="attendees-info">
                    <div class="tables-section chairs-section" id="capture">
                        <div class="rows-chairs tables">



  

                           <div class="rows" id="rows">
    <?php
    for ($i = 1; $i <= count($each_row); $i++) :
    ?>

    <div class="wrapper-rows one">
        <h5>Row <?=$i?></h5>
        <div class="row-<?=$i?> row">
            <?php
           
            if ($i >= 19 && $i <= 26) {
               
                for ($s = 1; $s <= 54; $s++) {
                    echo '<div class="booking-plan"><div class="empty-transparent"></div></div>';
                }
            }

            // Generate actual seats
            for ($s = 1; $s <= $each_row[$i - 1]; $s++) :
                $seat_no = "R{$i}S{$s}";
                $chair_status_class = "empty";
                $user_id_data = "";
                $user_name = "";
                $onhover = "";
                $hiddenP = "";
                $color = "";
                if (isset($booked[$seat_no])) {
                    $chair_status_class = "booked";
                    $user_id_data = $booked[$seat_no]['id'];
                    $user_name = $booked[$seat_no]['name'];
                    $color = $booked[$seat_no]['color'];
                    $user_id_data = " data-name='" . $user_name . "' data-type=" . $booked[$seat_no]['type'] . " data-id=" . $booked[$seat_no]['id'] . " ";
                    $hiddenP = '<p class="hiddenP" style="z-index:99999;">' . $user_name . '</p>';
                }
                ?>
                <div class="booking-plan">
                    <div style="<?=($color!="")?(" background-color: {$color}; "):('')?>" <?=$user_id_data?> data-row="<?=$i?>" data-seat="<?=$s?>"  class="chair <?=$chair_status_class?>"><span>S<?=$s?><?=$hiddenP?></span></div>
                </div>
            <?php endfor; ?>
        </div>
    </div>

    <?php
    endfor;
    ?>
</div>

                        </div>
                    </div>
                </div>
            </div>
    </div>
    <script>

function showHiddenP(element) {
  const hiddenP = element.querySelector(".hiddenP");
  hiddenP.style.display = "flex";
}

function hideHiddenP(element) {
  const hiddenP = element.querySelector(".hiddenP");
  hiddenP.style.display = "none";
}





         function closeFilter(){
        
        document.getElementById('card').style.display = 'none';
    }
     function closeFilter2(){
        
        document.getElementById('remove_card').style.display = 'none';
    }
        
        
        
    </script>


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

    <script type="text/javascript">
        $(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)
                });
            });
            
            
            <?php if($is_superadmin || $is_admin): ?>
            $('.chair.empty').on('click', function() {
                var row = "R" + $(this).data('row');
                var seat = "S" + $(this).data('seat');
                $('#seat_no').html(row + seat);

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

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

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

            $('.chair.booked').on('click', function() {
                var userid = $(this).data('userid');

                var userid = $(this).data('id');
                var name = $(this).data('name');
                var type   = $(this).data('type');
                var row  = "R" + $(this).data('row');
                var seat = "S" + $(this).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-stage/' + type + '/' + userid + '/' + <?=$id?>);
                
                
            });
            <?php endif; ?>
        });

        const guests = <?=json_encode($guests)?>;
        const booked = <?=json_encode($booked)?>;
        var base_url = '<?=base_url()?>';
    </script>
    <script src="<?=base_url("assets/Js/autocomplete.js")?>"></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('stage/list/' . $id)?>'><img src="/public/list-view.png" /></a>
                         </div>
                         
                   </div>
</body>
</html> 