@extends('layouts.frontend.app')
@section('content')

 <style>
     
        @media (max-width: 768px) {
            .container {
                width: 95%;
                min-height: 500px;
            }
            .form-container {
                padding: 0 20px;
            }
            h1 {
                font-size: 1.6em;
            }
            .overlay-panel {
                padding: 0 20px;
            }
        }
        @media (max-width: 480px) {
            h1 {
                font-size: 1.4em;
            }
            button {
                padding: 10px 30px;
            }
            input {
                padding: 10px 12px;
            }
            .social-container a {
                height: 35px;
                width: 35px;
            }
            .container {
                min-height: 480px;
            }
            .copyright {
                font-size: 0.7em;
                bottom: 5px;
                right: 10px;
            }
        }
    </style>

 <section class="login-sigup">
        <div class="container" id="container">
            <!-- Sign Up Form -->
            <div class="form-container sign-up-container">
              
                <form action="#">
                    <h1>Create Account 🚀</h1>
                    <div class="social-container">
                        <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                        <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                    <span>or use your email for registration</span>

                    <input type="text" placeholder="👤 Name" required />
                    <input type="email" placeholder="📧 Email" required />
                    <input type="password" placeholder="🔒 Password" required />
                    <button type="submit">Sign Up</button>
                </form>
            </div>
            <!-- Sign In Form -->
            <div class="d-flex"><div class="form-container sign-in-container">
              
                <form class="dynamic-form" method="post" action="{{route('admin.login.submit')}}">
                   <img src="{{ $logopath }}" width="70" height="70" alt="logo" class="mb-3">
                   <!-- <p class="text-muted">Sign in to your account</p> -->
                    <h1>Sign In 👋</h1>
                    <!-- <div class="social-container">
                        <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                        <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
                    </div> -->
                    <span>or use your account</span>
                      @csrf
                    <input type="hidden" name="user_type" value="user">
                    <input type="email" name="email"  id="email" placeholder="📧 Email">
                    <div class="position-relative" style='width:100%;'>
                      <input type="password" name="password" class=" pop-login-form-control toggle-password-input" id="password" placeholder="🔒 Password">
                      <span class="fa toggle-password-icon fa-eye" style="position:absolute;     top: 27px; right:15px; cursor:pointer;"></span>
                    </div>
                    <div class="login-forget w-100 text-end mb-2 ">
    <a href="{{ route('password.request') }}">Forgot your password? 🤔</a>
                    </div>
                
                    <button type="submit" id="loginBtn" class="fw-bold shadow-sm pop-login-btn text-white">
                      SIGN IN
                    </button>
                         <div class="reister-link d-flex align-items-baseline"><p>Don't have any account?  <a id="signUp" class="ghost text-decoration-underline"  href="{{ route('register.form') }}"> register</a></p></div>
                     
                   {{-- <a href="{{ route('login.google') }}" class="btn btn-danger">Login with Google</a> --}}

                </form>
            </div>
            <!-- Overlay Container -->
            <div class="overlay-container">
                <div class="overlay">
                    <div class="overlay-panel overlay-left">
                        <h1>Welcome Back! 🎉</h1>
                        <p>To keep connected with us please login with your personal info</p>
                        <button class="ghost" id="signIn">Sign In</button>
                    </div>
                    <div class="overlay-panel overlay-right">
                        <h1>Hello, Friend! ✨</h1>
                        <p>Enter your personal details and start your journey with us</p>
                        <a href="{{ route('register.form') }}"><button class="ghost" id="signUp">Sign Up</button></a>
                    </div>
                </div>
            </div></div>
            
        </div>
</section>














<!-- 
<div class="login-section">


<div class="container py-5">
    <div class="row justify-content-center">
      <div class="col-lg-5 col-md-7">
        
        <div class="card pop-login-card border-0">
          <div class="card-body py-4 px-4">
            <div class="text-center mb-4">
              <img src="{{ $logopath }}" width="70" height="70" alt="logo" class="mb-3">
              <p class="text-muted">Sign in to your account</p>
            </div>
            <form class="dynamic-form" method="post" action="{{route('admin.login.submit')}}">
              @csrf
              <input type="hidden" name="user_type" value="user">
              <div class="mb-3">
                <label for="email" class="form-label fw-semibold">Email address</label>
                <input type="email" name="email" class="form-control   pop-login-form-control" id="email" placeholder="Enter email">
              </div>
              <div class="mb-3 position-relative">
                            <label for="password" class="form-label">Password</label>
                            <input type="password" name="password" class="form-control   pop-login-form-control toggle-password-input" id="password" placeholder="Enter password">
                            <span class="fa toggle-password-icon fa-eye" style="position:absolute;     top: 48px; right:15px; cursor:pointer;"></span>
                        </div>
              <div class="d-flex justify-content-center mt-3 mb-3">
                <button type="submit" id="loginBtn" class="btn   fw-bold shadow-sm pop-login-btn text-white">
                  SIGN IN
                </button>
              </div>
              <div class="text-end mt-2 mb-2">
                    <a href="{{ route('password.request') }}" class="small text-decoration-none text-primary fw-semibold">
                        Forgot password?
                    </a>
                </div>
              <hr class="mt-3 mb-2">
              <div class="text-center mt-3">
                <span class="fw-light">Don't have an account?</span>
                <a href="{{ route('register.form') }}" class="text-primary fw-bold"> Create </a>
              </div>
            </form>
          </div>
        </div>

      </div>
    </div>
  </div>
</div> -->


@endsection