@extends('layouts.app')

@section('title', 'Reverse Micro Loan Payments')

@section('content')
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-12">
            <div class="page-header d-flex justify-content-between align-items-center">
                <h1 class="mb-0"><i class="fas fa-undo me-2"></i>Reverse Micro Loan Payments</h1>
                <a href="{{ route('cashier.index') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Back to Cashier
                </a>
            </div>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-header bg-info text-white">
            <h5 class="mb-0"><i class="fas fa-search me-2"></i>Search Payments</h5>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('cashier.reverse-payment') }}" class="row g-3 align-items-end">
                <div class="col-md-3">
                    <label class="form-label">CBO</label>
                    <select name="cbo_id" class="form-control">
                        <option value="">All</option>
                        @foreach($cbos as $cbo)
                            <option value="{{ $cbo->cbo_id }}" {{ request('cbo_id') == $cbo->cbo_id ? 'selected' : '' }}>{{ $cbo->cbo_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">From Date</label>
                    <input type="date" name="from_date" class="form-control" value="{{ request('from_date') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">To Date</label>
                    <input type="date" name="to_date" class="form-control" value="{{ request('to_date') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Member NIC</label>
                    <input type="text" name="member_nic" class="form-control" value="{{ request('member_nic') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Loan ID</label>
                    <input type="text" name="loan_id" class="form-control" value="{{ request('loan_id') }}">
                </div>
                <div class="col-md-1">
                    <button type="submit" class="btn btn-primary w-100"><i class="fas fa-search"></i></button>
                </div>
            </form>
        </div>
    </div>

    @if(isset($payments) && $payments->count())
    <div class="card">
        <div class="card-header bg-success text-white">
            <h5 class="mb-0"><i class="fas fa-list me-2"></i>Payments</h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-bordered table-hover align-middle mb-0">
                    <thead class="table-dark">
                        <tr>
                            <th>ID</th>
                            <th>Date</th>
                            <th>Member</th>
                            <th>Loan ID</th>
                            <th>Amount</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($payments as $payment)
                        <tr>
                            <td>{{ $payment->id }}</td>
                            <td>{{ $payment->payment_date }}</td>
                            <td>{{ $payment->member ? $payment->member->initials : '' }}</td>
                            <td>{{ $payment->loan_id }}</td>
                            <td class="text-end">{{ number_format($payment->amount, 2) }}</td>
                            <td>{{ ucfirst($payment->status) }}</td>
                            <td>
                                @if($payment->status !== 'reversed')
                                <button class="btn btn-danger btn-sm" onclick="showReverseModal({{ $payment->id }})"><i class="fas fa-undo"></i> Reverse</button>
                                @else
                                <span class="text-muted">Reversed</span>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @elseif(request()->all())
        <div class="alert alert-warning mt-4">No payments found for the selected filters.</div>
    @endif

    <!-- Reverse Modal -->
    <div class="modal fade" id="reverseModal" tabindex="-1" aria-labelledby="reverseModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <form method="POST" action="{{ route('cashier.reverse-bulk-payment') }}" id="reverseForm">
            @csrf
            <input type="hidden" name="payment_ids[]" id="reverse_payment_id">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="reverseModalLabel">Reverse Payment</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Reason for Reversal</label>
                    <input type="text" name="reason" class="form-control" required>
                </div>
                <div class="alert alert-warning">This will reverse the payment and update all related records. Are you sure?</div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-danger">Reverse Payment</button>
              </div>
            </div>
        </form>
      </div>
    </div>
</div>

<script>
function showReverseModal(paymentId) {
    document.getElementById('reverse_payment_id').value = paymentId;
    var modal = new bootstrap.Modal(document.getElementById('reverseModal'));
    modal.show();
}
</script>
@endsection