<!-- headline Section -->
<div id="headlineSection" class="admin-section section mt-1" style="display:none;">

    <!-- Skeleton -->
    <div class="skeleton-wrapper">
        <div class="skeleton-box"></div>
        <div class="skeleton-box"></div>
    </div>

    <div id="OverviewheadlineSection" class="section-heading">
        <h3 class="link text-dark">Overview</h3>
        <a href="#" data-toggle="modal" 
           data-target="#PanelRight_overview" 
           class="link text-danger">
           More+..
        </a>
    </div>
    
     <div id="AccountsOverviewheadlineSection" class="section-heading">
        <h3 class="link text-dark">Accounts</h3>
        <a href="#" data-toggle="modal" 
           data-target="#PanelRight_1" 
           class="link text-danger">
           More+..
        </a>
    </div>
    
    <div id="InventoryOverviewheadlineSection" class="section-heading">
        <h3 class="link text-dark">Inventory</h3>
        <a href="#" data-toggle="modal" 
           data-target="#PanelRight" 
           class="link text-danger">
           More+..
        </a>
    </div>
    
    <div class="screen-wrapper">
        
 <!-- card block -->
 <div id="OverviewCard" class="table-container">
     <div  class="card-block bg-dark">
                                <div class="card-main">
                                  
                   <div class="balance">
    <span class="label">Company Name</span>

    <div class="form-group basic">
        <select id="sel_co" name="sel_co"
            class="form-control custom-select text-light">
            <?php
            foreach ($sel_co as $row) {
                echo '<option value="'.$row['id'].'">'.$row['org_name'].'</option>';
            }
            ?>
        </select>
    </div>
</div>
                                    <div class="in">
                                        <div class="card-number">
                                            <span class="label">Total uncollected Revenue</span>
                                        <span class="currency">UGX</span> 
                                        <span id="pers_bl">0</span>
                                        </div>
                                        <div class="bottom">
                                            <div class="card-expiry">
                                                <span class="label">Previous Month</span>
                                        <span class="currency">UGX</span> 
                                        <span id="prev_bl">0</span>
                                            </div>
                                            
                                                <div class="card-expiry">
                                                <span class="label">This Month</span>
                                        <span class="currency">UGX</span> 
                                        <span id="pers_this_month_bl">0</span>
                                            </div>
                                            
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                          
                            
  </div>
              <!-- * card block -->      
        
        
 <!-- card block -->
 <div id="AccountCard" class="table-container">
     <div  class="card-block bg-primary">
                                <div class="card-main">
                                  
                                    <div class="balance">
                                        <span class="label">CASH ON HAND</span>
                                        <h1 class="title">
                                        <span class="currency">UGX</span> 
                                        <span id="cash_acc_bl">0</span>
                                    </h1>
                                    </div>
                                    <div class="in">
                                        <div class="card-number">
                                            <span class="label">BANKED TODAY</span>
                                        <span class="currency">UGX</span> 
                                        <span id="bnkd_today">0</span>
                                        </div>
                                        <div class="bottom">
                                            <div class="card-expiry">
                                                <span class="label">TRANSFERS OUT</span>
                                        <span class="currency">UGX</span> 
                                        <span id="ctfr_out_today">0</span>
                                            </div>
                                            
                                                <div class="card-expiry">
                                                <span class="label">TRANSFERS IN</span>
                                        <span class="currency">UGX</span> 
                                        <span id="ctfr_in_today">0</span>
                                            </div>
                                            
                                            <div class="card-ccv">
                                                <span class="label">EXPENSES</span>
                                        <span class="currency">UGX</span> 
                                        <span id="exp_today">0</span>
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                          
                            
  </div>
              <!-- * card block -->   
              
              
 <!-- Pending Cash-->
<div id="pendcash_container" class="table-container">
        <!-- Loader -->
<div id="cashLoaderpending" class="text-center mt-1">
    <div class="spinner-grow text-warning" role="status"></div>
  
</div>
         <!-- Pending cash transaction Content -->
    <div class="pend-cash-transactions" style="display:none;">
     <div class="section-title">
            <h6>Pending Transactions</h6>
        </div>
        <div class="card">
            <div class="table-responsive" id="PcshScroll" style="max-height:400; overflow-y:auto;">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Doc No</th>
                            <th>Name</th>
                            <th>T.Type</th>
                            <th>Amount</th>
                        </tr>
                    </thead>
                    <tbody id="pendingcash"></tbody>
                </table>
            </div>
        </div>

    </div> <!-- Pending cash transaction Content -->
    
  </div>
  
   <!--ALL Pending -->
<div id="pend_all_container" class="table-container">
        <!-- Loader -->
<div id="overviewLoaderpending" class="text-right mt-1">
    <div class="spinner-grow text-warning" role="status"></div>
  
