@extends('layouts.app')

@section('content')
    <div class="container d-flex justify-content-center align-items-center p-3">
        <!----------------------- Login Container -------------------------->
        <div class="row border rounded-5 p-5 bg-white shadow box-area">
            <!--------------------------- Left Box ----------------------------->
            <div class="col-md-6 rounded-4 d-flex justify-content-center align-items-center flex-column left-box"
                style="background: #6bc1f3;">
                <div class="featured-image m-3">
                    <img src="{{ asset('assets/images/img_logo.png') }}" class="img-fluid" style="width: 250px;">
                </div>
                <p class="text-white fs-2" style="font-family: 'Courier New', Courier, monospace; font-weight: 600;"></p>
                <small class="text-white text-wrap text-center"
                    style="width: 17rem;font-family: 'Courier New', Courier, monospace;"></small>
            </div>
            <!-------------------- ------ Right Box ---------------------------->

            <div class="col-md-6 right-box">
                <div class="row align-items-center">
                    <div class="header-text mb-4 text-center">
                        <h2 style="font-weight: bold">LOGIN</h2>
                        <p>Masukkan email dan password</p>
                    </div>
                    <form method="POST" action="{{ route('login') }}">
                        @csrf
                        <div class="input-group mb-3">
                            <input type="text" class="form-control form-control-lg bg-light fs-6"
                                placeholder="Email address" name="email">
                        </div>
                        <div class="input-group mb-1">
                            <input type="password" class="form-control form-control-lg bg-light fs-6" placeholder="Password"
                                name="password">
                        </div>
                        <div class="input-group mt-3">
                            <button class="btn btn-lg btn-primary w-100 fs-6" type="submit"
                                style="background-color: #6bc1f3; border: #6bc1f3">Login</button>
                        </div>
                    </form>
                    {{-- <p class="text-center mt-3">belum punya akun ? <a href="/register" style="color: #6bc1f3">silahkan
                            register</a> </p> --}}
                </div>
            </div>
        </div>
    </div>
@endsection
