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

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

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

<h4 style="text-align: center; margin-bottom: 15px;">
    Supplier Payment History :
    {{ $payments->first()->supplier->name ?? '' }}
</h4>


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



<table id="historyTable" 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($payments 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 () {

    $('#historyTable').DataTable({
        responsive: true,
        order: [[0, 'desc']],
        pageLength: 10
    });

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