@extends('admin.layout.master')

@section('content')
    <main>
        <!-- Breadcrumb Area -->
        <div class="breadcrumb-area">
            <h1>Dashboard</h1>
            <ol class="breadcrumb">
                <li class=""><a href="{{ url('/admin') }}"><i class='bx bx-home-alt'
                            style="font-size: 18px;color: #F31519;"></i></a></li>
                <li class=""><a href="{{ url('/admin') }}">Principal </a></li>
                <li class="">&nbsp;&nbsp;/ Otras Operaciones</li>
                <li class="">&nbsp;&nbsp;/ <a href="{{ url('/admin/configuracion/password') }}">Cambiar Contraseña</a>
                </li>
            </ol>
        </div>
        <!-- End Breadcrumb Area -->

        <div class="card mb-30">
            <!-- Mensajes de alerta estáticos -->
            <div class="alert alert-warning alert-dismissable" id="alert-vacioupdate" style="display:none;">
                <strong>Mensaje!</strong> Campos vacíos, verifique
                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
            </div>

            <div class="alert alert-warning alert-dismissable" id="alert-faltacaracteres" style="display:none;">
                <strong>Mensaje!</strong> La clave no debe ser menor a 6 dígitos
                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
            </div>

            <div class="alert alert-warning alert-dismissable" id="alert-diferente" style="display:none;">
                <strong>Mensaje!</strong> Las claves son diferentes, tienen que ser iguales
                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
            </div>

            <div class="alert alert-success alert-dismissable" id="alert-update" style="display:none;">
                <strong>Mensaje!</strong> Se ha cambiado correctamente la clave.<br>Dentro de 5 minutos se cerrará la sesión
                para volver a entrar.
                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
            </div>

            <div class="card-body">
                <form name="mi_formulario" class="form-horizontal">
                    @csrf
                    <div class="form-group">
                        <label for="current_password" class="col-sm-2 control-label">Contraseña Actual</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" name="current_password" placeholder="Contraseña Actual">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="claveA" class="col-sm-2 control-label">Nuevo Password</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" name="claveA" placeholder="Nuevo Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="claveB" class="col-sm-2 control-label">Confirmar Password</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" name="claveB" placeholder="Confirmar Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <input type="submit" class="btn btn-primary" name="grabar" value="Grabar">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </main>

    <script>
        $(document).ready(function() {
            $('form[name="mi_formulario"]').on('submit', function(e) {
                e.preventDefault();

                let currentPassword = $('input[name=current_password]').val();
                let claveA = $('input[name=claveA]').val();
                let claveB = $('input[name=claveB]').val();

                if (currentPassword === "" || claveA === "" || claveB === "") {
                    $('#alert-vacioupdate').show().delay(5000).fadeOut();
                    return;
                }

                if (claveA.length < 6) {
                    $('#alert-faltacaracteres').show().delay(5000).fadeOut();
                    return;
                }

                if (claveA !== claveB) {
                    $('#alert-diferente').show().delay(5000).fadeOut();
                    return;
                }

                $.ajax({
                    url: '{{ route("password.updateAdmin") }}',
                    type: 'POST',
                    data: {
                        current_password: currentPassword,
                        claveA: claveA,
                        claveB: claveB,
                        _token: $('input[name=_token]').val()
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#alert-update').show().delay(5000).fadeOut();
                        }
                    },
                    error: function(response) {
                        alert('Error: ' + response.responseJSON.error);
                    }
                });
            });
        });
    </script>
@endsection