@extends('layouts.admin')

@section('title', 'User Recovery - Stuck Payments')

@push('styles')
<style>
.content-wrapper {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
.avatar-sm {
    height: 3rem;
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-soft {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
}

.bg-danger.bg-soft {
    background-color: rgba(var(--bs-danger-rgb), 0.1) !important;
}

.bg-warning.bg-soft {
    background-color: rgba(var(--bs-warning-rgb), 0.1) !important;
}

.bg-info.bg-soft {
    background-color: rgba(var(--bs-info-rgb), 0.1) !important;
}
</style>
@endpush

@section('content')
<div class="container-fluid px-4 content-wrapper">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="mb-1">User Recovery</h2>
                    <p class="text-muted mb-0">Users with successful payments but incomplete UID generation</p>
                </div>
                <div>
                    <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary">
                        <i class="uil uil-arrow-left me-1"></i> Back to Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- Alert Messages --}}
    @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('warning'))
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <i class="uil uil-exclamation-circle me-2"></i>{{ session('warning') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- Statistics Cards --}}
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="avatar-sm rounded-circle bg-danger bg-soft">
                                <span class="avatar-title text-danger fs-4">
                                    <i class="uil uil-user-exclamation"></i>
                                </span>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mb-1">{{ $users->total() }}</h5>
                            <p class="text-muted mb-0 small">Stuck Users</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="avatar-sm rounded-circle bg-warning bg-soft">
                                <span class="avatar-title text-warning fs-4">
                                    <i class="uil uil-rupee-sign"></i>
                                </span>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mb-1" id="total-amount-display">Loading...</h5>
                            <p class="text-muted mb-0 small">Pending Amount</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="avatar-sm rounded-circle bg-info bg-soft">
                                <span class="avatar-title text-info fs-4">
                                    <i class="uil uil-clock"></i>
                                </span>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mb-1" id="oldest-date-display">Loading...</h5>
                            <p class="text-muted mb-0 small">Oldest Pending</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Filters --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('admin.user-recovery.index') }}" class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">Search</label>
                    <input type="text" name="search" class="form-control" 
                           placeholder="Name, Email, Payment ID..." 
                           value="{{ request('search') }}">
                </div>
                <div class="col-md-3">
                    <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-3">
                    <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 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100 me-2">
                        <i class="uil uil-filter me-1"></i> Filter
                    </button>
                    @if(request()->anyFilled(['search', 'from_date', 'to_date']))
                        <a href="{{ route('admin.user-recovery.index') }}" class="btn btn-outline-secondary">
                            <i class="uil uil-times"></i>
                        </a>
                    @endif
                </div>
            </form>
        </div>
    </div>

    {{-- Users Table --}}
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white py-3">
            <h5 class="mb-0">Pending UID Generation ({{ $users->total() }})</h5>
        </div>
        <div class="card-body p-0">
            @if($users->isEmpty())
                <div class="text-center py-5">
                    <i class="uil uil-check-circle text-success" style="font-size: 48px;"></i>
                    <h5 class="mt-3">No Stuck Users</h5>
                    <p class="text-muted">All payments have been successfully processed!</p>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th>User Details</th>
                                <th>Payment Info</th>
                                <th>Payment Date</th>
                                <th>Amount</th>
                                <th>Status</th>
                                <th class="text-end">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($users as $user)
                            <tr>
                                <td>
                                    <div>
                                        <strong>{{ $user->name }}</strong>
                                        <div class="small text-muted">{{ $user->email }}</div>
                                        <div class="small text-muted">Mobile: {{ $user->mobile }}</div>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-info">{{ $user->payment_id }}</span>
                                    <div class="small text-muted mt-1">DB ID: {{ $user->payment_db_id }}</div>
                                </td>
                                <td>
                                    {{ \Carbon\Carbon::parse($user->payment_date)->format('d M Y, h:i A') }}
                                    <div class="small text-muted">
                                        {{ \Carbon\Carbon::parse($user->payment_date)->diffForHumans() }}
                                    </div>
                                </td>
                                <td>
                                    <strong class="text-success">₹{{ number_format($user->amount / 100, 2) }}</strong>
                                </td>
                                <td>
                                    @if(empty($user->reg_uid))
                                        <span class="badge bg-danger">No UID</span>
                                    @else
                                        <span class="badge bg-warning">Has UID, Not Paid</span>
                                        <div class="small">{{ $user->reg_uid }}</div>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <button type="button" 
                                            class="btn btn-sm btn-primary"
                                            onclick="confirmGenerate({{ $user->id }}, '{{ $user->name }}', '{{ $user->payment_id }}')"
                                            @if($user->reg_uid && (int)$user->paid === 1) disabled @endif>
                                        <i class="uil uil-key-skeleton me-1"></i>
                                        Generate UID
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="card-footer bg-white border-top">
                    {{ $users->links() }}
                </div>
            @endif
        </div>
    </div>
</div>

{{-- Generate UID Confirmation Modal --}}
<div class="modal fade" id="generateUidModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm UID Generation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="generateUidForm" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-warning">
                        <i class="uil uil-exclamation-triangle me-2"></i>
                        <strong>Important:</strong> This will generate a UID and mark the user as paid. Ensure the payment is verified.
                    </div>
                    
                    <dl class="row mb-0">
                        <dt class="col-sm-4">User:</dt>
                        <dd class="col-sm-8" id="confirm-user-name"></dd>
                        
                        <dt class="col-sm-4">Payment ID:</dt>
                        <dd class="col-sm-8"><span class="badge bg-info" id="confirm-payment-id"></span></dd>
                    </dl>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="uil uil-check me-1"></i> Generate UID
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
// Load statistics
async function loadStats() {
    try {
        const response = await fetch('{{ route('admin.user-recovery.stats') }}');
        const stats = await response.json();
        
        document.getElementById('total-amount-display').textContent = 
            '₹' + (stats.total_amount / 100).toLocaleString('en-IN', {minimumFractionDigits: 2});
        
        if (stats.oldest_date) {
            const oldestDate = new Date(stats.oldest_date);
            const diffDays = Math.floor((Date.now() - oldestDate) / (1000 * 60 * 60 * 24));
            document.getElementById('oldest-date-display').textContent = diffDays + ' days ago';
        } else {
            document.getElementById('oldest-date-display').textContent = 'N/A';
        }
    } catch (error) {
        console.error('Failed to load stats:', error);
        document.getElementById('total-amount-display').textContent = 'Error';
        document.getElementById('oldest-date-display').textContent = 'Error';
    }
}

// Confirm generate UID
function confirmGenerate(userId, userName, paymentId) {
    document.getElementById('confirm-user-name').textContent = userName;
    document.getElementById('confirm-payment-id').textContent = paymentId;
    
    const form = document.getElementById('generateUidForm');
    form.action = '/admin/user-recovery/' + userId + '/generate-uid';
    
    new bootstrap.Modal(document.getElementById('generateUidModal')).show();
}

// Load stats on page load
document.addEventListener('DOMContentLoaded', loadStats);
</script>
@endpush