<template>
        <div class="container-fluid px-0">
            <div class="row">
                <div class="col-sm-12">
                  <!-- Table1 -->
                    <div class="card-body rounded_8 bg-white mb-3">
                        <h6 class=" border-0 card-title pb-1  text-dark">
                           Daily Sale Report  
                        </h6>
                        <div class="table-responsive-lg">
                            <table class="table table-bordered">
                                <thead class=" border-0 bg-light">
                                    <tr class="border-white">
                                        <th class="text-nowrap">No</th>
                                        <th class="text-nowrap">Category Name</th>
                                        <th class="text-nowrap">Item Name</th>
                                        <th class="text-nowrap">Qty</th>
                                        <th class="text-nowrap">Total Sale</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="border-white" v-for="item in 3">
                                        <td class="border-0"></td>
                                        <td class="border-0"></td>
                                        <td class="border-0"></td>
                                        <td class="text-nowrap border-0">Total 0</td>
                                        <td class="text-nowrap border-0">$0.00</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                  <!-- Table2 -->


                    <div class="card border-0">
                        <div class="card-body  border-0 bg-white pb-0 rounded_tx_8">
                            <div class="mb-3">
                                <div class="d-flex justify-content-between">
                                    <div class="d-flex">
                                        <label class="pt-1">Show</label>
                                        <label class="px-2">
                                            <select class="form-control form-control-sm shadow-sm">
                                                <option v-for="(item,index) in 5">
                                                    {{100}}
                                                </option>
                                            </select>
                                        </label>
                                        <label class="pt-1">Entries</label>
                                    </div>
                                    <div>
                                        <input type="search"  class="rounded form-control form-control-sm" style="width: 230px" placeholder="Searching..." aria-label="Search">
                                    </div>
                                </div>
                            </div>
                            <!-- if you want use scroll and fixed table,you can add class (table-responsive table_scroll) -->
                            <div class="table-responsive">
                                <table class="table  table-borderless table_fixed">
                                    <thead class="fixed_head">
                                        <tr class="border-top border-bottom">
                                            <th class="text-nowrap py-1">No</th>
                                            <th class="text-nowrap py-1">Image</th>
                                            <th class="text-nowrap py-1">Category</th>
                                            <th class="text-nowrap py-1">Item Name</th>
                                            <th class="text-nowrap py-1">Unit</th>
                                            <th class="text-nowrap py-1">Cost</th>
                                            <th class="text-nowrap py-1">Price</th>
                                            <th class="text-nowrap py-1">Description</th>
                                            <th class="text-nowrap py-1">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(item, index) in 2">
                                            <td>{{index+0}}</td>
                                            <td><img :src="index+0" height="20"/> {{index+0}}</td>
                                            <td class="text-nowrap">ភេសជ្ជះ</td>
                                            <td class="text-nowrap">Coca</td>
                                            <td class="text-nowrap">unit_name</td>
                                            <td class="text-nowrap">${{index+0}}</td>
                                            <td class="text-nowrap">${{index+0}}</td>
                                            <td class="text-nowrap">Description</td>
                                            <td class="text-nowrap">
                                                <button type="button" title="Show" class="btn  shadow-sm border-0">
                                                    <i class="fa-solid fa-edit"></i> <small>Edit</small>
                                                 </button>
                                            </td>
                                        </tr>
                                        
                                        <!-- fixed footer add class (fixed_tfoot) -->
                                    </tbody>
                                </table>
                            </div>
                            
                                <div class="d-flex justify-content-between">
                                    <div class="pt-2">
                                        Showing <strong>50</strong> To <strong>100</strong> Of  <strong class="text-primary">100</strong>  Entries
                                    </div>  
                                </div>
                            </div>
                        </div>
                        
                    </div>



                </div>
            </div>
    </div>
</template>