<div id="invitoUno" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header" style="height: 0; border-bottom: none;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="row form-invito">
                    <div class="col-12">
                        <form method="post" action="solicitudinvito.php" id="invitoform">
                            <h6>Nombre completo:</h6>
                            <div class='cb-input'>
                                <input id='nombre' type="text" name="nombre" placeholder="" required />
                            </div>
                            <div class='cb-input'>
                                <input type="text" value="Fam. de Luis Arturo Garza Bassoco" id="persona" name="persona" hidden>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 col-12">
                                    <h6>Celular:</h6>
                                    <div class='cb-input'>
                                        <input id='celular' type="text" name="celular" placeholder="" required />
                                    </div>
                                </div>
                                <div class="col-sm-6 col-12">
                                    <h6>Teléfono de casa (opcional):</h6>
                                    <div class='cb-input'>
                                        <input id='telcasa' type="text" name="telcasa" placeholder="" />
                                    </div>
                                </div>
                            </div>
                                    <h6>¿Requieres de recibo deducible de impuestos?:
                                <label style="padding-left: 20px;">Sí</label>

                                <input type="checkbox" class="factura option-input checkbox" name="factura" value="Requiere factura" required />
                                <!--   -->
                                <label style="padding-left: 20px;">No</label>

                                <input type="checkbox" class="factura option-input checkbox" name="factura" value="No requiere factura" placeholder="" required />
                                <!--   -->
                            </h6>
                            <br>
                            <h4 style="padding-bottom:5px;">deseo invitarle la despensa a:</h4>

                            <div class="row">
                                <div class="col-sm-2 col-12">
                                    <span style="color:#5C5B5F; font-family:'PT Sans', sans-serif;">1 familia</span><br>
                                    <span class="cantidad">$160.00</span>
                                    <input type="checkbox" class="familia option-input checkbox" style="top:10%;" name="familia" value="Apoya una familia = $160.00" placeholder="" required />
                                </div>
                                <div class="col-sm-2 col-12">
                                    <span style="color:#5C5B5F; font-family:'PT Sans', sans-serif;">2 familias</span><br>
                                    <span class="cantidad">$320.00</span>
                                    <input type="checkbox" class="familia option-input checkbox" style="top:10%;" name="familia" value="Apoya dos familias = $320.00" placeholder="" required />
                                </div>
                                <div class="col-sm-2 col-12">
                                    <h6 style="color:#FFBA00;">Otra cantidad:</h6>
                                </div>
                                <div class="col-sm-6 col-12">
                                    <div class='cb-input' style="margin-top: -10px;">
                                        <input id='otrafamilia' type="text" name="otrafamilia" placeholder="$" />
                                    </div>
                                </div>
                            </div>
                            <br>
                            <h4 style="padding-bottom:5px;">Aportación empresa mensual:</h4>

                            <div class="row">
                                <div class="col-sm-4 col-12">
                                    <span class="cantidad">$1,000.00</span>
                                    <input type="checkbox" class="aportacion option-input checkbox" style="top:10%;" name="empresa" value="Aportacion mensual de mil pesos" placeholder="" required />
                                </div>
                            </div>
                            <div class="col-12 text-center" style="box-shadow: none; margin-bottom: 0px;">
                                <label class="acepto" style="padding-left: 20px;">Acepto el compromiso con Banco de Alimentos de Los Mochis I.A.P.</label>
                                <input type="checkbox" class="option-input checkbox" name="compromiso" value="Acepto el compromiso con Empresa" required />
                            </div>
                            <div class="col-12 text-center" style="padding-top: 30px; padding-bottom: 30px;">
                                <button class="btn-amarillo" type="submit" id="submit">envíar</button>
                            </div>
                        </form>
                    </div>

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

<!--#include virtual="/include/footer.htm"-->


<script src="/js/jquery.validate.min.js"></script>
<script src="/js/additional-methods.min.js"></script>
<script src="/js/jquery.mask.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#celular').mask('(000) 000-0000');
        $('.success').fadeOut(0);
        var v = $("#invitoform").validate({
            rules: {
                nombre: {
                    required: true
                },
                celular: {
                    requiered: true
                },
                factura: {
                    required: true
                },
                familia: {
                    required: true
                },
                empresa: {
                    required: true
                },
                compromiso: {
                    required: true
                }
            },
            messages: {
                nombre: {
                    required: "Debes escribir tu(s) nombre(s) y apellido(s).",
                },
                celular: {
                    required: "Debes de escribir tu número de teléfono.",
                    minlength: "El número que ingresaste no es válido."
                },
                factura: {
                    required: "Debes elegir una opción."
                },
                familia: {
                    required: "Debes de elegir una opción o escribir una cantidad."
                },
                empresa: {
                    required: "Debes de elegir una opción o escribir una cantidad."
                },
                compromiso: {
                    required: "Necesitas aceptar tu compromiso con nosotros antes de continuar."
                }
            }

        })
    });
</script>