@extends('frontend.layout.app')

@section('content')

<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet">

<style>

body{

    background:
    linear-gradient(
    135deg,
    #0f172a,
    #1e293b);

    min-height:100vh;
    font-family:Arial,sans-serif;

}

/* MAIN */

.auth-wrapper{

    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;

}

/* CARD */

.login-box{

    width:100%;
    max-width:430px;
    background:#fff;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,0.18);

}

/* TOP */

.login-top {
    background: #bbb;
    padding: 25px 20px;
    text-align: center;
}

.login-top h2 {
    color: #000000c2;
    font-size: 34px;
    font-weight: 900;
    margin-bottom: 5px;
}

.login-top p{

    color:#000;
    margin:0;
    font-size:15px;

}

/* BODY */

.login-body{

    padding:35px;

}

/* LABEL */

.form-label{

    font-weight:700;
    margin-bottom:8px;
    color:#111827;

}

/* INPUT */

.form-control{

    height:56px;
    border-radius:16px;
    border:1px solid #d1d5db;
    padding-left:18px;
    font-size:15px;
    margin-bottom:20px;
    transition:0.3s;

}

.form-control:focus{

    border-color:#111827;
    box-shadow:none;

}

/* BUTTON */

.login-btn{

    width:100%;
    height:56px;
    border:none;
    border-radius:16px;

    background:
    linear-gradient(
    135deg,
    #111827,
    #374151);

    color:#fff;
    font-size:16px;
    font-weight:800;
    transition:0.3s;

}

.login-btn:hover{

    transform:translateY(-2px);

}

/* ERROR */

.alert{

    border-radius:16px;
    font-size:14px;

}

/* FOOTER */

.login-footer{

    text-align:center;
    margin-top:22px;
    color:#6b7280;
    font-size:14px;

}

.login-footer a{

    color:#111827;
    font-weight:700;
    text-decoration:none;

}

</style>

<div class="auth-wrapper">

    <div class="login-box">

        {{-- TOP --}}

        <div class="login-top">

            <h2>
                Welcome Back
            </h2>

            <p>

                Login to continue your jewelry shopping

            </p>

        </div>

        {{-- BODY --}}

        <div class="login-body">

            {{-- ERROR --}}

            @if(session('error'))

                <div class="alert alert-danger">

                    {{ session('error') }}

                </div>

            @endif

            @if($errors->any())

                <div class="alert alert-danger">

                    {{ $errors->first() }}

                </div>

            @endif

            <form method="POST"  action="{{ route('loginCheck') }}">

                @csrf

                {{-- EMAIL --}}

                <div class="mb-3">

                    <label class="form-label">

                        Email Address

                    </label>

                    <input
                        type="email"
                        name="email"
                        class="form-control"
                        placeholder="Enter your email"
                        required>

                </div>

                {{-- PASSWORD --}}

                <div class="mb-2">

                    <label class="form-label">

                        Password

                    </label>

                    <input
                        type="password"
                        name="password"
                        class="form-control"
                        placeholder="Enter your password"
                        required>

                </div>

                {{-- REMEMBER --}}

                <div class="d-flex justify-content-between align-items-center mb-4">

                    <div class="form-check">

                        <input
                            class="form-check-input"
                            type="checkbox"
                            name="remember"
                            id="remember">

                        <label
                            class="form-check-label"
                            for="remember">

                            Remember Me

                        </label>

                    </div>

                    <a href="#">

                        Forgot Password?

                    </a>

                </div>

                {{-- BUTTON --}}

                <button
                    type="submit"
                    class="login-btn">

                    Login Now

                </button>

            </form>

            {{-- FOOTER --}}

            <div class="login-footer">

                Don’t have an account?

                <a href="{{ route('register-page') }}">
                    Register
                </a>


            </div>

        </div>

    </div>

</div>

@endsection