@php
    App::setLocale(getUserLanguage());
    $ttl_rtl = userRtlLtl();
    $setting = generalSetting();
    $passwordReset = $passwordReset ?? [
        'type' => 'student',
        'title' => 'Student Password Recovery',
        'description' => 'Enter your Admission Number to receive a secure reset link.',
        'field_name' => 'admission_number',
        'field_label' => 'Admission Number',
        'placeholder' => 'Enter Admission Number',
        'back_url' => url('/login'),
    ];
@endphp
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}" @if (isset($ttl_rtl) && $ttl_rtl == 1) dir="rtl" class="rtl" @endif>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="{{ asset($setting->favicon) }}" type="image/png" />
    <title>{{ $passwordReset['title'] }}</title>
    <meta name="_token" content="{!! csrf_token() !!}" />
    <link rel="stylesheet" href="{{ asset('public/backEnd/') }}/vendors/css/bootstrap.css" />
    <link rel="stylesheet" href="{{ asset('public/backEnd/') }}/vendors/css/themify-icons.css" />
    <link rel="stylesheet" href="{{ asset('public/backEnd/') }}/vendors/css/toastr.min.css" />
    <link rel="stylesheet" href="{{ asset('public/frontend/') }}/css/{{ activeStyle()->path_main_style }}" />
    <x-root-css />
</head>

<body class="login admin login_screen_body" style="{{ $css ?? '' }}">
    <style>
        .login_screen_body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            padding: 30px 0;
            grid-gap: 20px;
        }
        .reset-description {
            color: #667085;
            font-size: 14px;
            line-height: 1.7;
            margin: 8px 18px 24px;
        }
        .reset-label {
            color: #475467;
            display: block;
            font-size: 13px;
            font-weight: 700;
            margin: 0 18px 8px;
            text-align: left;
        }
        .reset-message {
            border-radius: 8px;
            font-size: 13px;
            margin: 0 18px 16px;
            padding: 10px 12px;
            text-align: left;
        }
        .reset-message.success {
            background: rgba(16, 185, 129, .12);
            color: #039855;
        }
        .reset-message.danger {
            background: rgba(239, 68, 68, .12);
            color: #d92d20;
        }
    </style>

    <section class="login-area up_login">
        <div class="container">
            <div class="row login-height justify-content-center align-items-center">
                <div class="col-lg-5 col-md-8">
                    <div class="form-wrap text-center">
                        <div class="logo-container">
                            <a href="{{ url('/') }}">
                                <img src="{{ asset($setting->logo) }}" alt="{{ $setting->school_name ?? config('app.name') }}" class="logoimage">
                            </a>
                        </div>

                        <h5 class="text-uppercase font-bold">{{ $passwordReset['title'] }}</h5>
                        <p class="reset-description">{{ $passwordReset['description'] }}</p>

                        @if(session()->has('message-success'))
                            <div class="reset-message success">{{ session()->get('message-success') }}</div>
                        @endif
                        @if(session()->has('message-danger'))
                            <div class="reset-message danger">{{ session()->get('message-danger') }}</div>
                        @endif

                        <form method="POST" action="{{ route('recovery.password.send') }}">
                            @csrf
                            <input type="hidden" name="type" value="{{ $passwordReset['type'] }}">

                            <label class="reset-label" for="password_reset_identifier">{{ $passwordReset['field_label'] }}</label>
                            <div class="form-group input-group mb-4 mx-3">
                                <span class="input-group-addon">
                                    <i class="ti-user"></i>
                                </span>
                                <input id="password_reset_identifier" class="form-control{{ $errors->has($passwordReset['field_name']) ? ' is-invalid' : '' }}" type="text" name="{{ $passwordReset['field_name'] }}" value="{{ old($passwordReset['field_name']) }}" placeholder="{{ $passwordReset['placeholder'] }}" maxlength="50" autocomplete="username" style="text-transform: uppercase;" oninput="this.value = this.value.toUpperCase()" required />
                                @if ($errors->has($passwordReset['field_name']))
                                    <span class="text-danger text-left pl-3" role="alert">
                                        {{ $errors->first($passwordReset['field_name']) }}
                                    </span>
                                @endif
                            </div>

                            <div class="form-group mt-30 mb-3">
                                <button type="submit" class="primary-btn fix-gr-bg">
                                    <span class="ti-email mr-2"></span>
                                    Send Reset Link
                                </button>
                            </div>
                            <a href="{{ $passwordReset['back_url'] }}">Back to Login</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer class="footer_area">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-12 text-center">
                    <p>{!! $setting->copyright_text !!}</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="{{ asset('public/backEnd/') }}/vendors/js/jquery-3.2.1.min.js"></script>
    <script src="{{ asset('public/backEnd/') }}/vendors/js/popper.js"></script>
    <script src="{{ asset('public/backEnd/') }}/vendors/js/bootstrap.min.js"></script>
</body>

</html>
