@extends('layouts.masterBtnPago')
@section('header')
    <style>
        .panel {
            border-color: #222222;
        }

        .panel-heading {
            color: #ffffff;
            background-color: #222;
            border-color: #222;
        }

        .head-logo {
            margin-right: 30px;
        }

        .head-logo .bg-logo > a > img {
            width: 220px;
        }

        .head-logo .navbar-brand {
            background-color: white;
            height: 90px;
            padding-right: 46px;
        }

        .head-logo div.bg-logo {
            background: #fff;
            padding-top: 15px;
            padding-bottom: 15px;
            padding-right: 50px;
            padding-left: 25px;
        }

        .head-logo div.bg-logo:after, .head-logo div.bg-logo:before {
            content: "";
            width: 0;
            height: 0;
            top: 0;
            border-style: solid;
            border-width: 92px 31px 0 0;
            position: absolute;
            -webkit-transform: skew(-30deg, 0deg);
            transform: skew(-30deg, 0deg)
        }

        .head-logo div.bg-logo:before {
            background-color: #9e9e9e;
            border-color: transparent #9e9e9e transparent transparent;
            right: -30px;
            z-index: 1
        }

        .head-logo div.bg-logo:after {
            background-color: #e2e2e2;
            border-color: transparent #e2e2e2 transparent transparent;
            right: -3px
        }
        #nacional{
            text-decoration:none;
            color:black;
            position: absolute;
            width: 68px;
            height: 48px;
            background: #464646;
            background:rgba(0,0,0,0.5);
            margin-top: 22%;
            margin-left: 41%;
            border-radius: 15px 15px 15px 15px;
        }

        #nacional:hover{
            background: #F80101;
            cursor : pointer;
        }
        .separador{
            padding: 1%;
            background-color: black;

        }


    </style>
@endsection
@section('content')
    <script type="text/javascript">
        $('document').ready(function () {
            $("embed").find("document", function(){

            });
            $("#LoginForm").validate({
                showErrors: function (errorMap, errorList) {
                    //LIMPIAR LOS TOOLTIPS PARA LOS ELEMENTOS VÁLIDOS
                    $.each(this.validElements(), function (index, element) {
                        var $element = $(element);
                        $element.data("title", "") // BORRAR EL TITULO - NO HAY ERROR ASOCIADO
                            .removeClass("error")
                            .tooltip("destroy");
                    });

                    // CREAR LOS TOOLTIPS PARA ELEMENTOS INVÁLIDOS
                    $.each(errorList, function (index, error) {
                        var $element = $(error.element);
                        $element.tooltip("destroy") // DESTRUIR TODO TOOLTIP EXISTENTE PARA PODER CREAR UNO NUEVO
                            .data("title", error.message)
                            .addClass("error")
                            .tooltip(); // CREAR UN NUEVO TOOLTIP CON EL MENSAJE DE ERROR ASOCIADO AL TITULO AGREGADO
                    });
                }
            });
        });
        $(function() {
            $(".video").click(function () {
                var theModal = $(this).data("target"),
                    videoSRC = $(this).attr("data-video"),
                    videoSRCauto = videoSRC + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";
                $(theModal + ' iframe').attr('src', videoSRCauto);
                $('#iframe').append('<h2>Cargando...</h2>');
                $(theModal + ' button.close').click(function () {
                    $(theModal + ' iframe').attr('src', videoSRC);

                });
            });
        });
    </script>

    @if(session('msg') && session('msg') == 'COD_002')
        <div class="alert alert-success col-sm-6 col-sm-push-3" style="margin-top: 20px;">
            <strong>¡Operación realizada con éxito!</strong> Ya puede ingresar al sistema con su usuario y contraseña.
        </div>
    @elseif(session('msg') && session('msg') == 'CODE_000' || (session('msg') == 'CODE_002' || session('msg') == 'CODE_003' || session('msg') == 'CODE_004' ))
        <div class="alert alert-danger col-sm-6 col-sm-push-3" style="margin-top: 20px;">
            <strong>¡Error!</strong> Ha ocurrido un error al momento de guardar su contraseña. Por favor inténtelo
            nuevamente.
        </div>
    @elseif(session('msg') && session('msg') == 'olvido')
        <div class="alert alert-success col-sm-6 col-sm-push-3" style="margin-top: 20px;">
            <strong>¡Operación Realizada con Éxito!</strong> Recibirá un correo electrónico con una clave temporal la
            cuál deberá cambiar cuando ingrese al sistema.
        </div>
    @endif

    <div class="col-xs-12 col-sm-6 col-sm-offset-2" style="margin-top: 5%">
        <div class="panel" style="width:100%; text-align: center; ">