@extends('layouts.appInnerWithoutSearch')
@section('seoTitle')
Register @ {{ env('APP_NAME') }}
@endsection
@section('metaDescription')
Register to receive job alerts from your favourite companies, stay up to date with upcoming hiring and networking events, get a customised profile @endsection
@section('title')
Register
@endsection
@section('contentInner')
<div class="flex justify-start pb-3">
    @include('includes.breadcrumb')
</div>
    <div class="grid grid-cols-1 lg:grid-cols-2  bg-white dark:bg-opacity-5 shadow-md rounded-lg overflow-hidden">
        <section class="p-5">
            <div class="px-4 mx-auto ">
                {{-- <p class="mb-8 lg:mb-16 font-light text-center text-gray-500 dark:text-gray-400 sm:text-xl">Got a technical issue? Want to send feedback about a feature? Need details about our Business plan? Let us know.</p>
        <div class="mb-6 text-gray-400">
            Fields marked with <span class="text-danger">*</span> are mandatory.
        </div> --}}
        <div class="text-xl text-center">Tell us more about you so we can help you!</div>
        {{-- <x-errors></x-errors> --}}
        {{-- @include('errors.response') --}}
            <form id="frmRegister" action="{{ route('register') }}" method="POST" class="space-y-8">
                    @csrf
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 ">
                        {{-- <div class=""> --}}
                            {{-- <label for="role_1" class="mb-2 font-medium mr-3">
                                <input type="radio" name="role" id="role_1" value="Candidate" required>
                                Candidate
                            </label>
                            <label for="role_2" class="mb-2 font-medium mr-3">
                                <input type="radio" name="role" id="role_2" value="Employer">
                                Employer
                            </label>
                            <label for="role_3" class="mb-2 font-medium">
                                <input type="radio" name="role" id="role_3" value="Institute">
                                Institute
                            </label> --}}
                            <x-select label="I Am" placeholder="-- Select --" name="role" id="role" value="{{ old('role') }}" :options="['Candidate', 'Employer', 'Institute']" clearable="1" searchable="0" x-on:close="changeTerms()">
                            </x-select>
                            {{-- <div>
                            </div> --}}
                            {{-- <select name="role" id="role" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full">
                    <option value="">--Select--</option>
                    <option value="Candidate" {{ old('role') == 'Candidate' ? 'selected' : '' }}>Candidate</option>
                    <option value="Institute" {{ old('role') == 'Institute' ? 'selected' : '' }}>Institute</option>
                    <option value="Employer" {{ old('role') == 'Employer' ? 'selected' : '' }}>Employer</option>
                </select> --}}
                        {{-- </div> --}}
                        <div>
                            <x-input label="Full Name" type="text" name="name" id="name" placeholder="Enter your full name" value="{{ old('name') }}" ></x-input>
                        </div>
                        <div>
                            <x-input label="Your Email" type="email" name="email" id="email" placeholder="Enter your email id" value="{{ old('email') }}" ></x-input>
                        </div>
                            <div class="grid grid-cols-2 gap-x-0">
                                <x-label for="mobile" class="mb-2 font-medium text-gray-900">Country</x-label>
                                <x-label for="mobile" class="mb-2 font-medium text-gray-900">Mobile</x-label>
                                <x-select-country-code :selected_id="old('country_code')" class="h-10" />
                                <x-maskable mask="##########" type="text" name="mobile" id="mobile" description="e.g 8797579987" placeholder="Mobile number" value="{{ old('mobile') }}" />
                                {{-- <x-input x-data x-mask="9999999999" type="text" name="mobile" id="mobile" description="e.g 8797579987" placeholder="Mobile number" value="{{ old('mobile') }}" /> --}}
                                <span></span>
                                <label id="mobile-error" class="error col-span-2" for="mobile"></label>
                            </div>
                        {{-- <div>
                <label for="email" class="mb-2 font-medium text-gray-900">Mobile</label>
                <input type="text" name="mobile" id="mobile" class="text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full" placeholder="Enter your mobile number" required>
            </div> --}}
                        <div>
                            <x-password label="Password" description="(Min. 8 chars)" type="password" name="password" id="password" placeholder="Enter your password" ></x-password>
                            {{-- <span toggle="#password"
                                class="fa fa-fw fa-eye password-eye toggle-password cursor-pointer text-gray-400"></span> --}}

                        </div>
                        <div>

                            <x-input label="Confirm Password" type="password" name="password_confirmation" id="password_confirmation" placeholder="Confirm password" ></x-input>

                        </div>
                    <div>
                        <x-label for="terms">
                            {{-- <x-checkbox type="checkbox" name="terms" id="terms"  class="mr-2" label="a"></x-checkbox> --}}
                            <input type="checkbox" name="terms" id="terms"  class="form-checkbox rounded transition ease-in-out duration-100
                            border-secondary-300 text-primary-600 focus:ring-primary-600 focus:border-primary-400
                            dark:border-secondary-500 dark:checked:border-secondary-600 dark:focus:ring-secondary-600
                            dark:focus:border-secondary-500 dark:bg-secondary-600 dark:text-secondary-600
                            dark:focus:ring-offset-secondary-800
                         mr-2">
                            <span id="termsText">
                                I agree to <a href="{{ url('terms-and-conditions') }}" class="text-blue-500" wire:navigate>Terms & Conditions</a>
                                and acknowledge it's
                                <a href="{{ url('privacy-policy') }}" class="text-blue-500" wire:navigate>Privacy Policy</a>.
                            </span>
                        </x-label>
                    </div>
                    <x-label for="isUnsubscribed">
                        {{-- <x-checkbox type="checkbox" name="terms" id="terms"  class="mr-2" label="a"></x-checkbox> --}}
                        <input type="checkbox" name="isUnsubscribed" id="isUnsubscribed"  class="form-checkbox rounded transition ease-in-out duration-100
                        border-secondary-300 text-primary-600 focus:ring-primary-600 focus:border-primary-400
                        dark:border-secondary-500 dark:checked:border-secondary-600 dark:focus:ring-secondary-600
                        dark:focus:border-secondary-500 dark:bg-secondary-600 dark:text-secondary-600
                        dark:focus:ring-offset-secondary-800
                     mr-2" value="1">
                            Subscribe to our newsletter and updates
                    </x-label>

                    <div class="g-recaptcha" data-sitekey="{{ config('services.recaptcha.site_key') }}"></div>
                </div>
                <div class="flex justify-center">
                        <x-button info type="submit" label="Register" />
                    </div>
                </form>
                <div class="text-right mt-3">
                    Already A Member?
                    <a class="mb-2 font-medium text-blue-500" href="{{ route('login') }}" wire:navigate>
                        {{ __('Login') }}
                    </a>
                </div>
            </div>
    </section>
    <div class="bgRegister">
        <div class="bg-gray-200 bg-opacity-50 dark:bg-opacity-5 w-full h-full p-10  flex justify-center items-center">
            <div class="space-y-5 text-black dark:text-white dark:text-shadow dark:shadow-gray-950">
                <h3 class="text-4xl text-center">Why Register?</h3>
                <ul class="text-xl space-y-6 text-center">
                    <li>
                        Receive job alerts from your favourite companies
                    </li>
                    <li>
                        Stay up to date with upcoming hiring and networking events
                    </li>
                    <li>
                        Get a customised profile
                    </li>
                </ul>
            </div>
        </div>
    </div>


    </div>
