@extends('layouts.admin')

@section('title', 'Manual Payments')

@push('styles')
<style>
.content-wrapper {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
</style>
@endpush

@section('content')
<div class="container-fluid px-4 content-wrapper">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-1">Manual Payment Management</h2>
            <p class="text-muted mb-0">Record and verify offline/manual payments</p>
        </div>
        <a href="{{ route('admin.manual-payments.create') }}" class="btn btn-primary">
            <i class="uil uil-plus me-2"></i>Record Payment
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="uil uil-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="uil uil-exclamation-triangle me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('info'))
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            <i class="uil uil-info-circle me-2"></i>{{ session('info') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- Filters -->
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('admin.manual-payments.index') }}">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Search UID/Name</label>
                        <input type="text" name="search" class="form-control" 
                               placeholder="Enter UID or user name" 
                               value="{{ request('search') }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Status</label>
                        <select name="status" class="form-select">
                            <option value="">All</option>
                            <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending Verification</option>
                            <option value="verified" {{ request('status') === 'verified' ? 'selected' : '' }}>Verified</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Payment Type</label>
                        <select name="type" class="form-select">
                            <option value="">All Types</option>
                            <option value="cash" {{ request('type') === 'cash' ? 'selected' : '' }}>Cash</option>
                            <option value="cheque" {{ request('type') === 'cheque' ? 'selected' : '' }}>Cheque</option>
                            <option value="dd" {{ request('type') === 'dd' ? 'selected' : '' }}>DD</option>
                            <option value="neft" {{ request('type') === 'neft' ? 'selected' : '' }}>NEFT</option>
                            <option value="upi" {{ request('type') === 'upi' ? 'selected' : '' }}>UPI</option>
                            <option value="other" {{ request('type') === 'other' ? 'selected' : '' }}>Other</option>
                        </select>
                    </div>
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="uil uil-filter me-1"></i>Filter
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Payments Table -->
    <div class="card shadow-sm">
        <div class="card-body">
            @if($payments->isEmpty())
                <div class="text-center py-5">
                    <i class="uil uil-inbox" style="font-size: 4rem; color: #ccc;"></i>
                    <p class="text-muted mt-3">No manual payments found</p>
                    <a href="{{ route('admin.manual-payments.create') }}" class="btn btn-primary btn-sm">
                        Record First Payment
                    </a>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>UID</th>
                                <th>User</th>
                                <th>Type</th>
                                <th>Amount</th>
                                <th>Reference</th>
                                <th>Payment Date</th>
                                <th>Status</th>
                                <th>Recorded By</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($payments as $payment)
                                <tr>
                                    <td>
                                        <span class="badge bg-secondary">{{ $payment->reg_uid }}</span>
                                    </td>
                                    <td>
                                        <div>
                                            <strong>{{ $payment->user->first_name }} {{ $payment->user->last_name }}</strong>
                                            <br>
                                            <small class="text-muted">{{ $payment->user->email }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-info">{{ strtoupper($payment->payment_type) }}</span>
                                    </td>
                                    <td>
                                        <strong>₹{{ number_format($payment->amount, 2) }}</strong>
                                    </td>
                                    <td>
                                        <small>{{ $payment->reference_number ?: 'N/A' }}</small>
                                    </td>
                                    <td>
                                        {{ \Carbon\Carbon::parse($payment->payment_date)->format('d M Y') }}
                                    </td>
                                    <td>
                                        @if($payment->verified)
                                            <span class="badge bg-success">
                                                <i class="uil uil-check me-1"></i>Verified
                                            </span>
                                            <br>
                                            <small class="text-muted">by {{ $payment->verifiedBy->name ?? 'N/A' }}</small>
                                        @else
                                            <span class="badge bg-warning text-dark">
                                                <i class="uil uil-clock me-1"></i>Pending
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                        <small>{{ $payment->recordedBy->name ?? 'N/A' }}</small>
                                        <br>
                                        <small class="text-muted">{{ $payment->created_at->format('d M Y') }}</small>
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            @if(!$payment->verified)
                                                @if($payment->recorded_by !== auth()->id())
                                                    <button type="button" class="btn btn-success" 
                                                            onclick="verifyPayment({{ $payment->id }})">
                                                        <i class="uil uil-check"></i> Verify
                                                    </button>
                                                @endif
                                                
                                                @if($payment->recorded_by === auth()->id())
                                                    <a href="{{ route('admin.manual-payments.edit', $payment->id) }}" 
                                                       class="btn btn-outline-primary">
                                                        <i class="uil uil-edit"></i> Edit
                                                    </a>
                                                    <button type="button" class="btn btn-outline-danger" 
                                                            onclick="deletePayment({{ $payment->id }})">
                                                        <i class="uil uil-trash"></i>
                                                    </button>
                                                @endif
                                            @else
                                                <button class="btn btn-outline-secondary" disabled>
                                                    <i class="uil uil-lock"></i> Locked
                                                </button>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-between align-items-center mt-4">
                    <div class="text-muted">
                        Showing {{ $payments->firstItem() }} to {{ $payments->lastItem() }} of {{ $payments->total() }} entries
                    </div>
                    {{ $payments->links() }}
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Verify Modal -->
<div class="modal fade" id="verifyModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Verify Manual Payment</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="verifyForm" method="POST">
                @csrf
                <div class="modal-body">
                    <p>Are you sure you want to verify this payment?</p>
                    <div class="mb-3">
                        <label class="form-label">Verification Remarks (Optional)</label>
                        <textarea name="verification_remarks" class="form-control" rows="3" 
                                  placeholder="Add any notes about the verification..."></textarea>
                    </div>
                    <div class="alert alert-info">
                        <i class="uil uil-info-circle me-2"></i>
                        Once verified, this payment cannot be edited or deleted.
                    </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-success">
                        <i class="uil uil-check me-1"></i>Verify Payment
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete Manual Payment</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="deleteForm" method="POST">
                @csrf
                @method('DELETE')
                <div class="modal-body">
                    <p>Are you sure you want to delete this payment record?</p>
                    <div class="alert alert-warning">
                        <i class="uil uil-exclamation-triangle me-2"></i>
                        This action cannot be undone.
                    </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">
                        <i class="uil uil-trash me-1"></i>Delete
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
function verifyPayment(paymentId) {
    const form = document.getElementById('verifyForm');
    form.action = `/admin/manual-payments/${paymentId}/verify`;
    new bootstrap.Modal(document.getElementById('verifyModal')).show();
}

function deletePayment(paymentId) {
    const form = document.getElementById('deleteForm');
    form.action = `/admin/manual-payments/${paymentId}`;
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}
</script>
@endpush
@endsection