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

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

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

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

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

<table id="customerHistoryTable" class="table table-striped w-100">
    <thead>
        <tr>
            <th>Date</th>
            <th>Record No</th>
            <th>Payment Method</th>
            <th>Pending Amount</th>
            <th>Paid Amount</th>
        </tr>
    </thead>
    <tbody>
        @foreach($history as $row)
        <tr>
            <td>{{ \Carbon\Carbon::parse($row->date)->format('d-m-Y') }}</td>
            <td>{{ $row->record_no }}</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 () {

    $('#customerHistoryTable').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>