@extends('web.panel.layout')
@section('titulo', config('app.name') . ' - Suscripcion')

@section('ruta-panel')
    <li class="breadcrumb-item active"><a href="#">Suscripcion</a></li>
@endsection


@section('head')
    <style>
        .input-group-text {
            border-top-right-radius: 0px !important;
            border-bottom-right-radius: 0px !important;
            width: 40px;
            justify-content: end;
        }

        .theme-form .form-control {
            padding: 12px 10px !important;
        }

        .meses::-webkit-inner-spin-button,
        .meses::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .control {
            font-family: arial;
            display: block;
            position: relative;
            padding-left: 30px;
            margin-bottom: 5px;
            padding-top: 3px;
            cursor: pointer;
            font-size: 16px;
        }

        .control input {
            position: absolute;
            z-index: -1;
            opacity: 0;
        }

        .control_indicator {
            position: relative;
            height: 20px;
            width: 20px;
            background: #e6e6e6;
            border: 0px solid #000000;
            border-radius: 10px;
        }

        .control:hover input~.control_indicator,
        .control input:focus~.control_indicator {
            background: #cccccc;
        }

        .control input:checked~.control_indicator {
            background: #2aa1c0;
        }

        .control:hover input:not([disabled]):checked~.control_indicator,
        .control input:checked:focus~.control_indicator {
            background: #0e6647d;
        }

        .control input:disabled~.control_indicator {
            background: #e6e6e6;
            opacity: 0.6;
            pointer-events: none;
        }

        .control_indicator:after {
            box-sizing: unset;
            content: '';
            position: absolute;
            display: none;
        }

        .control input:checked~.control_indicator:after {
            display: block;
        }

        .control-checkbox .control_indicator:after {
            left: 8px;
            top: 4px;
            width: 3px;
            height: 8px;
            border: solid #ffffff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        .control-checkbox input:disabled~.control_indicator:after {
            border-color: #7b7b7b;
        }

        .control-checkbox .control_indicator::before {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 4.5rem;
            height: 4.5rem;
            margin-left: -1.3rem;
            margin-top: -1.3rem;
            background: #2aa1c0;
            border-radius: 3rem;
            opacity: 0.6;
            z-index: 99999;
            transform: scale(0);
        }

        @keyframes s-ripple {
            0% {
                transform: scale(0);
            }

            20% {
                transform: scale(1);
            }

            100% {
                opacity: 0;
                transform: scale(1);
            }
        }

        @keyframes s-ripple-dup {
            0% {
                transform: scale(0);
            }

            30% {
                transform: scale(1);
            }

            60% {
                transform: scale(1);
            }

            100% {
                opacity: 0;
                transform: scale(1);
            }
        }

        .control-checkbox input+.control_indicator::before {
            animation: s-ripple 250ms ease-out;
        }

        .control-checkbox input:checked+.control_indicator::before {
            animation-name: s-ripple-dup;
        }

        .tachado {
            position: relative;
        }

        .tachado:before {
            position: absolute;
            content: "";
            left: 0;
            top: 50%;
            right: 0;
            border-top: 4px solid;
            border-color: inherit;

            -webkit-transform: rotate(-20deg);
            -moz-transform: rotate(-20deg);
            -ms-transform: rotate(-20deg);
            -o-transform: rotate(-20deg);
            transform: rotate(-20deg);
        }
    </style>
@endsection



























