@if(request()->isMethod('post'))
    @if(isset($reportData) && count($reportData) > 0)
        <div class="table-responsive" style="margin-top: 15px;">
            <table class="table table-bordered table-striped" id="myTable">
                <thead>
                    <tr class="info">
                        <th class="text-center">S/L</th>
                        <th>Invoice No</th>
                        <th>Name</th>
                        <th>Mobile</th>
                        <th>Address</th>
                        <th class="text-right">Total Bill</th>
                        <th class="text-right">Total Due</th>
                        <th class="text-center hidden-print">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @php 
                        $totalBillSum = 0; 
                        $totalDueSum = 0; 
                    @endphp
                    @foreach($reportData as $key => $value)
                        <tr>
                            <td class="text-center">{{ $key + 1 }}</td>
                            <td>{{ $value->invoice_code }}</td>
                            <td>{{ $value->customer_name }}</td>
                            <td>{{ $value->mobile }}</td>
                            <td>{{ $value->address }}</td>
                            <td class="text-right">{{ number_format($value->total_bill, 2) }}</td>
                            <td class="text-right">{{ number_format($value->due_amount, 2) }}</td>
                            <td class="text-center hidden-print">
                                <a href="{{ route('sale.show', $value->id) }}" class="btn btn-warning btn-xs" title="View Detail">
                                    <i class="fa fa-eye"></i> View
                                </a>
                                <a target="_blank" href="{{ url('downloadSingleSalePdf/' . $value->id . '/' . true) }}" class="btn btn-info btn-xs" title="Print Invoice">
                                    <i class="fa fa-print"></i> Print
                                </a>
                            </td>
                        </tr>
                        @php 
                            $totalBillSum += $value->total_bill;
                            $totalDueSum += $value->due_amount; 
                        @endphp
                    @endforeach
                </tbody>
                <tfoot>
                    <tr class="active">
                        <th colspan="5" class="text-right">Total Summary:</th>
                        <th class="text-right">{{ number_format($totalBillSum, 2) }}</th>
                        <th class="text-right">{{ number_format($totalDueSum, 2) }}</th>
                        <th class="hidden-print"></th>
                    </tr>
                </tfoot>
            </table>
        </div>
    @else
        <div class="text-center hidden-print" style="padding: 40px 20px; background: #fdfaf4; border: 1px dashed #f0ad4e; border-radius: 5px; margin-top: 15px;">
            <i class="fa fa-search-minus fa-3x" style="color: #f0ad4e; margin-bottom: 15px;"></i>
            <h3 style="color: #d68b00; margin-top: 0;">No Due Data Found!</h3>
            <p style="color: #777; font-size: 15px;">We couldn't find any due invoices matching your search criteria. <br> Please change the date range or customer and try again.</p>
        </div>
    @endif
@else
    <div class="text-center hidden-print" style="padding: 40px 20px; background: #f4f8fd; border: 1px dashed #5bc0de; border-radius: 5px; margin-top: 15px;">
        <i class="fa fa-hand-pointer-o fa-3x" style="color: #5bc0de; margin-bottom: 15px;"></i>
        <h3 style="color: #31708f; margin-top: 0;">Ready to Search</h3>
        <p style="color: #777; font-size: 15px;">Select your desired date range, warehouse, or customer from the top filter and click <strong>Search</strong> to load the due invoices.</p>
    </div>
@endif

<style>
    /* Printing Styles */
    @media print {
        .hidden-print, .bg-title, .filter-section, .btn, .footer, .navbar, .side-menu, .breadcrumb {
            display: none !important;
        }
        .panel {
            border: none !important;
        }
        .panel-heading {
            background-color: #fff !important;
            color: #000 !important;
            border-bottom: 2px solid #000;
            text-align: center;
        }
        .panel-body {
            padding: 0 !important;
        }
        table {
            width: 100% !important;
            border-collapse: collapse !important;
            margin-top: 10px !important;
        }
        table th, table td {
            border: 1px solid #000 !important;
            padding: 5px !important;
        }
    }
</style>