@extends('loans.repayment.approvals.base')

@section('action-content')
<section class="content">

    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">
                <i class="fa fa-check-circle"></i> Loan Repayment Approvals
            </h3>
        </div>

        <div class="box-body table-responsive">

            {{-- Alerts --}}
            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif

            @if(session('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif

            <table id="repaymentsTable" class="table table-bordered table-hover dt-controlled">
    <thead>
        <tr>
            <th>Date</th>
            <th>Client</th>
            <th>Loan #</th>
            <th>Amount Paid</th>
            <th>Type</th>
            <th>Teller</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
    </thead>

    <tbody>
    @forelse($repayments as $repayment)
        <tr>
            <td>
    {{ $repayment->payment_date
        ? \Carbon\Carbon::parse($repayment->payment_date)->format('d-m-Y')
        : '-' }}
</td>

            <td>
    {{ $repayment->loan && $repayment->loan->client
        ? $repayment->loan->client->surname . ' ' . $repayment->loan->client->first_name
        : '-' }}
</td>

            <td>{{ $repayment->loan->loan_number ?? '-' }}</td>

            <td class="text-right">
                ₵{{ number_format($repayment->amount_paid ?? 0, 2) }}
            </td>

            <td>
                {{ ucwords(str_replace('_', ' ', $repayment->repayment_type ?? 'installment')) }}
            </td>

            <td>{{ optional($repayment->teller)->name ?? 'System' }}</td>

            <td>
                @if($repayment->approval_status === 'pending')
                    <span class="label label-warning">Pending</span>
                @elseif($repayment->approval_status === 'approved')
                    <span class="label label-success">Approved</span>
                @else
                    <span class="label label-danger">Rejected</span>
                @endif
            </td>

            <td>
                @if($repayment->approval_status === 'pending')
                    <button class="btn btn-success btn-sm approveBtn"
                        data-id="{{ $repayment->id }}">
                        <i class="fa fa-check"></i>
                    </button>

                    <button class="btn btn-danger btn-sm rejectBtn"
                        data-id="{{ $repayment->id }}">
                        <i class="fa fa-times"></i>
                    </button>
                @else
                    <span class="text-muted">—</span>
                @endif
            </td>
        </tr>
    @empty
        
    @endforelse

    </tbody>
    <tr>
            <td colspan="8" class="text-center text-muted">
                No pending approvals
            </td>
        </tr>
</table>

        </div>
    </div>

</section>
@endsection

@push('scripts')
<script>
$(document).ready(function () {

    $('#repaymentsTable').DataTable({
        destroy: true,   // ← CRITICAL
        order: [[0, 'desc']],
        pageLength: 25
    });
    

    // Approve repayment
    $(document).on('click', '.approveBtn', function () {
        let id = $(this).data('id');
        Swal.fire({
            title: 'Approve repayment?',
            text: 'This will apply the repayment to the loan.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, approve'
        }).then(result => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `/loans/repayment/${id}/approve`,
                    type: 'POST',
                    headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                    success: function (data) {
                        Swal.fire('Approved!', data.message || 'Repayment approved.', 'success')
                            .then(() => location.reload());
                    },
                    error: function (xhr) {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Approval failed.', 'error');
                    }
                });
            }
        });
    });

    // Reject repayment
    $(document).on('click', '.rejectBtn', function () {
        let id = $(this).data('id');
        Swal.fire({
            title: 'Reject repayment?',
            icon: 'error',
            showCancelButton: true,
            confirmButtonText: 'Reject'
        }).then(result => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `/loans/repayment/${id}/reject`,
                    type: 'POST',
                    headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                    success: function (data) {
                        Swal.fire('Rejected!', data.message || 'Repayment rejected.', 'success')
                            .then(() => location.reload());
                    },
                    error: function (xhr) {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Rejection failed.', 'error');
                    }
                });
            }
        });
    });
});
</script>
@endpush