</div>
        <!-- Pending cash transaction Content -->
    <div class="pend-overview-transactions" style="display:none;">
     <div class="section-title">
            <h6>Pending Transactions</h6>
        </div>
        <div class="card">
            <div class="table-responsive" id="OvPScroll" style="max-height:400; overflow-y:auto;">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Doc No</th>
                            <th>Name</th>
                            <th>T.Type</th>
                            <th>Amount</th>
                        </tr>
                    </thead>
                    <tbody id="overviewpending"></tbody>
                </table>
            </div>
        </div>

    </div> <!-- Pending cash transaction Content -->
    
  </div>  


 <!-- Overview Today's Transactions -->
  <div id="overview_todays_transactions" class="table-container">
    <!-- Loader -->
<div id="overviewLoader" class="text-left mt-1">
    <div class="spinner-grow text-primary" role="status"></div>
 
</div>

    <!-- Today's cash transaction Content -->
    <div class="overview-transactions" style="display:none;">
     <div class="section-title">
            <h6>Today's Transactions</h6>
        </div>
        <div class="card">
            <div class="table-responsive" id="OvTScroll" style="max-height:400; overflow-y:auto;">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Doc No</th>
                            <th>Name</th>
                            <th>T.Type</th>
                            <th>Amount</th>
                        </tr>
                    </thead>
                    <tbody id="overviewtoday"></tbody>
                </table>
            </div>
        </div>

    </div> <!-- Today's transaction Content -->
    
</div>  <!--END Overview Today's Transactions --> 


<!-- Overview Daily report Transactions -->
  <div id="overview_sales_rep_transactions" class="table-container">
    <!-- Loader -->
<div id="overview_sales_rep_Loader" class="text-right mt-1">
    <div class="spinner-grow text-danger" role="status"></div>
 
</div>
<!-- Recent  Daily report transaction Content -->
    <div class="overview-sales_rep-transactions" style="display:none;">
     <div class="section-title">
            <h6>Daily Sales team Reports</h6>
        </div>
        <div class="card">
            <div class="table-responsive" id="ovSRScroll" style="max-height:250; overflow-y:auto;">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Names</th>
                            <th>Sales</th>
                            <th>Receipts</th>
                            <th>Variance</th>
                        </tr>
                    </thead>
                    <tbody id="overview_salesrep_today"></tbody>
                </table>
            </div>
        </div>

    </div> <!--  Daily report transaction Content -->
    
</div>  <!--END  Daily report Transactions --> 


<!--Bank &  Cash Accounts Content -->
<div id="acc_bal_list" class="table-container">
    <!-- Loader -->
<div id="accountsLoader" class="text-center ">
    <div class="spinner-grow text-primary" role="status"></div>
 
</div>


    <div id="accountsbalances" class="accounts-balances mt-2" style="display:none;">
     <div class="section-title">
            <h6>Bank & Cash Accounts</h6>
        </div>
        <div class="card">
            <div class="table-responsive" id="accsScroll" style="max-height:400; overflow-y:auto;">
                <table class="table">
                  
                    <tbody id="accounts"></tbody>
                </table>
            </div>
        </div>

    </div> <!-- Accounts Content -->
    
</div>

<!--END Bank &  Cash Accounts Content -->

<!--Top Expenses Content -->
<div id="top_exp_list" class="table-container">
    <!-- Loader -->
<div id="topexpLoader" class="text-right ">
    <div class="spinner-grow text-danger" role="status"></div>
 
</div>


    <div  class="top-exp mt-2" style="display:none;">
     <div class="section-title">
            <h6>Expenses</h6>
        </div>
        <div class="card">
            <div class="table-responsive" id="tpexpScroll" style="max-height:400; overflow-y:auto;">
                <table class="table">
                  
                    <tbody id="top_exp"></tbody>
                </table>
            </div>
        </div>

    </div> <!-- Accounts Content -->
    
</div>

<!--END Top Expenses Content -->

  <!-- Cashier Charts -->             
<div id="cashierCharts" class="table-container">     
    <div class="charts-wrapper mt-1">

    <!-- Daily Revenue -->
    <div class="chart-card">
        <h6>Daily Revenue</h6>
    <div class="chart-loader text-center mt-1" id="dailyLoader">
        <div class="spinner-grow text-warning"></div>
    </div>
    
        <canvas id="dailyRevenueChart"></canvas>
    </div>

    <!-- Pending vs Collected -->
    <div class="chart-card">
        <h6>Sales vs Collected</h6>
    <div class="chart-loader text-center mt-1" id="statusLoader">
        <div class="spinner-grow text-pink"></div>
    </div>
        <canvas id="statusChart"></canvas>
    </div>

 </div>
</div>
  <!--END  Cashier Charts -->
  
<!-- sales team balances -->
<div id="salesteam_container_list" class="table-container">
    <!-- Loader -->
<div id="salesteamLoader" class="text-right mt-1">
    <div class="spinner-grow text-success" role="status"></div>
 
</div>


    <div  class="salesteam-list mt-2" style="display:none;">
     <div class="section-title">
            <h6>Sales team balances</h6>
        </div>
        <div class="card">
            <div class="table-responsive" id="stbScroll" style="max-height:400; overflow-y:auto;">
                <table class="table">
                  
                    <tbody id="salesteam"></tbody>
                </table>
            </div>
        </div>

    </div> <!-- sales team Content -->
    
