@once
    @push('stylesheets')
        <link rel="stylesheet" href="{{ asset('css/unsaved-changes.css') }}"/>
    @endpush
@endonce

@props([
    'form'=> '#',
    'hasSaveButton' => true
    ])

<div blade="{{ $viewName ?? 'unknown' }}" class="save-changes-container {{$hasSaveButton ? 'hasmargin':'nomargin'}}">
    <div class="inner-container">
        <p class="unsaved-msg">YOU HAVE UNSAVED CHANGES</p>
        <div class="buttons-container">

            <x-ui.blue-button class="button cancel-button">CANCEL</x-ui.blue-button>

            @if ($hasSaveButton)
            <x-ui.blue-button class="button save-button" :form="$form">SAVE CHANGES</x-ui.blue-button>
            @endif

        </div>
    </div>
</div>


@once
    @push('scripts-stack')
        <script>
            $q = jQuery.noConflict();
            $q(document).ready(function () {

                let hasUnsavedChanges = false;

                document.querySelectorAll('form').forEach(form => {



                    const formButtonsContainer = form.querySelector('.save-changes-container');
                    if(!formButtonsContainer) return
                    if (formButtonsContainer) formButtonsContainer.style.display = "none"

                    const saveFormButton = form.querySelector('.save-button');
                    const cancelFormButton = form.querySelector('.cancel-button');



                    form.querySelectorAll('input').forEach(inp => {

                        inp.addEventListener('input', () => {
                            hasUnsavedChanges = true
                            formButtonsContainer.style.display = "flex"
                            inp.classList.add('hasChanges')
                        })

                    })
                    form.querySelectorAll('input[type=radio]').forEach(inp => {
                        inp.addEventListener('input', () => {
                            hasUnsavedChanges = true
                            formButtonsContainer.style.display = "flex"
                            inp.classList.add('hasChanges')
                        })

                    })


                    form.querySelectorAll('select').forEach(sel => {
                        sel.addEventListener('change', () => {
                            hasUnsavedChanges = true
                            formButtonsContainer.style.display = "flex"
                            sel.classList.add('hasChanges')
                        })

                    })


                    cancelFormButton && cancelFormButton.addEventListener('click', (e) => {
                        location.reload();
                    })


                })

                /**
                 * prevent leaving page when you have unsaved changes
                 */
                document.addEventListener('show.bs.tab', function (e) {

                    if (hasUnsavedChanges) {
                        alert('You have unsaved changes, cancel or save them')
                        e.stopPropagation();
                        e.preventDefault()
                    }
                    else{

                        const newTab = e.target.id.split('-')[1]

                        const newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + `?tab=${newTab}`;
                        window.history.pushState({path:newUrl},'',newUrl);

                    }
                })
            });
        </script>
    @endpush
@endonce