@extends('auth.customer.app')
@section('content')
    <div class="page-wrapper">
        <div class="page-inner bg-brand-gradient">
            <div class="page-content-wrapper bg-transparent m-0">
                <div class="height-10 w-100 shadow-lg px-4 bg-brand-gradient">
                    <div class="d-flex align-items-center container p-0">
                        <div class="page-logo width-mobile-auto m-0 align-items-center justify-content-center p-0 bg-transparent bg-img-none shadow-0 height-9">
                            <a href="javascript:void(0)" class="page-logo-link press-scale-down d-flex align-items-center">
                                <img src="{{asset('img/smart_admin_bootstrap4/logo.png')}}" alt="Dashboard Logo" aria-roledescription="logo">
                                <span class="page-logo-text mr-1"></span>
                            </a>
                        </div>
                        <span class="text-white opacity-50 ml-auto mr-2 hidden-sm-down">
                                Already a member?
                        </span>
                        <a href="{{ url('customer/login') }}" class="btn-link text-white ml-auto ml-sm-0">
                               Login
                        </a>
                    </div>
                </div>
                <div class="flex-1" style="background: url(img/svg/pattern-1.svg) no-repeat center bottom fixed; background-size: cover;">
                    <div class="container py-4 py-lg-5 my-lg-5 px-4 px-sm-0">
                        <div class="row">
                            <div class="col-xl-12">
                                <h2 class="fs-xxl fw-500 mt-4 text-white text-center">
                                    Registration Form

                                </h2>
                            </div>
                            <div class="col-xl-6 ml-auto mr-auto">
                                <div class="card p-4 rounded-plus bg-faded">
                                    <div class="alert alert-primary text-dark" role="alert">
                                         If you have any problems registering please contact us.
                                    </div>
                                    <form id="js-login" method="POST" novalidate="" action="{{ url('customer/register') }}">
                                        @csrf
                                        <div class="form-group row">
                                            <label class="col-xl-12 form-label" for="first_name">Your first and last name</label>
                                            <div class="col-6 pr-1">
                                                <input type="text"
                                                       id="first_name"
                                                       class="form-control @error('first_name') is-invalid @enderror"
                                                       name="first_name"
                                                       value = "{{ old('first_name') }}"
                                                       placeholder="First Name"
                                                       autocomplete="first_name"
                                                       autofocus
                                                       required>
                                                @error('first_name')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                                <div class="invalid-feedback">No, you missed this one.</div>
                                            </div>
                                            <div class="col-6 pl-1">
                                                <input
                                                    id="last_name"
                                                    type="text"
                                                    class="form-control @error('last_name') is-invalid @enderror"
                                                    name="last_name"
                                                    value="{{ old('last_name') }}"
                                                    required
                                                    autocomplete="last_name"
                                                    autofocus
                                                >
                                                <div class="invalid-feedback">No, you missed this one.</div>
                                                @error('last_name')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label" for="email">Email will be needed for verification and account recovery</label>
                                            <input
                                                id="email"
                                                type="email"
                                                class="form-control @error('email') is-invalid @enderror"
                                                name="email"
                                                value="{{ old('email') }}"
                                                required
                                                autocomplete="email"
                                            >
                                            <div class="invalid-feedback">No, you missed this one.</div>
                                            <div class="help-block">Your email will also be your username</div>
                                            @error('email')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label" for="password">Password:</label>
                                            <input
                                                id="password"
                                                type="password"
                                                class="form-control @error('password') is-invalid @enderror"
                                                name="password" required autocomplete="new-password"
                                            >
                                            <div class="invalid-feedback">Sorry, you missed this one.</div>
                                            @error('password')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                            <div class="help-block">Your password must be at least 8 characters long, have one letter one number,
                                                and must contain at least one special character and upper case letter.</div>

                                        </div>
                                        <div class="form-group">
                                            <label class="form-label" for="password">{{ __('Confirm Password') }}</label>
                                            <input
                                                id="password-confirm"
                                                type="password"
                                                class="form-control"
                                                name="password_confirmation"
                                                required
                                                autocomplete="new-password"
                                            >
                                        </div>
                                        <div class="form-group demo">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="terms" required>
                                                <label class="custom-control-label" for="terms"> I agree to terms & conditions</label>
                                                <div class="invalid-feedback">You must agree before proceeding</div>
                                            </div>
                                        </div>
                                        <div class="row no-gutters">
                                            <div class="col-md-4 ml-auto text-right">
                                                <button id="js-login-btn" type="submit" class="btn btn-block btn-danger btn-lg mt-3"> {{ __('Register') }}</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="position-absolute pos-bottom pos-left pos-right p-3 text-center text-white">
                        {{ now()->year }} © CDRL Retailer
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $("#js-login-btn").click(function(event)
        {

            // Fetch form to apply custom Bootstrap validation
            var form = $("#js-login")

            if (form[0].checkValidity() === false)
            {
                event.preventDefault()
                event.stopPropagation()
            }

            form.addClass('was-validated');
            // Perform ajax submit here...
        });

    </script>
@endsection