<!DOCTYPE html>
<html lang="en" class="h-100">


<head>
    <!-- meta and links start -->
    <%- include('templet/meta')-%>

</head>

<body>
    <%- include('templet/preloder_topbar_sidebar',{titel: accessdata?.topbardata?.name})-%>
        <!--********** Content body start **********-->

        <div class="content-body">

            <div class="container-fluid " style="min-height: 100vh;">
                <div class="row">
                    <div class="d-none">
                        <input type="hiden" name="sym" value="<%= accessdata.symbol %>">
                        <input type="hiden" name="pls" value="<%= accessdata.plac %>">
                        <input type="hiden" name="thousands_separator" value="<%= accessdata.thousands_separator %>">
                    </div>
                    <div class="col-12">
                        <div class="card mb-3">
                            <div class="card-body">
                                <!-- Centered 3 columns -->
                                <div class="d-flex justify-content-center text-center flex-wrap">

                                    <div class="col-xl-2 col-md-4 col-sm-6 col-12  mx-3 mb-3">
                                        <div class="commission-box">
                                            <h3 class="symbol text-nowrap">
                                                <%= comission %>
                                            </h3>
                                            <h5 class="text-nowrap">
                                                <%= language.Total_Pay_Out_Amount %>
                                            </h5>
                                            <a href="/account/viewcomission/commission">
                                                <button class="btn btn-primary btn-sm btn-rounded text-nowrap"><%= language.View_Comission %></button>
                                            </a>
                                        </div>
                                        </a>
                                    </div>  
                                    <div class="col-xl-2 col-md-4 col-sm-6 col-12  mx-3 mb-3">
                                        <div class="commission-box">
                                            <h3 class="symbol text-nowrap">
                                                <%= paidcomission %>
                                            </h3>
                                            <h5 class="text-nowrap">
                                                <%= language.Total_Received_Amount %>
                                            </h5>
                                            <a href="/account/viewcomission/paidcommission">
                                                <button class="btn btn-success btn-sm btn-rounded text-nowrap"><%= language.View_Paid_Comission %></button>
                                            </a>
                                        </div>
                                        </a>
                                    </div>
                                    <div class="col-xl-2 col-md-4 col-sm-6 col-12  mx-3 mb-3">
                                        <div class="commission-box">
                                            <h3 class="symbol text-nowrap">
                                                <%= due.toFixed(2) %>
                                            </h3>
                                            <h5 class="text-nowrap">
                                                <%= language.Total_Due_Amount %>
                                            </h5>
                                            <a href="/account/viewcomission/duecommission">
                                                <button class="btn btn-warning btn-sm btn-rounded text-nowrap"><%= language.View_Due_Comission %></button>
                                            </a>
                                        </div>
                                        </a>
                                    </div>

                                    <!-- For large screens -->
             

                <!-- For small screens -->
             
                                </div>
                            </div>

                            <!-- Account Management Button aligned to end -->

                        </div>

                    </div>
                </div>

                <div class="col-12">
                    <div class="card ">
                        <div class="card-header">
                            <h3 class="card-title col-6">
                                <%= language.Store_List %>
                            </h3>
                               <div class=" col-6 d-flex justify-content-end  align-items-center mt-3 mb-3">
                    <a href="/account/list">
                        <button class="btn btn-primary btn-rounded text-nowrap">
                            <%= language.Account_Management %>
                        </button>
                    </a>
                </div>
                        </div>

                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped verticle-middle table-responsive-sm">
                                    <thead>
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">
                                                <%= language.Store_Name %>
                                            </th>
                                            <th scope="col">
                                                <%= language.Payout_Info %>
                                            </th>
                                            <th scope="col">
                                                <%= language.Action %>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <% storeList.forEach(function(data, i){ %>


                                            <tr>
                                                <td>
                                                    <%= i + 1 %>
                                                </td>
                                                <td>
                                                    <div class="text-nowrap"> <b>
                                                            <%= data.name %>
                                                        </b> </div>

                                                </td>
                                                <td>
                                                    <div class="text-nowrap">
                                                        <%= language.Total_commission_due_from_store %> : <b
                                                                class="symbol">
                                                                <%= data.comiision.toFixed(2) %>
                                                            </b>
                                                    </div>
                                                    <div class="text-nowrap">
                                                        <%= language.Store_Paid_commission_amount %> : <b
                                                                class="symbol">
                                                                <%= data.pay.toFixed(2) %>
                                                            </b>
                                                    </div>
                                                    <div class="text-nowrap">
                                                        <%= language.Due_commission_amount %> : <b class="symbol">
                                                                <%= (data.comiision - data.pay).toFixed(2) %>
                                                            </b>
                                                    </div>
                                                </td>
                                                <td>
                                                    <a href="/account/payoutdetails/<%= data.id %>"
                                                        class="btn btn-primary shadow sharp"><i
                                                            class="flaticon-381-view"></i></a>
                                                </td>
                                            </tr>
                                            <% }) %>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        </div>

        <!--********** Content body end **********-->

        </div>
        <!--**********************************
            Footer start
        ***********************************-->
        <%- include('templet/footer')-%>

            <!--**********************************
            Footer end
        ***********************************-->

            </div>

            <!--********** Main wrapper end **********-->
            <%- include('templet/script')-%>

</body>



</html>