@extends('layouts.frontend.index')
@section('title', 'Reset Password')
@section('meta_title', 'Reset Password - ' . Config::get('app.name'))
@section('meta_description', 'Jika Anda lupa password untuk masuk ke Akun Anda, Anda berada pada halaman yang tepat. Silahkan submit untuk mengembalikan password Anda')
@section('meta_keywords', 'Reset Password AturOrder, Akun Pengguna, Area Member, Software Order Management, Manajemen Order, Stok, Pelanggan')

@section('content')
<section class="bg">
    <div class="d-flex">
        <div class="m-auto">
            <div class="card">
                <div class="card-body p-5" style="min-width: 500px;">
                    <div class="text-center">
                        <img src="{{ asset('images/favicon.png') }}" style="width: 50px;" />
                        <h5 class="mt-3 fw-bold">Reset Password</h5>
                    </div>

                    @if ($expired == '-')
                        <div class="alert alert-info text-center mt-4">
                            Link reset password sudah tidak berlaku.<br />Silahkan submit ulang.
                        </div>
                    @else
                        <form method="post" action="{{ route('auth.update.password', $user->encrypted_id) }}" class="pt-3 form-block">
                            @csrf
                            @method('put')

                            <x-form.input-group
                                type="password"
                                id="password"
                                name="password"
                                label="Password Baru"
                                addon="<i class='fa-solid fa-lock'></i>"
                                autocomplete="new-password"
                                :old="old('password')"
                            />
                            <a href="javascript:void(0)" class="eye" data-target="#password" data-show="false">
                                <i class="fa-solid fa-eye"></i>
                            </a>

                            <x-form.input-group
                                type="password"
                                id="password-confirm"
                                name="password_confirm"
                                label="Konfirmasi Password"
                                addon="<i class='fa-solid fa-lock'></i>"
                                :old="old('password_confirm')"
                            />
                            <a href="javascript:void(0)" class="eye" data-target="#password-confirm" data-show="false">
                                <i class="fa-solid fa-eye"></i>
                            </a>

                            <div class="d-grid">
                                <button type="button" class="btn btn-primary btn-submit">
                                    RESET PASSWORD
                                </button>
                            </div>
                        </form>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('styles')
<style>
    .bg {
        background: url("{{ asset('images/home/banner.webp') }}");
        background-size: cover;
        padding-top: 120px !important;
        padding-bottom: 150px !important;
    }

    .eye {
        position: absolute;
        right: 65px;
        margin-top: -52px;
        color: #a6a7aa;
        z-index: 5;
    }
</style>
@endpush

@push('scripts')
<script>
const error = "@isset($errors->all()[0]) {{ $errors->all()[0] }} @endisset"

$(document).ready(function() {
    if (error != "")
        setNotifInfo("{{ __('validation.not_valid') }}")

    $(".eye").click(function() {
        const target = $(this).data("target")
        const show = $(target).data("show")

        if (show == "true") {
            $(target).attr("type", "password").data("show", "false")
            $(this).html("<i class='fa-solid fa-eye'></i>")
        } else {
            $(target).attr("type", "text").data("show", "true")
            $(this).html("<i class='fa-solid fa-eye-slash'></i>")
        }
    })
})
</script>
@endpush