@extends('layout.mainlayout')
@section('content')
    <div class="page-wrapper">
        <div class="content">
            @component('components.breadcrumb')
                @slot('title')
                    Sales Report
                @endslot
                @slot('li_1')
                    Manage Your Sales Report
                @endslot
            @endcomponent
            <!-- /product list -->
            <div class="card table-list-card">
                <div class="card-body">
                    <div class="table-top">
                        <div class="search-set">
                            <div class="search-input">
                                <a href="" class="btn btn-searchset"><i data-feather="search"
                                        class="feather-search"></i></a>
                            </div>
                        </div>
                        <div class="search-path">
                            <div class="d-flex align-items-center">
                                <a class="btn btn-filter" id="filter_search">
                                    <i data-feather="filter" class="filter-icon"></i>
                                    <span><img src="{{ URL::asset('/build/img/icons/closes.svg') }}" alt="img"></span>
                                </a>

                            </div>

                        </div>
                        <div class="form-sort">
                            <i data-feather="sliders" class="info-img"></i>
                            <select class="select">
                                <option>Sort by Date</option>
                                <option>25 9 23</option>
                                <option>12 9 23</option>
                            </select>
                        </div>
                    </div>
                    <!-- /Filter -->
                    <div class="card" id="filter_inputs">
                        <div class="card-body pb-0">
                            <div class="row">
                                <div class="col-lg-3">
                                    <div class="input-blocks">
                                        <i data-feather="box" class="info-img"></i>
                                        <select class="select">
                                            <option>Choose Product</option>
                                            <option>Bold V3.2</option>
                                            <option>Nike Jordan</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="input-blocks">
                                        <i data-feather="zap" class="info-img"></i>
                                        <select class="select">
                                            <option>Choose Category</option>
                                            <option>Accessories</option>
                                            <option>Shoe</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-sm-6 col-12">
                                    <div class="input-blocks">
                                        <a class="btn btn-filters ms-auto"> <i data-feather="search"
                                                class="feather-search"></i> Search </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /Filter -->
                    <div class="table-responsive">
                        <table class="table datanew">
                            <thead>
                                <tr>
                                    <th class="no-sort">
                                        <label class="checkboxs">
                                            <input type="checkbox" id="select-all">
                                            <span class="checkmarks"></span>
                                        </label>
                                    </th>
                                    <th>Product Name</th>
                                    <th>Model No</th>
                                    <th>Batch No</th>
                                    <th>Sold Qty</th>
                                    <th>Sold Amount</th>
                                    <th>Instock Qty</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($salesreports as $report)
                                    <tr>
                                        <td>
                                            
                                        </td>
                                        <td>{{ $report->product_name }}</td>
                                        <td>{{ $report->model_number }}</td> <!-- Assuming category refers to model_number -->
                                        <td>{{ $report->batch_number ?? 'N/D' }}</td> <!-- Using batch_number as brand -->
                                        <td>{{ $report->qty }}</td>
                                        <td>Tsh{{ number_format($report->paid_price, 2) }}</td>
                                        <td>--</td> <!-- Replace with actual instock qty logic if available -->
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        
                    </div>
                </div>
            </div>
            <!-- /product list -->
        </div>
    </div>
@endsection