@extends('layouts.layout')
@section('css')

@endsection

@section('body_content')
<style>
    .field-icon {
  float: right;
  margin-right: 5px;
  margin-top: -25px;
  position: relative;
  z-index: 2;
}

.container{
  padding-top:50px;
  margin: auto;
}
</style>
<div class="container-fluid" style="font-size: 14px; background: #F1F5F9">

    <div class="row">
        <div class="col-xs-12 col-sm-12" style="height: 717px">
            <div style="margin-top: 150px"></div>
            <div style="background: #fff; width: 320px; padding: 20px; margin: 0 auto; border-radius: 10px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)">
                <form>
                    <div class="text-center"><img src="{{ asset('/images/lakuemas.png') }}" height="100"></div>
                    <h2 class="text-center"><b>Atur Ulang Kata Sandi AGENT</b></h2>

                    <div class="x_content">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-horizontal form-label-right">
                                    <div class="form-group">

                                        <input type="hidden" name="data" value="{{ $_GET['new'] }}">
                                        {{-- <input type="hidden" name="data" value="{{ $token }}"> --}}
                                        {{-- <label class="col-xs-4 control-label"><b>New Password</b></label>   --}}
                                        <div class="col-xs-12 col-sm-12">
                                            <input type="password" class="form-control"
                                                name="password" id="new_password" required="required" placeholder="Password">
                                                <span toggle="#new_password" class="fa fa-fw field-icon toggle-password fa-eye-slash"></span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        {{-- <label class="col-xs-4 control-label"><b>Retype Password</b></label> --}}
                                        <div class="col-xs-12 col-sm-12">
                                            <input type="password" class="form-control"
                                                name="password" id="retype_password" required="required" placeholder="Retype Password">
                                                <span toggle="#retype_password" class="fa fa-fw field-icon toggle-password fa-eye-slash"></span>
                                        </div>
                                    </div>
                                    <div id="error-message" class="alert alert-danger" style="display:none;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
		
                    <div class="form-group text-center">
                        <div class="loading hidden"><i class="fa fa fa-spinner fa-pulse"></i></div>
                        <div class="submit">
                            <button type="button" class="btn btn-primary" style="width: 100%" onclick="validatePassword()"><i class="fa fa-sign-in" aria-hidden="true"></i> Reset Password</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    function validatePassword() {
    var newPassword = $('#new_password').val();
    var retypePassword = $('#retype_password').val();
    var token = $('input[name="_token"]').val();
    var data = $('input[name="data"]').val();

    if (newPassword.length < 6) {
        $('#error-message').html('Password minimal 6 karakter').show();
        return;
    }
    if (newPassword !== retypePassword) {
        $('#error-message').html('Password Tidak Sesuai').show();
        return;
    }

    $('#error-message').hide();

    Swal.fire({
        icon: 'question',
        title: 'Yakin reset password?',
        showCancelButton: true,
        confirmButtonText: 'Ya, reset!',
    }).then((result) => {
        if (result.isConfirmed) {

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

            $.ajax({
                url: "{{ route('password.send') }}",
                type: "POST",
                data: {
                    _token: token,
                    password: newPassword,
                    data: data
                },
                beforeSend: function() {
                    $('.loading').removeClass('hidden');
                },
                success: function(response) {
                $('.loading').addClass('hidden');


                    Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: response.message
                        }).then(() => {
                            window.location.href = "{{ route('login') }}";
                    });
                },
                    error: function(xhr) {
                        $('.loading').addClass('hidden');

                        let msg = 'Terjadi kesalahan';

                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            msg = xhr.responseJSON.message;
                        }
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal!',
                            text: msg
                        });
                    }
                        });

                }
    });
}

</script>

@endsection