@extends('printlayout')
@section('content')
    
    <div class="row invoice-box">
        <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
            <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 text-center">
                <h1 style="font-size:26px;">
                    {{ __('sitelabel.ProductRankingReport') }} (By Quantity)
                </h1>
            </div>
        </div>
    </div>

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if (isset($products) && $products->count() > 0)
        <div class="transaction-info">
            <ul style="display: flex; list-style:none; justify-content:space-between; padding: 10px 0;">
                <li><strong>{{ __('sitelabel.StartDate') }}:
                    </strong>{{ \Carbon\Carbon::parse(request('txtStartDate'))->format('d-F-Y') }}</li>
                <li><strong>{{ __('sitelabel.EndDate') }}:
                    </strong>{{ \Carbon\Carbon::parse(request('txtEndDate'))->format('d-F-Y') }}</li>
            </ul>
        </div>

        <div class="row table-row">
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th class="text-center" style="width:10%">{{ __('sitelabel.SerialNumber') }}</th>
                        <th style="width:50%">{{ __('sitelabel.Product') }}</th>
                        <th class="text-right" style="width:20%">{{ __('sitelabel.SaleQty') }}</th>
                        <th class="text-right" style="width:20%">{{ __('sitelabel.StockQty') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($products as $index => $product)
                                                <tr>
                            <td class="text-center">{{ $index + 1 }}</td>
                            <td>{{ $product->ProductName }}</td>
                            <td class="text-right">{{ number_format($product->SaleQty, 0) }}</td>
                            <td class="text-right">{{ number_format($product->StockQty, 0) }}</td>
                        </tr>
                    @endforeach
                    <tr>
                        <td colspan="2" class="text-right font-weight-bold">{{ __('sitelabel.Total') }}</td>
                        <td class="text-right font-weight-bold">{{ number_format($gTotalSaleQty, 0) }}</td>
                        <td class="text-right font-weight-bold">{{ number_format($gTotalStockQty, 0) }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    @else
        <div class="table-responsive">
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th class="text-center" style="width:10%">{{ __('sitelabel.SerialNumber') }}</th>
                        <th style="width:50%">{{ __('sitelabel.Product') }}</th>
                        <th class="text-right" style="width:20%">{{ __('sitelabel.SaleQty') }}</th>
                        <th class="text-right" style="width:20%">{{ __('sitelabel.StockQty') }}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th colspan="4" class="text-center">
                            {{ __('sitelabel.NoRecordAvailableBetweenTheseDates') }}
                        </th>
                    </tr>
                </tbody>
            </table>
        </div>
    @endif

    @include('sign-subview.signandbuttons')
@endsection

@section('script')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const startDate = document.querySelector('input[name="txtStartDate"]');
            const endDate = document.querySelector('input[name="txtEndDate"]');
            
            startDate.addEventListener('change', function() {
                endDate.min = this.value;
                if (endDate.value && endDate.value < this.value) {
                    endDate.value = this.value;
                }
            });
            
            endDate.addEventListener('change', function() {
                if (startDate.value && this.value < startDate.value) {
                    this.value = startDate.value;
                }
            });
        });
    </script>
@endsection