{{-- @extends('adminlte::auth.login') --}}
@php( $login_url = View::getSection('login_url') ?? config('adminlte.login_url', 'login') )
@if (config('adminlte.use_route_url', false))
    @php( $login_url = $login_url ? route($login_url) : '' )
@else
    @php( $login_url = $login_url ? url($login_url) : '' )
@endif

@extends('layouts.hope.app')

@section('title', 'Login')

@section('body')
<section class="login-content">
    <div class="row m-0 align-items-center bg-white vh-100">
        <div class="col-md-6 p-0">
            <div class="row justify-content-center">
                <div class="col-10">
                    <div class="card card-transparent auth-card shadow-none d-flex justify-content-center mb-0">
                        <div class="card-body">
                            {{-- Logo Apps --}}
                            <div class="brand d-flex">
                                <img src="{{ asset(config('adminlte.logo_img')) }}" height="45">
                                <div>
                                    <a href="#" class="navbar-brand">
                                        <h4 class="logo-title ms-3">{{ config('app.name') }}</h4>
                                    </a>
                                    @if (config('app.tagline'))
                                    {{ config('app.tagline') }}
                                    @endif
                                </div>
                            </div>
                            <hr class="dropdown-divider mb-5">

                            {{-- Title --}}
                            <h2 class="mb-2 text-center">{{ $title ?? 'Sign In' }}</h2>
                            <p class="text-center">Please login to start your session.</p>
                            
                            {{-- Form Sign In --}}
                            <form action="{{ $login_url }}" method="post" data-toggle="validator">
                                @csrf

                                <div class="row">
                                    {{-- Email field --}}
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label class="form-label" for="username">Username</label>
                                            <div class="input-group">
                                                <span class="input-group-text" id="username-addon">
                                                    <svg width="25" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M11.997 15.1746C7.684 15.1746 4 15.8546 4 18.5746C4 21.2956 7.661 21.9996 11.997 21.9996C16.31 21.9996 19.994 21.3206 19.994 18.5996C19.994 15.8786 16.334 15.1746 11.997 15.1746Z" fill="currentColor"></path>
                                                        <path opacity="0.5" d="M11.9971 12.5838C14.9351 12.5838 17.2891 10.2288 17.2891 7.29176C17.2891 4.35476 14.9351 1.99976 11.9971 1.99976C9.06008 1.99976 6.70508 4.35476 6.70508 7.29176C6.70508 10.2288 9.06008 12.5838 11.9971 12.5838Z" fill="currentColor"></path>
                                                    </svg>
                                                </span>
                                                <input autocomplete="off" type="text" name="username" class="form-control @error('username') is-invalid @enderror"
                                                value="{{ old('username') }}" placeholder="Username" autofocus required aria-describedby="username-addon">
                                                
                                                @if($errors->has('username'))
                                                    <div class="invalid-feedback">
                                                        <strong>{{ $errors->first('username') }}</strong>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Password field --}}
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="password">Password</label>
                                            <div class="input-group">
                                                <span class="input-group-text" id="password-addon">
                                                    <i class="icon">
                                                        <svg width="25" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.7688 8.71387H16.2312C18.5886 8.71387 20.5 10.5831 20.5 12.8885V17.8254C20.5 20.1308 18.5886 22 16.2312 22H7.7688C5.41136 22 3.5 20.1308 3.5 17.8254V12.8885C3.5 10.5831 5.41136 8.71387 7.7688 8.71387ZM11.9949 17.3295C12.4928 17.3295 12.8891 16.9419 12.8891 16.455V14.2489C12.8891 13.772 12.4928 13.3844 11.9949 13.3844C11.5072 13.3844 11.1109 13.772 11.1109 14.2489V16.455C11.1109 16.9419 11.5072 17.3295 11.9949 17.3295Z" fill="currentColor"></path>
                                                            <path opacity="0.5" d="M17.523 7.39595V8.86667C17.1673 8.7673 16.7913 8.71761 16.4052 8.71761H15.7447V7.39595C15.7447 5.37868 14.0681 3.73903 12.0053 3.73903C9.94257 3.73903 8.26594 5.36874 8.25578 7.37608V8.71761H7.60545C7.20916 8.71761 6.83319 8.7673 6.47754 8.87661V7.39595C6.4877 4.41476 8.95692 2 11.985 2C15.0537 2 17.523 4.41476 17.523 7.39595Z" fill="currentColor"></path>
                                                        </svg>
                                                    </i>
                                                </span>
                                                <input required class="form-control @error('password') is-invalid @enderror" 
                                                type="password" name="password" placeholder="{{ __('adminlte::adminlte.password') }}" aria-describedby="password-addon">

                                                @if($errors->has('password'))
                                                    <div class="invalid-feedback">
                                                        <strong>{{ $errors->first('password') }}</strong>
                                                    </div>
                                                @endif
                                            </div>

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

                                <div class="row">
                                    <div class="col-6">
                                        <div class="icheck-primary" title="{{ __('adminlte::adminlte.remember_me_hint') }}">
                                            <input type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>

                                            <label for="remember">
                                                {{ __('adminlte::adminlte.remember_me') }}
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <button type=submit class="float-end btn btn-primary {{ config('adminlte.classes_auth_btn', 'btn-flat btn-primary') }}">
                                            <span class="fas fa-sign-in-alt"></span>
                                            <span> {{ __('adminlte::adminlte.sign_in') }}</span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="sign-bg" style="left: auto;">
                <svg width="450" height="230" viewBox="0 0 450 400" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g opacity="0.2">
                        <circle cx="-100" cy="50" r="300" fill="#3B8AFF" />
                        <circle cx="180" cy="-50" r="150" fill="#3B8AFF" />
                    </g>
                </svg>
                <!-- <svg width="450" height="230" viewBox="0 0 450 400" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g opacity="0.2">
                        <rect x="-157.085" y="193.773" width="543" height="77.5714" rx="38.7857" transform="rotate(-45 -157.085 193.773)" fill="#3B8AFF" />
                        <rect x="7.46875" y="358.327" width="543" height="77.5714" rx="38.7857" transform="rotate(-45 7.46875 358.327)" fill="#3B8AFF" />
                        <rect x="61.9355" y="138.545" width="310.286" height="77.5714" rx="38.7857" transform="rotate(45 61.9355 138.545)" fill="#3B8AFF" />
                        <rect x="62.3154" y="-190.173" width="543" height="77.5714" rx="38.7857" transform="rotate(45 62.3154 -190.173)" fill="#3B8AFF" />
                    </g>
                </svg> -->
            </div>
        </div>

        {{-- Background --}}
        <div class="col-md-6 d-md-block d-none p-0 mt-n1 vh-100 overflow-hidden">
            {{-- <img src="{{asset('images/auth/02.png')}}" class="img-fluid gradient-main animated-scaleX" alt="images"> --}}
            {{-- <img width="80%" src="{{ asset('asset/auth-background3.svg') }}" class="img-fluid gradient-main animated-scaleX" alt="images"> --}}
            <img width="80%" src="{{ asset('images/auth/01.png') }}" class="img-fluid gradient-main animated-scaleX" alt="images">
        </div>
    </div>
</section>
@stop