@extends('shop.layouts.app')

@section('content')
    <section class=" bg-gray-300">
        <div class="container py-5 h-100">
            <div class="row d-flex align-items-center justify-content-center h-100">
            <div class="col-md-8 col-lg-7 col-xl-6">
                <img src="https://mdbootstrap.com/img/Photos/new-templates/bootstrap-login-form/draw2.svg" class="img-fluid" alt="Phone image">
            </div>
            <div class="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
                <form action="{{ route('customer.register.validate') }}" method="POST">
                    @csrf
                <!-- Email input -->
                <div class="form-outline mb-4">
                    <label class="form-label" for="name">Name <span class="text-danger">*<span></label>
                    <input type="text" id="name" name="name" required value="{{ old('name') }}" class="form-control form-control" />
                    @error('name')
                         <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Email input -->
                <div class="form-outline mb-4">
                    <label class="form-label" for="email">Email address <span class="text-danger">*<span></label>
                    <input type="email" id="email" name="email" required value="{{ old('email') }}" class="form-control form-control" />
                    @error('email')
                         <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Email input -->
                <div class="form-outline mb-4">
                    <label class="form-label" for="ref-email">Refrral email address (optional) </label>
                    <input type="email" id="ref-email" name="reffaral" value="{{ old('reffaral') }}" class="form-control form-control" />
                    @error('refarral')
                         <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Password input -->
                <div class="form-outline mb-4">
                    <label class="form-label" for="password">Password <span class="text-danger">*<span></label>
                    <input type="password" id="password" name="password" class="form-control form-control" />
                    @error('password')
                         <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Password input -->
                <div class="form-outline mb-4">
                    <label class="form-label" for="confirm">Confirm Password <span class="text-danger">*<span></label>
                    <input type="password" id="confirm" name="password_confirmation" class="form-control form-control" />
                </div>

                <div class="d-flex justify-content-around align-items-center mb-4">

                    <a href="#!">I have an account?</a>
                </div>

                <!-- Submit button -->
                <button type="submit" class="btn btn-primary  btn-block">Register</button>


                </form>
            </div>
            </div>
        </div>
    </section>
@endsection