@extends('auth_api.layouts.auth')

@section('meta')
    @php
        $data = metaData('register');
    @endphp
@endsection

{{-- @section('description')
    {{ $data->description }}
@endsection --}}

@section('title')
    {{ __('register') }}
@endsection

{{-- @section('og:image')
    {{ asset($data->image) }}
@endsection --}}

@section('frontend_links')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/css/intlTelInput.css" integrity="sha512-s51TDsIcMqlh1YdQbF3Vj4StcU/5s97VyLEEpkPWwP0CJfjZ/C5zAaHnG+DZroGDn1UagQezDEy61jP4yoi4vQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="{{ asset('frontend') }}/student-panel/css/login.css">
@endsection

<link rel="canonical" href="{{ url()->current() }}" />
@section('content')
@php
    if (isset($token)) {
        $token_data = Crypt::decryptString($token);
        $token_data=unserialize(base64_decode($token_data));//string to array; 
        // $country_code=$token_data['country']."@#$?".$token_data['country_code'];
        // dd($country_code);
    }
@endphp

    <div class="right-content common-space">
        <div class="heading">
            <a href="javascript:;" id="return_back_btn" class="back" aria-label="back">
                <img src="{{ asset('frontend') }}/student-panel/images/arrow.svg" alt="arrow" width="100%" height="100%" />
            </a>
             <a href="{{env('APP_URL')}}" class="logo" aria-label="logo">
                <img src="{{ asset('frontend') }}/student-panel/images/logo.svg" alt="logo" width="100%" height="100%" />
            </a>
            <p class="head">Sign Up</p>
            <p class="sub-head">Your Hassle-Free Study Abroad Journey Starts Here!</p>
        </div>
        <input type="hidden" name="token" id="token" value="{{(isset($token))?$token:"";}}">
        <input type="hidden" name="iso2" id="iso2" value="{{(isset($token))?$token_data["iso2"]:"";}}">
        <input type="hidden" name="user_id" id="user_id" value="{{(isset($token))?$token_data["user_id"]:"";}}">
        <div class="login-section">
            <form class="form signup-form" id="register_form">
                @csrf
                
                <div class="name">
                    <div class="single-input {{(isset($token))?'field-not-empty':"";}}">
                        <label for="name" class="field-label">Enter First Name</label>
                        <input type="text" name="name" class="input-field" id="name" placeholder="Enter First Name" value="{{(isset($token))?$token_data["name"]:"";}}" maxlength="50" oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '');">
                    </div>
                    
                    <div class="single-input {{(isset($token))?'field-not-empty':"";}}">
                        <label for="last_name" class="field-label">Enter Last Name</label>
                        <input type="text" name="last_name" id="last_name" class="input-field" value="{{(isset($token))?$token_data["last_name"]:"";}}" placeholder="Enter Last Name" maxlength="50" oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '');">
                    </div>
                </div>
                <div class="single-input {{(isset($token))?'field-not-empty':"";}}">
                    <label for="Enter Email Id" class="field-label" >Enter Email Id</label>
                    <input type="email" id="email" name="email" class="input-field" value="{{(isset($token))?$token_data["email"]:"";}}" placeholder="Enter Email Id" maxlength="100">
                </div>
                <div class="number">
                    {{-- <div class="select-code">
                        <p class="country-code">
                            <select class="list" name="country_code" id="countrySelect" value="{{(isset($token))?$country_code:"";}}">
                            </select>
                        </p>
                    </div> --}}
                    <div class="single-input {{(isset($token))?'field-not-empty':"";}}">
                        <label for="Mobile Number" class="field-label">Enter Mobile Number</label>
                        <input type="tel" name="phone" id="phone" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');" class="input-field" value="{{(isset($token))?$token_data["phone"]:"";}}"
                            placeholder="Enter Mobile Number" maxlength="15">
                    </div>  
                </div>
                <input type="text" value="candidate" hidden name="role">  
                
                <button id="submitButton" type="submit" class="btn">
                Submit<i id="spinner" class=""></i>   
                </button>
                
            </form>
        </div>
        <div class="social-links">
            <p class="small-text"><span>You can connect with us on</span></p>
            <ul class="link-list">
                <li class="single-link">
                    <a href="{{ route('social.login', 'facebook') }}" aria-label="facebook"><img src="{{ asset('frontend') }}/student-panel/images/facebook.svg" width="100%" height="100%" alt="facebook" /></a>
                </li>
                <li class="single-link">
                    <a href="{{ route('social.login', 'google') }}" aria-label="google"><img src="{{ asset('frontend') }}/student-panel/images/google.svg" width="100%" height="100%" alt="google" /></a>
                </li>
                {{-- <li class="single-link">
                    <a href="javacsript:;" aria-label="apple"><img src="{{ asset('frontend') }}/student-panel/images/apple.svg" alt="apple" /></a>
                </li> --}}
            </ul>
            <p class="signup">Already have an account? <a href="/login" class="signup-link">Login Here</a></p>
        </div>
    </div>
@endsection
@section('css')
@endsection
@section('script')

    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/js/intlTelInput.min.js" integrity="sha512-uZZS8rsETXJQX6Jy57Zdc7PAmP83GCjC1F/LX0xUj12wY5SlfUX+CVnYFEX89doutQPeFbI9FjUCkpuTWqlBwg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ asset('frontend') }}/student-panel/js/input-field.js?v={{now()->format('his')}}"></script>
    <script src="{{ asset('frontend') }}/student-panel/js/register.js?v={{now()->format('his')}}"></script>
    {{-- <script src='https://www.google.com/recaptcha/api.js' ></script> --}}
    <script defer>
        // function LoginService(value) {
        //     $("#ModalBtn").css("display", "block");
        //     var action = "auth/" + value + "/redirect";
        //     $("#LoginFormHit").attr("action", action);
        // }

        // function CloseModoal() {
        //     $("#ModalBtn").css("display", "none");
        // }
    </script>
    <script defer>
        // $(document).ready(function() {
        //     // validate();
        //     // $('#name, #email, #password, #number, #countrySelect').change(validate).keyup(validate);
        // });


       

        // function validate() {
        //     if (
        //         $('#name').val().length > 0 &&
        //         $('#email').val().length > 0 &&
        //         $('#countrySelect').val().length > 0 &&
        //         $('#number').val().length > 0) {  
        //             //&& $('#term-conditon').is(':checked')
        //         $('#submitButton').attr('disabled', false);
        //     } else {
        //         $('#submitButton').attr('disabled', true);
        //     }
        // }

        // function passToText(id, icon) {
        //     var input = $('#' + id);
        //     var eyeIcon = $('#' + icon);
        //     if (input.is('input[type="password"]')) {
        //         eyeIcon.html('<i class="ph-eye-slash @error('password') m-3 @enderror"></i>');
        //         input.attr('type', 'text');
        //     } else {
        //         eyeIcon.html('<i class="ph-eye @error('password') m-3 @enderror"></i>');
        //         input.attr('type', 'password');
        //     }
        // }
    </script>
@endsection