<section class="data">
    <h1 class="data__title">Data request</h1>
    <p class="data__desc">To receive your personal data, fill in the email that you indicated when applying for a
        vacancy and we will send an archive with all the data to it. If you no longer have access to this email,
        please contact support at: email from terms</p>
    <div class="data__col">
        <form id="dataRequestForm" class="data__form" method="post">
            <?php echo csrf_field(); ?>
            <div class="data__form-content">
                <div class="data__fields">
                    <div class="data__form-error"></div>
                    <input class="data__input" id="email" name="email" autocomplete="off" placeholder="Enter Email">
                </div>
                <button class="data__button custom-button">Request data</button>
            </div>
            <div class="data__success">
                Success, An email has been sent to you
            </div>
        </form>
    </div>
    <h1 class="data__title">Delete data</h1>
    <p class="data__desc">To delete data, fill in the email that you indicated when sending a response to the
        vacancy, a link confirming the deletion of data will be sent to the mail, after clicking on the link, your
        data will be permanently deleted from the system</p>
    <div class="data__col">
        <form id="dataDeleteFrom" class="data__form" method="post">
            <?php echo csrf_field(); ?>
            <div class="data__form-content">
                <div class="data__fields">
                    <div class="data__form-error"></div>
                    <input class="data__input" id="email" name="email" autocomplete="off" placeholder="Enter Email">
                </div>
                <button class="data__button custom-button">Delete data</button>
            </div>
            <div class="data__success">
                Success, An email has been sent to you
            </div>
        </form>
    </div>
</section>
<script>
    $(function () {
        const $form2 = $('#dataDeleteFrom');
        const dataForm2 = document.getElementById('dataDeleteFrom');
        const formContent2 = dataForm2.querySelector('.data__form-content');
        const success2 = dataForm2.querySelector('.data__success');
        const errorForm2 = dataForm2.querySelector('.data__form-error');
        const button2 = dataForm2.querySelector('.data__button');
        $form2.on('submit', function (event) {
            event.preventDefault();
            const $self = $(this);
            const data = new FormData($self.get(0));
            button2.classList.add('disable');
            errorForm2.innerHTML = '';

            $.ajax({
                url: 'dataDeleteFrom',
                method: "POST",
                processData: false,
                data: data,
                contentType: false,
                cache: false,
                dataType: "json",
                beforeSend: function () {
                    $self.find('.js-submit').attr('disabled', 'disabled');
                },
                success: function (data) {
                    $self.find('.js-submit').attr('disabled', false);
                    if (data.success) {
                        formContent2.style.display = 'none';
                        success2.style.display = 'block';
                    }
                    button2.classList.remove('disable');
                },
                error: function (res) {
                    if (res.status === 422) {
                        const data = res.responseJSON.errors;
                        for (let i in data) {
                            errorForm2.innerHTML = data[i][0];
                        }
                        errorForm2.style.display = 'block';
                    }
                    button2.classList.remove('disable');
                }
            });
        });
    });

    $(function () {
        const $form1 = $('#dataRequestForm');
        const dataForm1 = document.getElementById('dataRequestForm');
        const formContent1 = dataForm1.querySelector('.data__form-content');
        const success1 = dataForm1.querySelector('.data__success');
        const errorForm1 = dataForm1.querySelector('.data__form-error');
        const button1 = dataForm1.querySelector('.data__button');
        $form1.on('submit', function (event) {
            event.preventDefault();
            const $self = $(this);
            const data = new FormData($self.get(0));
            errorForm1.innerHTML = '';
            button1.classList.add('disable');

            $.ajax({
                url: '<?php echo e(route('data.request')); ?>',
                method: "POST",
                processData: false,
                data: data,
                contentType: false,
                cache: false,
                dataType: "json",
                beforeSend: function () {
                    $self.find('.js-submit').attr('disabled', 'disabled');
                },
                success: function (data) {
                    $self.find('.js-submit').attr('disabled', false);
                    if (data.success) {
                        formContent1.style.display = 'none';
                        success1.style.display = 'block';
                    }
                    button1.classList.remove('disable');
                },
                error: function (res) {
                    if (res.status === 422) {
                        const data = res.responseJSON.errors;
                        for (let i in data) {
                            errorForm1.innerHTML = data[i][0];
                        }
                        errorForm1.style.display = 'block';
                    }
                    button1.classList.remove('disable');
                }
            });
        });
    });
</script>
<?php /**PATH /var/www/quadcode-jobs/resources/views/site/data.blade.php ENDPATH**/ ?>