</div>

<!-- sales team balances -->

<!--Recievables Content -->
<div id="recievables_container_list" class="table-container">
    <!-- Loader -->
<div id="recievableLoader" class="text-center mt-1">
    <div class="spinner-grow text-danger" role="status"></div>
 
</div>


    <div  class="reciev-list mt-2" style="display:none;">
     <div class="section-title">
            <h6>Recievables</h6>
        </div>
        <div class="card">
            <div class="table-responsive" id="recievScroll" style="max-height:400; overflow-y:auto;">
                <table class="table">
                  
                    <tbody id="recievables"></tbody>
                </table>
            </div>
        </div>

    </div> <!-- Accounts Content -->
    
</div>

<!--END Recievables Content -->

         <!-- Overview Charts -->             
<div id="overviewCharts" class="table-container">    
<div class="charts-wrapper mt-1">

    <!-- Daily Revenue -->
    <div class="chart-card">
        <h6>Sales</h6>
    <div class="chart-loader text-center mt-1" id="dailyLoader1">
        <div class="spinner-grow text-warning"></div>
    </div>
    
        <canvas id="dailyRevenueChart1"></canvas>
    </div>

    <!-- Pending vs Collected -->
    <div class="chart-card">
        <h6>Sales vs Target</h6>
    <div class="chart-loader text-center mt-1" id="statusLoader1">
        <div class="spinner-grow text-pink"></div>
    </div>
        <canvas id="statusChart1"></canvas>
    </div>

 </div>
</div>
         <!--END  Overview Charts -->
         
 <!-- STATS -->             
<div id="overviewStats" class="table-container">    

        <!-- Stats -->
        <div class="section">
            <div class="row mt-2">
                <div class="col-6">
                    <div class="stat-box">
                        <div class="title">Income</div>
                        <div class="value text-success">$ 552.95</div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="stat-box">
                        <div class="title">Expenses</div>
                        <div class="value text-danger">$ 86.45</div>
                    </div>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-6">
                    <div class="stat-box">
                        <div class="title">Total Bills</div>
                        <div class="value">$ 53.25</div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="stat-box">
                        <div class="title">Savings</div>
                        <div class="value">$ 120.99</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- * Stats -->
</div>
         <!--END  STATS-->


<!--Payables Content -->
<div id="payables_container_list" class="table-container">
    <!-- Loader -->
<div id="payableLoader" class="text-center mt-1">
    <div class="spinner-grow text-success" role="status"></div>
 
</div>


    <div  class="payab-list mt-2" style="display:none;">
     <div class="section-title">
            <h6>Payables</h6>
        </div>
        <div class="card">
            <div class="table-responsive" id="payabScroll" style="max-height:400; overflow-y:auto;">
                <table class="table">
                  
                    <tbody id="payables"></tbody>
                </table>
            </div>
        </div>

    </div> <!-- Accounts Content -->
    
</div>

<!--END Payables Content -->

 <!-- Current Stock -->   

 <div id="currentstocks" class="table-container">
     <!-- Current Stock -->   
    <div class="curent-stocks mt-1">
     <div class="section-title">
        <h6 class="title">Current Month Sales</h6>
          
        </div>
            <div class="card">

                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col">Item</th>
                                <th scope="col">Yesterday</th>
                                <th scope="col">Today</th>
                                <th scope="col">All Month</th>
                            </tr>
                        </thead>
                       <tbody id="currstocks">
                          
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
  </div>     
     <!-- Current Stock -->   
     
    <!-- Pending Content -->
 <div id="pending-inventory" class="table-container">
    <div class="pending-invoice-transactions mt-1" >
    <div class="section-title">
            <h6>Pending Transactions</h6>
        </div>
        <div class="card">
            <div class="table-responsive" id="invPScroll" style="max-height:400px; overflow-y:auto;">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Doc No</th>
                            <th>Name</th>
                            <th>T.Type</th>
                            <th>Amount</th>
                        </tr>
                    </thead>
                    <tbody id="pendinginventory"></tbody>
                </table>
            </div>
        </div>

    </div>
</div>
<!-- Pending content-wrapper -->

    <!-- todays Content -->
     <div id="todays-inventory" class="table-container">
    <div class="todays-transactions mt-1" >
    <div class="section-title">
            <h6>Today's Transactions</h6>
        </div>
        <div class="card">
            <div class="table-responsive" id="invScroll" style="max-height:400px; overflow-y:auto;">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Doc No</th>
                            <th>Name</th>
                            <th>T.Type</th>
                            <th>Amount</th>
                        </tr>
                    </thead>
                    <tbody id="todaysinventory"></tbody>
                </table>
            </div>
        </div>

    </div>
     </div>
     <!-- todays content-wrapper -->
    
</div><!-- End of screen wrapper -->

</div> <!-- overviewSection -->