@extends('org.layout.adminLayout')
@section('title', 'Reset password')
@section('css')
    {{-- css --}}
    <link rel="stylesheet" href="{{ asset(ADMINCSS) }}/login/login.css">
    <link rel="stylesheet" href="{{ asset(ADMINCSS) }}/layout/layout.css">
    <style>
        [disabled] {
            opacity: .7;
            user-select: none !important;
            pointer-events: none !important;
        }

        .iconCase {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            height: 72px;
        }

        /* .iconCase > i{
                    position: absolute;
                }
                .iconCase > i:nth-child(2){
                    transform: translate(0,13px);
                    
                }
                .iconCase > i:nth-child(2)::after{
                    content: "";
                    position: absolute;
                    width: 50px;
                    height: 10px;
                    border-radius: 5px;
                    background-color: #fff;
                    top: 19px;
                    left: -5px;
                    z-index: -1;
                } */
    </style>
@endsection
@section('content')
    {{-- content --}}
    <div class="logo-placeholder-wrapper">
        <img src="{{ asset(LOGO) }}" alt="" class="logo-placeholder">
    </div>
    <div class="bgBox">
        <div class="blankSide d-none d-sm-block"></div>
        <div class="imgBox">
            <img class="bgImg" src="{{ asset(IMG) }}/bg.jpg" alt="">
        </div>
    </div>
    {{-- {{pre(Auth::user()->toArray())}} --}}
    <div class="container-fluid">
        <div class="container d-flex justify-content-center align-items-center" style="min-height: 100dvh;">
            <div style="max-width:370px;">
                <div class="row rounded-3 bg-white px-1 px-sm-4 formCard box-shadow pt-4 pb-5">
                    <div class="col-12 py-3">
                        <div class="d-flex justify-content-center logoBox">
                            <img src="{{ asset(LOGO) }}" alt="" style="max-width: 82px;">
                        </div>
                    </div>
                    <div class="col-12">
                        <center>
                            <div style="position: relative;" class="iconCase">
                                <i class="bi bi-lock-fill" style="font-size: 48px;"></i>
                                {{-- <i class="bi bi-three-dots" style="font-size: 32px;"></i> --}}
                            </div>
                        </center>
                        <div class="text-center mb-4">
                            <h2>Forgot password?</h2>
                            <p style="white-space: balance;">Enter your email address to get a new password</p>
                        </div>
                        @if (!empty(Session::get('msg')))
                            <div class="alert alert-danger p-0 px-2" role="alert">
                                <center> {!! Session::get('msg') !!} </center>
                            </div>
                        @endif
                        {{-- role --}}
                        {{-- @if ($subdomain != 'admin')
                            <div class="inputWrapper">
                                <select name="role" id="">
                                    <option value="{{ \App\Models\User::$ORG_ADMIN }}">Organisation admin</option>
                                    <option value="{{ \App\Models\User::$DIV_MANAGER }}">Division manager</option>
                                    <option value="{{ \App\Models\User::$DEP_MANAGER }}">Department manager</option>
                                    <option value="{{ \App\Models\User::$PROJECT_MANAGER }}">Project manager</option>
                                    <option value="{{ \App\Models\User::$GOVE_TEAM }}">Governance team</option>
                                    <option value="{{ \App\Models\User::$REVIEWER }}">Reviewer</option>
                                </select>
                            </div>
                        @else
                            <input type="hidden" name="role" value="{{ \App\Models\User::$SUPER_ADMIN }}">
                        @endif
                        @error('role')
                            <div class="alert alert-danger p-0 px-2" role="alert">
                                {{ $message }}
                            </div>
                        @enderror --}}
                        {{-- email --}}
                        <form action="{{ route('org.user.password.reset.otp',compact("subdomain")) }}" method="post">
                            @csrf
                            <div class="form-floating mb-3">
                                <input type="email" name="email" class="form-control" style="padding-right: 42px;"
                                    id="email" placeholder="name@example.com">
                                <label for="floatingInput">Email</label>
                                {{-- <div class="fieldIcon">
                                <i class="bi bi-envelope-at-fill no-event"></i>
                            </div> --}}
                            </div>
                            <p class="m-0 text-success text-center" id="successMsg"></p>
                            @error('email')
                                <div class="alert alert-danger p-0 px-2" role="alert">
                                    {{ $message }}
                                </div>
                            @enderror
                            <div>
                                <button type="submit" class="button btn-primary w-100 my-3 py-2" id="sendBtn">
                                    Continue
                                </button>
                                <center>
                                    <a href="{{ route('org.login.view', compact('subdomain')) }}" class="link">Back to
                                        login</a>
                                </center>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    {{-- js --}}
@endsection