@extends('welcome')
@section('content')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .galleryno {
            display: none;
        }

        .select2-container--default .select2-selection--single {
            background-color: #fff;
            border: 1px solid #a9a4a44a;
            border-radius: 4px;
            padding: 7px;
        }

        .select2-container .select2-selection--single {
            cursor: pointer;
            height: 43px;
            width: auto;
            min-width: 100%;
            user-select: none;
            -webkit-user-select: none;
        }
    </style>
    <section class="page-header page-header-classic">
        <div class="container">
            <div class="row">
                <div class="col">
                    <ul class="breadcrumb">
                        <li><a href="{{ URL::to('index') }}">Home</a></li>
                        <li class="active">Registration</li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="col p-static">
                    <span class="page-header-title-border visible" style="width: 216.938px;"></span>
                    <h1 data-title-border="">Registration</h1>

                </div>
            </div>
        </div>
    </section>
    <section class="about-us padding-section yellow-bg">
        <div class="container">

            <div class="row py-4">
                <div class="col-lg-6 mx-auto">
                    <div class="card shadow-lg">
                        <div class="card-body">
                            <h2 class="font-weight-bold text-5 mt-2 mb-0 text-center">Register with us</h2>

                            <form id="contact-form" action="" method="post">
                                @csrf
                                <div class="contact-form-success alert alert-success d-none mt-4">
                                    <strong>Success!</strong> Your message has been sent to us.
                                </div>
                                @if ($err = Session::get('error'))
                                    <div class="contact-form-error alert alert-danger mt-4">
                                        <strong>Error!</strong> {{ $err }}
                                        <span class="mail-error-message text-1 d-block"></span>
                                    </div>
                                @endif
                                <div class="row">
                                    <div class="form-group col-lg-12">
                                        <label class="form-label text-2">Full Name<sup class="text-danger">*</sup></label>
                                        <input type="text" id="username" data-isRequire="true" placeholder="Full Name*"
                                            value="{{ old('name') }}" data-msg-required="Please enter your full name."
                                            maxlength="100" class="form-control text-3 h-auto py-2" name="name">
                                        @if ($errors->any('name'))
                                            <p class="text-danger">{{ $errors->first('name') }}</p>
                                        @endif
                                    </div>
                                    <div class="form-group col-lg-12">
                                        <label class="form-label text-2">Email<sup class="text-danger">*</sup></label>
                                        <input type="email" id="email" data-isRequire="true"
                                            placeholder="Email Address*" value="{{ old('email') }}"
                                            data-msg-required="Please enter your email address." maxlength="100"
                                            class="form-control text-3 h-auto py-2" name="email">
                                        @if ($errors->any('email'))
                                            <p class="text-danger">{{ $errors->first('email') }}</p>
                                        @endif
                                    </div>
                                    <div class="form-group col-lg-12">
                                        <label class="form-label text-2">Mobile<sup class="text-danger">*</sup></label>
                                        <div class="input-group mb-3 ">
                                            <select name="country_code">
                                                <option data-countryCode="IN" selected value="+91">+91</option>
                                                @include('partial.countryCode')
                                            </select>
                                            <input type="text" id="phone" data-isRequire="true"
                                                placeholder="Mobile Number*" value="{{ old('mobile') }}" max="10"
                                                class="form-control text-3 h-auto py-2" name="mobile">
                                        </div>
                                        @if ($errors->any('mobile'))
                                            <p class="text-danger">{{ $errors->first('mobile') }}</p>
                                        @endif
                                    </div>
                                    <div class="form-group col-lg-12">
                                        <label class="form-label text-2">City<sup class="text-danger">*</sup></label>
                                        <div>
                                            <select class="select-picker form-select p-2" name="city_id">
                                                @if (isset($cities))
                                                    @foreach ($cities as $index => $city)
                                                        <option {{ $index === 0 ? 'selected' : '' }}
                                                            value="{{ $city->id }}">
                                                            {{ $city->name }}-({{ $city->state }})</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group col-lg-12">
                                        <label class="form-label text-2">Password<sup class="text-danger">*</sup></label>
                                        <input type="password" id="password" data-isRequire="true"
                                            class="form-control text-3 h-auto py-2" value="" name="password"
                                            placeholder="Password*">
                                        @if ($errors->any('password'))
                                            <p class="text-danger">Password must contain at least one numeric, capital
                                                letter, small letter, special and 8 characters!</p>
                                        @endif
                                    </div>


                                </div>

                                <div class="row">
                                    <div class="form-group col-lg-12 text-center">
                                        <button id="sbtn" value="Register" class="btn btn-primary btn-modern"
                                            data-loading-text="Loading...">Register</button>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-lg-12 text-center">
                                        <p>
                                            Already have an account? <a href="{{ URL::to('member-login') }}">Login Now</a>
                                        </p>
                                    </div>
                                </div>
                            </form>

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


            </div>

        </div>

    </section>

    <script>
        $(document).ready(function() {
            $('#sbtn').attr('disabled', true);
            let name = $("input[name='name']");
            let mobile = $("input[name='mobile']");
            let email = $("input[name='email']");
            let newPass = $("input[name='password']");
            name.on('keyup', function() {
                return checkvalid(name);
            });
            email.on('keyup', function() {
                return checkvalid(email);
            });
            newPass.on('keyup', function() {

                return checkvalid(newPass);
            });
            mobile.on('keyup', function() {
                return checkvalid(mobile);
            })
            $('#contact-form').on('submit', function(e) {
                e.preventDefault()
                if (checkvalid(name) && checkvalid(email) && checkvalid(mobile) && checkvalid(newPass)) {
                    $(this).unbind('submit').submit();
                }
            });

        });
    </script>
    <script type="text/javascript" src="{{ asset('assets/js/jqueryvalidation.js') }}"></script>

@stop

@push('script')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.select-picker').select2()
        })
    </script>
@endpush