@include('header_main')
<style>
    input, button, select, textarea{width: auto;font-family: "Open Sans";}
    .alert-box {
    width: 375px;
}
.error {
    background: #ffecec url("http://vola.collectcent.netdna-cdn.com/images/error.png") no-repeat scroll 10px 50%;
    border: 1px solid #f5aca6;
    padding-left: 30px;
}
.success {
    background: #e9ffd9 url("http://vola.collectcent.netdna-cdn.com/images/success.png") no-repeat scroll 10px 50%;
    border: 1px solid #a6ca8a;
    padding-left: 30px;
}
.error_created_ad {
    background: rgba(0, 0, 0, 0) url("http://vola.collectcent.netdna-cdn.com/images/error.png") no-repeat scroll 10px 50%;
}
.alert-box_cread_ad {
    color: #555;
    font-family: Tahoma,Geneva,Arial,sans-serif;
    font-size: 11px;
    left: 10px;
    margin: 10px;
    padding: 10px 36px;
    width: 270px;
}
label {
   
    font-family: "Open Sans";
}
span{font-family: "Open Sans";}
</style>    
        <section class="main-section teamv" id="team" style="background:#fff;padding-top: 8px;"><!--main-section team-start-->
            <div class="container">
                <div class="row"><div class="col-sm-12"><h2 style="text-align:center;font-size: 30px;" id="signinh2">Log In</h2></div></div>
                <div class="row">
                    <div class="col-sm-2"></div>
                    <div class="col-sm-8"><p style="text-align: center; " id="signinpara">You have to login to be able to access that page.</p></div>
                    <div class="col-sm-2"></div>
                </div> 
                 @if (count($errors) > 0)
                  <div class="row">
                    <div class="col-sm-2"></div>
                    <div class="col-sm-8">
                    <div class="alert alert-danger" style="margin-left: 25%;">
                        <ul>
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                        </div>
                        <div class="col-sm-2"></div>
                      </div>  
                    @endif
                     @if(Session::has('error_login'))
                     <div class="row">
                    <div class="col-sm-2"></div>
                    <div class="col-sm-8">
                        <div class="form-group alert-box error" style="margin-left: 25%;">
                            {{ Session::get('error_login') }}                            
                        </div>
                        </div>
                        <div class="col-sm-2"></div>
                      </div> 
                        @endif

                        @if(Session::has('error_signin'))
                         <div class="row">
                    <div class="col-sm-2"></div>
                    <div class="col-sm-8">
                        <div class="form-group alert-box error" style="margin-left: 25%;">
                            {{ Session::get('error_signin') }}                            
                        </div>
                        </div>
                        <div class="col-sm-2"></div>
                      </div> 
                        @endif

                        @if(Session::has('success_singin'))
                        <div class="row">
                    <div class="col-sm-2"></div>
                    <div class="col-sm-8">
                        <div class="form-group alert-box success" style="margin-left: 25%;">
                            {{ Session::get('success_singin') }}                            
                        </div>
                        </div>
                        <div class="col-sm-2"></div>
                      </div> 
                        @endif
                <div class="row" style="padding-top:30px;">
                    <div class="col-sm-4">

                    </div>
                    <div class="col-sm-4" style="border:1px solid #ccc; border-radius: 6px;">
                        <div class="row" style="padding:15px;">                       
                            <div class="col-sm-12"> 
                                {!! Form::open(array('url' =>'/dologin', 'method' => 'post', 'class' => 'form-horizontal','onsubmit'=>'return validateSfrm();','id'=>'lgFrm','role'=>'form')) !!}
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="Email address" id="email_address" name="email_address" value="{{ Session::get('email_address') }}"  required>
                            <input type="hidden" name="refs" value=""/>
                            <input type="hidden" name="prc" id="prc" value="signin"/>
                            <span id="erid1" style="display: none;padding-right: 5px; width: 100%; font-size: 12px; margin-bottom: 0px;  padding-top: 5px;" class="form-group row alert-box_cread_ad error_created_ad" > </span>
                                    </div>
                                    <div class="form-group">
                                        <input type="password" class="form-control" id="password" name="password" placeholder="Password" autocomplete="off" required>
                                         <span id="erid2" style="display: none;padding-right: 5px; width: 100%; font-size: 12px; margin-bottom: 0px;  padding-top: 5px;" class="form-group row alert-box_cread_ad error_created_ad"> </span>
                                    </div>
                                    <div class="form-group" style="display:none;" id="cpwd">
                                        <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="Confirm Password" autocomplete="off" >
                                        <span id="erid3" style="display: none;padding-right: 5px; width: 100%; font-size: 12px; margin-bottom: 0px;  padding-top: 5px;" class="form-group row alert-box_cread_ad error_created_ad"> </span>
                                    </div>
                                <div class="form-group" id="signinfrg">
                                        <a data-target="#exampleModal2" data-toggle="modal" href="#exampleModal2" class="pull-right" style="text-decoration:underline;">I forgot my password</a>
                                    </div>
                                    <div class="form-group">
                                        <button class="btn btn-primary" type="submit" id="stype" style="width:100%;background:#0063ff;margin-top: 10px;font-weight: 700;">Log In</button>
                                    </div>  
                                    <div class="form-group" style="margin-bottom: 0px;">
                                        <p style="text-align:center;font-weight: 700;">OR</p>
                                    </div>
                                    <div class="form-group">
                                        <a href="auth/facebook" class="btn btn-primary" style="width:100%;background:#3fa2f7;margin-top: 10px;font-weight: 700;line-height: 34px;" id="signinfb"><i class="fa fa-facebook-square fa-1x" style="float: none ! important; margin: 0px ! important;"></i> &nbsp;Log In with Facebook</a>
                                    </div>
                                    <div class="form-group">
                                        <a href="auth/google" class="btn btn-primary" style="width:100%;background:#fe6363;margin-top: 0px;border:1px solid #fe6464;font-weight: 700;line-height: 34px;" id="signingp"><i class="fa fa-google-plus-square fa-1x" style="float: none ! important; margin: 0px ! important;"></i> &nbsp;Log In with Google</a>
                                    </div>
                                </form>
                            </div>
                        </div>
                        
                    </div>                
                    <div class="col-sm-4">

                    </div>
                    
                </div> 
                 <div class="row" style="padding-top:30px;">
                    <div class="col-sm-4">

                    </div>
                     <div class="col-sm-4" style="padding-left:32px;padding-right: 32px;">
                          <div class="form-group">
                              <button class="btn btn-primary" id="nsignup" type="button" style="width:100%;background:#fff;margin-top: 10px;font-weight: 700;color:#0063ff">I don't have an account</button>
                           </div>
                    </div>
                    <div class="col-sm-4" style="">
                    </div>
                     
                 </div>


            </div>
        </section>
        <!--main-section signin end-->
      
        
        
