@extends('layouts.frontend.index')
@section('title', 'Lupa Password')
@section('meta_title', 'Lupa 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', 'Lupa 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">Lupa Password</h5>
                    </div>

                    <form method="post" action="{{ route('auth.store.forgot-password') }}" class="pt-3 form-action">
                        @csrf

                        @isset($errors->all()[0])
                            <div class="alert alert-danger">
                                <i class="mdi mdi-close-circle"></i> {{ $errors->all()[0] }}
                            </div>
                        @endisset

                        <div class="mb-3">
                            <label>Username / Email</label>
                            <input type="text" name="username" class="form-control input-login" placeholder="....." autocomplete="off" required>
                        </div>

                        <div class="form-group">
                            <label>Captcha</label>
                            <div class="captcha" style="margin-top: 5px;margin-bottom: 5px;margin-right: 5px;">
                                <span></span>
                                <a href="javascript:void(0)" class="reload white captcha-refresh">
                                    <i class="fas fa-sync-alt"></i>
                                </a>
                            </div>

                            <x-form.input-text
                                name="captcha"
                                class="form-auth captcha"
                                placeholder="Masukan Kode Diatas"
                            />
                        </div>

                        <div class="d-grid">
                            <button type="button" class="btn btn-primary auth-form-btn">
                                SUBMIT
                            </button>
                        </div>
                    </form>
                </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;
    }
</style>
@endpush

@push('scripts')
<script>
const captcha_img = '{!! captcha_img() !!}'

$(document).ready(function(){
    $(".captcha span").html(captcha_img)

    $(".captcha-refresh").click(function () {
        $.ajax({
            type: "GET",
            url: "{{ route('auth.refresh-captcha') }}",
            success: function (data) {
                $(".captcha span").html(data.captcha)
            }
        });
    })

    $(".form-action .auth-form-btn").click(function(){
        $(this).html("LOADING...").removeClass("btn-primary").addClass("btn-secondary disabled text-dark").css({"cursor":"default"})
        $(this).closest("form").submit()
    })

    $(".form-action input").keyup(function(){
        var keyboard = event.which || event.keyCode

        if(keyboard == 13)
            $(".form-action .auth-form-btn").click()
    })
})
</script>
@endpush