
<?php $__env->startSection('content'); ?>

<div class="container">
    <div class="row">
        <div class="col-md-3">
        </div>
        <div class="col-md-6">
            <div class="header-green text-center">
                <h3>ลืมรหัสผ่าน</h3>
            </div>
            <form id="formRePass" name="formRePass">
                <div class="row justify-content-md-center">
                    <div class="col">
                        <div class="mb-3">
                            <label class="form-label">อีเมล</label>
                            <input type="email" name="sendmail" id="sendmail" class="form-control" placeholder="อีเมล"
                                required />
                        </div>
                        <div class="mb-3">
                            <div class="row justify-content-md-center">
                                <div class="col-lg-8"></div>
                                <div class="d-grid gap-2 col-lg-4 mx-auto">
                                    <button class="btn btn-warning" type="submit">ขอรหัสผ่านใหม่ 
                                        <i class="fa fa-share"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    var $changeForm = $("#formRePass");
    $changeForm.validate({
        rules: {
            sendmail: {
                required: true,
                email: true,
            }
        },
        messages: {
            sendmail: {
                required: "กรุณากรอกอีเมล",
                email: "กรุณากรอกรูปแบบอีเมลให้ถูกต้อง",
            }
        },
        submitHandler: function() {
            $(".loader").show();
            var mail = $("#sendmail").val();
            var form_data = new FormData();
            form_data.append('sendmail', mail);
            $.ajax({
                type: "post",
                url: 'forgotPass/sendMail',
                data: form_data,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                processData: false,
                contentType: false,
                cache: false,
                success: function(data) {
                    // console.log("post login. [ " + data.status + "/" + data.message + " ]");
                    // window.location = "login";
                    $(".loader").hide();
                    if (data.status == true) {
                        Swal.fire({
                            icon: 'success',
                            title: 'กรุณาตรวจสอบอีเมล',
                            text: '',
                            allowOutsideClick: false,
                            focusConfirm: true,
                            confirmButtonText: 'ตกลง',
                        }).then((result) => {
                            if (result.value) {
                                window.location = "home";
                            }
                        })
                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: 'คำเตือน',
                            text: JSON.stringify(data.message),
                        });
                    }
                },
            });
        },
        errorElement: "div",
        errorPlacement: function(error, element) {
            // Add the `invalid-feedback` class to the error element
            error.addClass("invalid-feedback");

            // Add `has-feedback` class to the parent div.form-group
            // in order to add icons to inputs
            // element.parents(".col-sm-5").addClass("has-feedback");

            if (element.prop("type") === "checkbox") {
                error.insertAfter(element).addClass("invalid-feedback");
            } else {
                error.insertAfter(element);
            }

            var elem = $(element);
            if (elem.hasClass("select2-hidden-accessible")) {
                element = $("#select2-" + elem.attr("id") + "-container").parent();
                error.insertAfter(element).addClass("invalid-feedback");
            } else {
                error.insertAfter(element);
            }

            // Add the span element, if doesn't exists, and apply the icon classes to it.
            if (!element.next("span")[0]) {
                $("<span class='glyphicon glyphicon-remove form-control-feedback'></span>")
                    .insertAfter(element);
            }
        },
        success: function(label, element) {
            // Add the span element, if doesn't exists, and apply the icon classes to it.
            // console.log(element);
            if (!$(element).next("span")[0]) {
                $("<span class='glyphicon glyphicon-ok form-control-feedback'></span>").insertAfter(
                    $(element));
            }
        },
        highlight: function(element, errorClass, validClass) {
            // $(element).parents(".col-sm-5").addClass("has-error").removeClass("has-success");
            // $(element).next("span").addClass("glyphicon-remove").removeClass("glyphicon-ok");
            var elem = $(element);
            if (elem.hasClass("select2-hidden-accessible")) {
                $("#select2-" + elem.attr("id") + "-container").parent().addClass(errorClass);
            } else {
                elem.addClass(errorClass);
            }
        },
        unhighlight: function(element, errorClass, validClass) {
            // $(element).parents(".col-sm-5").addClass("has-success").removeClass("has-error");
            // $(element).next("span").addClass("glyphicon-ok").removeClass("glyphicon-remove");
            var elem = $(element);
            if (elem.hasClass("select2-hidden-accessible")) {
                $("#select2-" + elem.attr("id") + "-container").parent().removeClass(errorClass);
            } else {
                elem.removeClass(errorClass);
            }
        }
    });

    var forms = document.querySelectorAll('.needs-validation')
    Array.prototype.slice.call(forms)
        .forEach(function(form) {
            form.addEventListener('submit', function(event) {
                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                }
                form.classList.add('was-validated')
            }, false)
        })
});
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.front.mastermem', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/html/km-web/resources/views/auth/forgotPass.blade.php ENDPATH**/ ?>