@extends('layouts.default-canvas')

@section('styles')
    <link href="{{ asset('css/pages/shared/invoicingPages.css') }}" rel="stylesheet">
    <link href="{{ asset('css/components/custom/specialElements.css') }}" rel="stylesheet">

    <style>
      /* Tags and Identifiers */
        #iframe-loader {
            z-index: 20;
            pointer-events: none;
        }

        #manifest-iframe {
            width: 100%;
            height: 100%;
            border: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity .35s ease;
            position: relative;
            z-index: 1;
        }


      /* Sections */
        .footer-actions {
            background: #fdfdfd;
            z-index: 999999;
        }

      /* IFrame */
        .iframe-container{
            width: 100%;
            height: 700px;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: visible;
            margin-bottom: 20px;
        }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }

      /* Resources */
        .small-logo{
            height: auto;
            max-width: 45px;
            object-fit: contain;
        }

      /* Text */
        .fw-semi-bold {
            font-weight: 600;
        }

      /* Animations */
        /* Pulse Loader */
        .pulse-loader{
            width: 95px;
            height: 95px;
            object-fit: contain;
            animation: pulse-animation 1.5s infinite ease-in-out;
        }

        @keyframes pulse-animation {

            0%{
                transform: scale(1);
                opacity: 1;
            }

            50%{
                transform: scale(1.12);
                opacity: .75;
            }

            100%{
                transform: scale(1);
                opacity: 1;
            }

        }

    </style>
@endsection

@section('content')
    <div class="container px-4 py-5 my-3 bg-white rounded-3" style="max-width: 92%;">

        {{-- Header --}}
        <div class="mb-4 top-bar d-flex justify-content-between align-items-center">

            {{-- Actions & Notes --}}
            <div>
                {{-- Go Back --}}
                <button id="return_button" disabled
                    class="mb-3 btn btn-outline-harsi"
                    onclick="window.location.href='/home'"
                >
                    <i class="fas fa-chevron-left me-2"></i> {{ __('redirection_actions')['go_back'] }}
                </button>

                {{-- Notes --}}
                <div class="mb-0 d-flex flex-column justify-content-center">
                    <h6>{{ __("iframes")["manifiesto"]["view"]["note"] }}</h6>
                    <p class="mb-0 small text-muted">{{ __("iframes")["manifiesto"]["view"]["postscript"] }}</p>
                </div>
            </div>

            {{-- Logos --}}
            <div class="d-flex flex-column align-items-end pe-4">
                <a class="gap-4 mb-1 d-flex justify-content-end text-decoration-none">
                    <img class="small-logo" src="{{ asset('images/facturapi_logo.png') }}">
                    <img class="small-logo" src="{{ asset('images/only_harsi.png') }}" >
                </a>
            </div>

        </div>

        {{-- Iframe Facturapi --}}
        <div class="mb-4 iframe-container position-relative">

            {{-- Loader --}}
            <div id="iframe-loader"
                class="top-0 bg-white start-0 w-100 h-100 d-flex flex-column justify-content-center align-items-center position-absolute"
            >

                {{-- Pulse Logo --}}
                <img
                    src="{{ asset('images/only_harsi.png') }}"
                    class="pulse-loader"
                    alt="Loading"
                >

                {{-- Message --}}
                <h6 class="mt-4 fw-semi-bold">
                    {{ __('common_responses_and_messages')['loading'] }}
                </h6>

                <p class="mb-0 text-muted small">
                    Espere un momento por favor.
                </p>

            </div>

            {{-- Iframe --}}
            <iframe id="manifest-iframe"
                src="https://www.facturapi.io/embedded/manifiesto"
            >
            </iframe>

        </div>

        {{-- Interactive footer --}}
        <div class="footer-actions d-flex justify-content-center">
            {{-- Conclude & Leave --}}
            <div id="confirmation-wrapper" class="text-center" style="display: none;">
                <p>{{ __('iframes')['manifiesto']['view']['instructions'] }}</p>

                <button class="btn btn-harsi fw-semi-bold" id="confirm-manifest">
                    {{ __('iframes')['manifiesto']['view']['finish_and_continue'] }}
                </button>
            </div>

            {{-- Wait for Actions --}}
            <p id="waiting-msg" class="text-muted font-italic">
                {{ __('iframes')['manifiesto']['view']['suggestion'] }}
            </p>
        </div>

    </div>
@endsection

@section('footer')
    @include('shared.components.footer.basic-footer')
@endsection

@section('import-scripts')
    <!-- Sweet Alert -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endsection

@section('page-control-scripts')
<script>
    $(document).ready(function () {
      //* Control Variables
        const $confirmation_wrapper = $('#confirmation-wrapper');
        const $waiting_message      = $('#waiting-msg');
        const $confirm_button       = $('#confirm-manifest');
        const $return_button        = $('#return_button');

        const $iframe = $('#manifest-iframe');

      //* Lazy Actions
        // Display Concluding Actions
        setTimeout(() => {
            $waiting_message.fadeOut(300, function () {
                $confirmation_wrapper.fadeIn(400)[0]
                    .scrollIntoView({
                        behavior: 'smooth',
                        block: 'center'
                    });
            });
        }, 45000);

        // Enable Return Button
        setTimeout(() => {
            $return_button.prop('disabled', false);
        }, 10000);

      //* Trigger Actions
        $confirm_button.on('click', function (e) {
          // Prevent Propagations
            e.preventDefault();

          // Control Actions
            const $btn = $(this);

          // Update Signed Status
            $.ajax({
                url: '/signed-manifest/confirm',
                type: 'POST',
                dataType: 'json',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },

                beforeSend: function () {
                    $btn.prop('disabled', true);

                    Swal.fire({
                        title: "{{ __('common_responses_and_messages')['applying_changes'] }}",
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                },

                success: function (response) {
                    Swal.fire({
                        icon: 'success',
                        title: "{{ __('common_responses_and_messages')['saved_successfully'] }}",
                        confirmButtonText: "{{ __('common_actions')['close'] }}"
                    }).then(() => {
                        window.location.href = '/home';
                    });
                },

                error: function (xhr) {
                    $btn.prop('disabled', false);

                    let message = "{{ __('common_responses_and_messages')['data_not_loaded'] }}";
                    if (xhr.responseJSON?.message) {
                        message = xhr.responseJSON.message;
                    }

                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: message
                    });
                }
            });

        });

      //* Loader
        // Flags
        let iframeLoaded = false;

        // Show Iframe
        function revealIframe() {
            // Avoid multiple callbacks
            if (iframeLoaded) return;

            iframeLoaded = true;

            // Show iframe
            $iframe.css({ opacity: 1, visibility: 'visible' });

            // Destroy Loader
            $('#iframe-loader').fadeOut(250, function () {
                $(this).remove();
            });
        }

        // Ensure Iframe render
        $iframe.one('load', function () {
            setTimeout(() => {
                revealIframe();
            }, 800);
        });

        /**
         * Failsafe
         * Algunos embeds externos nunca completan correctamente el evento load.
         */
        setTimeout(() => {
            revealIframe();
        }, 5000);

    });
</script>
@endsection