@extends('layouts.app')
@push('css')
<style>
    /* body  {
      background-image: url("{{ asset('storage/'.config('global')['background_login_page']) }}");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    } */
    body {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
</style>
@endpush
@section('content')
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-header row">
        </div>
        <div class="content-body">
            <section class="row flexbox-container">
                <div class="col-12 d-flex align-items-center justify-content-center">
                    <div class="col-lg-4 col-md-8 col-10 box-shadow-2 p-0">
                        <div class="card border-grey border-lighten-3 px-1 py-1 m-0">
                            <div class="card-header border-0">
                                <div class="card-title text-center">
                                    <!--?php if (file_exists(public_path('assets/image/'.config('global')['logo_header']))): ?>
                                    <img class="brand-logo" alt="modern admin logo" style="width: 120px !important;" src="{{ asset('assets/image/'.config('global')['logo_header']) }}" -->
                                    <!--?php else: ?>
                                        <img class="brand-logo" alt="modern admin logo" style="width: 120px !important;" src="{{ asset('storage/'.config('global')['logo_header']) }}"-->
                                    <!-- ?php endif ?-->
                                    <img class="brand-logo" alt="modern admin logo" style="width: 200px !important;" src="{{ asset('/assets/image/caraid-logo-clr.png') }}">                              
                                </div>
                                <h6 class="card-subtitle line-on-side text-muted text-center font-small-3 pt-2"><span>{{ __('Register') }}</span></h6>
                            </div>
                            <div class="card-content">
                                <div class="card-body">
                                    <form method="POST" action="{{ route('register') }}">
                                        @csrf   
                                        <fieldset class="form-group position-relative has-icon-left">
                                            <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required placeholder="Name" autocomplete="name" autofocus>

                                            @error('name')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror                                          
                                            <div class="form-control-position">
                                                <i class="la la-user"></i>
                                            </div>
                                        </fieldset>
                                        <fieldset class="form-group position-relative has-icon-left">
                                            <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" placeholder="Email" required autocomplete="email">

                                            @error('email')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror                            
                                            <div class="form-control-position">
                                                <i class="la la-envelope"></i>
                                            </div>
                                        </fieldset>
                                        <fieldset class="form-group position-relative has-icon-left">
                                            <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" placeholder="Password" required autocomplete="new-password">

                                            @error('password')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror                                            
                                            <div class="form-control-position">
                                                <i class="la la-key"></i>
                                            </div>
                                        </fieldset>
                                        <fieldset class="form-group position-relative has-icon-left">
                                            <input id="password-confirm" type="password" class="form-control" name="password_confirmation" placeholder="Confirmation Password" required autocomplete="new-password">                           
                                            <div class="form-control-position">
                                                <i class="la la-key"></i>
                                            </div>
                                        </fieldset>
                                        <button type="submit" class="btn btn-outline-info btn-block"><i class="ft-unlock"></i> {{ __('Register') }}</button>
                                    </form>
                                </div>
                                <hr>
                                <div class="card-body">
                                    <a href="{{ route('login') }}" class="btn btn-outline-danger btn-block"><i class="la la-user"></i>
                                        Login</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

        </div>
    </div>
</div>
@endsection