<div class="row">
    <div class="col-lg-12">
        <div class="card cardXX d-flex position-relative flex-column cardBg pr3" style="padding-top:0px">
            <div class="row mt-1 mb-0 ml-2 mr-2 section1">
                <!-- Overall Section -->
                 <div class="col-lg-9"></div>
                 <div class="col-lg-3 mb-1" style="text-align:end;padding-right:0px">
                    <div style="display:flex;justify-content:end">
                        <select class="js-select2 form-control slectX" name="domainDrop2" id="domainDrop2" onchange="domainDropC2(this.id);">
                            <?php
                                echo '<option value="0">-SELECT DOMAIN-</option>';
                                foreach($domain as $key => $value) {
                                    if($key!=0)
                                    {
                                        echo '<option value='.($key+1).'>'.$value.'</option>';
                                    }
                                }
                            ?>
                        </select>
                        <div class="dropDownSelect2 pr2 ml-2"></div>
                        <button type="button" class="btn-transition btn btn-outline-primary btn-sm btn-brand mt-1" data-value="Tbl" onclick="swapTable(this,1);" style="height:35px;cursor:pointer" id="swap_tbl_btn">
                            Show Table
                        </button>
                    </div>
                 </div>
                 <div class="col-lg-4"></div>
                 <div class="col-lg-8 mb-1" style="text-align:end;padding-right:0px">
                    <div class="domainbasediv ml-2">
                        <span class="dbb" id="domainbasedivF3"></span>
                        <span class="dbb" id="domainbasedivA3"></span>
                        <span class="dbb" id="domainbasedivM3"></span>
                    </div>
                 </div>
                 <div class="col-lg-4"></div>
                 <div class="col-lg-8 mb-1" style="text-align:end;padding-right:0px">
                    <div class="domainbasediv ml-2">
                        <span class="dbb" id="domainbasedivF4"></span>
                        <span class="dbb" id="domainbasedivA4"></span>
                        <span class="dbb" id="domainbasedivM4"></span>
                    </div>
                 </div>
                 <div class="col-lg-6 pr2">
                    <h5 class="div-head" >
                        <b style="font-weight:500">Overall Trends</b>
                    </h5>
                    <div class="scroll-section chart_div">
                        <div class="dashed_border animate__animated animate__fadeInLeft" id="overall_charts_trends" style="min-width: 600px"></div>
                    </div>
                    <div class="scroll-section2 tbl_div">
                        <table class="tblA table table-striped table-bordered no-footer text-center display animate__animated animate__fadeInLeft" id="overall_tbl_trends" cellpadding="0" cellspacing="0">
                            <thead>
                                <tr style="display:none"><td colspan="4"><span class="tbl_filter_show"></span></td></tr>
                                <tr>
                                    <th></th>
                                    <th colspan="11" style="background-color:aliceblue"><img class="brand_img2" src="assets/images/filpkart.png" alt="" srcset=""></br><span style="display:none">Flipkart</span></th>
                                    <th colspan="11" style="background-color:#ffe0b3"><img class="brand_img2" src="assets/images/amazon.png" alt="" srcset=""></br><span style="display:none">Amazon</span></th>
                                    <th colspan="11" style="background-color:#eee6ff"><img class="brand_img2" src="assets/images/meesho.png" alt="" srcset=""></br><span style="display:none">Meesho</span></th>
                                </tr>
                            </thead>
                            <tbody>
                                
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-lg-6 pr4">
                    <h5 class="div-head" >
                        <b style="font-weight:500">Domain Trends</b>
                    </h5>
                    <div class="scroll-section chart_div">
                        <div class="dashed_border animate__animated animate__fadeInLeft" id="domain_charts_trends" style="min-width: 600px"></div>
                    </div>
                    <div class="scroll-section2 tbl_div">
                        <table class="tblA table table-striped table-bordered no-footer text-center display animate__animated animate__fadeInLeft" id="domain_tbl_trends" cellpadding="0" cellspacing="0">
                            <thead>
                                <tr style="display:none"><td colspan="4"><span class="tbl_filter_show"></span></td></tr>
                                <tr>
                                    <th></th>
                                    <th colspan="11" style="background-color:aliceblue"><img class="brand_img2" src="assets/images/filpkart.png" alt="" srcset=""></br><span style="display:none">Flipkart</span></th>
                                    <th colspan="11" style="background-color:#ffe0b3"><img class="brand_img2" src="assets/images/amazon.png" alt="" srcset=""></br><span style="display:none">Amazon</span></th>
                                    <th colspan="11" style="background-color:#eee6ff"><img class="brand_img2" src="assets/images/meesho.png" alt="" srcset=""></br><span style="display:none">Meesho</span></th>
                                </tr>
                            </thead>
                            <tbody>
                                
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-2">
    <div class="col-lg-12">
        <div class="card cardXX d-flex position-relative flex-column cardBg pr3" style="padding-top:0px">
            <div class="row mt-1 mb-0 ml-2 mr-2 section1">
                 <div class="col-lg-10"></div>
                 <div class="col-lg-2 mb-1" style="text-align:end;padding-right:0px">
                    <!-- <button type="button" class="btn-transition btn btn-outline-primary btn-sm btn-brand" data-value="Chart" onclick="swapTable(this,2);" style="height:35px;cursor:pointer" id="swap_tbl_btn2">
                        Show Chart
                    </button> -->
                 </div>
                <div class="col-lg-12 pr2">
                    <h5 class="div-head" >
                        <b style="font-weight:500">Sub-Domain Trends</b>
                    </h5>
                    <div class="scroll-section2">
                        <div class="dashed_border animate__animated animate__fadeInLeft" id="subdomain_charts_trends" style="min-width: 600px;display:none"></div>
                        <table class="tblA table table-striped table-bordered no-footer text-center display animate__animated animate__fadeInLeft" id="subdomain_tbl_trends" cellpadding="0" cellspacing="0">
                            <thead>
                                <tr style="display:none"><td colspan="4"><span class="tbl_filter_show"></span></td></tr>
                                <tr>
                                    <th></th>
                                    <th colspan="11" style="background-color:aliceblue"><img class="brand_img2" src="assets/images/filpkart.png" alt="" srcset=""></br><span style="display:none">Flipkart</span></th>
                                    <th colspan="11" style="background-color:#ffe0b3"><img class="brand_img2" src="assets/images/amazon.png" alt="" srcset=""></br><span style="display:none">Amazon</span></th>
                                    <th colspan="11" style="background-color:#eee6ff"><img class="brand_img2" src="assets/images/meesho.png" alt="" srcset=""></br><span style="display:none">Meesho</span></th>
                                </tr>
                            </thead>
                            <tbody>
                                
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

