@extends('admin.layouts.app-login')
<style>
    .wrap-login100 {
        padding: 10px !important;
        width: 500px !important;
        margin: 10px auto !important;
        text-align: center;
        justify-content: center;
    }
    label{
        font-size: 14px;
    }
    .login100-form {
        width: 100%;
        text-align: center;
        justify-content: center;
        margin: 10px auto;
    }
    .login100-form-btn {
        color: #fff;
        background: darkred !important;
    }

</style>
@section('content')
    <div class="limiter">
        <div class="container-login100">
            <div class="wrap-login100 text-center">
                <div class="text-center" style="padding: 20px;cursor:pointer;">
                    <a href="" class="text-center">
                        <img src="{{asset('app-assets/images/logo.png')}}" style="width: 30%;" alt="IMG">
                    </a>
                </div>
                <h6 class="alert alert-sm alert-success text-center">
                    تسجيل دخول لوحة التحكم ( الادارة )
                </h6>
                <form class="login100-form validate-form" method="POST" action="{{ route('admin.login') }}">
                    @csrf
                    <div class="form-group row">
                        <label for="username" class="col-md-12 text-center">
                            البريد الالكترونى او رقم الهاتف
                        </label>

                        <div class="col-md-12">
                            <input id="email" autofocus type="email" class="form-control @error('email') is-invalid @enderror"
                                   name="email" value="{{old('email')}}" autocomplete="off" required>
                            @error('email')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="password" class="col-md-12 text-center">كلمة المرور</label>
                        <div class="col-md-12">
                            <input id="password" type="password"
                                   class="form-control @error('password') is-invalid @enderror" name="password"
                                   value="" required autocomplete="off">
                            @error('password')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-12 text-right">
                            <div class="form-check " dir="rtl">
                                <input checked class="form-check-input" type="checkbox" name="remember"
                                       id="remember" {{ old('remember') ? 'checked' : '' }}>
                                <label class="form-check-label" for="remember" style="margin-right: 5px;">
                                    تذكرنى
                                </label>
                            </div>

                        </div>
                    </div>
                    <div class="container-login100-form-btn">
                        <button type="submit" class="login100-form-btn" style="font-family: 'Cairo';">
                            تسجيل الدخول
                        </button>
                    </div>
                    <div class="clearfix"></div>
                    @if (Route::has('admin.password.request'))
                        <a class="btn btn-link mt-1 pull-right" href="{{ route('admin.password.request') }}">
                            هل نسيت كلمة المرور ؟
                        </a>
                    @endif
                </form>
            </div>
        </div>
    </div>
@endsection
