@extends('layouts.app')

@section('title', 'Customer Report')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="fw-bold">Customer Report</h2>
</div>

<div class="card">
    <div class="card-body">
        <table id="customerReportTable" class="table table-striped table-bordered">
            <thead class="table-light">
                <tr>
                    <th>Customer Name</th>
                    <th>Mobile</th>
                    <th>Total Invoices</th>
                    <th>Total Purchase Amount (₹)</th>
                </tr>
            </thead>
            <tbody>
                @foreach($customers as $customer)
                <tr>
                    <td>{{ $customer->customer_name }}</td>
                    <td>{{ $customer->mobile }}</td>
                    <td>{{ $customer->invoices_count }}</td>
                    <td class="text-end">{{ number_format($customer->invoices_sum_grand_total ?? 0, 2) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('#customerReportTable').DataTable({
        "order": [[ 3, "desc" ]]
    });
});
</script>
@endpush