@extends('front.layout.app')
@section('title', 'Register')
@section('extra-css')
    <style>
        .main .register-main .reg-btn .r-btn {
            color: #fff;
            font-size: 12px;
            padding: 10px 34px;
            border: 1px solid #ce1729;
            border-radius: 20px;
            background: #ce1729;
            float: right;
            margin: 30px 0px 10px 10px;
        }

        .main .register-main .reg-btn .rr-btn {
            color: #fff;
            font-size: 12px;
            padding: 10px 20px;
            border: 1px solid #ce1729;
            border-radius: 20px;
            background: #ce1729;
            float: right;
            margin: 30px 0px 10px 10px;
        }

        .main .register-main p {
            color: #666;
            font-size: 14px;
            font-weight: 500;
            margin: 10px 0;
        }

        .main .register-main h4 {
            color: #251f1f;
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            padding-bottom: 10px;
        }

        .main .register-main .register-box {
            background: #ededed;
            padding: 5px 10px;
            width: 100%;
            margin-top: 15px;
            border: 1px solid #d7d7d7;
        }

        .main .register-main .register-box h3 {
            text-transform: capitalize;
            font-size: 14px;
            font-weight: 500;
            color: #251f1f;
            padding: 5px 0 0;
        }

        .main .register-main form {
            margin-top: 20px;
        }

        .main .register-main label {
            color: #666;
            font-size: 14px;
            font-weight: 200;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .main .register-main .form-control {
            display: block;
            width: 100%;
            height: 50px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #666666;
            background-color: #fff;
            background-image: none;
            border: 1px solid #d7d7d7;
            border-radius: 0px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        }

        .main .register-main .Rship-box {
            padding: 15px 0;
        }

        .main .register-main input[type=checkbox], input[type=radio] {
            margin: 0px 8px 0px 0px;
        }

        .custom-select-black {
            display: block;
            width: 100%;
            height: 40px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #666666;
            background-color: #fff;
            background-image: none;
            border: 1px solid #d7d7d7;
        }
        .error-message{
            color: red;
            font-style: italic;
        }

        .required{
            color: red;
        }
    </style>
@endsection
@section('content')
    <section class="main">
        <div class="container">

            <div class="row">
                @include('front.partials.sidemenu')
                <div class="col-md-9 col-sm-12">

                    <div class="register-main">
                        <form method="POST" action="{{url('register')}}" class="form" enctype="multipart/form-data">
                            <h1>Register</h1>

                            <p>Please provide us your Shipping and Billing information below.
                                This information will be used to process your order. Already registered? <a style="font-size: 13px" href="{{url('login')}}">Click here to login.</a></p>

                            <h4>Required fields are bold</h4>

                            <div class="register-box">
                                <h3>Billing Information</h3>
                            </div>

                            @csrf
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="first-name" class="col-form-label col-form-label-lg">First Name: <span class="required">*</span></label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row ">
                                        <div class="col-12">
                                            <input type="text" name="first_name" value="{{old('first_name')}}" class="form-control form-control-lg @error('first_name') is-invalid @enderror" id="first-name" autofocus>
                                            @error('first_name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                             </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->

                            <div class="row">
                                <div class="col-md-4">
                                    <label for="last-name" class="col-form-label col-form-label-lg">Last Name: <span class="required">*</span></label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row ">
                                        <div class="col-12">
                                            <input type="text" name="last_name" value="{{old('last_name')}}" class="form-control form-control-lg @error('last_name') is-invalid @enderror" id="last-name">
                                            @error('last_name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                             </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->

                            <div class="row">
                                <div class="col-md-4">
                                    <label for="company-name" class="col-form-label col-form-label-lg">Company Name: <span class="required">*</span></label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row ">
                                        <div class="col-12">
                                            <input type="text" name="company_name" value="{{old('company_name')}}" class="form-control form-control-lg @error('company_name') is-invalid @enderror" id="company-name">
                                            @error('company_name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                             </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="address1" class="col-form-label col-form-label-lg">Address Line 1: <span class="required">*</span></label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row ">
                                        <div class="col-12">
                                            <input type="text" name="address1" value="{{old('address1')}}" class="form-control form-control-lg @error('address1') is-invalid @enderror" id="address1">
                                            @error('address1')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                             </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="address2" class="col-form-label col-form-label-lg">Address Line 2:</label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row ">
                                        <div class="col-12">
                                            <input type="text" name="address2" value="{{old('address2')}}" class="form-control form-control-lg" id="address2">

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="country" class="col-form-label col-form-label-lg">Country: <span class="required">*</span></label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <select class="form-control @error('country') is-invalid @enderror" name="country" id="billing-country">
                                                <option value="">Please select</option>
                                                <option value="US" >United States</option>
                                            </select>
                                            @error('country')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                             </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="city" class="col-form-label col-form-label-lg">City: <span class="required">*</span></label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <input type="text" name="city" value="{{old('city')}}" class="form-control form-control-lg @error('city') is-invalid @enderror" id="city">
                                            @error('city')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                             </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="state" class="col-form-label col-form-label-lg">State / Province: <span class="required">*</span></label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <input type="text" name="state" value="{{old('state')}}" class="form-control form-control-lg @error('state') is-invalid @enderror" id="billing-state">
                                            @error('state')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                             </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="zip_code" class="col-form-label col-form-label-lg">Zip / Postal Code: <span class="required">*</span></label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <input type="text" name="zip_code" value="{{old('zip_code')}}" class="form-control form-control-lg @error('zip_code') is-invalid @enderror" id="zip_code">
                                            @error('zip_code')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                             </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="phone" class="col-form-label col-form-label-lg">Phone Number: <span class="required">*</span></label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <input type="text" name="phone" value="{{old('phone')}}" class="form-control form-control-lg @error('phone') is-invalid @enderror" id="phone" onkeypress="return isNumber(event)">
                                            @error('phone')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                             </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->
                            <div class="register-box">
                                <h3>Shipping Information</h3>
                            </div>
                            <div class="Rship-box">
                                <div class="row">
                                    <div class="col-12">
                                        <label for="shipping"><input type="checkbox" value="yes" name="shipping" id="shipping"><b>Shipping address is the same as billing</b><br>
                                            Please check this box if your shipping information is the same as billing.
                                            If it is not, you may simply add your shipping address in the future.
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="register-box">
                                <h3>Account Information</h3>
                            </div>

                            <div class="row">
                                <div class="col-md-4">
                                    <label for="username" class="col-form-label col-form-label-lg">Username (min - 4 chars): <span class="required">*</span></label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <input type="text" name="username" value="{{old('username')}}" class="form-control form-control-lg @error('username') is-invalid @enderror" id="username">
                                            @error('username')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                             </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->

                            <div class="row">
                                <div class="col-md-4">
                                    <label for="password" class="col-form-label col-form-label-lg">Password: <span class="required">*</span></label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <input type="password" name="password" value="" class="form-control form-control-lg @error('password') is-invalid @enderror" id="password">
                                            @error('password')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                             </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->

                            <div class="row">
                                <div class="col-md-4">
                                    <label for="password_confirmation" class="col-form-label col-form-label-lg">Confirm Password: <span class="required">*</span></label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <input type="password" name="password_confirmation" value="" class="form-control form-control-lg" id="password_confirmation">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->

                            <div class="row">
                                <div class="col-md-4">
                                    <label for="email" class="col-form-label col-form-label-lg">Email: <span class="required">*</span></label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <input type="email" name="email" value="{{old('email')}}" class="form-control form-control-lg @error('email') is-invalid @enderror" id="email">
                                            @error('email')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                             </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->

                            <div class="row">
                                <div class="col-md-4">
                                    <label for="email" class="col-form-label col-form-label-lg">Tax Exception: </label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <input type="file" name="document" class="form-control form-control-lg" accept="image/*,.pdf">

                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4"></div>
                                <div class="col-md-8"> <div class="form-group row">
                                        <div class="col-12">
                                            <label><input type="checkbox" value=""> Product Updates</label> <br>
                                            <label><input type="checkbox" value=""> Our Newsletter</label>
                                        </div>
                                    </div></div>
                            </div>

                            <div class="row">
                                <div class="col-12">
                                    <label for="privacy_policy" class="@error('privacy_policy') is-invalid form-control @enderror">
                                        <input type="checkbox" value="accepted" name="privacy_policy" id="privacy_policy"> By registering with us, you agree with our Terms and Conditions</label><br>
                                    @error('privacy_policy')
                                    <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                             </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="reg-btn"><button type="reset" class="r-btn">Reset</button><button class="rr-btn" type="submit">Register</button></div>
                        </form>
                    </div>
                </div>

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