@extends('front.layout.app')
@section('title', 'Register')
@section('content')
    <section class="accountAccesSec">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 offset-lg-3">
                    <div class="whitebg">
                        <h2>Create an account</h2>
                        <form action="{{url('register')}}" class="formStyle form-row" method="post"
                              enctype="multipart/form-data">
                            @csrf
                            <div class="input-group">
                                <label>First Name<em>*</em></label>
                                <input type="text" class="form-control @error('first_name') is-invalid @enderror"
                                       required name="first_name" value="{{old('first_name')}}">
                                @error('first_name')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="input-group">
                                <label>Last Name<em>*</em></label>
                                <input type="text" class="form-control @error('last_name') is-invalid @enderror"
                                       name="last_name" value="{{old('last_name')}}" required>
                                @error('last_name')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="input-group">
                                <label>Email Address<em>*</em></label>
                                <input type="email" class="form-control @error('email') is-invalid @enderror"
                                       name="email" value="{{old('email')}}" required>
                                @error('email')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="input-group">
                                <label>Phone Number<em>*</em></label>
                                <input type="text" id="phone_number"
                                       class="form-control @error('phone_number') is-invalid @enderror"
                                       name="phone_number" value="{{old('phone_number')}}" required>
                                @error('phone_number')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

{{--                            <div class="input-group">--}}
{{--                                <label>City<em>*</em></label>--}}
{{--                                <input type="text" id="city" class="form-control @error('city') is-invalid @enderror"--}}
{{--                                       name="city" value="{{old('city')}}" required>--}}
{{--                                @error('city')--}}
{{--                                <span class="invalid-feedback" role="alert">--}}
{{--                                        <strong>{{ $message }}</strong>--}}
{{--                                    </span>--}}
{{--                                @enderror--}}
{{--                            </div>--}}
{{--                            <div class="input-group">--}}
{{--                                <label>State<em>*</em></label>--}}
{{--                                <input type="text" id="state" class="form-control @error('state') is-invalid @enderror"--}}
{{--                                       name="state" value="{{old('state')}}" required>--}}
{{--                                @error('state')--}}
{{--                                <span class="invalid-feedback" role="alert">--}}
{{--                                        <strong>{{ $message }}</strong>--}}
{{--                                    </span>--}}
{{--                                @enderror--}}
{{--                            </div>--}}
{{--                            <div class="input-group">--}}
{{--                                <label>Country<em>*</em></label>--}}
{{--                                <input type="text" id="country"--}}
{{--                                       class="form-control @error('country') is-invalid @enderror" name="country"--}}
{{--                                       value="{{old('country')}}" required>--}}
{{--                                @error('country')--}}
{{--                                <span class="invalid-feedback" role="alert">--}}
{{--                                        <strong>{{ $message }}</strong>--}}
{{--                                    </span>--}}
{{--                                @enderror--}}
{{--                            </div>--}}
{{--                            <div class="input-group">--}}
{{--                                <label>Address<em>*</em></label>--}}
{{--                                <input type="text" id="address"--}}
{{--                                       class="form-control @error('address') is-invalid @enderror" name="address"--}}
{{--                                       value="{{old('address')}}" required>--}}
{{--                                @error('address')--}}
{{--                                <span class="invalid-feedback" role="alert">--}}
{{--                                        <strong>{{ $message }}</strong>--}}
{{--                                    </span>--}}
{{--                                @enderror--}}
{{--                            </div>--}}
{{--                            <div class="input-group">--}}
{{--                                <label>Zip Code<em>*</em></label>--}}
{{--                                <input type="text" id="zip_code"--}}
{{--                                       class="form-control @error('zip_code') is-invalid @enderror" name="zip_code"--}}
{{--                                       value="{{old('zip_code')}}" required>--}}
{{--                                @error('zip_code')--}}
{{--                                <span class="invalid-feedback" role="alert">--}}
{{--                                        <strong>{{ $message }}</strong>--}}
{{--                                    </span>--}}
{{--                                @enderror--}}
{{--                            </div>--}}

                            <div class="input-group">
                                <label>Password<em>*</em></label>
                                <input type="password" class="form-control @error('password') is-invalid @enderror"
                                       name="password" placeholder="At least 8 characters" required>
                                @error('password')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="input-group">
                                <label>Re-enter password<em>*</em></label>
                                <input type="password" class="form-control" name="password_confirmation"
                                placeholder="At least 8 characters" required>
                            </div>

                            <div class="input-group">
                                <label>Document:<em>*</em></label>
                                <input type="file" class="form-control @error('document_path') is-invalid @enderror"
                                       name="document_path">
                                @error('document_path')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

{{--                            <div class="row">--}}
{{--                                <div class="col-md-9">--}}
                                    <div class="form-group">
                                        <label for="exampleInputFile">ID Card Image:<em>*</em></label>
                                        <div class="input-group">
                                            <div class="custom-file">
{{--                                                <label class="custom-file-label" for="category-image">Choose--}}
{{--                                                    file</label>--}}
                                                <input type="file" class="form-control my-3 @error('file') is-invalid @enderror"
                                                       name="file" onchange="readURL(this)" required>
{{--                                                <input type="file"--}}
{{--                                                       class="custom-file-input @error('file') is-invalid @enderror"--}}
{{--                                                       name="file" id="category-image" onchange="readURL(this)"--}}
{{--                                                       required>--}}
                                                @error('file')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
{{--                                </div>--}}
{{--                                <div class="col-md-3">--}}
{{--                                    <img src="" alt="" id="img_preview" style="height: 150px;width: 150px;">--}}
{{--                                </div>--}}
{{--                            </div>--}}


                            <div class="input-group justify-content-md-end">
                                <button class="btnStyle rounded" type="submit">Sign Up</button>
                            </div>
                        </form>
                        <div class="or"><span>or</span></div>

                        <p>Already have an account? <a href="{{url('login')}}">Sign In</a></p>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection
@section('scripts')
    <script>
        $("#phone_number").focusout(function () {
            $("#phoneErr").remove();
            $(this).removeClass('is-invalid');
            var phoneno = /^\(?([0-9]{3})\)?[-]?([0-9]{3})[-]?([0-9]{4})$/;
            if ($(this).val().match(phoneno)) {
                return true;
            } else {
                var err = '<span id="phoneErr" class="invalid-feedback" role="alert"><strong>Phone Number should be in below format: <br> (XXX)XXX-XXXX</strong></span>';
                $(this).after(err);
                $(this).addClass('is-invalid');
            }
        });

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#img_preview').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

        // $("#category-image").change(function(){
        //     readURL(this);
        // });
        function showFileName() {
            var fileInput = document.getElementById('category-image');
            var fileName = fileInput.files[0].name;
            fileInput.nextElementSibling.innerText = fileName;
        }
    </script>
@endsection