</div>
@endsection
@push('custom-scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js" type="module"></script>
<script type="module">
$(document).ready(function() {
    $("#frmRegister1").validate({
        rules: {
            role: {
                required: true,
            },
            name: {
                required: true,
            },
        email: {
            required: true,
            email: true,
        },
        country_code: {
            required: true,
        },
        mobile: {
            required: true,
        },
        password: {
            required: true,
        },
        password_confirmation: {
            required: true,
            equalTo: "#password"
        },
        terms: {
            required: true,
        },
    },
    messages: {
        role: {
            required: "Please select your role",
        },
        name: {
            required: "Name is required",
        },
        email: {
            required: "Email is required",
            email: "Email must be a valid email address",
        },
        country_code: {
            required: "Country code is required",
        },
        mobile: {
            required: "Mobile is required",
        },
        password: {
            required: "Password is required",
        },
        password_confirmation: {
            required: "Confirm Password is required",
        },
        terms: {
            required: "Please check ",
        },
    },
});
});
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
    function changeTerms(){
        var termsCandidate = `I agree to <a href="{{ url('terms-and-conditions') }}" class="text-blue-500">Terms & Conditions</a>
                                and acknowledge it's
                                <a href="{{ url('privacy-policy') }}" class="text-blue-500">Privacy Policy</a>.
                                `
            var termsEmployer = `I confirm I represent HR/Personnel,  Recruiting, Marketing, PR or am an Executive at my company and I agree to Job shubharambh\'s
                                <a href="{{ url('terms-and-conditions') }}" class="text-blue-500">Terms & Conditions</a>
                                and acknowledge it's
                                <a href="{{ url('privacy-policy') }}" class="text-blue-500">Privacy Policy</a>
                                on behalf of my company/Institute.`
            if($("#role").val()=="Candidate"){
                $("#termsText").html(termsCandidate);
            }
            else{
                $("#termsText").html(termsEmployer);
            }
    }
</script>
<script type="module">
        $("#role1").change(function() {
            var termsCandidate = `I agree to <a href="{{ url('terms-and-conditions') }}" class="text-blue-500">Terms & Conditions</a>
                                and acknowledge it's
                                <a href="{{ url('privacy-policy') }}" class="text-blue-500">Privacy Policy</a>.
                                `
            var termsEmployer = `I confirm I represent HR/Personnel,  Recruiting, Marketing, PR or am an Executive at my company and I agree to Job shubharambh\'s
                                <a href="{{ url('terms-and-conditions') }}" class="text-blue-500">Terms & Conditions</a>
                                and acknowledge it's
                                <a href="{{ url('privacy-policy') }}" class="text-blue-500">Privacy Policy</a>
                                on behalf of my company/Institute.`
            if($("#role").val()=="Candidate"){
                $("#termsText").html(termsCandidate);
            }
            else{
                $("#termsText").html(termsEmployer);
            }
        });
        $(".toggle-password").click(function() {

$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
  input.attr("type", "text");
} else {
  input.attr("type", "password");
}
});
    </>
@endpush