@extends('layouts.master')


@section('browserTitle')
{{ trans('menu.editPw') }}
@endsection



@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('adminIndex') }}">{{ trans('menu.home') }}</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ trans('menu.editPw') }}</li>
@endsection


@section('title')
{{ trans('menu.editPw') }}
@endsection


@section('body')
<script type="text/javascript">
    $(document).ready(function() {
        // Controlli login
        $("#admin-form").submit(function(event) {
            // Ottenere i valori dei campi
            var oldPassword = $("input[name='oldPassword']").val();
            var newPassword = $("input[name='newPassword']").val();
            var confirmPassword = $("input[name='confirmPassword']").val();
            var passwordRegex = /^(?=.*[0-9])(?=.*[!-\*\[\]\$&\/]).{8,}$/;
            // Espressione regolare per la password (almeno 8 caratteri, almeno una cifra, almeno
            // un carattere speciale tra ! - * [ ] $ & /)
            var error = false;

            // Verifica se il campo "confirmPassword" è vuoto
            if (confirmPassword.trim() === "") {
                error = true;
                const cp = __("login.rePassword").toLowerCase();
                $("#invalid-confirmPassword").text(__("msg.requiredField", {field: cp}));
                event.preventDefault();
                $("input[name='confirmPassword']").focus();
            } else {
                $("#invalid-confirmPassword").text("");
            } 

            // Verifica se il campo "newpassword" è vuoto o non rispetta la regural expression
            if (newPassword.trim() === "") {
                error = true;
                const np = __("login.newPassword").toLowerCase();
                $("#invalid-newPassword").text(__("msg.requiredField", {field: np}));
                event.preventDefault();
                $("input[name='newPassword']").focus();
            } else if(!passwordRegex.test(newPassword)) {
                error = true;
                const np = __("login.newPassword").toLowerCase();
                $("#invalid-newPassword").text(__("msg.invalidPw"));
                event.preventDefault();
                $("input[name='newPassword']").focus();
            } else {
                $("#invalid-newPassword").text("");
            }

            // Verifica se il campo "oldPassword" è vuoto
            if (oldPassword.trim() === "") {
                error = true;
                const op = __("login.oldPassword").toLowerCase();
                $("#invalid-oldPassword").text(__("msg.requiredField", {field: op}));;
                event.preventDefault();
                $("input[name='oldPassword']").focus();
            } else {
                $("#invalid-oldPassword").text("");
            }
            

            if(!error) {
                
                // Verifica che la password siano state inserita uguale due volte
                if(confirmPassword.trim() !== newPassword.trim())
                {
                    error = true;
                    $("#invalid-confirmPassword").text(__("msg.passwordMismatch"));
                    event.preventDefault();
                    $("input[name='confirmPassword']").focus();
                } else {
                    $("#invalid-confirmPassword").text("");
                } 

                // Verifica se il campo old password è uguale alla nuova password
                if(oldPassword.trim() === newPassword.trim())
                {
                    error = true;
                    $("#invalid-newPassword").text(__("msg.repetedPw"));
                    event.preventDefault();
                    $("input[name='newPassword']").focus();
                } else {
                    $("#invalid-newPassword").text("");
                }
        

            }
        });
    });
</script>



<div class="row">
    <div class="col-md-12">
        <form id="admin-form" class="form-horizontal" name="admin" method="post" action="{{ route('admins.updatePw', ['admin' => $admin->id]) }}">
            @method('PUT') 
        @csrf

        
        <div class="form-group row mb-3">
            <div class="col-md-2">
                <label for="title">{{ trans('login.oldPassword') }}</label>
            </div>
            <div class="col-md-10">
                <input class="form-control" type="password" name="oldPassword" placeholder="{{ trans('login.oldPassword') }}"/>
                <span class="invalid-input" id="invalid-oldPassword"></span>
            </div>
        </div>
        <div class="form-group row mb-3">
            <div class="col-md-2">
                <label for="title">{{ trans('login.newPassword') }}</label>
            </div>
            <div class="col-md-10">
                <input class="form-control" type="password" name="newPassword" placeholder="{{ trans('login.newPassword') }}"/>
                <span class="invalid-input" id="invalid-newPassword"></span>
            </div>
        </div>
        <div class="form-group row mb-3">
            <div class="col-md-2">
                <label for="title">{{ trans('login.rePassword') }}</label>
            </div>
            <div class="col-md-10">
                <input class="form-control" type="password" name="confirmPassword" placeholder="{{ trans('login.rePassword') }}"/>
                <span class="invalid-input" id="invalid-confirmPassword"></span>
            </div>
        </div>

        <div class="form-group row mb-3">
            <div class="col-md-10 offset-md-2">
                <label for="mySubmit" class="my-btn my-blue-btn w-100">{{ trans('btn.save') }}</label>
                <input id="mySubmit" class="d-none" type="submit" value="Save">
            </div>
        </div>
        <div class="form-group row mb-3">
            <div class="col-md-10 offset-md-2">
                <a class="my-btn my-red-btn w-100 d-block" href="{{ route('admins.show', ['admin' => $_SESSION['loggedID']]) }}" role="button">{{ trans('btn.cancel') }}</a>
            </div>
        </div>
        </form>
    </div>
</div>
@endsection