@extends('layout.master')
@section('title')
   
@stop
 
@section('styles')
    <style>
        /* ::-webkit-scrollbar {
            display: none;
        } */
        .alert-danger {
            background-color: rgb(255, 255, 255) !important;
            border-color: rgba(239, 83, 80, 0.5) !important;
            color: #ef5350;
        }

     
        /* Tooltip text */
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: white;
            color: #fff;
            text-align: center;
            padding: 5px 0;
            border-radius: 50px;

            /* Position the tooltip text - see examples below! */
            position: absolute;
            z-index: 1;
        }

        /* Show the tooltip text when you mouse over the tooltip container */
        .tooltip:hover .tooltiptext {
            visibility: visible;
        }
		
        body {
        width:100%;
        height: auto;
        margin:auto;
        font-family: Roboto;
        background: #F8F8F8;
        
        }

        .example_a {
        width: 90%;
        color: #fff !important;
        text-transform: uppercase;
        text-decoration: none;
        background: #1A984D;
        padding: 15px;
        border-radius: 5px;
        display: inline-block;
        border: none;
        transition: all 0.4s ease 0s;
        }

        .login-box {
        border: 1px solid #1A984D;
        width: 400px;
        padding: 40px;
        margin: 0px auto;
        background: #fff;
        border-radius: 5px;
        }
        #btnLogin {
            align-items: center;
            display: flex;
            justify-content: center;
        }
        .fa-spinner {
            margin-left: 10px;
        }

        @media only screen and (max-width: 1023px) {
        .login-box {
            width: 95% !important;
            }
        }
		
        @media only screen and (max-width: 1023px) {
        .pagos_bancos{
            width: 100% !important;
			height: 60px;
            padding-top: 10px !important;
			margint-bottom: 20px !important;
            }
        }

        @media only screen and (max-width: 1023px) {
        .content-bancos{
            margin-left: 0px !important;
            }
        }

        @media only screen and (max-width: 1023px) {
        .titulo_bancos{
            margin-bottom: 15px !important;
            }
        }

        .login-box h2 {
        margin: 0 0 30px;
        padding: 0;
        color: #1A984D;
        text-align: center;
        }

        .login-box .user-box {
        position: relative;
        }

        .login-box .user-box input {
            width: 100%;
            padding: 10px 0;
            font-size: 14px;
            color: #1A984D;
            margin-bottom: 30px;
            border: 0px solid !important;
            border-radius: 0 !important;
            background-image: none !important;
            border-bottom-color: #1A984D !important;
            border-bottom-style: solid !important;
            border-bottom-width: 1px !important;
            -webkit-box-shadow: none !important;
            box-shadow: none !important;
        }
        .login-box .user-box input:focus {
            background-color: #ffffff !important;
            border: 0px solid !important;
            border-radius: 0 !important;
            background-image: none !important;
            border-bottom-color: #1A984D !important;
            border-bottom-style: solid !important;
            border-bottom-width: 1px !important;
            -webkit-box-shadow: none !important;
            box-shadow: none !important;
}
        .login-box .user-box label {
        position: absolute;
        top:0;
        left: 0;
        padding: 10px 0;
        font-size: 14px;
        color: #808080;
        pointer-events: none;
        transition: .5s;
        }

        .login-box .user-box input:focus ~ label,
        .login-box .user-box input:valid ~ label {
        top: -20px;
        left: 0;
        color: #808080;
        font-size: 12px;
        }
		
		@media only screen and (min-width: 1023px)  {
			.uno02{ display: none;}
			.uno04{ display: none;}
			.instru02{ display: none;} 
		}
		
		@media only screen and (max-width: 1023px)  {
			.uno{ display: none;}
			.uno03{ display: none;}
			.instru{ display: none;}
			.instru02{ display: none;}
		}
    </style>

@endsection

@section('region_editable')

	<body>

