@extends('admin.layouts.app')

@push('css')
    <!-- Scripts -->
    {{-- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script> --}}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- JS Color for Appearence (color_primary, color_secondary) -->
    {{-- <script src="https://cdn.jsdelivr.net/npm/jscolor@2.4.5/jscolor.min.js"></script> --}}

@endpush

@section('content')

    <!-- Page Title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0">Cambiar Password</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Tablero</a></li>
                        <li class="breadcrumb-item active">Cambiar Password</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <form action="" method="post" id="changePasswordForm" name="changePasswordForm">
                <div class="card">
                    <div class="card-body">
                        <div class="row">

													<div class="col-md-12">
													    <div class="mb-3">
													        <label for="old_password">Contraseña Anterior</label>
													        <input type="password" name="old_password" id="old_password" placeholder="Contraseña Anterior" class="form-control">
													        <small class="form-text text-muted">Ingrese su contrase&ntilde;a actual para verificar su identidad.</small>
													        <p></p>
													    </div>
													</div>

													<div class="col-md-6">
													    <div class="mb-3">
													        <label for="new_password">Nueva Contraseña</label>
													        <input type="password" name="new_password" id="new_password" placeholder="Nueva Contraseña" class="form-control">
													        <small class="form-text text-muted">La nueva contrase&ntilde;a debe tener al menos 8 caracteres.</small>
													        <p></p>
													    </div>
													</div>

													<div class="col-md-6">
													    <div class="mb-3">
													        <label for="confirm_password">Confirme su Contraseña</label>
													        <input type="password" name="confirm_password" id="confirm_password" placeholder="Confirme su Contraseña" class="form-control">
													        <small class="form-text text-muted">Vuelva a ingresar su nueva contrase&ntilde;a para confirmarla.</small>
													        <p></p>
													    </div>
													</div>

                        </div>
                    </div>
                </div>
                <div class="pb-5 pt-3">
                    <button type="submit" class="btn btn-primary">Actualizar</button>
                </div>
            </form>


        </div>
    </div>

@endsection

@section('customJs')
	<script type="text/javascript">

        //$("#changePasswordForm").submit(function(event){
        $("#changePasswordForm").submit(function(e){

            //event.preventDefault();
            e.preventDefault();

            $("button[type=submit]").prop('disabled', true);

            $.ajax({
                url: '{{ route("admin.processChangePassword") }}',
                type: 'post',
                data: $(this).serializeArray(),
                dataType: 'json',
                success: function(response){

                    $("button[type=submit]").prop('disabled', false);

                    if (response["status"] == true) {

                        window.location.href = "{{ route('admin.showChangePasswordForm')}}";

                        $("#old_password").removeClass('is-invalid')
                            .siblings('p')
                            .removeClass('invalid-feedback').html("");

                        $("#new_password").removeClass('is-invalid')
                            .siblings('p')
                            .removeClass('invalid-feedback').html("");

                        $("#confirm_password").removeClass('is-invalid')
                            .siblings('p')
                            .removeClass('invalid-feedback').html("");

                    } else {

                        var errors = response['errors'];

                        if(errors["old_password"]) {
                            $("#old_password").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['old_password']);
                        } else {
                            $("#old_password").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
                        }

                        if(errors["new_password"]) {
                            $("#new_password").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['new_password']);
                        } else {
                            $("#new_password").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
                        }

                        if(errors["confirm_password"]) {
                            $("#confirm_password").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['confirm_password']);
                        } else {
                            $("#confirm_password").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
                        }
                    }

                }, error: function(jqXHR, exception){
                    console.log("Something Went Wrong");
                }
            });

        });

	</script>
@endsection