@extends('layouts.app')
@section('pageTitle')
<title>{{ trans('panel.site_title') }} {{ trans('global.register') }}</title>
@endsection
@section('content')
    <div class="section-authentication-signin d-flex align-items-center justify-content-center_ my-5 my-lg-0">
        <div class="container-fluid">
            <div class="row row-cols-1 row-cols-lg-2 row-cols-xl-3">
                <div class="col mx-auto">
                    <div class="mb-4 text-center">
                        <img src="{{ asset('frontend/images/logo/logo.svg')}}" width="180" alt="" />
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <div class="border p-4 rounded">
                                <div class="text-center">
                                    <h3 class="">{{ __('Register') }}</h3>
                                </div>
                                <div class="form-body">
                                    <form method="POST" class="row g-3" action="{{ route('register') }}">
                                        @csrf

                                        <div class="col-6">
                                            <label for="first_name" class="form-label">{{ __('First Name') }}</label>
                                            <input id="first_name" type="text" class="form-control{{ $errors->has('first_name') ? ' is-invalid' : '' }}" name="first_name" value="{{ old('first_name') }}" required autofocus>

                                            @if ($errors->has('first_name'))
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $errors->first('first_name') }}</strong>
                                                </span>
                                            @endif
                                        </div>
                                        <div class="col-6">
                                            <label for="last_name" class="form-label">{{ __('Last Name') }}</label>
                                            <input id="last_name" type="text" class="form-control{{ $errors->has('last_name') ? ' is-invalid' : '' }}" name="last_name" value="{{ old('last_name') }}" required autofocus>

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

                                        <div class="col-12">
                                            <label for="name" class="form-label">{{ __('Name') }}</label>
                                            <input id="name" type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" name="name" value="{{ old('name') }}" required autofocus>

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

                                        <div class="col-12">
                                            <label for="email" class="form-label">{{ __('E-Mail Address') }}</label>

                                            
                                            <input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" required>

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

                                        <div class="col-12">
                                            <label for="password" class="form-label">{{ __('Password') }}</label>

                                           
                                            <input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>

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

                                        <div class="col-12">
                                            <label for="password-confirm" class="form-label">{{ __('Confirm Password') }}</label>

                                            
                                            <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>
                                            
                                        </div>

                                        <div class="col-12">
                                            <div class="d-grid">
                                                <button type="submit" class="btn btn-primary">
                                                    {{ __('Register') }}
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection