@extends('admin.layouts.app')

@section('page-title', 'Payments')
@section('page-description', 'Manage and monitor all payment transactions')

@section('content')

<style>
.payment-page{display:grid;gap:18px}
.payment-page *{box-sizing:border-box}
.payment-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}
.payment-heading h2{margin:0;color:#1d3557;font-size:20px}
.payment-heading p{margin:5px 0 0;color:#8b98aa;font-size:10px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat-card{background:#fff;border:1px solid #e3eaf4;border-radius:14px;padding:17px}
.stat-label{font-size:8px;text-transform:uppercase;letter-spacing:.5px;color:#94a3b8;font-weight:800}
.stat-value{margin-top:7px;font-size:22px;font-weight:900;color:#253b55}
.stat-description{margin-top:4px;font-size:8px;color:#9aa6b6}
.stat-green .stat-value{color:#198754}.stat-orange .stat-value{color:#b7791f}.stat-red .stat-value{color:#dc3545}
.total-card{display:flex;align-items:center;justify-content:space-between;padding:19px 21px;background:linear-gradient(135deg,#1769e0,#3d8cff);border-radius:14px;color:#fff}
.total-label{font-size:9px;font-weight:800;opacity:.85;text-transform:uppercase}
.total-value{margin-top:5px;font-size:25px;font-weight:900}
.total-icon{font-size:25px}
.filter-card,.table-card{background:#fff;border:1px solid #e3eaf4;border-radius:14px;overflow:hidden}
.filter-card{padding:17px}
.filter-title{font-size:11px;font-weight:900;color:#273b59;margin-bottom:12px}
.filter-form{display:grid;grid-template-columns:2fr 1fr 1fr auto auto;gap:10px;align-items:end}
.field label{display:block;font-size:8px;color:#8b98aa;font-weight:800;margin-bottom:5px}
.field input,.field select{width:100%;height:38px;border:1px solid #dfe6ee;border-radius:8px;padding:0 10px;background:#fff;color:#344966;font-size:10px;outline:none}
.search-btn,.reset-btn,.manual-btn,.view-btn,.loan-link{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 13px;border-radius:8px;font-size:9px;font-weight:800;text-decoration:none;cursor:pointer}
.search-btn{border:0;background:#1769e0;color:#fff}.reset-btn{background:#f5f7fa;border:1px solid #e1e7ef;color:#64748b}
.table-head{padding:17px 19px;border-bottom:1px solid #edf1f6;display:flex;justify-content:space-between;align-items:center;gap:12px}
.table-head h3{margin:0;font-size:12px;color:#273b59}.table-head p{margin:4px 0 0;font-size:8px;color:#9aa6b6}
.table-actions{display:flex;align-items:center;gap:10px}.result-count{font-size:9px;color:#8b98aa}
.manual-btn{border:0;background:#1769e0;color:#fff}.manual-btn:hover{background:#1259bd}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:950px}
th{padding:11px 14px;background:#f8fafc;color:#8b98aa;font-size:8px;text-transform:uppercase;letter-spacing:.4px;text-align:left}
td{padding:13px 14px;border-top:1px solid #edf1f6;color:#344966;font-size:9px;vertical-align:middle}
.client-name{font-weight:800;color:#273b59}.client-sub{margin-top:3px;color:#9aa6b6;font-size:7px}
.loan-number{font-weight:800;color:#1769e0}.emi-number{margin-top:3px;color:#64748b;font-size:8px}
.amount{font-weight:900;color:#253b55}.method{display:inline-flex;padding:5px 7px;border-radius:7px;background:#f4f7fa;color:#53667d;font-size:7px;font-weight:800;text-transform:capitalize}
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:20px;font-size:7px;font-weight:900;text-transform:uppercase}
.badge-paid{background:#eaf8ef;color:#287646}.badge-pending{background:#fff7e8;color:#b7791f}.badge-failed{background:#fff1f2;color:#be123c}.badge-gray{background:#f1f5f9;color:#64748b}
.view-btn{height:30px;background:#eaf2ff;color:#1769e0}.loan-link{height:30px;margin-left:5px;background:#f0fdf4;color:#198754}
.empty{padding:45px 20px;text-align:center;color:#9aa6b6;font-size:10px}
.pagination-area{padding:15px 19px;border-top:1px solid #edf1f6;display:flex;justify-content:space-between;align-items:center}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(5,18,35,.58);z-index:9999;padding:18px;align-items:center;justify-content:center}
.modal{width:100%;max-width:520px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 25px 70px rgba(0,0,0,.22)}
.modal-header{padding:17px 19px;border-bottom:1px solid #edf1f6;display:flex;justify-content:space-between;align-items:center}
.modal-header h3{margin:0;font-size:14px;color:#273b59}.modal-header p{margin:4px 0 0;font-size:8px;color:#9aa6b6}
.modal-close{border:0;background:#f4f7fa;width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:18px;color:#64748b}
.modal-body{padding:19px;display:grid;gap:11px}.form-group label{display:block;font-size:8px;color:#63758c;font-weight:800;margin-bottom:5px}
.form-control{width:100%;height:39px;border:1px solid #dfe6ee;border-radius:8px;padding:0 10px;font-size:10px;background:#fff}
textarea.form-control{height:75px;padding:10px;resize:vertical}.modal-info{padding:10px;border-radius:8px;background:#f1f6ff;color:#63758c;font-size:8px;line-height:1.5}
.modal-actions{display:flex;gap:8px;margin-top:4px}.modal-actions button{flex:1}
.cancel-btn{border:1px solid #dfe6ee;background:#f5f7fa;color:#53667d;height:38px;border-radius:8px;font-size:9px;font-weight:800}.save-btn{border:0;background:#1769e0;color:#fff;height:38px;border-radius:8px;font-size:9px;font-weight:800}
@media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr)}.filter-form{grid-template-columns:1fr 1fr}.search-btn,.reset-btn{width:100%}}
@media(max-width:600px){.payment-heading{flex-direction:column}.stats-grid{grid-template-columns:1fr}.filter-form{grid-template-columns:1fr}.table-head{align-items:flex-start;flex-direction:column}.table-actions{width:100%;justify-content:space-between}.manual-btn{width:100%}}
</style>

<div class="payment-page">

    <div class="payment-heading">
        <div>
            <h2>Payment Management</h2>
            <p>View online payments and record manual client payments.</p>
        </div>
    </div>

    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-label">Total Payments</div>
            <div class="stat-value">{{ $totalPayments ?? 0 }}</div>
            <div class="stat-description">All payment transactions</div>
        </div>
        <div class="stat-card stat-green">
            <div class="stat-label">Successful</div>
            <div class="stat-value">{{ $successfulPayments ?? 0 }}</div>
            <div class="stat-description">Completed payments</div>
        </div>
        <div class="stat-card stat-orange">
            <div class="stat-label">Pending</div>
            <div class="stat-value">{{ $pendingPayments ?? 0 }}</div>
            <div class="stat-description">Awaiting payment</div>
        </div>
        <div class="stat-card stat-red">
            <div class="stat-label">Failed</div>
            <div class="stat-value">{{ $failedPayments ?? 0 }}</div>
            <div class="stat-description">Failed or cancelled</div>
        </div>
    </div>

    <div class="total-card">
        <div>
            <div class="total-label">Total Successful Payment Amount</div>
            <div class="total-value">₹{{ number_format($totalPaymentAmount ?? $totalAmount ?? 0,2) }}</div>
        </div>
        <div class="total-icon">💰</div>
    </div>

    <div class="filter-card">
        <div class="filter-title">Search & Filter Payments</div>
        <form method="GET" action="{{ route('admin.payments') }}" class="filter-form">
            <div class="field">
                <label>Search</label>
                <input type="text" name="search" value="{{ $search ?? '' }}" placeholder="Name, email, mobile, payment ID, loan number...">
            </div>
            <div class="field">
                <label>Status</label>
                <select name="status">
                    <option value="">All Status</option>
                    @foreach(['paid'=>'Paid','pending'=>'Pending','created'=>'Created','failed'=>'Failed','cancelled'=>'Cancelled','cancelled_by_user'=>'Cancelled by User'] as $value=>$label)
                        <option value="{{ $value }}" {{ ($status ?? '') === $value ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label>Payment Method</label>
                <select name="payment_method">
                    <option value="">All Methods</option>
                    <option value="online" {{ ($paymentMethod ?? '') === 'online' ? 'selected' : '' }}>Online</option>
                    <option value="cash" {{ ($paymentMethod ?? '') === 'cash' ? 'selected' : '' }}>Cash</option>
                    <option value="upi" {{ ($paymentMethod ?? '') === 'upi' ? 'selected' : '' }}>UPI</option>
                    <option value="bank_transfer" {{ ($paymentMethod ?? '') === 'bank_transfer' ? 'selected' : '' }}>Bank Transfer</option>
                </select>
            </div>
            <button type="submit" class="search-btn">🔎 Search</button>
            <a href="{{ route('admin.payments') }}" class="reset-btn">Reset</a>
        </form>
    </div>

    <div class="table-card">
        <div class="table-head">
            <div>
                <h3>Payment Transactions</h3>
                <p>Online and manually recorded payments</p>
            </div>
            <div class="table-actions">
                <span class="result-count">{{ $payments->total() }} Payments</span>
                <button type="button" class="manual-btn" onclick="openManualPaymentModal()">+ Manual Payment</button>
            </div>
        </div>

        <div class="table-wrap">
            @if($payments->count())
                <table>
                    <thead>
                        <tr>
                            <th>Client</th>
                            <th>Loan / EMI</th>
                            <th>Payment ID</th>
                            <th>Amount</th>
                            <th>Method</th>
                            <th>Status</th>
                            <th>Date</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach($payments as $payment)
                        @php
                            $loan = $payment->loan;
                            $installment = $payment->installment;
                        @endphp
                        <tr>
                            <td>
                                <div class="client-name">{{ $payment->user->name ?? 'Unknown' }}</div>
                                <div class="client-sub">{{ $payment->user->mobile ?? ($payment->user->email ?? '—') }}</div>
                            </td>
                            <td>
                                @if($loan)
                                    <div class="loan-number">{{ $loan->loan_number ?? 'Loan #'.$loan->id }}</div>
                                    @if($installment)
                                        <div class="emi-number">EMI #{{ $installment->installment_number }}</div>
                                    @else
                                        <div class="emi-number">Loan balance payment</div>
                                    @endif
                                @else
                                    <span style="color:#9aa6b6">—</span>
                                @endif
                            </td>
                            <td>
                                <div style="font-family:monospace;font-size:8px">{{ $payment->payment_id ?? '—' }}</div>
                                <div class="client-sub">{{ $payment->order_id ?? '' }}</div>
                            </td>
                            <td><span class="amount">₹{{ number_format((float)($payment->amount ?? 0),2) }}</span></td>
                            <td>
                                <span class="method">
                                    @if($payment->payment_method)
                                        {{ str_replace('_',' ', $payment->payment_method) }}
                                    @elseif($payment->is_manual)
                                        Manual
                                    @else
                                        Online
                                    @endif
                                </span>
                            </td>
                            <td>
                                @if($payment->status === 'paid')
                                    <span class="badge badge-paid">● Paid</span>
                                @elseif(in_array($payment->status,['pending','created'],true))
                                    <span class="badge badge-pending">● {{ ucfirst($payment->status) }}</span>
                                @elseif(in_array($payment->status,['failed','cancelled','cancelled_by_user'],true))
                                    <span class="badge badge-failed">● {{ ucfirst(str_replace('_',' ',$payment->status)) }}</span>
                                @else
                                    <span class="badge badge-gray">● {{ ucfirst($payment->status ?? 'Unknown') }}</span>
                                @endif
                            </td>
                            <td>{{ $payment->paid_at?->format('d M Y, h:i A') ?? $payment->created_at?->format('d M Y, h:i A') ?? '—' }}</td>
                            <td>
                                <a href="{{ route('admin.payments.show',$payment) }}" class="view-btn">View</a>
                                @if($loan)
                                    <a href="{{ route('admin.loans.show',$loan) }}" class="loan-link">Loan</a>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            @else
                <div class="empty">💳 No payment transactions found.</div>
            @endif
        </div>

        @if($payments->hasPages())
            <div class="pagination-area">
                <span style="font-size:9px;color:#9aa6b6">Page {{ $payments->currentPage() }} of {{ $payments->lastPage() }}</span>
                {{ $payments->onEachSide(1)->links() }}
            </div>
        @endif
    </div>
</div>

<div id="manualPaymentModal" class="modal-overlay">
    <div class="modal" onclick="event.stopPropagation()">
        <div class="modal-header">
            <div>
                <h3>Add Manual Payment</h3>
                <p>Record a payment received directly from the client.</p>
            </div>
            <button type="button" class="modal-close" onclick="closeManualPaymentModal()">×</button>
        </div>

        <form method="POST" action="{{ route('admin.payments.manual') }}">
            @csrf
            <div class="modal-body">
                <div class="modal-info">This option is for administrators. The payment will be recorded as <strong>Paid</strong>.</div>

                <div class="form-group">
                    <label>Client *</label>
                    <select name="user_id" class="form-control" required>
                        <option value="">Select Client</option>
                        @foreach(\App\Models\User::where('role','client')->orderBy('name')->get() as $client)
                            <option value="{{ $client->id }}">{{ $client->name }}{{ $client->mobile ? ' — '.$client->mobile : '' }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group">
                    <label>Amount *</label>
                    <input type="number" name="amount" class="form-control" min="0.01" step="0.01" required>
                </div>

                <div class="form-group">
                    <label>Payment Method *</label>
                    <select name="payment_method" class="form-control" required>
                        <option value="">Select Payment Method</option>
                        <option value="cash">Cash</option>
                        <option value="upi">UPI</option>
                        <option value="bank_transfer">Bank Transfer</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>Reference Number</label>
                    <input type="text" name="reference_number" class="form-control" maxlength="255">
                </div>

                <div class="form-group">
                    <label>Paid At *</label>
                    <input type="datetime-local" name="paid_at" class="form-control" value="{{ now()->format('Y-m-d\TH:i') }}" required>
                </div>

                <div class="form-group">
                    <label>Remarks</label>
                    <textarea name="remarks" class="form-control" maxlength="2000"></textarea>
                </div>

                <div class="modal-actions">
                    <button type="button" class="cancel-btn" onclick="closeManualPaymentModal()">Cancel</button>
                    <button type="submit" class="save-btn">✓ Save Payment</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
function openManualPaymentModal(){
    const modal=document.getElementById('manualPaymentModal');
    if(modal){modal.style.display='flex';document.body.style.overflow='hidden';}
}
function closeManualPaymentModal(){
    const modal=document.getElementById('manualPaymentModal');
    if(modal){modal.style.display='none';document.body.style.overflow='';}
}
document.getElementById('manualPaymentModal')?.addEventListener('click',function(e){
    if(e.target===this) closeManualPaymentModal();
});
document.addEventListener('keydown',function(e){
    if(e.key==='Escape') closeManualPaymentModal();
});
</script>

@endsection