<div class="ingreso1">&nbsp;</div>	
	<div id="clase">        
	<!--<div style="font-size: 15px; font-family: Roboto; font-weight: bold; color: #000; margin-top:20px; margin-left:35px;">Pagos en Línea</div>-->
		<div class="login-box" style="margin-top: 40px !important;">
		<div align="center"><span style="font-size: 24px; font-weight: 400; color: #1A984D;">Bienvenidos a Pagos en Línea</span></div>
		<div align="center"><span style="font-size: 14px; font-weight: 500;">Municipalidad de La Molina</span></div>
			<form style="margin-top: 20px;" id="form_login" method="post" action="{{ url('oauth/login') }}" >
			@include('alerts.index')
			{{ csrf_field() }}
				<div class="user-box">
					<input id="user" class="form-control" type="text" name="Usuario" required="">
					<label>Usuario</label>			
					<i class="md md-account-circle form-control-feedback l-h-34"></i>
				</div>
				<div class="user-box">
					<input id="password" type="password" class="form-control" name="Contraseña" required="">
					<label >Contraseña</label>					
					<i class="md md-lock form-control-feedback l-h-34"></i>
				</div>
				
				
				
				<div align="center" class="user-box">				
				<a style="font-size: 15px; color: #1A984D;" href="https://desarrollomdlm.munimolina.gob.pe/MOLINA.PAGOS_SHARED/on_recuperar_password.phtml">¿Olvidaste tu contraseña?</a>
				</div>
				
				<div style="margin-top: 15px;" class="button_cont" align="center">
                    <button type="submit" class="example_a" id="btnLogin" onclick="showSpinner()">
                        Ingresar
                    </button>
                </div>								
			</form>	
		</div>	
<div class="ingreso3">&nbsp;</div>
<div class="uno03" style="margin-left: 180px; margin-top: 20px;"><span>Instructivos para los siguientes bancos:</span></div>
<div align="center" class="uno04" style="margin-top: 20px; margin-bottom: 20px;"><span>Instructivos para los siguientes bancos:</span></div>
	
	<div class="uno" style="margin-left: 280px; margin-top: 10px;">
	
<div class="pagos_bancos" style="padding-top: 15px; width: 10%; margin-bottom: -40px;">
<a href="https://www.munimolina.gob.pe/descargas/pdf/2021/PASOS A SEGUIR BCP.pdf" target="_blank">
<img class="alignnone size-full wp-image-57205" src="https://www.munimolina.gob.pe/wp-content/uploads/2020/09/bcp-logo.png" alt="" width="100%" height="auto" /></a>
</div>

<div class="pagos_bancos" style="padding-top: 4px; width: 9%; margin-bottom: -40px;">
<a href="https://www.munimolina.gob.pe/descargas/pdf/2021/PASOS PAGO BBVA.pdf" target="_blank">
<img class="alignnone size-full wp-image-57204" src="https://www.munimolina.gob.pe/wp-content/uploads/2020/09/BBVA-Logo.png" alt="" width="100%" height="auto"  /></a>
</div>

<div class="pagos_bancos" style="padding-top: 10px; width: 15%; margin-bottom: -40px;">
<a href="https://www.munimolina.gob.pe/descargas/pdf/2021/PASOS PAGO SCOTIABANK.pdf" target="_blank">
<img class="alignnone size-full wp-image-57203" src="https://www.munimolina.gob.pe/wp-content/uploads/2020/09/scotia.png" alt="" width="100%" height="auto"  /></a>
</div>

<div class="pagos_bancos" style="padding-top: 20px; width: 12%; margin-bottom: -40px;">
<a href="https://www.munimolina.gob.pe/descargas/pdf/2021/PASOS PAGO INTERBANK.pdf" target="_blank">
<img class="alignnone size-full wp-image-57202" src="https://www.munimolina.gob.pe/wp-content/uploads/2020/09/interbank-2.svg" alt="" width="100%" height="auto"  /></a>
</div>

<div class="pagos_bancos" style="padding-top: 12px; width: 11%; margin-bottom: -40px;">
<a href="https://www.munimolina.gob.pe/descargas/pdf/2021/PASOS PAGO PÁGINA WEB.pdf" target="_blank">
<img class="alignnone size-full wp-image-57201" src="https://www.munimolina.gob.pe/wp-content/uploads/2023/03/SENA-Pagos-en-linea.jpg" alt="" width="100%" height="auto"  /></a>
</div>	
</div>



</br>
</br> 
</br>


@endsection

@section('js')
<script>
    function showSpinner() {
	   $('#btnLogin').append('<i id="fa_timer" class="fa fa-spinner fa-pulse" style="font-size:17px; margin-left:10px; color:white"></i><span class="sr-only"></span>');
    }
</script>
@endsection
