@extends('frontend.layouts.frontend_app')
@push('style')
    <style>
        .card-signin {
            border: 0;
            border-radius: 1rem;
        }

        .card-signin .card-title {
            margin-bottom: 2rem;
            font-weight: 300;
            font-size: 1.5rem;
        }

        .card-signin .card-body {
            padding: 2rem;
        }

        .form-signin {
            width: 100%;
        }
        .card.card-signin input {
            border-radius: 7px;
        }
        .card.card-signin input::placeholder {
            color: #d1d1d1;
        }
        .form-signin .btn {
            font-size: 80%;
            border-radius: 5rem;
            letter-spacing: .1rem;
            font-weight: bold;
            padding: 1rem;
            transition: all 0.2s;
        }

        .form-label-group {
            position: relative;
            margin-bottom: 1rem;
        }


        .btn-google {
            color: white;
            background-color: #ea4335;
        }

        .btn-facebook {
            color: white;
            background-color: #3b5998;
        }
    </style>
@endpush
@section('content')
    <section>
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="card card-signin p-0 h-100">
                        <div class="card-body p-0">
                            <img src="{{ asset('front/img/banner2.png') }}" alt="" class="img-fluid h-100">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card card-signin">
                        <div class="card-body px-0">
                            <h5 class="card-title text-center">{{__('pages.Register Here')}}</h5>
                            <form class="row" method="post" action="{{ route('customer.register.process') }}">
                                @csrf
                                <div class="col-lg-6">
                                    <div class="form-label-group">
                                        <label for="name">{{__('pages.Name')}}</label>
                                        <input type="text" id="name" name="name" class="form-control"
                                               placeholder="{{__('pages.Enter your full name')}}">
                                        @error('name')
                                        <span class="text-danger">{{ $message  }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-label-group">
                                        <label for="phone">{{__('pages.Phone')}} </label>
                                        <input type="text" id="phone" name="phone" class="form-control"
                                               placeholder="{{__('pages.Enter your phone')}}">
                                        @error('phone')
                                        <span class="text-danger">{{ $message  }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-label-group">
                                        <label for="inputEmail">{{__('pages.Email address')}}</label>
                                        <input type="email" id="inputEmail" name="email" class="form-control"
                                               placeholder="{{__('pages.Email address')}}"
                                        >
                                        @error('email')
                                        <span class="text-danger">{{ $message  }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-label-group">
                                        <label for="inputPassword">{{__('pages.Password')}}</label>
                                        <input type="password" id="inputPassword" name="password" class="form-control"
                                               placeholder="{{__('pages.Password')}}">
                                        @error('password')
                                        <span class="text-danger">{{ $message  }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-label-group">
                                        <label for="inputPassword">{{__('pages.Confirm Password')}}</label>
                                        <input type="password" id="inputPassword" name="password_confirmation" class="form-control"
                                               placeholder="{{__('pages.Confirm Password')}}">
                                        @error('password_confirmation')
                                        <span class="text-danger">{{ $message  }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-lg-12">
                                    <div class="custom-control custom-checkbox mb-3">
                                        <input type="checkbox" class="custom-control-input" id="customCheck1">
                                        <label class="custom-control-label" for="customCheck1">{{__('pages.Remember password')}}</label>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <button class="btn btn-lg btn-default d-block w-100 text-uppercase" type="submit">{{__('pages.Sign in')}}
                                    </button>
                                    <p class="text-muted my-3">{{__('pages.If you have already an account please')}}
                                        <a href="{{ route('customer.login') }}"><u>{{__('pages.Login here')}}</u></a> !</p>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection