@extends('layouts.master-without-nav')
 @section('title')
 Login
 @endsection
 @section('content')

 <div class="auth-maintenance d-flex align-items-center min-vh-100">
     <div class="bg-overlay bg-light"></div>
     <div class="container">
         <div class="row justify-content-center">
             <div class="col-md-10">
                 <div class="auth-full-page-content d-flex min-vh-100 py-sm-5 py-4">
                     <div class="w-100">
                         <div class="d-flex flex-column h-100 py-0 py-xl-3">
                             <div class="text-center mb-4">
                                 <a href="{{url('/')}}" class="">
                                     <img src="{{ URL::asset('build/images/logo.png') }}" alt=""
                                         height="50" class="auth-logo logo-dark mx-auto">
                                     <img src="{{ URL::asset('build/images/logo.png') }}" alt=""
                                         height="50" class="auth-logo logo-light mx-auto">
                                 </a>
                                 <span style="font-size: 30px;">{{env('APP_NAME')}}</span>
                                 <p class="text-muted mt-2">Invoices, Estimates, Billing</p>
                             </div>

                             <div class="card my-auto overflow-hidden">
                                 <div class="row g-0">
                                     <div class="col-lg-6">
                                         <div class="bg-overlay bg-primary"></div>
                                         <div class="h-100 bg-auth align-items-end">
                                         </div>
                                     </div>

                                     <div class="col-lg-6">
                                         <div class="p-lg-5 p-4">
                                             <div>
                                                 <div class="text-center mt-1">
                                                     <h4 class="font-size-18">Welcome Back !</h4>
                                                     <p class="text-muted">Sign in to continue to {{env('APP_NAME')}}.</p>
                                                 </div>
                                                 <form method="POST" action="javascript:;" class="auth-input" id="formData">
                                                     @csrf
                                                     <div class="mb-2">
                                                         <label for="email" class="form-label">Email</label>
                                                         <input id="email" type="email"
                                                             class="form-control @error('email') is-invalid @enderror"
                                                             name="email" value="" required
                                                             autocomplete="email" placeholder="Enter email" autofocus />
                                                         @error('email')
                                                         <span class="invalid-feedback" role="alert">
                                                             <strong>{{ $message }}</strong>
                                                         </span>
                                                         @enderror
                                                     </div>

                                                     <div class="mb-3">
                                                         <label class="form-label" for="password-input">Password</label>
                                                         <input type="password" class="form-control @error('password') is-invalid @enderror" placeholder="Enter password" id="password-input" name="password" required autocomplete="current-password" value="" />
                                                         @error('password')
                                                         <span class="invalid-feedback" role="alert">
                                                             <strong>{{ $message }}</strong>
                                                         </span>
                                                         @enderror
                                                     </div>

                                                     <div class="form-check d-flex justify-content-between">
                                                         <div>
                                                             <input class="form-check-input" type="checkbox"
                                                                 name="remember" id="remember"
                                                                 {{ old('remember') ? 'checked' : '' }} />
                                                             <label class="form-check-label" for="remember">Remember
                                                                 me</label>
                                                         </div>
                                                         <a href="{{ route('password.update') }}" class="text-end">Forget Password?</a>
                                                     </div>
                                                     <div style="margin-top:10px;">
                                                         <div id="responseMessage"></div>
                                                     </div>

                                                     <div class="mt-4">
                                                         <button class="btn btn-primary w-100" type="submit" id='submit_button' name='submit_button'>Sign In</button>
                                                     </div>



                                                     @error('subscription')
                                                     <div class="alert alert-secondary mt-3" role="alert">
                                                         <strong style="font-size: 15px;">{{ $message }}</strong>
                                                     </div>
                                                     @enderror
                                                 </form>
                                             </div>

                                             <div class="mt-4 pt-2 text-center">
                                                 <div class="signin-other-title">
                                                     <h5 class="font-size-14 mb-4 title"></h5>
                                                 </div>
                                                 <div class="pt-2 hstack gap-2 justify-content-center">
                                                     <!-- <button type="button" class="btn btn-primary btn-sm"><i class="ri-facebook-fill font-size-16"></i></button>
                                                     <button type="button" class="btn btn-danger btn-sm"><i class="ri-google-fill font-size-16"></i></button>
                                                     <button type="button" class="btn btn-dark btn-sm"><i class="ri-github-fill font-size-16"></i></button>
                                                     <button type="button" class="btn btn-info btn-sm"><i class="ri-twitter-fill font-size-16"></i></button> -->
                                                 </div>
                                             </div>

                                             <div class="mt-4 text-center">
                                                 <p class="mb-0">
                                                     Don't have an account ? <a href="{{ route('register') }}" class="fw-medium text-primary">Register </a>
                                                 </p>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>


                             <div class="mt-5 text-center">
                                 <p class="mb-0">©
                                     <script>
                                         document.write(new Date().getFullYear())
                                     </script> Crafted with <i class="mdi mdi-heart text-danger"></i> by {{env('APP_NAME')}}
                                 </p>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
             <!-- end col -->
         </div>
         <!-- end row -->
     </div>
 </div>
 @endsection
 @section('scripts')
 <!-- App js -->
 <script src="{{ URL::asset('build/js/app.js') }}"></script>

 <script>
     $('body').on('click', '#submit_button', function() {

         var siteurl = "{{url('/login/check')}}";
         $('#responseMessage').html('');
         var email = $('#email').val();
         var password = $('#password').val();
         if (!email && !password) {
             $('#responseMessage').html("<span class='text-danger'>Please enter required email and password!</span>");
             return false;
         }
         $('#submit_button').html('<center><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></center>');
         $.ajax({
             url: siteurl,
             type: "POST",
             data: $("#formData").serialize(),
             dataType: "json",
             success: function(response) {
                 console.log("----");
                 console.log(response.message);
                 $('#submit_button').html('Log In');
                 if (response.response_code == 400) {
                     $('#responseMessage').html("<span class='text-danger'>" + response.message + "</span>");
                     return false;
                 }

                 if (response.response_code == 200) {
                     $('#responseMessage').html("<span class='text-success'>" + response.message + "</span>");
                     setTimeout(function() {
                         window.location.href = "{{url('/')}}/";
                     }, 1000);

                 }
             },
             error: function(response) {
                 $('#submit_button').html('Log In');
                 $('#responseMessage').html('');
                 if (response.status === 422) {
                     var errors = $.parseJSON(response.responseText);
                     $('#responseMessage').html(errors.message)

                 }

             }
         });
     });
 </script>
 @endsection