@section('contenido-panel')


    <div class="col-md-8 col-lg-10 blog-sec">
        <div class="row blog-list">


            @if (session()->has('success'))
                <div class="col-md-12 alert alert-success text-center">
                    {{ session()->get('success') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="col-md-12 alert alert-danger">
                    <ul class="p-2 m-0 text-center">
                        @foreach ($errors->all() as $error)
                            <li class="text-center">{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif



            <div class="col-sm-12">

                <div class="price-carousel owl-carousel owl-theme suscripciones">

                    @foreach ($suscripciones as $su)
                        <div class="price-item">
                            <div class="price-block">
                                <div class="price-type">
                                    <h2>{{ $su->nombre }}</h2>
                                </div>

                                <div class="">
                                    <h6 class="user-type"></h6>
                                    <div class="price-devide w-100"></div>
                                    <div class="mb-4">
                                        {{-- COMPRUEBA SI TIENE OFERTA Y ESTA ACTIVADA --}}
                                        @if ($su->oferta_activada)
                                            @php
                                                $precio_sin_oferta = $su->pvp_anual;
                                                $precio_con_oferta = $su->pvp_anual - ($su->pvp_anual * $su->oferta_porciento) / 100;
                                            @endphp


                                            <h6 class="price-year m-0 mt-4">ANTES DESDE</h6>
                                            <span class="h3 tachado">${{ explode('.', $precio_sin_oferta)[0] }}<sup
                                                    class="h6">.{{ explode('.', $precio_sin_oferta)[1] }}</sup></span>

                                            <h6 class="price-year m-0 mt-0">AHORA DESDE</h6>
                                            <span class="h1 theme-link">${{ explode('.', $precio_con_oferta)[0] }}<sup
                                                    class="h6"
                                                    style="top: -1em;">.{{ explode('.', $precio_con_oferta)[1] }}</sup></span>
                                            <h6 class="price-year m-0 mb-4">mes/año</h6>

                                            {{-- SI NO TIENE OFERTA MUESTRA PRECIO NORMAL --}}
                                        @else
                                            {{-- COMPRUEBA SI ES EL PLAN BASICO --}}
                                            @if ($su->id == 1)
                                                {{--SI ES EL PLAN BASICO --}}
                                                <span class="h3 mt-4 mb-0 d-inline-block">GRATIS</span>
                                            @else
                                                {{--SI ES OTRO PLAN --}}
                                                <h6 class="price-year m-0 mt-4">DESDE</h6>
                                                <span class="h1 theme-link">${{ explode('.', $su->pvp_anual)[0] }}<sup
                                                        class="h6"
                                                        style="top: -1em;">.{{ explode('.', $su->pvp_anual)[1] }}</sup></span>
                                                <h6 class="price-year m-0 mb-4">mes/año</h6>
                                            @endif
                                        @endif
                                    </div>



                                    <div class="price-devide w-100"></div>
                                </div>
                                <ul class="price-feature">
                                    @foreach ($su->caracteristicas as $ca)
                                        <li>{!! $ca !!}</li>
                                    @endforeach
                                </ul>

                                {{-- SI LA SUSCRIPCION ES IGUAL A SUSCRIPCION DEL USUARIO ACTUAL --}}
                                @if ($su->id == $actual->suscripcion->id)
                                    {{--SI LO ES, NO MUESTRA NINGUN BOTON--}}
                                    <h2 class="m-0 mb-4">Actual</h2>
                                @else
                                    {{--SI NO LO ES, VERIFICA QUE NO SEA EL PLAN BASICO--}}
                                    @if ($su->id != 1)
                                    <a class="btn btn-custom theme-color actualizarPlan" href="#" role="button"
                                        data-id="{{ $su->id }}">Actualizar</a>
                                    @endif
                                @endif
                            </div>
                        </div>
                    @endforeach


                </div>

                @foreach ($suscripciones as $a)
                    <div class="contratar{{ $a->id }}" style="display:none;">
                        <form action="{{ url('/cuenta/suscripcion') }}" class="theme-form m-0"
                            id="form{{ $a->id }}" method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-md-4">
                                    <h3 class="text-uppercase theme-link m-0">
                                        <a href="#" class="volver theme-link" data-id="{{ $a->id }}"><i
                                                class="fa fa-chevron-left" aria-hidden="true"></i> volver</a>
                                    </h3>
                                </div>
                                <div class="col-md-4 text-center">
                                    <h3 class="text-uppercase theme-link m-0">DETALLES DEL PLAN {{ $a->nombre }}</h3>
                                </div>
                            </div>

                            <div class="price-item">
                                <div class="price-block">

                                    <div class="row mb-2 ">
                                        <div class="col-md-4 border-right pr-4">

                                            <div class="price-type">
                                                <h2>{{ $a->nombre }}</h2>
                                            </div>
                                            <div class="mrp">
                                                <h6 class="user-type"></h6>
                                                <div class="price-devide w-100"></div>

                                                <h6 class="price-year m-0 mt-4">1 mes</h6>
                                                <h2 class="m-0">$<span
                                                        class="pvptxt{{ $a->id }}">{{ $a->pvp_mes }}</span></h2>
                                                <h6 class="price-year m-0 mb-4"></h6>

                                                <div class="price-devide w-100"></div>

                                                <h6 class="price-year m-0 mt-4">Ahorras</h6>
                                                <h2 class="m-0">$<span class="ahorrotxt{{ $a->id }}">0</span>
                                                </h2>
                                                <h6 class="price-year m-0 mb-4"> en comparación con<br> el plan mensual</h6>

                                                <div class="price-devide w-100"></div>
                                            </div>
                                            <ul class="price-feature">
                                                @foreach ($a->caracteristicas as $cas)
                                                    <li>{!! $cas !!}</li>
                                                @endforeach
                                            </ul>

                                        </div>

                                        <div class="col-md-8  pl-4">
                                            <h3 class="blog-head text-uppercase mt-0">Resumen</h3>
                                            <div class="blog-divider"></div>
                                            <table class="table mb-0">
                                                <tr class="text-uppercase font-weight-bold">
                                                    <td class="pb-0 border-top-0">Plan</td>
                                                    <td class="pb-0 border-top-0">Tipo</td>
                                                    <td class="pb-0 border-top-0">Meses</td>
                                                    <td class="pb-0 border-top-0">Total</td>
                                                </tr>
                                                <tr>
                                                    <td class="align-middle border-top-0 text-uppercase">
                                                        {{ $a->nombre }}
                                                        <input type="hidden" name="plan" class="inputplan"
                                                            value="{{ $a->id }}">
                                                    </td>
                                                    <td class="align-middle border-top-0">
                                                        <div class="form-group m-0">
                                                            
                                                            @php
                                                            if($a->oferta_activada){
                                                                $precio_mes = $a->pvp_mes - ($a->pvp_mes * $a->oferta_porciento / 100);
                                                                $precio_semestre = $a->pvp_semestre - ($a->pvp_semestre * $a->oferta_porciento / 100);
                                                                $precio_anual = $a->pvp_anual - ($a->pvp_anual * $a->oferta_porciento / 100);
                                                            }else{
                                                                $precio_mes = $a->pvp_mes;
                                                                $precio_semestre = $a->pvp_semestre;
                                                                $precio_anual = $a->pvp_anual;
                                                            }
                                                            @endphp


                                                            <select class="form-control change text-center" name="duracion"
                                                                id="duracion" data-plan="{{ $a->id }}">
                                                                <option value="1" data-precio="{{ $a->pvp_mes }}"
                                                                    data-o="{{ $a->oferta_porciento }}" selected>
                                                                    Mensual ${{ $precio_mes }}
                                                                </option>
                                                                <option value="6"
                                                                    data-precio="{{ $a->pvp_semestre }}"
                                                                    data-o="{{ $a->oferta_porciento }}">
                                                                    6 Meses ${{ $precio_semestre }}/mes
                                                                </option>
                                                                <option value="12" data-precio="{{ $a->pvp_anual }}"
                                                                    data-o="{{ $a->oferta_porciento }}">
                                                                    1 año ${{ $precio_anual }}/mes
                                                                </option>
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <td class="align-middle border-top-0 text-success">
                                                        <div class="form-group m-0 d-inline-block text-center>">
                                                            <input type="number" name="meses"
                                                                class="form-control meses p-0 mb-0 text-center"
                                                                value="1"
                                                                style="width: 50px;
                                                        height: 38px;">


                                                        </div>
                                                    </td>
                                                    <td class="align-middle border-top-0">$<span
                                                            class="totaltxt{{ $a->id }}">{{ $a->pvp_mes }}</span>
                                                    </td>
                                                </tr>
                                            </table>
                                            @if($a->oferta_activada)
                                            <div class="text-center">
                                                <small>Aplicada oferta en los precios del -{{$a->oferta_porciento}}%</small>
                                            </div>
                                            @endif





                                            <h3 class="blog-head text-uppercase mt-4">Datos de Facturación</h3>
                                            <div class="blog-divider"></div>




                                            <div class="row mb-3">
                                                <div class="col-md-12 col-sm-12">

                                                    <label
                                                        class="d-inline-block w-100 text-center m-0 control control-checkbox align-middle"
                                                        data-toggle="tooltip" data-placement="top"
                                                        title="Al marcar esta opción, se emitirá únicamente un recibo con su nombre y correo electrónico.">

                                                        <input class="m-0" type="checkbox" name="no_factura"
                                                            id="no_factura">

                                                        <div class="control_indicator d-inline-block align-middle"></div>

                                                        <span class="align-middle">No quiero factura.</span>

                                                    </label>
                                                </div>
                                            </div>
                                            <div class="factura_campos">
                                                <div class="row">

                                                    <div class="input-group col-md-6 col-sm-12 m-0 mb-2"
                                                        data-toggle="tooltip" data-placement="top"
                                                        title="Nombre y Apellido">
                                                        <div class="input-group-prepend">
                                                            <span
                                                                class="input-group-text rounded-circle text-center text-white border-0 msg">
                                                                <i class="fa fa-user" aria-hidden="true"></i>
                                                            </span>
                                                        </div>
                                                        <input type="text" class="form-control" id="nombre"
                                                            name="nombre" placeholder="Nombre y Apellido"
                                                            value="{{ Auth::user()->nombre }}">
                                                    </div>
                                                    <div class="input-group col-md-6 col-sm-12 m-0 mb-2"
                                                        data-toggle="tooltip" data-placement="top" title="Telefono">
                                                        <div class="input-group-prepend">
                                                            <span
                                                                class="input-group-text rounded-circle text-center text-white border-0">
                                                                <i class="fa fa-phone"></i>
                                                            </span>
                                                        </div>
                                                        <input type="text" class="form-control" id="telefono"
                                                            name="telefono" placeholder="Telefono"
                                                            value="{{ Auth::user()->telefono }}">
                                                    </div>
                                                </div>
                                                <div class="row">

                                                    <div class="input-group col-md-12 m-0 mb-2" data-toggle="tooltip"
                                                        data-placement="top" title="Direccion">
                                                        <div class="input-group-prepend">
                                                            <span
                                                                class="input-group-text rounded-circle text-center text-white border-0">
                                                                <i class="fa fa-address-card" aria-hidden="true"></i>
                                                            </span>
                                                        </div>
                                                        <input type="text" class="form-control" id="direccion"
                                                            name="direccion" placeholder="Direccion"
                                                            value="{{ Auth::user()->direccion }}">
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="input-group col-md-6 col-sm-12 m-0 mb-2"
                                                        data-toggle="tooltip" data-placement="top"
                                                        title="Correo electronico">
                                                        <div class="input-group-prepend">
                                                            <span
                                                                class="input-group-text rounded-circle text-center text-white border-0">
                                                                <i class="fa fa-envelope"></i>
                                                            </span>
                                                        </div>
                                                        <input type="email" class="form-control" id="email"
                                                            name="email" placeholder="Correo electronico"
                                                            value="{{ Auth::user()->email }}">
                                                    </div>
                                                    <div class="input-group col-md-6 col-sm-12 m-0 mb-2"
                                                        data-toggle="tooltip" data-placement="top" title="RUC">
                                                        <div class="input-group-prepend">
                                                            <span
                                                                class="input-group-text rounded-circle text-center text-white border-0">
                                                                <i class="fa fa-building"></i>
                                                            </span>
                                                        </div>
                                                        <input type="text" class="form-control" id="ruc"
                                                            name="ruc" placeholder="RUC"
                                                            value="{{ Auth::user()->ruc }}">
                                                    </div>
                                                </div>
                                            </div>








































                                            <h3 class="blog-head text-uppercase mt-4">Metodo de Pago</h3>
                                            <div class="blog-divider"></div>

                                            <div class="row text-center">

                                                @foreach ($metodos_pago as $metodo)
                                                    <label class="mb-4 mt-0 pago col-md-4 col-sm-6">
                                                        <input class="form-check-input" type="radio" name="pago"
                                                            value="{{ Str::slug($metodo->nombre, '-') }}"
                                                            style="display: none;"
                                                            data-name="{{ $metodo->descripcion }}">
                                                        <img src="{{ asset($metodo->imagen) }}"
                                                            style="height: 30px; filter:grayscale(100%)" />
                                                    </label>
                                                @endforeach

                                                <br>
                                                <small class="w-100 text-center">
                                                    <span class="metodopago">&nbsp;</span>
                                                </small>
                                            </div>




                                            <div class="blog-divider mt-4"></div>

                                            <div class="row mb-3">
                                                <div class="col-md-12 col-sm-12">

                                                    <label
                                                        class="d-inline-block w-100 text-center m-0 control control-checkbox align-middle">

                                                        <input class="m-0" type="checkbox" name="acepto"
                                                            id="acepto" required>

                                                        <div class="control_indicator d-inline-block align-middle"></div>

                                                        <span class="align-middle">He leído y acepto los <a
                                                                href="{{ url('/terminos-y-condiciones') }}"
                                                                target="_blank">términos y condiciones</a> de
                                                            contratación.</span>

                                                    </label>
                                                </div>
                                            </div>

                                            <button class="btn btn-custom btn-lg theme-color w-100 mt-0"
                                                type="submit">Suscribirse y Pagar $<span
                                                    class="totaltxt{{ $a->id }}">{{ $a->pvp_mes }}</span></button>

                                        </div>

                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                @endforeach


















                <h3 class="blog-head text-uppercase mt-4">Suscripcion</h3>
                <div class="blog-divider"></div>
                <div class="blog-text">
                    <div class="blog-description text-center">
                        <h6>Suscripcion actual</h6>
                        <h2 class="theme-link mb-2">{{ $actual->suscripcion->nombre }}</h2>
                        <br>
                        Desde: <b>{{ $actual->fecha_desde }}</b><br>
                        Hasta: <b>{{ $actual->fecha_hasta }}</b><br>
                        </p>
                    </div>
                </div>
                <div class="blog-divider"></div>




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

@endsection

@section('scripts')
    <script type="text/javascript">
        $(document).ready(function() {

            $('[data-toggle="tooltip"]').tooltip()

            //BOTON ACTUALIZAR PLAN
            $('.actualizarPlan').click(function() {
                var id = $(this).attr('data-id');
                $('.suscripciones').hide(); //OCULTA SUSCRIPCIONES
                $('.contratar' + id).show(); //MUESTRA FORMULARIO CONTRATAR
            });

            //BOTON VOLVER A SUSCRIPCIONES
            $('.volver').click(function() {
                var id = $(this).attr('data-id');
                $('.contratar' + id).hide(); //OCULTA FORMULARIO CONTRATAR
                $('.suscripciones').show(); //MUESTRA SUSCRIPCIONES
            });

            //CAMBIA AHORRO Y TOTAL
            $('.change').change(function() {



                //OBTIENE ID DE PLAN
                var id_plan = $(this).data('plan');
                //OBTIENE EL PRECIO DEL ELITE
                var precio_max = $(this).find(':first-child').data('precio');
                //OBTIENE EL PRECIO SELECCIONADO
                var precio = $(this).find(':selected').data('precio');
                //OBTIENE EL TIEMPO SELECCIONADA
                var tiempo = $(this).find(':selected').val();
                //OBTIENE EL TIEMPO PERSONALIZADO SELECCIONADA
                var meses = $(this).closest('tr').find('.meses').val();
                //OBTIENE LA OFERTA SELECCIONADA
                var oferta = $(this).find(':selected').data('o') || '0';

                if (tiempo == 1) {
                    $(this).closest('tr').find('.meses').removeAttr("readonly");
                    tiempo = meses;
                    $(this).closest('tr').find('.meses').val(tiempo);
                } else {
                    $(this).closest('tr').find('.meses').attr('readonly', true);
                    $(this).closest('tr').find('.meses').val(tiempo);

                }



                

                //SI EXISTE OFERTA
                if (oferta != 0) {
                    
                    //CALCULA EL TOTAL CON LA OFERTA
                    var valor_oferta = (precio * tiempo) * oferta / 100;
                    var total = precio * tiempo - valor_oferta;

                    //OBTIENE EL AHORRO COMPARADO CON LA SUSCRIPCION MENSUAL
                    var valor_oferta_max = (precio_max * tiempo) * oferta / 100;
                    var total_max = precio_max * tiempo - valor_oferta_max;
                    var ahorro_actual = total_max - total;
                }else{
                    //OBTIENE AHORRO ACTUAL
                    var ahorro_actual = (precio_max - precio) * tiempo;
                    //OBTIENE EL TOTAL
                    var total = precio * tiempo;
                }

                

                $('.pvptxt' + id_plan).text(precio);
                $('.ahorrotxt' + id_plan).text(ahorro_actual.toFixed(2));
                $('.totaltxt' + id_plan).text(total.toFixed(2));

            });



            $('input[name="pago"]').change(function() {
                //CAMBIA LOS FILTROS
                $('.pago').not(this).find('img').css('filter', 'grayscale(100%)');
                $(this).next().css('filter', 'none');

                //OBTIENE NOMBRE METODO DE PAGO
                var metodo = $(this).attr('data-name');
                $('.metodopago').text(metodo);
            });



            //NO PERMITIR MESES EN NEGATIVO
            $('.meses').on('change', function() {
                if (this.value < 0) {
                    this.value = 0;

                } else {
                    $('.change').trigger('change');
                }

            });

            //FUNCION SI EL CLIENTE NO QUIERE FACTURA
            $('input[name="no_factura"]').change(function() {
                if (this.checked) {
                    var este = $(this).closest('form')

                    var nombre = este.find('input[name="nombre"]');
                    var telefono = este.find('input[name="telefono"]');
                    var direccion = este.find('input[name="direccion"]');
                    var email = este.find('input[name="email"]');
                    var ruc = este.find('input[name="ruc"]');

                    //SI NO TIENE VALOR EL INPUT ESCRIBE UNA LINEA
                    (nombre.val() == "") ? nombre.val("-"): nombre.val(nombre.val());
                    (telefono.val() == "") ? telefono.val("-"): telefono.val(telefono.val());
                    (direccion.val() == "") ? direccion.val("-"): direccion.val(direccion.val());
                    (email.val() == "") ? email.val("-"): email.val(email.val());
                    (ruc.val() == "") ? ruc.val("-"): ruc.val(ruc.val());

                    //OCULTA INPUTS
                    $(this).closest('form').find('.factura_campos').hide();
                } else {
                    //MUESTRA CAMPOS
                    $(this).closest('form').find('.factura_campos').show();
                }
            });

            //VALIDA CAMPOS DE FORMULARIO
            $(document).on('submit', 'form', function(e) {


                var mensajesError = null,
                    mensaje;

                function validar(variable, mensaje) {

                    if (!variable) {
                        if (mensajesError == null) {
                            mensajesError = mensaje + "\n";
                        } else {
                            mensajesError += mensaje + "\n"; // agregar cada mensaje de error a la variable
                        }

                        e.preventDefault();
                    }
                }

                //e.preventDefault(); // para evitar que se envie el formulario
                var form = $(this); // obtener el formulario específico
                var plan = form.find('input[name="plan"]').val();
                var meses = form.find('input[name="meses"]').val();
                var nombre = form.find('input[name="nombre"]').val(); // obtener el valor del campo "nombre"
                var telefono = form.find('input[name="telefono"]')
                    .val(); // obtener el valor del campo "telefono"
                var direccion = form.find('input[name="direccion"]')
                    .val(); // obtener el valor del campo "direccion"
                var email = form.find('input[name="email"]').val(); // obtener el valor del campo "email"
                var ruc = form.find('input[name="ruc"]').val(); // obtener el valor del campo "ruc"
                var pago = $('input[name="pago"]:checked').val();

                validar(plan, "Por favor, seleccione un plan.");
                validar(meses, "Por favor, seleccione el tiempo que desea contratar.");
                validar(nombre, "Por favor, escriba su nombre y apellido para la factura.");
                validar(telefono, "Por favor, escriba su teléfono para la factura.");
                validar(direccion, "Por favor, escriba su dirección para la factura.");
                validar(email, "Por favor, escriba el correo electrónico para la factura.");
                validar(ruc, "Por favor, escriba el RUC para la factura.");
                validar(pago, "Por favor, seleccione un método de pago.");
                // luego puedes validar los valores antes de enviar el formulario

                if (mensajesError != null) {
                    alert(mensajesError);
                }

            });

        });
    </script>
@endsection