@extends('org.layout.adminLayout')
@section('title', 'Set new 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;
        }
    </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>
                            <i class="bi bi-key-fill" style="font-size: 48px;"></i>
                        </center>
                        <div class="text-center mb-4">
                            <h2>New password <i class="bi bi-info-circle" data-toggle="tooltip" data-placement="right"
                                    title="Passwords must be minimum 12 characters, at least one letter, one upper and one lower case, one symbol and one number"></i>
                            </h2>
                            <p>Please use a strong password<br>
                                press <i class="bi bi-info-circle"></i> for more info</p>
                        </div>
                        <form action="{{ route('org.user.password.reset', compact('subdomain')) }}" method="post">
                            @csrf
                            <input type="hidden" name="token" value="{{ $token }}">
                            {{-- email --}}
                            <div class="form-floating mb-3">
                                <div class="passEye">
                                    <input type="checkbox" tabindex="-1">
                                    <i class="bi bi-eye-slash-fill no-event"></i>
                                    <i class="bi bi-eye-fill no-event"></i>
                                </div>
                                <input type="password" name="new_password" class="form-control" style="padding-right: 42px;"
                                    id="floatingInput" placeholder="password" data-type="password">
                                <label for="floatingInput">Password</label>
                            </div>

                            @error('new_password')
                                <div class="alert alert-danger p-0 px-2" role="alert">
                                    {{-- {{ $message }} --}}
                                    The new password does not meet security criteria.
                                    <br>press <i class="bi bi-info-circle"></i> for more info
                                </div>
                            @enderror
                            <div class="form-floating mb-3">
                                <div class="passEye">
                                    <input type="checkbox" tabindex="-1">
                                    <i class="bi bi-eye-slash-fill no-event"></i>
                                    <i class="bi bi-eye-fill no-event"></i>
                                </div>
                                <input type="password" name="confirm_password" class="form-control"
                                    style="padding-right: 42px;" id="floatingInput" placeholder="password"
                                    data-type="password">
                                <label for="floatingInput">Confirm Password</label>
                            </div>
                            @if (!empty(Session::get('err')))
                                <div class="alert alert-danger p-0 px-2" role="alert">
                                    {{ Session::get('err') }}
                                </div>
                            @endif

                            <div>
                                <input type="submit" class="button btn-primary w-100 my-3 py-2" value="Update">
                                <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 --}}
    <script>
        function sendMail() {
            $.ajax({
                type: "post",
                url: "{{ route('org.user.password.reset.link', compact('subdomain')) }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    email: $("#email").val()
                },
                beforeSend: function() {
                    $("#sendBtn").attr("disabled", "disabled");
                    $("#successMsg").text("");

                    $("#sendBtn").html(`
                    <center>
                        <x-pre-loader :uibLoader="['class'=>'pre-loader','color'=>'#fff','size'=>'24px']" />
                    </center>`);
                },
                success: function(response) {
                    $("#sendBtn").removeAttr("disabled");
                    $("#sendBtn").html("Send reset link");
                    if (response.status == 200) {
                        $("#successMsg").text(response.msg);
                    }
                    console.log(response);
                }
            });
        }
    </script>
@endsection