@extends('Master.master')
@section('content')
<style>
    label.error {
    color: red;
    font-weight: inherit;
    font-size: 14px;
    width: 100%;
    margin-left:5px;
    }
    input.error {
    border: 1px solid red;
    color: red;
    }
    textarea.error {
    border: 1px solid red;
    color: red;
    }
</style>
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Reset Password</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Dashboard</a></li>
                    <li class="breadcrumb-item active">Reset Password</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group">
                            <form id="reset-password" method="post" enctype="multipart/form-data">
                                <div class="input-group mb-3">
                                    <input type="password" class="form-control" id="password" placeholder="Password" name="password" autocomplete="">
                                </div>
                                <div class="input-group mb-3">
                                    <input type="password" class="form-control" id="password_confirm" placeholder="Konfirmasi Password" name="password_confirm" autocomplete="">
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <button type="submit" class="btn btn-primary btn-block">Ubah password</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    $(document).ready(function() {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $("#reset-password").validate({
            rules: {
                password: {
                    required: true,
                    minlength: 6
                },
                password_confirm: {
                    required: true,
                    minlength: 6,
                    equalTo: "#password"
                }
            },
            messages: {
                password: {
                    required: 'Password tidak boleh kosong &nbsp;<i class="fas fa-exclamation-circle"></i>',
                    minlength: 'Password minimal terdiri dari 6 digit &nbsp;<i class="fas fa-exclamation-circle"></i>',
                    equalTo: 'Harap masukan password yang sama &nbsp;<i class="fas fa-exclamation-circle"></i>'
                },
                password_confirm: {
                    required: 'Konfirmasi password tidak boleh kosong &nbsp;<i class="fas fa-exclamation-circle"></i>',
                    minlength: 'Konfirmasi password minimal terdiri dari 6 digit &nbsp;<i class="fas fa-exclamation-circle"></i>',
                    equalTo: 'Password tidak sama &nbsp;<i class="fas fa-exclamation-circle"></i>'
                },
            },
            submitHandler: function (form) {
                let formData = new FormData();
                var password = document.getElementById("password").value;

                formData.append('password', password);
    
                Swal.fire({
                title: 'Mengirim Data',
                html: 'Tunggu hingga proses kirim selesai.',
                didOpen: () => {
                    Swal.showLoading()
                }
                })
                $.ajax({
                    url: '/simpan-reset-password',
                    type: "POST",
                    enctype: 'multipart/form-data',
                    contentType: false,
                    processData: false,
                    data: formData,
                    dataType: 'json',
                    success: function(data) {
                        Swal.fire({
                            title: 'Tersimpan',
                            text: 'Password berhasil diubah.',
                            icon: 'success',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.reload(true);
                            }
                            Swal.close(window.location.reload(true));
                        })
                    }
                });
            }
        });
    
    });
</script>
@endsection