<style>
/* Style for the table container */
.container {
  margin: 20px;
}

/* Style for the tab content */
.tab-content {
  padding: 20px;
  background-color:white;
}

/* Style for the table headers */
.table th {
  background-color: #f2f2f2;
  text-align: left;
  padding: 10px;
}

/* Style for the table rows */
.table td {
  padding: 10px;
}

/* Style for the active tab */
.nav-tabs li.active {
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
}

/* Style for the search filter input */
.search-filter {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}

/* Style for the success alert */
.alert-success {
  background-color: #28a745;
  color: #fff;
}

/* Style for the warning alert */
.alert-warning {
  background-color: #ffc107;
  color: #000;
}
/* Style for the tab buttons container */
.tab-buttons {
    display: flex;
    background-color: #012861;
    border-radius: 5px;
    overflow: auto; /* Add overflow for scrolling if necessary */
   
}

/* Style for the tab buttons */
.tab-button {
    flex: 1; /* Distribute available space equally */
    background-color: transparent;
    color: white;
    border: none;
    padding: 15px 20px; /* Increase padding for more vertical space */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center; /* Center text within each button */
    position: relative; /* Add relative positioning for pseudo-element */
    font-size: 16px; /* Increase font size */
    font-weight: bold; /* Make text bold */
}

/* Style for the pseudo-element (separator) */
.tab-button::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px; /* Width of the separator line */
    background-color: white; /* Color of the separator */
}

/* Style for the active tab button */
.tab-button.active {
    background-color: #0046a0; /* Fully color the button on hover */
    color: white;
}

/* Hover effect */
.tab-button:hover {
    background-color: #0046a0; /* Fully color the button on hover */
    color: white;
    
}


/* Style for the table */
.table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
}

/* Style for the table headers */
.table th {
  background-color: #f2f2f2;
  text-align: left;
  padding: 10px;
  font-weight: bold;
}

/* Style for the table rows */
.table td {
  padding: 10px;
  border: 1px solid #ccc;
}

/* Style for the "InviteAll" button */
.table input[type="submit"] {
     background-color: #012861;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    border-radius: 30px;
    margin: auto;
    display: block;
     transition: background-color 0.3s ease, color 0.3s ease;
}
.table input[type="submit"]:hover {
 background-color: #0046a0;
    
}

