@extends('site.layouts.app')

@section('title','Register')
    
{{-- Seo tags start --}}
@section('meta_description', 'This is the description for SEO')
@section('meta_keywords', 'SEO, Keywords, Web Development')
@section('meta_author', 'John Doe')
{{-- Seo tags end --}}

@section('content')
    <div class="container">
        <div class="row  py-5 my-4 justify-content-center">
            <div class="col-lg-5 px-3">
                <div class="content-image1">
                    <img class="img-fluid" src="{{ asset('site/assets/images/indexpg.png') }}">
                </div>
            </div>
            <div class="col-lg-5 content-right">
                <div class="right-inner px-4">
                    <h5 class="right-title mb-3">REGISTER</h5>
                    <div class="content-form">
                        <form class="py-3" id="register-form" method="POST" action="{{ route('register') }}">
                            @csrf
                            <div class="form-group">
                                <label for="name">Name</label>
                                <input type="text" id="name" name="name" class="form-control mb-1" required=""
                                    value="{{ old('name') }}">
                                @if ($errors->has('name'))
                                    <div class="col-12 mt-2">
                                        <span class="text-danger">{{ $errors->first('name') }}</span>
                                    </div>
                                @endif
                            </div>

                            <div class="form-group">
                                <label for="email">Email Id</label>
                                <input type="email" id="email" name="email" class="form-control mb-1" required=""
                                    value="{{ old('email') }}">
                                @if ($errors->has('email'))
                                    <div class="col-12 mt-2">
                                        <span class="text-danger">{{ $errors->first('email') }}</span>
                                    </div>
                                @endif
                            </div>

                            <div class="form-group">
                                <label for="mobile_number">Phone Number</label>
                                <input type="number" id="mobile_number" name="mobile_number" class="form-control mb-1"
                                    required="" value="{{ old('mobile_number') }}">
                                @if ($errors->has('mobile_number'))
                                    <div class="col-12 mt-2">
                                        <span class="text-danger">{{ $errors->first('mobile_number') }}</span>
                                    </div>
                                @endif
                            </div>

                            <div class="form-group">
                                <label for="country_id">Country</label>
                                <select class="form-control" name="country_id">
                                    <option value="">Select Country</option>
                                    @foreach(App\Models\Country::all() as $country)
                                        <option value="{{$country->id}}">{{$country->name}}</option>
                                    @endforeach
                                </select>
                                @if ($errors->has('country_id'))
                                    <div class="col-12 mt-2">
                                        <span class="text-danger">{{ $errors->first('country_id') }}</span>
                                    </div>
                                @endif
                            </div>

                            <div class="form-group">
                                <label for="password">Password</label>
                                <input type="password" id="password" name="password" class="form-control" required=""
                                    value="{{ old('password') }}">
                                @if ($errors->has('password'))
                                    <div class="col-12 mt-2">
                                        <span class="text-danger">{{ $errors->first('password') }}</span>
                                    </div>
                                @endif
                            </div>

                            <div class="form-group">
                                <label for="password_confirmation"> Confirm Password</label>
                                <input type="password" id="password_confirmation" name="password_confirmation"
                                    class="form-control" required="" value="{{ old('password_confirmation') }}">
                                @if ($errors->has('password_confirmation'))
                                    <div class="col-12 mt-2">
                                        <span class="text-danger">{{ $errors->first('password_confirmation') }}</span>
                                    </div>
                                @endif
                            </div>
                            <br>

                            <div class="form-group">
                                <input type="submit" value="Register">
                            </div>
                      

                            <a href="{{ route('login') }}" class="dont mb-0">Already a user? <strong>LOG IN</strong></a>
                        </form>
                    </div>
                </div>

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

    <script type="text/javascript">
        $(document).ready(function() {

            $('#register-form').validate({
                rules: {
                    name: {
                        required: true,
                        minlength: 3,
                    },
                    mobile_number: {
                        required: true,
                        digits: true,
                        minlength: 10,
                        maxlength: 15,
                    },
                    email: {
                        required: true,
                        email: true,
                    },

                    password: {

                        required: true,

                    },
                    password_confirmation: {
                        required: true,
                        equalTo: "#password"
                    }

                },
                messages: {
                    name: {
                        required: 'Please Enter Your Name',
                        minlength: 'Name should be at least 3 characters',
                    },
                    mobile_number: {
                        required: 'Please Enter Your Phone Number',
                        digits: 'Phone number should contain only digits',
                        minlength: 'Phone number should be exactly 10 digits',
                        maxlength: 'Phone number should be exactly 15 digits',
                    },

                    email: {
                        required: 'Please Enter Your Email',
                        email: 'Please enter a valid email address',
                    },

                    password: {
                        required: "Please enter a password",
                    },
                    password_confirmation: {
                        required: "Please confirm your password",
                        equalTo: "Passwords do not match"
                    }



                },
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                },
            });
        });
    </script>
@endsection