@extends('auth_api.layouts.auth')
@section('title')
    {{ __('confirm_password') }}
@endsection
@section('content')
    <div id="confirm_screen" 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" width="100%" height="100%" alt="arrow" />
            </a>
            <a href="javascript:;" class="logo" aria-label="logo">
                <img src="{{ asset('frontend') }}/student-panel/images/logo.svg" width="100%" height="100%" alt="logo">
            </a>
            <img src="{{ asset('frontend') }}/student-panel/images/reset.jpg" width="100%" height="100%" class="img" alt="reset" />
            <p class="head">Create New Password</p>
            <p class="sub-head">New Password Must be Different from Last Password</p>
        </div>

        <form id="confirm_password_form" class="form pass-form">
            @csrf
            <input type="hidden" name="token" value="{{ $token }}">
            <div id="new_password_input" class="single-input">
                <label for="Password" class="field-label">Password</label>
                <input type="password" name="new_password" id="new_password" value="" class="input-field"
                    placeholder="Password" maxlength="100">
                <span class="pass"></span>
            </div>

            <div class="single-input">
                <label for="Confirm Passport" class="field-label">Confirm Password</label>
                <input type="password" name="confirm_new_password" id="confirm_new_password" value=""
                    class="input-field" placeholder="Confirm Password" maxlength="100">
                <span class="pass"></span>
            </div>

            <button type="submit" id="save_password_btn" class="btn">
                Save Password<i id="spinner" class=""></i>
            </button>

        </form>
    </div>

    <div class="mid-content common-space" id="success_screen" style="display: none">
        <div class="heading">
            <a href="javascript:;" class="logo" aria-label="logo">
                <img src="{{ asset('frontend') }}/student-panel/images/logo.svg" width="100%" height="100%" alt="logo" />
            </a>
            <img src="{{ asset('frontend') }}/student-panel/images/success.jpg" width="100%" height="100%" class="img" alt="onboard" />
            <p class="head">Password has been changed successfully!!!</p>
            <p class="sub-head">Your have just reset your Password! Click on the button below to login with your new
                password</p>
        </div>

        <a href="javascript:;" id="proceed_login_btn" class="btn">PROCEED TO LOGIN</a>
    </div>
@endsection
@section('css')
@endsection
@section('frontend_links')
    <link rel="stylesheet" href="{{ asset('frontend') }}/student-panel/css/login.css">
@endsection
@section('script')
    <script src="{{ asset('frontend') }}/student-panel/js/input-field.js"></script>
    <script src="{{ asset('frontend') }}/student-panel/js/confirm_password.js"></script>
@endsection