@extends('backend.partials.master')
@section('title','Return Payment History')

@section('maincontent')
<main class="content">
<div class="container-fluid p-0">

    <div class="mb-3">
        <a href="{{ route('returnpayment') }}" class="btn btn-secondary">
            <i data-feather="arrow-left"></i> Back
        </a>
    </div>

  <h4 style="text-align: center; margin-bottom: 15px;">
    Customer Return Payment History :
    {{ $customer->fname ?? 'N/A' }}
</h4>

    <div class="card">
        <div class="card-body">

            <table id="returnHistoryTable" class="table table-striped w-100">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Record No</th>
                        <th>Customer</th>
                        <th>Payment Method</th>
                        <th>Pending Amount</th>
                        <th>Paid Amount</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($payments as $row)
                    <tr>
                        <td>{{ \Carbon\Carbon::parse($row->date)->format('d-m-Y') }}</td>
                        <td>{{ $row->record_no }}</td>
                        <td>{{ $row->customer->fname ?? 'N/A' }}</td>
                        <td>{{ $row->payment_method }}</td>
                        <td>{{ $row->pending_amt - $row->amount }}</td>
                        <td>{{ $row->amount }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>

        </div>
    </div>

</div>
</main>
@endsection


<script>
document.addEventListener("DOMContentLoaded", function () {

    $('#returnHistoryTable').DataTable({
        responsive: true,
        order: [[0, 'desc']],
        pageLength: 10,
        dom: "<'row'<'col-md-6'l><'col-md-6 text-end'B>>" +
             "<'row'<'col-sm-12'tr>>" +
             "<'row'<'col-md-5'i><'col-md-7'p>>",
        buttons: [
            'copy', 'excel', 'pdf', 'print'
        ]
    });

    feather.replace();
});
</script>