@extends('layouts.front_login', ['title' => __('frontsistema.login_title')])
@section('customcss')
<link href="{{ url('assets/plugins/sweet-alert2/sweetalert2.min.css')}} " rel="stylesheet" type="text/css">
<style type="text/css">
.txt_theme_font{
    color: #8cd5dd;
}
.txt_dark_font{
    color: #2d2d2d;
}
#lang_menu{
    padding: 0;    
}
@media only screen and (max-width: 600px) {
    #lang_menu{
        padding: 10px 0;
    }
}
section > .container{
    max-width: 100% !important;
    padding: 0 !important;
}
.login-shell{
    display: flex;
    min-height: 100vh;
    background: url('{{ asset(env('APP_ROOT').'/assets/images/bg.png') }}') center center / cover no-repeat;
    align-items: center;
    justify-content: flex-start;
    padding: 30px 80px;
    gap: 40px;
}
.login-panel{
    width: 100%;
    max-width: 520px;
    background: #ffffff;
    padding: 40px 35px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    margin: 0;
    border-radius: 0px;
}
.login-bg{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 420px;
    padding-left:350px;
}
.login-bg-content{
    position: relative;
    z-index: 1;
    max-width: 620px;
}
.login-bg-title{
    font-size: 28px;
    font-weight: 700;
    color: #7c2d3e;
    margin-bottom: 10px;
}
.login-bg-text{
    font-size: 15px;
    color: #4a4a4a;
    line-height: 1.6;
}
.login-security-logos{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 25px;
    align-items: center;
}
.login-security-logos img{
    max-width: 100%;
    height: 42px;
    object-fit: contain;
    background: #f3f5f9;
    border-radius: 0px;
    padding: 6px;
}
.login-bg-logos{
    display: flex;
    gap: 18px;
    margin-top: 24px;
    align-items: center;
}
.login-bg-logos img{
    height: 30px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.9;
}
.login-panel .page-title{
    font-size: 20px;
    color: #2d2d2d;
    font-weight: 700;
}
.login-panel .input-black{
    border: 1px solid #d7dbe2;
    border-radius: 0px;
}
.login-panel .btn-black{
    border-radius: 0px;
}
@media only screen and (max-width: 991px){
    .login-shell{
        flex-direction: column;
        justify-content: center;
        padding: 20px;
    }
    .login-panel{
        margin: 0;
        max-width: none;
    }
    .login-bg{
        min-height: 0;
    }
}
@media only screen and (max-width: 600px){
    .login-shell{
        padding: 16px;
        gap: 20px;
        background-position: center top;
    }
    .login-panel{
        padding: 28px 20px;
        box-shadow: 0 10px 22px rgba(0,0,0,0.10);
    }
    .login-bg{
        padding-left: 0;
        justify-content: center;
        text-align: center;
    }
    .login-bg-content{
        max-width: 100%;
    }
    .login-bg-title{
        font-size: 22px;
    }
    .login-bg-text{
        font-size: 14px;
    }
    .login-bg-title,
    .login-bg-text{
        display: none;
    }
    .login-bg-logos{
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }
    .login-bg-logos img{
        height: 26px;
    }
    #security_image{
        max-width: 100%;
        height: auto;
    }
}
</style>
@endsection
@section('pagecontent')
    <div class="login-shell">
        <div class="login-panel">
            <div class="text-center account-logo-box">
                <h2 class="text-uppercase">
                    <a href="{{url('/user_login')}}" class="text-success">
                        <span><img src="{{ ($broker && $broker->broker_logo) ? asset($broker->broker_logo) : asset(env('APP_ROOT').'/assets/images/transparent.png') }}" alt="" height="80"></span>
                    </a>
                </h2>
                <div class="col-12">
                    <div class="page-title-box">
                        <h4 class="page-title text-center float-none">@lang('frontsistema.frm_user_login.welcome_txt')</h4>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>

            <div class="account-content">
                <!-- first step of login starts -->
                <form class="form-horizontal" id="loginForm" >
                    <input type="hidden" id="_token" value="{{ csrf_token() }}">
                    <div class="form-group m-b-25">
                        <div class="col-12">
                            <label class="font-600" for="inputuser_login1">@lang('frontsistema.frm_user_login.field_user')</label>
                            @if(config('starter.show_translate'))
                            <ul class="nav navbar-nav navbar-right pull-right lang-drop-down">
                                <li class="dropdown">
                                    <a href="" id="lang_menu" class="dropdown-toggle profile waves-effect waves-light txt_dark_font" data-toggle="dropdown" aria-expanded="true">
                                        <span class="profile-username">
                                            @lang('frontsistema.login_lang') <span class="caret"></span>
                                        </span>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a class="txt_dark_font" href="{{ url('language/es')}}"><img src="{{ url('assets/images/flag/flag_spanish.png') }}" width="16px" /> @lang('frontsistema.login_spanish')</a>
                                        </li>
                                        <li class="divider"></li>
                                        <li>
                                            <a class="txt_dark_font" href="{{ url('language/en') }}"><img src="{{ url('assets/images/flag/flag_us.png') }}" width="16px" />  @lang('frontsistema.login_english')</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            @endif
                            <input class="form-control input-lg input-black" type="text" id="inputuser_login1" name="user_login" data-parsley-trigger="change" required value="{{ old('user_login') }}" placeholder="@lang('frontsistema.frm_user_login.field_user')" tabindex="1">
                            <div class="form-error">@lang('frontsistema.frm_user_login.field_user_error')</div>
                           
                            <div class="alert alert-warning m-t-10" id="errorMsg" style="display:none"></div>
                            <a href="{{url('user/forgot-password')}}" class="float-right m-t-5 txt_theme_font font-600">@lang('frontsistema.frm_user_login.forgot_password')</a>
                        </div>
                    </div>
                                              
                    <div class="form-group account-btn1 m-t-10">
                        <div class="col-12">
                            <button id="loginFormButton" class="btn w-lg btn-lg btn-black waves-effect waves-light" type="submit">@lang('frontsistema.frm_user_login.login_btn')</button>
                        </div>
                    </div>
                </form>
                <!-- first step of login ends -->

                <!-- main login form starts -->
                <form class="form-horizontal" id="mainLoginForm" style="display:none">
                    <input type="hidden" id="_token" value="{{ csrf_token() }}">
                    <div class="form-group m-b-25">
                        <div class="col-12" style="text-align: center;">
                            <img id="security_image" src="{{ asset(env('APP_ROOT').'/assets/images/no_image.png') }}" style="height: 200px;width: auto;">
                        </div>
                        <div class="col-12 m-t-20" style="text-align: center;">
                            <p style="font-size: 18px;font-weight: 600;" id="security_image_phrase"></p>
                        </div>
                    </div>
                    <input class="form-control input-lg input-black" type="hidden" id="inputuser_login" name="user_login" value="{{ old('user_login') }}" placeholder="@lang('frontsistema.frm_user_login.field_user')">
                    
                    <div class="form-group m-b-25">
                        <div class="col-12">
                            <label class="font-600" for="password">@lang('frontsistema.frm_user_login.field_pwd')</label>
                            <input class="form-control input-lg input-black" type="password" id="password" name="password" required placeholder="@lang('frontsistema.frm_user_login.field_pwd')" tabindex="1">
                            <div class="form-error">@lang('frontsistema.frm_user_login.field_pwd_error')</div>
                            <a href="{{url('user/forgot-password')}}" class="float-right m-t-5 txt_theme_font font-600">@lang('frontsistema.frm_user_login.forgot_password')</a>
                        </div>
                    </div>                           
                    <div class="alert alert-warning m-t-30" id="mainErrorMsg" style="display:none"></div>
                    
                    <div class="form-group account-btn1 m-t-10">
                        <div class="col-12">
                            <button id="mainLoginFormButton" class="btn w-lg btn-lg btn-black waves-effect waves-light" type="submit">@lang('frontsistema.frm_user_login.login_btn')</button>
                        </div>
                    </div>
                </form>
                <!-- main login form ends -->

              
                <div class="clearfix"></div>

            </div>
        </div>
        <div class="login-bg">
            <div class="login-bg-content">
                <div class="login-bg-title">Acceso instantáneo a la inversión</div>
                <div class="login-bg-text">
                    Tome ventaja de todas las oportunidades del mercado con un bróker seguro y regulado. Cámbiese a SEVEN ARCHES WEALTH MANAGEMENT
                    para obtener mayores oportunidades, menores costos, mayor acceso y atención al cliente de primera clase.
                </div>
                <div class="login-bg-logos">
                     <img src="{{ asset(env('APP_ROOT').'/assets/images/ssl.webp') }}" alt="Security logo 1">
                    <img src="{{ asset(env('APP_ROOT').'/assets/images/fca.webp') }}" alt="Security logo 2">
                    <img src="{{ asset(env('APP_ROOT').'/assets/images/pci.webp') }}" alt="Security logo 3">
                </div>
            </div>
        </div>
    </div>
