@extends('layouts.app', ['title' => 'Pagos Pendientes', 'menu' => 'Administración'])

@section('content')

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Pagos esperando aprobación</h5>
                <p class="card-title-desc">
                    Por favor, verifica el pago en tu app (Yape/Plin) antes de aprobar.
                </p>

                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Fecha de Reporte</th>
                                <th>Usuario</th>
                                <th>Método</th>
                                <th>Monto</th>
                                <th>N° Operación</th>
                                <th>Estado</th>
                                <th>Acción</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($payments as $payment)
                            <tr>
                                <td>{{ $payment->created_at->format('d/m/Y H:i') }}</td>
                                <td>{{ $payment->user->name ?? 'Usuario Eliminado' }}</td>
                                <td>
                                    @if($payment->payment_method == 'yape')
                                        <span class="badge bg-secondary">Yape</span>
                                    @else
                                        <span class="badge bg-info">Plin</span>
                                    @endif
                                </td>
                                <td class="fw-bold">S/ {{ number_format($payment->amount, 2) }}</td>
                                <td>{{ $payment->operation_number }}</td>
                                
                                <td>
                                    @if($payment->status == 'pending')
                                        <span class="badge bg-warning text-white">Pendiente</span>
                                    @elseif($payment->status == 'approved')
                                        <span class="badge bg-success">Aprobado</span>
                                    @elseif($payment->status == 'rejected')
                                        <span class="badge bg-danger">Rechazado</span>
                                    @endif
                                </td>

                                <td>
                                    @if($payment->status == 'pending')
                                        <div class="d-flex gap-2">
                                            
                                            <form id="form-approve-{{ $payment->id }}" 
                                                action="{{ route('admin.payments.approve', $payment->id) }}" 
                                                method="POST">
                                                @csrf
                                                <button type="button" 
                                                        onclick="confirmAction('approve', {{ $payment->id }}, '{{ $payment->amount }}')"
                                                        class="btn btn-sm btn-success" 
                                                        title="Aprobar Recarga">
                                                    <i class="ri-check-line"></i>
                                                </button>
                                            </form>

                                            <form id="form-reject-{{ $payment->id }}" 
                                                action="{{ route('admin.payments.reject', $payment->id) }}" 
                                                method="POST">
                                                @csrf
                                                <input type="hidden" name="reason" id="reason-input-{{ $payment->id }}">
                                                <button type="button" 
                                                        onclick="confirmAction('reject', {{ $payment->id }})"
                                                        class="btn btn-sm btn-danger" 
                                                        title="Rechazar y Eliminar">
                                                    <i class="ri-close-line"></i>
                                                </button>
                                            </form>

                                        </div>
                                    @else
                                        <span class="text-muted small"> Procesado </span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7" class="text-center py-4">No hay historial de pagos registrado.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="mt-3">
                    {{ $payments->links() }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts') 

<script>
    // $("#preloader").delay(350).fadeOut("slow");
    function confirmAction(type, id, amount = 0) {
        
        if (type === 'approve') {
            // ALERTA PARA APROBAR
            Swal.fire({
                title: '¿Aprobar Pago?',
                text: `Se recargarán S/ ${amount} a la billetera del usuario.`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#28a745',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Sí, aprobar',
                cancelButtonText: 'Cancelar',
                allowOutsideClick: false,
                allowEscapeKey: false
            }).then((result) => {
                if (result.isConfirmed) {
                    // 1. MOSTRAR EL LOADER (Bloquea la pantalla)
                    $("#preloader").fadeIn("fast"); 
                    $("#status").fadeIn("fast");

                    // 2. ENVIAR EL FORMULARIO
                    document.getElementById('form-approve-' + id).submit();
                }
            });
        } 
        else if (type === 'reject') {
            // ALERTA PARA RECHAZAR
            Swal.fire({
                title: '¿Rechazar Pago?',
                text: "El usuario no recibirá saldo. Esta acción es irreversible.",
                icon: 'warning',
                input: 'textarea', // 👇 Agregamos un campo de texto
                inputPlaceholder: 'Ej: El código de operación no existe / Captura borrosa',
                inputAttributes: {
                    'aria-label': 'Escribe el motivo del rechazo'
                },
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Rechazar Pago',
                cancelButtonText: 'Cancelar',
                allowOutsideClick: false,
                allowEscapeKey: false,
                inputValidator: (value) => { // 👇 Obligamos a escribir algo
                    if (!value) {
                        return '¡Debes escribir un motivo para rechazar!'
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    // 1. Poner el texto escrito en el input oculto del formulario
                    document.getElementById('reason-input-' + id).value = result.value;

                    // 2. Mostrar Loader
                    $("#preloader").fadeIn("fast");
                    $("#status").fadeIn("fast");

                    // 3. Enviar formulario
                    document.getElementById('form-reject-' + id).submit();
                }
            });
        }
    }
</script>

@endpush