@extends('auth.template.layout')
@section('content')
<div class="container-fluid bg-body-tertiary dark__bg-gray-1200">
    <div class="bg-holder bg-auth-card-overlay" style="background-image:url({{ asset('themes/assets/img/bg/37.png') }});"></div>
    <div class="row flex-center position-relative min-vh-100 g-0 py-5">
        <div class="col-11 col-sm-10 col-xl-8">
        <div class="card border border-translucent auth-card">
            <div class="card-body pe-md-0">
            <div class="row align-items-center gx-0 gy-7">
                <div class="col-auto bg-body-highlight dark__bg-gray-1100 rounded-3 position-relative overflow-hidden auth-title-box">
                <div class="bg-holder" style="background-image:url({{ asset('themes/assets/img/bg/38.png') }});"></div>
                <div class="position-relative px-4 px-lg-7 pt-7 pb-7 pb-sm-5 text-center text-md-start pb-lg-7 pb-md-7">
                    <h3 class="mb-3 text-body-emphasis fs-7">Halaman Login</h3>
                    <p class="text-body-tertiary">Silahkan login dengan menggunakan username dan password.</p>
                    
                </div>
                <div class="position-relative z-n1 mb-6 d-none d-md-block text-center mt-md-15"><img class="auth-title-box-img d-dark-none" src="{{ asset('themes/assets/img/spot-illustrations/auth.png') }}" alt="" /><img class="auth-title-box-img d-light-none" src="{{ asset('themes/assets/img/spot-illustrations/auth-dark.png') }}" alt="" /></div>
                </div>
                <div class="col mx-auto">
                <div class="auth-form-box">
                    <div class="text-center mb-7"><a class="d-flex flex-center text-decoration-none mb-4" href="../../../index.html">
                        <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block"><img src="{{ asset('themes/assets/img/icons/logo.png') }}" alt="phoenix" width="58" /></div>
                    </a>
                    <h3 class="text-body-highlight">Log In</h3>
                    
                    </div>
                    @if(session('error'))
                        <div class="alert alert-outline-danger d-flex align-items-center" role="alert">
                            <span class="fas fa-times-circle text-danger fs-5 me-3"></span>
                            <p class="mb-0 flex-1"> {{ session('error') }} </p>
                            <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif
                    @if(session('success'))
                        <div class="alert alert-outline-success d-flex align-items-center" role="alert">
                            <span class="fas fa-check-circle text-success fs-5 me-3"></span>
                            <p class="mb-0 flex-1">{{ session('success') }}</p>
                            <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif
                    <form id="form-login" enctype="multipart/form-data" method="POST" action="{{ route('validate') }}">
                        @csrf
                        <div class="mb-3 text-start"><label class="form-label" for="username">Username</label>
                            <div class="form-icon-container"><input class="form-control form-icon-input" id="username" name="username" type="username" placeholder="username" value="{{ old('username') }}" /><span class="fas fa-user text-body fs-9 form-icon"></span></div>
                        </div>
                        <div class="mb-3 text-start"><label class="form-label" for="password">Password</label>
                            <div class="form-icon-container" data-password="data-password"><input class="form-control form-icon-input pe-6" id="password" name="password" type="password" placeholder="Password" data-password-input="data-password-input" /><span class="fas fa-key text-body fs-9 form-icon"></span><button class="btn px-3 py-0 h-100 position-absolute top-0 end-0 fs-7 text-body-tertiary" type="button" data-password-toggle="data-password-toggle"><span class="uil uil-eye show"></span><span class="uil uil-eye-slash hide"></span></button></div>
                        </div>
                        <div class="row flex-between-center mb-7">
                        <div class="col-auto">
                            <div class="form-check mb-0"><input class="form-check-input" id="basic-checkbox" type="checkbox" checked="checked" /><label class="form-check-label mb-0" for="basic-checkbox">Remember me</label></div>
                        </div>
                        <div class="col-auto"><a class="fs-9 fw-semibold" href="javascript:void(0)" onclick="alert('Fitur Belum Tersedia !');">Forgot Password?</a></div>
                        </div><button type="submit" class="btn btn-primary w-100 mb-3">Sign In</button>
                        <div class="text-center"><a class="fs-9 fw-bold" href="javascript:void(0)"  onclick="alert('Fitur Belum Tersedia !');">Create an account</a></div>
                    </form>
                </div>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
</div>
@endsection
@push('js')
    <script>
        window.onload = function () {
            const UsrInput = document.getElementById("username");
            UsrInput.focus();
        };
        document.addEventListener('DOMContentLoaded', function () {
            const passwordInput = document.getElementById('password');
            

            passwordInput.addEventListener('keydown', function (event) {
                if (event.key === 'Enter') {
                    document.getElementById('#form-login').submit();
                }
            });
        });
    </script>
@endpush