@endsection
@section('customjs')
<script src="{{ url('assets/plugins/parsleyjs/parsley.min.js') }}"></script>
<script type="text/javascript">
    const baseUrl = "{{ request()->getBaseUrl() }}";
    $( document ).ready(function() {
        
        $('#loginForm').parsley().on('field:validated', function () {
            //console.log("form error");
        })
        .on('form:submit', function () {
            console.log("submit form");
            submitFirstForm();
            return false; // Don't submit form for this demo
        });

        $('#mainLoginForm').parsley().on('field:validated', function () {
            //console.log("form error");
        })
        .on('form:submit', function () {
            console.log("submit form");
            submitSecondform();
            return false; // Don't submit form for this demo
        });
        
                        
    });
    function submitFirstForm(){  
        try {
            $('#errorMsg').hide();
            let token = $('#_token').val();
            let user_login = $('#inputuser_login1').val();
            $('#loginFormButton').html('<i class="fa fa-circle-o-notch fa-spin m-r-10"></i> @lang("frontsistema.frm_user_login.please_wait")');
            $('#loginFormButton').prop("disabled", true);

            $.ajax({
                type: 'POST',
                dataType: 'json',
                data: {'_token':token,'user_login':user_login},
                url: baseUrl + "/user_security_login",
                beforeSend: function() {
                    //$('#modal-espere').modal('show');
                },
                success: function(response) {
                    if (response.error && response.code == '500'){
                        $('#errorMsg').html(response.message);
                        $('#errorMsg').show();
                    
                    }
                    else if(!response.error && response.code == '200'){
                        $('#loginForm').hide();
                        $('#mainLoginForm').show();
                        $('#security_image_phrase').html(response.data.image_phrase);
                        $('#security_image').attr('src', response.data.image);
                        $('#inputuser_login').val(user_login);
                    }
                    $('#loginFormButton').html('@lang("frontsistema.frm_user_login.login_btn")');
                    $('#loginFormButton').prop("disabled", false);
                },
                error: function(response) {
                    console.error(response);
                     $('#loginFormButton').html('@lang("frontsistema.frm_user_login.login_btn")');
                    $('#loginFormButton').prop("disabled", false);
                    // swal("@lang('frontsistema.users_alert')", "@lang('frontsistema.control_de_acceso.went_wrong_msg')", 'error');
                
                },
                complete: function() {
                    $('#loginFormButton').html('@lang("frontsistema.frm_user_login.login_btn")');
                    $('#loginFormButton').prop("disabled", false);
                }
            });
        } catch (error) {
            console.log(error);
        }
    }
   function submitSecondform(){
       try {
           $('#mainErrorMsg').hide();
            let token = $('#_token').val();
            let user_login = $('#inputuser_login1').val();
            $('#mainLoginFormButton').html('<i class="fa fa-circle-o-notch fa-spin m-r-10"></i> @lang("frontsistema.frm_user_login.please_wait")');
            $('#mainLoginFormButton').prop("disabled", true);

            $.ajax({
                type: 'POST',
                dataType: 'json',
                data: {'_token':token,'user_login':user_login, 'password':$('#password').val()},
                url: baseUrl + "/ajax_user_login",
                beforeSend: function() {
                    //$('#modal-espere').modal('show');
                },
                success: function(response) {
                    if (response.error && response.code == '500'){
                        $('#mainErrorMsg').html(response.message);
                        $('#mainErrorMsg').show();
                    
                    }
                    else if(!response.error && response.code == '200'){
                       location.reload();
                    }
                    $('#mainLoginFormButton').html('@lang("frontsistema.frm_user_login.login_btn")');
                    $('#mainLoginFormButton').prop("disabled", false);
                },
                error: function(response) {
                    console.error(response);
                    $('#mainLoginFormButton').html('@lang("frontsistema.frm_user_login.login_btn")');
                    $('#mainLoginFormButton').prop("disabled", false);
                    // swal("@lang('frontsistema.users_alert')", "@lang('frontsistema.control_de_acceso.went_wrong_msg')", 'error');
                
                },
                complete: function() {
                    $('#mainLoginFormButton').html('@lang("frontsistema.frm_user_login.login_btn")');
                    $('#mainLoginFormButton').prop("disabled", false);
                }
            });
       } catch (error) {
           console.log(error)
       }
   }
</script>
@endsection