<!-- forgot password modal -->
                        <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <form method="post" action="/forgot" onsubmit="return validateFrgFrm();">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                            <h4 class="modal-title" id="exampleModalLabel">Forgot Password</h4>
                                        </div>
                                        <div class="modal-body">
                                            <span id="erid4" style="display: none;width:100%;padding-right: 5px;margin-left: 0px;" class="form-group row alert-box"> </span>
                                            <div class="form-group" id="frg">
                                                <label for="name" class="control-label">Please share your email address:</label>
                                                <input type="email" name="remail_address" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,5}$" class="form-control" required="required" id="remail_address">
                                            </div>

                                        </div>
                                        <div class="modal-footer">
                                            <input type="submit" class="btn btn-primary" id="forgetnow" name="forgetnow" value="Submit">
                                        </div>
                                        <!--                                </form>-->
                                    </form>
                                </div>
                            </div>
                        </div>
                        <!-- forgot password modal end -->




@include('footer_main')
       

<script src="http://vola.collectcent.netdna-cdn.com/js/functionsvali.js"></script>
        <script type="text/javascript">
            var ischkmail = 1;
            $(document).ready(function (e) {
                $('#test').scrollToFixed();
                $('.res-nav_click').click(function () {
                    $('.main-nav').slideToggle();
                    return false

                });

            });
            $('#nsignup').click(function(){  
                var prc =$.trim($('#prc').val());
                if(prc=='signin'){
                    $('#prc').val('signup');
                    $('#signinh2').html('Sign up');
              $('#signinpara').html('Sign up for Vola.Ad. Registration is free and running an ad takes 30 seconds. See you on the other side!');
                    $('#cpwd'). css('display','block');
                    $('#signinfrg').css('display','none');
                    $('#signinfb').html('<i style="float: none ! important; margin: 0px ! important;" class="fa fa-facebook-square fa-1x"></i> &nbsp;Sign up with Facebook');
                    $('#signingp').html('<i style="float: none ! important; margin: 0px ! important;" class="fa fa-google-plus-square fa-1x"></i> &nbsp;Sign up with Google');
                    $('#stype').html('Sign up');
                    $('#nsignup').html("I already have an account");
                       
                }else{
                    $('#prc').val('signin');
                     $('#signinh2').html('Log In');
              $('#signinpara').html('You have to login to be able to access that page.');
                    $('#cpwd'). css('display','none');
                    $('#signinfrg').css('display','block');
                     $('#nsignup').html("I don't have an account");
                    $('#stype').html('Log In');
                    $('#signinfb').html('<i style="float: none ! important; margin: 0px ! important;" class="fa fa-facebook-square fa-1x"></i> &nbsp;Log In with Facebook');
                    $('#signingp').html('<i style="float: none ! important; margin: 0px ! important;" class="fa fa-google-plus-square fa-1x"></i> &nbsp;Log In with Google');
                }
                
            });
             /* Login Section */
    function validateSfrm()
    {
        var email_address=$.trim($('#email_address').val());
        var pwd=$.trim($('#password').val());
        //cpwd
        var cpassword=$.trim($('#password_confirmation').val());
       
         var error_flgs = 0;
	
	if(email_address == ""){
		error_flgs=1;
                $('#erid1').html('Please Enter Your Email Address');
                $('#erid1').css('display','block');
		$('#email_address').css("border","1px solid #FF0000");
		
	}
	else if(!emailCheck(email_address)){
		
		error_flgs=1;
                $('#erid1').html('Sorry, the email you entered is invalid. Please enter a valid email.');
                $('#erid1').css('display','block');
                $('#email_address').css("border","1px solid #FF0000");
	}
	
	else{
		$('#email_address').css("border","1px solid #999");
                $('#erid1').html('');
                $('#erid1').css('display','none');
                 $.ajax({
                        url: 'json-data/get-usr',
                        type: 'POST',
                        data:'email_address='+email_address,
                        dataType: 'json',
                        success: function (data) {                        
                               if(data.status==0){
                                   $('#prc').val('signup');
                    $('#signinh2').html('Sign up');
              $('#signinpara').html('Sign up for Vola.Ad. Registration is free and running an ad takes 30 seconds. See you on the other side!');
                    $('#cpwd'). css('display','block');
                    $('#signinfrg').css('display','none');
                    $('#signinfb').html('<i style="float: none ! important; margin: 0px ! important;" class="fa fa-facebook-square fa-1x"></i> &nbsp;Sign up with Facebook');
                    $('#signingp').html('<i style="float: none ! important; margin: 0px ! important;" class="fa fa-google-plus-square fa-1x"></i> &nbsp;Sign up with Google');
                    $('#stype').html('Sign up');
                    $('#nsignup').html("I already have an account");
                                   ischkmail=0;
                               }else{
                                   ischkmail=1;
                                   $('#prc').val('signin');
                     $('#signinh2').html('Log In');
              $('#signinpara').html('You have to login to be able to access that page.');
                    $('#cpwd'). css('display','none');
                    $('#signinfrg').css('display','block');
                     $('#nsignup').html("I don't have an account");
                    $('#stype').html('Log In');
                    $('#signinfb').html('<i style="float: none ! important; margin: 0px ! important;" class="fa fa-facebook-square fa-1x"></i> &nbsp;Log In with Facebook');
                    $('#signingp').html('<i style="float: none ! important; margin: 0px ! important;" class="fa fa-google-plus-square fa-1x"></i> &nbsp;Log In with Google');
             
                               }
                        }

                        });
     
	}
	if(pwd == ""){
		error_flgs=1
                $('#erid2').html('Please Enter Your Password');
                $('#erid2').css('display','block');
		$('#password').css("border","1px solid #FF0000");
		
	}
	else if(pwd.length <= 5 ){
		
                error_flgs=1
                $('#erid2').html('Please Enter Password At least 6 Charecter Long');
                $('#erid2').css('display','block');
		$('#password').css("border","1px solid #FF0000");
		
	}
	
	else{
		$('#password').css("border","1px solid #999");
                $('#erid2').html('');
                $('#erid2').css('display','none');
	}
        
        if(ischkmail==0)
        {
         //cpassword  
            if(cpassword == ""){
                   error_flgs=1
                   $('#erid3').html('Please Enter Confirm Password');
                   $('#erid3').css('display','block');
                   $('#password_confirmation').css("border","1px solid #FF0000");

           }
           else if(cpassword.length <= 5 ){

                   error_flgs=1
                   $('#erid3').html('Please Enter Confirm Password At least 6 Charecter Long');
                   $('#erid3').css('display','block');
                   $('#password_confirmation').css("border","1px solid #FF0000");

           }
           if(cpassword!=pwd){
                   error_flgs=1
                   $('#erid3').html('Sorry, Confirm Password not matched. Please enter again.');
                   $('#erid3').css('display','block');
                   $('#password_confirmation').css("border","1px solid #FF0000");
           }

           else{
                   $('#password_confirmation').css("border","1px solid #999");
                   $('#erid3').html('');
                   $('#erid3').css('display','none');
           }
           document.getElementById("lgFrm").action ='/login';
        }
        
        
        if(error_flgs!=0)
        {
           
            return false;
        }else{
            //alert('ok');
            return true;
        }
    }
     /* Sign Up Section */
    
    $('#email_address').on('focusout',function(){        
        var email_address=$.trim($('#email_address').val());
        var error_flgs=0;
        if(email_address == ""){
		error_flgs=1;
                $('#erid1').html('Please Enter Your Email Address');
                $('#erid1').css('display','block');
		$('#email_address').css("border","1px solid #FF0000");
		
	}
	else if(!emailCheck(email_address)){
		
		error_flgs=1;
                $('#erid1').html('Sorry, the email you entered is invalid. Please enter a valid email.');
                $('#erid1').css('display','block');
                $('#email_address').css("border","1px solid #FF0000");
	}
        else{
            $('#email_address').css("border","1px solid #999");
                $('#erid1').html('');
                $('#erid1').css('display','none');
        }
        if(error_flgs==0){
        $.ajax({
                        url: 'json-data/get-usr',
                        type: 'POST',
                        data:'email_address='+email_address,
                        dataType: 'json',
                        success: function (data) {                        
                               if(data.status==0){
                                   $('#prc').val('signup');
                    $('#signinh2').html('Sign up');
              $('#signinpara').html('Sign up for Vola.Ad. Registration is free and running an ad takes 30 seconds. See you on the other side!');
                    $('#cpwd'). css('display','block');
                    $('#signinfrg').css('display','none');
                    $('#signinfb').html('<i style="float: none ! important; margin: 0px ! important;" class="fa fa-facebook-square fa-1x"></i> &nbsp;Sign up with Facebook');
                    $('#signingp').html('<i style="float: none ! important; margin: 0px ! important;" class="fa fa-google-plus-square fa-1x"></i> &nbsp;Sign up with Google');
                    $('#stype').html('Sign up');
                    $('#nsignup').html("I already have an account");
                                   ischkmail=0;
                               }else{
                                   
                                   $('#prc').val('signin');
                     $('#signinh2').html('Log In');
              $('#signinpara').html('You have to login to be able to access that page.');
                    $('#cpwd'). css('display','none');
                    $('#signinfrg').css('display','block');
                     $('#nsignup').html("I don't have an account");
                    $('#stype').html('Log In');
                    $('#signinfb').html('<i style="float: none ! important; margin: 0px ! important;" class="fa fa-facebook-square fa-1x"></i> &nbsp;Log In with Facebook');
                    $('#signingp').html('<i style="float: none ! important; margin: 0px ! important;" class="fa fa-google-plus-square fa-1x"></i> &nbsp;Log In with Google');
             
                                   ischkmail=1;
                               }
                        }

                        });
                    }
    });
    /* Forgot Section */
    
function validateFrgFrm()
{
    var remail_address=$.trim($('#remail_address').val());
    var error_flgs=0;
    if(remail_address=='')
    {
                   error_flgs=1
                   $('#erid4').html('Please enter your email address.');
                   $('#erid4').css('display','block');
                   $('#erid4').addClass('error');
                   $('#remail_address').css("border","1px solid #FF0000");
                   return false;
    }else
    {
        $('#remail_address').css("border","1px solid #999");
        $('#erid4').removeClass('error');
        $('#erid4').css('display','none');
          $.ajax({
                        url: '/forgot',
                        type: 'POST',
                        data:'remail_address='+remail_address,
                        dataType: 'json',
                        success: function (data) {                        
                               if(data.status==0){
                                     $('#erid4').html(data.error_mes);
                   $('#erid4').css('display','block');
                   $('#erid4').addClass('error');
                   $('#remail_address').css("border","1px solid #FF0000");
                               }else{
                                   
                                  $('#erid4').html(data.error_mes);
                   $('#erid4').css('display','block');
                   $('#erid4').addClass('success');
                   $('#remail_address').css("border","1px solid #999");
                   $('#forgetnow').attr('disabled', true);
                   $('#forgetnow').addClass('disabled'); // Disables visually
                    $('#forgetnow').prop('disabled', true); 
                               }
                        }

                        });
        
        return false;
        
    }
}
        </script>

        <script>
            wow = new WOW(
                    {
                        animateClass: 'animated',
                        offset: 100
                    }
            );
            wow.init();

        </script>


        <script type="text/javascript">
            $(window).load(function () {

                $('.main-nav li a').bind('click', function (event) {
                    var $anchor = $(this);

                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top - 102
                    }, 1500, 'easeInOutExpo');
                    /*
                     if you don't want to use the easing effects:
                     $('html, body').stop().animate({
                     scrollTop: $($anchor.attr('href')).offset().top
                     }, 1000);
                     */
                    event.preventDefault();
                });
            })
        </script>

        <script type="text/javascript">

            $(window).load(function () {


                var $container = $('.portfolioContainer'),
                        $body = $('body'),
                        colW = 375,
                        columns = null;


                $container.isotope({
                    // disable window resizing
                    resizable: true,
                    masonry: {
                        columnWidth: colW
                    }
                });

                $(window).smartresize(function () {
                    // check if columns has changed
                    var currentColumns = Math.floor(($body.width() - 30) / colW);
                    if (currentColumns !== columns) {
                        // set new column count
                        columns = currentColumns;
                        // apply width to container manually, then trigger relayout
                        $container.width(columns * colW)
                                .isotope('reLayout');
                    }

                }).smartresize(); // trigger resize to set container width
                $('.portfolioFilter a').click(function () {
                    $('.portfolioFilter .current').removeClass('current');
                    $(this).addClass('current');

                    var selector = $(this).attr('data-filter');
                    $container.isotope({
                        filter: selector,
                    });
                    return false;
                });

            });

        </script>


        <script>
            $('.menu , .linee').on('click', function () {
                $('.menu').toggleClass('over')
                $('.linea1').toggleClass('overL1')
                $('.linea2').toggleClass('overL2')
                $('.linea3').toggleClass('overL3')
                $('.main-menu').toggleClass('overmain')
            });
        </script>
        <script>
            $(document).ready(function () {
                $('#media').carousel({
                    pause: true,
                    interval: false,
                });
            });
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#horizontalTab').easyResponsiveTabs({
                    type: 'default', //Types: default, vertical, accordion           
                    width: 'auto', //auto or any width like 600px
                    fit: true, // 100% fit in a container
                    closed: 'accordion', // Start closed if in accordion view
                    activate: function (event) { // Callback function if tab is switched
                        var $tab = $(this);
                        var $info = $('#tabInfo');
                        var $name = $('span', $info);

                        $name.text($tab.text());

                        $info.show();
                    }
                });

                $('#verticalTab').easyResponsiveTabs({
                    type: 'vertical',
                    width: 'auto',
                    fit: true
                });
            });
        </script>

    </body></html>