@extends('layout.wrapper_login')

@section('contents')
    @if($message !== true)
        <h2>{{ $message }}</h2>
    @else
        <form id="reset_password_form">
            <div class="container">
                <div class="row" style="position: relative; z-index: 5;">
                    <div class="col-lg-12" style="position: relative; z-index: 5;">
                        <div class="section-heading">
                            <h1 class="text-center">Reset Password</h1>
                        </div>
                    </div>
                    <input type="hidden" name="verify_code" id="verify_code" value="{{ $verify_code }}">
                    <div class="col-lg-12">
                        <fieldset>
                            <label>Password Baru :</label>
                            <input type="password" name="password" id="password"
                                   placeholder="Masukan Password" required>
                        </fieldset>
                    </div>
                    <div class="col-lg-12">
                        <fieldset>
                            <label>Konfirmasi Password Baru :</label>
                            <input type="password" name="confirm_password" id="confirm_password"
                                   placeholder="Confirm Password" required>
                        </fieldset>
                    </div>
                    <div class="col-lg-12">
                        <fieldset>
                            <button type="submit" id="btn_verify" class="main-gradient-button">
                                <!--begin::Indicator label-->
                                <span id="indicator-label">Kirim</span>
                                <!--end::Indicator label-->
                                <!--begin::Indicator progress-->
                                <span id="indicator-progress" class="d-none">Please wait...
                                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                                </span>
                                <!--end::Indicator progress-->
                            </button>
                        </fieldset>
                    </div>
                </div>
            </div>
        </form>
    @endif
@endsection
@section('scripts')
    <script>
        $('#reset_password_form').on('submit', (event) => {
            event.preventDefault()
            btnLoader($('#btn_verify'))
            if ($('input[name="password"]').val() !== $('input[name="confirm_password"]').val()) {
                btnLoader($('#btn_verify'))
                Swal.fire({
                    icon: 'error',
                    title: 'Password Tidak Sesuai'
                })
            } else {
                axios.post('{{ route('reset-password.send') }}', $(event.currentTarget).serialize()).then(response => {
                    if (response.data.success === true) {
                        Swal.fire({
                            icon: 'success',
                            title: response.data.message,
                            showConfirmButton: false
                        })
                        location.replace('{{ route('login') }}')
                    } else {
                        btnLoader($('#btn_verify'))
                        Swal.fire({
                            icon: 'warning',
                            title: response.data.message
                        })
                    }
                }).catch(error => {
                    btnLoader($('#btn_verify'))
                    Swal.fire({
                        icon: 'error',
                        title: 'System Error'
                    })
                })
            }
        })
    </script>
@endsection