@extends('layouts.app')

@section('title', 'San Patricio Seguros')

@section('content')
    @include('solicitudes_emision.spinner')
    <div class="container">
        @include('solicitudes_emision.banner', ['name' =>  $solicitudAPI['Nombre'], 'title' => 'Vamos a cargar el método de pago','reCotizar' => $reCotizar])
        <form action="/solicitudes-emision/update" method="POST" id="payment-form">
            @csrf
            <input type="hidden" name="solicitud_id" value="{{ $solicitud_id }}">
            <input type="hidden" name="numeroDocumento" value="{{ $numeroDocumento }}">
            <input type="hidden" name="TarjetaIdEntidad" id="TarjetaIdEntidad" value="{{ $solicitudAPI['TarjetaIdEntidad'] ?? '' }}">

            <div class="row justify-content-center mb-4">
                <div class="col-md-4 text-center">
                    <button type="button" class="btn btn-option payment-option" data-target="#tarjeta">
                        <div class="icon-container mb-2">
                            <i class="fas fa-credit-card fa-3x"></i>
                        </div>
                        <div class="label-container">
                            Tarjeta de Crédito
                        </div>
                    </button>
                </div>
                <div class="col-md-4 text-center">
                    <button type="button" class="btn btn-option payment-option" data-target="#cbu">
                        <div class="icon-container mb-2">
                            <i class="fas fa-university fa-3x"></i>
                        </div>
                        <div class="label-container">
                            CBU
                        </div>
                    </button>
                </div>
            </div>

            <div id="tarjeta" class="payment-form d-none">
                <div class="mb-3">
                    <label for="TarjetaNumero" class="form-label">Número de Tarjeta</label>
                    <input type="text" class="form-control" id="TarjetaNumero" name="TarjetaNumero" value="{{ $solicitudAPI['TarjetaNumero'] ?? '' }}" placeholder="1234 5678 9012 3456">
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="TarjetaFechaMes" class="form-label">Mes de Vencimiento</label>
                        <select class="form-control" id="TarjetaFechaMes" name="TarjetaFechaMes">
                            @for ($i = 1; $i <= 12; $i++)
                                <option value="{{ sprintf('%02d', $i) }}">{{ sprintf('%02d', $i) }}</option>
                            @endfor
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="TarjetaFechaAno" class="form-label">Año de Vencimiento</label>
                        <select class="form-control" id="TarjetaFechaAno" name="TarjetaFechaAno">
                            @for ($i = date('Y'); $i <= date('Y') + 20; $i++)
                                <option value="{{ $i }}">{{ $i }}</option>
                            @endfor
                        </select>
                    </div>
                </div>
            </div>

            <div id="cbu" class="payment-form d-none">
                <div class="mb-3">
                    <label for="CBU" class="form-label">CBU</label>
                    <input type="text" class="form-control" id="CBU" name="CBU" value="{{ $solicitudAPI['CBU'] ?? '' }}" placeholder="Clave Bancaria Uniforme">
                </div>
            </div>

            <div class="text-center mt-4 d-none" id="procesar-btn">
                <button type="submit" class="btn btn-primary btn-lg">Procesar</button>
            </div>
        </form>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const paymentOptions = document.querySelectorAll('.payment-option');
            const paymentForms = document.querySelectorAll('.payment-form');
            const procesarBtn = document.getElementById('procesar-btn');
            const paymentForm = document.getElementById('payment-form');

            paymentOptions.forEach(option => {
                option.addEventListener('click', function () {
                    paymentForms.forEach(form => form.classList.add('d-none'));
                    document.querySelector(this.dataset.target).classList.remove('d-none');
                    paymentOptions.forEach(btn => btn.classList.remove('btn-primary'));
                    this.classList.add('btn-primary');
                    procesarBtn.classList.remove('d-none');
                });
            });

            paymentForm.addEventListener('submit', function (e) {
                const month = document.getElementById('TarjetaFechaMes').value;
                const year = document.getElementById('TarjetaFechaAno').value;
                const currentMonth = new Date().getMonth() + 1; // Months are zero-based
                const currentYear = new Date().getFullYear();

                if ((year < currentYear) || (year == currentYear && month < currentMonth)) {
                    e.preventDefault();
                    alert('La fecha de vencimiento no puede ser anterior al mes y año actual.');
                }
            });
        });
    </script>
@endsection

<style>

    .btn-option {
        width: 100%;
        max-width: 200px;
        height: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 2px solid transparent;
        background-color: white;
        color: #000;
        transition: background-color 0.3s, color 0.3s, border-color 0.3s;
        margin-bottom: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .btn-option:hover, .btn-option.btn-primary {
        background-color: #2e3640; /* Azul de San Patricio */
        color: white;
        border-color: #2e3640; /* Azul de San Patricio */
    }
    .icon-container {
        text-align: center;
    }
    .label-container {
        text-align: center;
        margin-top: 10px;
        font-size: 1.1em;
    }
    .payment-option {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .payment-option:hover {
        color: white !important;
    }
    .form-label {
        font-weight: bold;
    }
    .form-control {
        border-radius: 8px;
    }
    .payment-form {
        margin-top: 20px;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .payment-form h4 {
        margin-bottom: 20px;
    }
</style>