@extends('auth_api.layouts.auth')

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

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

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

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

<link rel="canonical" href="{{ url()->current() }}" />

@section('content')
    <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">
            </a>
            <a href="{{env('APP_URL')}}" class="logo" aria-label="logo">
            <img src="{{ asset('frontend') }}/student-panel/images/logo.svg" alt="logo">
        </a>
            <p class="head">Login to Continue</p>
            <p class="sub-head">Your Hassle-Free Study Abroad Journey Starts Here!</p>
        </div>
        <div class="login-section">
            
            <div class="tabs">
                <p class="single-tab active" data-key="email" id="email_login">Email</p>
                <p class="single-tab " data-key="mobile" id="mobile_login">Mobile Number</p>
            </div>
            
            <form class="form" id="login_form">
                @csrf
                <input type="hidden" name="login_type" id="login_type" value="email_login">
                <div class="number panel mobile">

                    {{-- <div class="select-code">
                        <p class="country-code">
                            <select class="list" name="country_code" id="countrySelect">
                                <option value="">+91</option>
                            </select>
                        </p>
                    </div> --}}
                    
                    <div class="single-input">
                        <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=""
                            placeholder="Enter Mobile Number" maxlength="15">
                    </div>                    
                </div>
                <div class="single-input panel email">
                    <label for="" class="field-label">Enter Email Id</label>
                    <input type="email" name="email" id="email" class="input-field" placeholder="Enter Email Id" maxlength="100">
                </div>

                <div class="single-input">
                    <label for="Password" class="field-label">Password</label>
                    <input type="password" name="password" id="password" class="input-field" value="" placeholder="Password" maxlength="100">
                    <span class="pass" id="password_warning"></span>
                </div>
                <a href="/auth/forgot_password/email" id="forgot_link" class="forgot-pass">Forgot Password?</a>
                <button type="submit" id="forgot_submit_btn" 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" 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" 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">Don’t have an account? <a href="/register" class="signup-link">Sign Up Here</a></p>
        </div>
    </div>
@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


@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"></script>
    <script src="{{ asset('frontend') }}/student-panel/js/login.js?v={{now()->format('his')}}"></script>
    
    {{-- <script src='https://www.google.com/recaptcha/api.js'></script> --}}
    {{-- <script>
   
        // Login See Password Button Function 
        $('#eyeButton').on('click', function(){
            let input = $('#password');
            let eye = $('.fas');
            input.attr('type') === 'password' ? input.attr('type','text') : input.attr('type','password');
            $('.eyebutton').hasClass('ph-eye-slash') ? $('.eyebutton').addClass('ph-eye').removeClass('ph-eye-slash') : $('.eyebutton').addClass('ph-eye-slash').removeClass('ph-eye');
        });


        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');
            }
        }

        function loginCredentials(type) {
            if (type == 'candidate') {
                $('#email').val('candidate@mail.com')
                $('#password').val('password')
            } else {
                $('#email').val('company@mail.com')
                $('#password').val('password')
            }

            $('#login_form').submit();
        }

        if ({{ request('social_register') ?? 0 }} == 1) {
            LoginService();
        }

        function LoginService() {
            $("#ModalBtn").css("display", "block");
        }
    </script> --}}
@endsection
@section('css')
@endsection