@extends('admin.layouts.app')

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

@section('content')
@push('styles')
<link rel="stylesheet" href="{{ asset('admin/css/payments.css') }}">
@endpush


<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">{{ money((float)($totalPaymentAmount ?? $totalAmount ?? 0)) }}</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>

        <div class="table-wrap">
            @if($payments->count())
                <div class="payments-table-scroll">
<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">{{ money((float)($payment->amount ?? 0)) }}</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>
</div>
            @else
                <div class="empty">💳 No payment transactions found.</div>
            @endif
        </div>

        @if($payments->hasPages())

    <div class="pagination-area">

        <div class="pagination-info">
            Page {{ $payments->currentPage() }}
            of {{ $payments->lastPage() }}
        </div>

        <div class="pagination-links">

            {{-- PREVIOUS --}}
            @if($payments->onFirstPage())

                <span class="pagination-btn disabled">
                    ‹
                </span>

            @else

                <a
                    href="{{ $payments->previousPageUrl() }}"
                    class="pagination-btn"
                    aria-label="Previous page"
                >
                    ‹
                </a>

            @endif


            {{-- PAGE NUMBERS --}}
            @foreach(
                $payments->getUrlRange(
                    max(1, $payments->currentPage() - 2),
                    min(
                        $payments->lastPage(),
                        $payments->currentPage() + 2
                    )
                )
                as $page => $url
            )

                @if($page == $payments->currentPage())

                    <span class="pagination-btn active">
                        {{ $page }}
                    </span>

                @else

                    <a
                        href="{{ $url }}"
                        class="pagination-btn"
                    >
                        {{ $page }}
                    </a>

                @endif

            @endforeach


            {{-- NEXT --}}
            @if($payments->hasMorePages())

                <a
                    href="{{ $payments->nextPageUrl() }}"
                    class="pagination-btn"
                    aria-label="Next page"
                >
                    ›
                </a>

            @else

                <span class="pagination-btn disabled">
                    ›
                </span>

            @endif

        </div>

    </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