@extends('frontend.layouts.app')

@section('seo')
    <title>Log In | AbreezeCE</title>
    <meta property="og:locale" content="en_US" />
    <meta property="og:url" content="" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Log In | AbreezeCE" />
    <meta property="og:description" content="" />
    <meta property="og:site_name" content="Log In | AbreezeCE" />
    <meta property="og:image" content="{{ asset('assets/img/_web-thumbnail.jpg') }}" />
    <meta property="og:thumbnail" content="{{ asset('assets/img/_web-thumbnail.jpg') }}" />
@endsection


@section('content')
    <div class="container pt-5 pb-5">
        <div class="row d-flex justify-content-center w-100">
            <div class="col-12 col-sm-12 col-md-12 col-lg-5 d-flex justify-content-center">

                <form action="{{ url('login') }}" method="post">@csrf
                    <div class="shadow p-5 rounded-4 w-100">
                        <h1 class="color-h1 font-noto" style="font-size: 40px; font-weight: 700">Log In</h1>
                        <hr class="hr-1 mb-5">

                        <div class="input-group input-group-lg shadow my-2">
                            <span class="input-group-text bg-white border-0 rounded-start" id="basic-addon1">
                                <i class="fa-solid fa-user icon-color-muted"></i>
                            </span>
                            <input type="email" class="form-control border-0 rounded-end shadow-none" placeholder="Email"
                                name="email" aria-label="Email" aria-describedby="basic-addon1" required autofocus>
                        </div>
                        @error('email')
                            <span class="text-danger d-block fs-6">{{ $message }}</span>
                        @enderror
                        <div class="input-group input-group-lg shadow my-2">
                            <span class="input-group-text bg-white border-0 rounded-start" id="basic-addon1">
                                <i class="fa-solid fa-lock icon-color-muted"></i>
                            </span>
                            <input type="password" class="form-control border-0 rounded-end shadow-none"
                                placeholder="Password" name="password" aria-label="Password" aria-describedby="basic-addon1"
                                required>
                        </div>
                        @error('password')
                            <span class="text-danger d-block fs-6">{{ $message }}</span>
                        @enderror

                        <!--<div class="text-end mb-5">-->
                        <!--  <a href="" class="text-black text-decoration-none">-->
                        <!--    <span class="color-icon"><i class="fa-regular fa-circle-check color-icon"></i> Forget Password?</span>-->
                        <!--  </a>-->
                        <!--</div>-->

                        <div class="center mb-5 mt-3">
                            {{-- <a href="{{ url('/dashboard') }}" class="btn btn-1 py-3 px-5">LOG IN</a> --}}
                            <button type="submit" class="btn btn-1 py-3 px-5">LOG IN</button>
                        </div>

                        <div class="mb-3">
                            <span>Forgot Password?</span><br>
                            <a href="{{ route('password.request') }}" class="color-icon">Click here</a>

                        </div>

                        <span>Don't have an account yet?</span><br>
                        <a href="{{ url('register') }}" class="color-icon"><span>Create an account</span></a>

                    </div>
                </form>
            </div>
        </div>
    </div>

    <style>
        .icon-color-muted {
            color: #C5C5C5;
        }
    </style>
@endsection