@extends('landing.layouts.app')

@section('content')
    <div class="container py-5">
        <div class="row">
            <div class="card col-md-5 mb-0 border-0">
                <div class="card-body text-start">
                    <img class="img-fluid" src="{{ asset('landing/login-img.png') }}" alt="login image">
                </div>
            </div>
            <div class="card col-md-7 mb-0 border-light">
                <div class="card-body">
                    <h3 class="mb-3 fw-semibold text-dark border-bottom pb-3">{{ __('Login') }}</h3>
                    <form action="{{ route('login') }}" method="POST">
                        @csrf
                        <div class="mb-3 input-group">
                            <span class="input-group-text">
                                <svg class="icon">
                                    <use xlink:href="{{ asset('icons/coreui.svg#cil-envelope-open') }}"></use>
                                </svg>
                            </span>
                            <input id="email" class="form-control @error('email') is-invalid @enderror" type="email" name="email"
                                   placeholder="{{ __('Enter your email') }}" required autofocus>
                            @error('email')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>
                        <div x-data="{ show: false }" class="mb-3 input-group">
                            <span class="input-group-text">
                                <svg class="icon">
                                    <use xlink:href="{{ asset('icons/coreui.svg#cil-lock-locked') }}"></use>
                                </svg>
                            </span>
                            <input id="password" class="form-control @error('password') is-invalid @enderror" :type="show ? 'text' : 'password'" name="password"
                                   placeholder="{{ __('Enter your password') }}" required>
                            <a href="#" @click.prevent="show = !show" class="input-group-text bg-white">
                                <i x-show="!show" class="bi bi-eye-slash"></i>
                                <i x-show="show" class="bi bi-eye"></i>
                            </a>
                            @error('password')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="remember" name="remember">
                            <label class="form-check-label" for="remember">{{ __('Remember me') }}</label>
                        </div>
                        <button class="btn btn-dark text-white px-4 w-100" type="submit">{{ __('Login') }}</button>
                    </form>
                    <hr>
                    <div class="text-center">
                        <p class="mb-2">{{ __('New to BhoomiPlus?') }}</p>
                        <a href="{{ route('register') }}" class="btn btn-outline-dark">{{ __('Create New Account') }}</a>
                        @if (Route::has('password.request'))
                            <p class="mt-3 mb-0"><a href="{{ route('password.request') }}" class="text-dark">{{ __('Forgot Your Password?') }}</a></p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection