@extends('auth_api.layouts.auth')
@section('title')
    {{ __('forgot_password') }}
@endsection
@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($token_data);
    }
@endphp
    <div class="mid-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>
            <img src="{{ asset('frontend') }}/student-panel/images/forgot.jpg" class="img" alt="reset" />
            <p class="head">Reset Password?</p>
            <p class="sub-head" id="sub_head">{{(isset($token) && $token_data["from"]=="phone")?"Please Enter Your Mobile Number to Receive a Verification Code":"Please Enter Your Email to Receive a Verification Code";}}</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["from"]=="phone")?$token_data["iso2"]:"";}}">

        <form class="form" id="forgot_password_form">
            @csrf
            <div class="number" id="phone_input" style="{{($from=="email")?"display: none":"display: block";}}">
                <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" class="input-field" value="{{(isset($token) && $token_data["from"]=="phone")?$token_data["phone"]:"";}}" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" value="" placeholder="Enter Mobile Number" maxlength="16">
                </div>
            </div>
            <div class="number" id="email_input" style="{{($from=="phone")?"display: none":"display: block";}}">
                <div class="single-input {{(isset($token))?'field-not-empty':"";}}">
                    <label for="" class="field-label">Enter Email Id</label>
                    <input type="email" name="email" id="email" value="{{(isset($token) && $token_data["from"]=="email")?$token_data["email"]:"";}}" class="input-field" placeholder="Enter Email Id" maxlength="100">
                </div>
            </div>

            <button type="submit" id="send_otp_btn" class="btn">Send OTP<i id="spinner" class=""></i></button>
        </form>

    </div>
@endsection
@section('css')
@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/forgot_password.js"></script>
@endsection