@extends('backend.layout.main')

@section('content')
<section>
    <div class="container-fluid">
        <div class="card">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                <div>
                    <h4 class="mb-1">Customer Statement</h4>
                    <span class="text-muted">{{$customer->name}} — {{$customer->phone_number}}</span>
                </div>
                <a href="{{route('customer.index')}}" class="btn btn-outline-secondary mt-2 mt-md-0">
                    <i class="dripicons-arrow-thin-left"></i> Back to Customers
                </a>
            </div>
            <div class="card-body">
                <div class="row mb-4">
                    <div class="col-md-4 mb-3 mb-md-0">
                        <div class="border rounded p-3 h-100">
                            <small class="text-muted d-block">Total Business</small>
                            <strong class="h4 mb-0">{{number_format($total_amount, 2)}} {{config('currency')}}</strong>
                        </div>
                    </div>
                    <div class="col-md-4 mb-3 mb-md-0">
                        <div class="border rounded p-3 h-100">
                            <small class="text-muted d-block">Total Paid</small>
                            <strong class="h4 mb-0 text-success">{{number_format($paid_amount, 2)}} {{config('currency')}}</strong>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="border rounded p-3 h-100">
                            <small class="text-muted d-block">Total Due</small>
                            <strong class="h4 mb-0 {{$due_amount > 0 ? 'text-danger' : 'text-muted'}}">{{number_format($due_amount, 2)}} {{config('currency')}}</strong>
                        </div>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Type</th>
                                <th>Reference</th>
                                <th class="text-right">Total</th>
                                <th class="text-right">Paid</th>
                                <th class="text-right">Due</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($rows as $row)
                                <tr>
                                    <td>{{date(config('date_format'), strtotime($row['date']))}}</td>
                                    <td><span class="badge badge-light border">{{$row['type']}}</span></td>
                                    <td>{{$row['reference']}}</td>
                                    <td class="text-right">{{number_format($row['total'], 2)}}</td>
                                    <td class="text-right text-success">{{number_format($row['paid'], 2)}}</td>
                                    <td class="text-right {{$row['due'] > 0 ? 'text-danger font-weight-bold' : 'text-muted'}}">{{number_format($row['due'], 2)}}</td>
                                </tr>
                            @empty
                                <tr><td colspan="6" class="text-center text-muted py-4">No customer transactions found.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
