@include('system-layouts.head')
@include('systructure-architect-document.title-test')
<div class="container-fluid">
    <!-- contentiner -->
    <!-- col -->
    <div class="card">
        <!-- card -->
        <div class="card-body">
            <form id="registrationForm"><h2>test1</h2>
                <label for="fullName">Full Name:</label>
                <input type="text" id="fullName" name="fullName" required><br>

                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required><br>

                <label for="password">Password:</label>
                <input type="password" id="password" name="password" required><br>

                <button type="submit">Salvar</button>
                <button type="button" onclick="restore()">Mostrar</button>
                <button type="button" onclick="storageClear()">Limpar</button>

            </form>
            <div id="storageList">
                lista
            </div>
        </div>
        <!--/ card -->
    </div>
    <!--/ end col -->
    <!--/ end contentiner -->
</div>
@include('system-layouts.layout-footer')
<script>
    document.getElementById('registrationForm').addEventListener('submit', function (event) {
        event.preventDefault();

        const fullName = document.getElementById('fullName').value;
        const email = document.getElementById('email').value;
        const password = document.getElementById('password').value;

        const formData = {
            fullName: fullName,
            email: email,
            password: password
        };
        saveFormData(formData);
    });

    function saveFormData(formData) {
        //console.log(formData)
        const storedFormData = JSON.parse(localStorage.getItem('formData')) || [];

        storedFormData.push(formData);

        // console.log(storedFormData);

        localStorage.setItem('formData', JSON.stringify(storedFormData));
    }

    function restore() {
        console.log(localStorage.formData);
        if (typeof localStorage.formData !== 'undefined') {
            result = jQuery.parseJSON(localStorage.formData)
            var list = '';
            result.forEach(function (row, i) {
                console.log(row, i);
                list += '<div> ' + i + ' | ' + row.fullName + ' | ' + row.email + ' | ' + row.password + '' +
                    ' <button type="button" onclick="storageEdit(' + i + ')">Edit</button> </div>';

            });

            $('#storageList').html(list);
        } else {
            console.log('Não tem nada salvo')
        }
    }

    function storageEdit(id) {
        console.log(id)

        result = jQuery.parseJSON(localStorage.formData)

        // console.log(result)
        localStorage.clear('formData');

        result.forEach(function (row, i) {
            console.log(row, i);
            //editar
            if (i == id) {
                row.fullName = 'NomeE ';
            }
            saveFormData(row)

        });
    }

    function storageClear() {
        console.log(localStorage.clear('formData'));
    }

</script>