<style type="text/css">
    .tables-section-s {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tables-section-s .row {
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
    width: 100%;
    height: 100%;
}

.tables-section-s .row .table {
    position: relative;
    width: 114px;
    height: 74px;
    background-color: #e4ebf6;
    color: #012861;
    font-size: 24px;
    margin: 0px 46px;
    border: 1px solid #dfdfdf;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tables-section-s .row .table.main {
    margin-left: 50px;
    margin-right: 50px;
    width: 205px;
    height: 112px;
}

.tables-section-s .row .table .chair {
    width: 31px;
    height: 30px;
    background-color: rgb(148, 168, 200);
    border: 1px solid rgba(160, 160, 160, 0.54);
    position: absolute;
    cursor: pointer;
}


.tables-section-s .row .table .chair.one {
    top: 3px;
    left: -38px;
    border-radius: 20px 0px 0px 20px;
}

.tables-section-s .row .table .chair.two {
    top: 39px;
    left: -39px;
    border-radius: 20px 0px 0px 20px;
}

.tables-section-s .row .table .chair.three {
    top: 79px;
    left: 3px;
    border-radius: 0px 0px 20px 20px;
}

.tables-section-s .row .table .chair.four {
    top: 79px;
    left: 41px;
    border-radius: 0px 0px 20px 20px;
}

.tables-section-s .row .table .chair.five {
    top: 79px;
    left: 79px;
    border-radius: 0px 0px 20px 20px;
}

.tables-section-s .row .table .chair.six {
    top: 38px;
    left: 119px;
    border-radius: 0px 20px 20px 0px;
}

.tables-section-s .row .table .chair.seven {
    top: 1px;
    left: 119px;
    border-radius: 0px 20px 20px 0px;
}


.tables-section-s .row .table.main .chair.one{
    top: 14px;
    left: -38px;
}
.tables-section-s .row .table.main .chair.two{
    top: 69px;
    left: -38px;
}
.tables-section-s .row .table.main .chair.three{
    top: 117px;
    left: 26px;
}
.tables-section-s .row .table.main .chair.four{
    top: 117px;
    left: 88px;
}
.tables-section-s .row .table.main .chair.five{
    top: 117px;
    left: 148px;
}
.tables-section-s .row .table.main .chair.six{
    top: 69px;
    left: 211px;
}
.tables-section-s .row .table.main .chair.seven{
    top: 14px;
    left: 211px;
}


.tables-section-s .table .chair.booked{
    background-color: var(--background-btn);
    cursor: pointer;
    transition: var(--main-transition);
}

.tables-section-s .table .chair.booked:hover{
    background-color: var(--background-hover-btn);
}
.tables-section-s .table .chair.booked span {
    color: var(--background-light);
}
.tables-section-s .table .chair.booked:hover span {
    color: var(--background-light);
}
.tables-section-s .table .booking-plan .chair.booked:hover   {
    display: block;
}

.empty-table {
   osition: relative;
    width: 114px;
    height: 74px;
    background-color: transparent;
  
    font-size: 24px;
    margin: 0px 46px;
    border: 1px solid transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tables-section-s .row:first-child {
    margin-left:-13%;
  
}
</style>

<div class="tables-section-s tables">   
    <?php foreach($rowsSeries as $row): ?>
    <div class="row">
        <?php foreach($row as $i): ?>
            <div class="<?= ($i[0] == null) ? 'empty-table' : 'table' ?>">
                <?php if($i[0] == null): ?>
                    <h5> </h5>
                <?php else:?>
                <h5 style="text-align: center;"><?=$i[0]?></h5>
                <?php
                    echo view('plans/parts/seat', array('i' => $i));
                    endif;
                ?>
            </div>
        <?php endforeach; ?>
    </div>
    <?php endforeach; ?>
</div>