@extends('layouts.app', ['title' => 'Planes de Acceso', 'menu' => 'Planes'])

@section('content')

<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Paso 1: Realiza el Pago</h4>
                <p>Para activar tu acceso, realiza un pago a cualquiera de las siguientes cuentas:</p>
                
                <div class="row">
                    <div class="col-md-6 text-center">
                        <h5>Yape</h5>
                        <img src="{{ asset('images/payments/payment-yape.png') }}" alt="QR Yape" class="img-fluid" style="max-width: 250px;">
                        <p class="mt-2">Walter Alfredo Soto Bautista</p>
                    </div>

                    <div class="col-md-6 text-center">
                        <h5>Plin</h5>
                        <img src="{{ asset('images/payments/payment-plin.png') }}" alt="QR Plin" class="img-fluid" style="max-width: 250px;">
                        <p class="mt-2">Walter Alfredo Soto Bautista</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Paso 2: Reporta tu Pago</h4>
                <p>Una vez realizado el pago, completa este formulario para que podamos activar tu cuenta.</p>
                
                {{-- 1. AÑADIDO ID AL FORMULARIO --}}
                <form id="paymentReportForm" action="{{ route('plans.report') }}" method="POST">
                    @csrf
                    
                    <div class="mb-3">
                        <label for="payment_method" class="form-label">Método de Pago</label>
                        <select class="form-select @error('payment_method') is-invalid @enderror" 
                                id="payment_method" name="payment_method" required>
                            <option value="">Selecciona uno...</option>
                            <option value="yape" {{ old('payment_method') == 'yape' ? 'selected' : '' }}>Yape</option>
                            <option value="plin" {{ old('payment_method') == 'plin' ? 'selected' : '' }}>Plin</option>
                        </select>
                        @error('payment_method')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="amount" class="form-label">Monto Pagado (S/)</label>
                        <input type="number" 
                            step="0.01"
                            class="form-control @error('amount') is-invalid @enderror" 
                            id="amount" 
                            name="amount" 
                            value="{{ old('amount', $suggestedAmount) }}"
                            placeholder="Ej: 10.80"
                            required>
                        @error('amount')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="mb-3">
                        <label for="operation_number" class="form-label">N° de Operación</label>
                        <input type="text" 
                            class="form-control @error('operation_number') is-invalid @enderror" 
                            id="operation_number" 
                            name="operation_number" 
                            value="{{ old('operation_number') }}"
                            placeholder="Ej: 1K09A8B7"
                            required>
                        @error('operation_number')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mt-4">
                        <button type="submit" class="btn btn-primary w-100">Reportar Pago</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

@endsection

{{-- 2. LÓGICA JAVASCRIPT --}}
@section('scripts')
<script>
    $(document).ready(function() {
        $('#paymentReportForm').on('submit', function() {
            // Verificamos si los campos requeridos están llenos
            // 1. Mostrar el Loader (Bloquea pantalla)
            $("#preloader").fadeIn("fast");
            
            // 2. Cambiar texto y deshabilitar botón para evitar doble envío
            $(this).find('button[type="submit"]')
                   .text('Enviando reporte...')
                   .prop('disabled', true);
        }
    });
</script>
@endsection