/* Style for the "Invite" links */
.table .edit a {
  background-color: #012861;
  color: white;
  padding: 5px 10px;
  text-decoration: none;
  border-radius: 5px;
  display: inline-block;
   transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover effect for "Invite" links */
.table .edit a:hover {
  background-color: #0046a0;
}
.table td img {
  display: block;
  margin: 0 auto;
  border-radius:50%;
}
.alert-warning{
  font-size: 24px; /* Adjust the font size as needed */
  text-align: center;
  padding-top: 10%; /* Add top spacing */
  padding-bottom: 20px; /* Add bottom spacing */
      background-color: #e4ebf6;
    color: #012861;
    min-height: 500px;
}
.alert-success {
    background-color: #28a745;
    color: #fff;
    padding: 20px;
    margin-bottom: 10px;
    font-weight: 700;
    text-align: center;
    font-size: x-large;
}
.seatNumber{
    padding:10px;
    border-radius:10px;
    width: 120px;
    color:white;
    text-align:center;
}
<?php if($is_checker): ?>
.landing-page .content {padding-left:0px !important;}
.container { width: 100%;}
<?php endif; ?>
</style>
<?php 
$URL = base_url();
if($type == "seating")
    $URL .= "seating-plan";
else
    $URL .= "stage";
$URL .= "/" . $session_id;
?>

<div class="zoom-content view-icons" style="position:fixed;"><a href='<?=$URL?>'><img src="/public/grid-view.png"/></a></div>

<div class="container">
    <h2 style="margin-top:10px; margin-bottom:10px;"><?=$title?></h2>
    <?php if(isset($error) && $error != ""): ?>
        <div class="alert alert-warning" role="alert"><?=$error?></div>
    <?php endif; ?>
    <?php if(isset($msg) && $msg != ""): ?>
        <div class="alert alert-success" role="alert"><?=$msg?></div>
    <?php endif; ?>

    <div class="tab-content">
        
    <div class="tab-pane">
    <input id="search_text" type="text" class="search-filter" placeholder="Search by Name">
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Designation</th>
                <th>Company</th>
                <th>Classification</th>
                <th>Category</th>
                <th>Club</th>
                <th>Special Note</th>
                <th>Seat.</th>
            </tr>
        </thead>
        <tbody>
            <?php if($list == null && $guests_unassigned == null): ?>
                <tr><td colspan="3">No data.</td></tr>
            <?php endif; ?>
            <?php foreach ($list as $item): 
                if(!isset($guests[$item['guest_id']]) && !isset($groups[$item['group_id']])) continue;
                $item['checked_in'] = 0;
                if(isset($checkin[$item['guest_id']])) $item['checked_in'] = $checkin[$item['guest_id']]['checked_in'];
            ?>
                <tr >
                    <?php if($item['group_id'] == null): ?>
                    <td><?= $guests[$item['guest_id']]['id'] ?></td>
                    <td><?= $guests[$item['guest_id']]['title'] ." ". $guests[$item['guest_id']]['name'] ." ". $guests[$item['guest_id']]['surname']?></td>
                    <td><?= $guests[$item['guest_id']]['designation'] ?></td>
                    <td><?= $guests[$item['guest_id']]['company'] ?></td>
                    <td><?= $guests[$item['guest_id']]['category'] ?></td>
                    <td><?= $guests[$item['guest_id']]['event_category'] ?></td>
                    <td><?= $guests[$item['guest_id']]['club'] ?></td>
                    <td><?= $guests[$item['guest_id']]['special_note'] ?></td>
                    <?php else: 
                    
                    ?>
                    <td>Group <?= $groups[$item['group_id']]['id'] ?></td>
                    <td><?= $groups[$item['group_id']]['title'] ?></td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <?php endif; ?>

                    <td  >
                    <?php 
                    if(isset($item['seating'])):
                    $pattern = seating_name_pattern($item['seating']);
                        if(in_array($pattern[0] ,$flagged_tables))
                            echo " <span id='fs'>FS</span> ";
                    endif;
                    ?>
                   
                  <a data-sessionid="<?=$session_id?>" data-guestid="<?=$item["guest_id"]?>" class="<?=$item['checked_in'] == "0"?('checkin'):('checkout')?>" href='#'><div class="seatNumber" style="background-color: <?=$item['checked_in'] == "0"?('black'):('#00933d')?>;">
                    <?php if(isset($item['seating'])) {
                        
                        echo $item['seating']; 
                        }
                          elseif(isset($item['stage'])) echo $item['stage']; 
                         
                    ?>
                    </div></a>
                   
                    </td>
                    
                </tr>
            <?php endforeach; ?>
            
            <?php foreach ($guests_unassigned as $item): ?>
                <tr>
                    <td><?= $item['id'] ?></td>
                    <td><?= $item['title'] ." ". $item['name'] ." ". $item['surname']?></td>
                    <td><?= $item['designation'] ?></td>
                    <td><?= $item['company'] ?></td>
                    <td><?= $item['category'] ?></td>
                     <td><?= $item['event_category'] ?></td>
                    <td><?= $item['club'] ?></td>
                    <td><?= $item['special_note'] ?></td>
                    <td ><div class="seatNumber" style="background-color: #012861"  >Not Assigned</div></td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>
    </div>
</div>

<script>
    $(document).ready(function() {
        $("#search_text").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $(".table tr").filter(function() {
                $(this).toggle($(this).text()
                .toLowerCase().indexOf(value) > -1);
            });
        });
    });
    
    $(document).ready(function() {
        // Define a named function for the click event handler
        function handleCheckinClick(e) {
            e.preventDefault();
            let obj = this;
            let parent = $(this).parent();
            let session_id = $(this).data('sessionid');
            let guest_id = $(this).data('guestid');
            let link = "<?=base_url('session/checkin/checkinajax/')?>" + session_id + "/" + guest_id;
            console.log(link);
            // Perform the AJAX call
            $.get(link, function(data, status){
                if(status == "success") {
                    console.log(status);
                    $(obj).removeClass('checkin');
                    $(obj).addClass('checkout');
                    $(obj).find('.seatNumber').css('background-color', '#00933d');
                    $(obj).click(handleCheckoutClick);
                    return;
                }
            });
        }
        
        // Attach the named function to $(".check a.checkin") click event
        <?php if($is_agent): ?>
        $("a.checkin").click(handleCheckinClick);
        <?php endif; ?>

        
        function handleCheckoutClick(e) {
            e.preventDefault();
            let obj = this;
            let session_id = $(this).data('sessionid');
            let guest_id = $(this).data('guestid');
            let link = "<?=base_url('session/checkin/checkoutajax/')?>" + session_id + "/" + guest_id;
            console.log(link);
            $.get(link, function (data, status){
                if(status == "success") {
                    console.log(status);
                    $(obj).removeClass('checkout');
                    $(obj).addClass('checkin');
                    $(obj).find('.seatNumber').css('background-color', 'black');
                    $(obj).click(handleCheckinClick);
                    return;
                }
            });

        }
        <?php if($is_agent): ?>
        $("a.checkout").click(handleCheckoutClick);
        <?php endif; ?>

    });
    


</script>
<div class="overlay"></div>