{% extends "base.html.twig" %}
{% trans_default_domain 'core' %}

{% block actionheader %}

{% endblock %}

{% block searchform_container %}{% endblock %}

{% block body %}

    <article class="invoice-like">

        <header id="invoice-like-title" class="clearfix">
            {% block invoice_actions %}{% endblock %}
            {% block invoice_label %}{% endblock %}
        </header>

        {{ form_start(form, {'attr': {'class': 'form-stacked', 'id':'invoice' } }) }}

<input type="hidden" name="submit_action" id="submit_action">

        <div class="box pad box-warning">

            <div class="box-header with-border">

                <div class="btn-group">

                    <a href="{{ path('invoice_index') }}" class="btn btn-app">
                        <i class="glyphicon glyphicon-list-alt"></i>
                        Listado
                    </a>
                    <a href="{{ path('invoice_add') }}" class="btn btn-app">
                        <i class="glyphicon glyphicon-file"></i>
                        Nuevo
                    </a>


                    <a href="#" class="btn btn-app tutorial-btn animate-attention" data-toggle="modal"
                       data-target="#tutorialModal">
                        <i class="glyphicon glyphicon-play-circle"></i>
                        Tutoriales
                    </a>


                </div>

            </div>
            <div class="box-body">
                <div class="row">
                    <div id="invoice-like-customer-data" class="col-md-8">

                        {# <h3>{% trans %}abstract_invoice.form.customer{% endtrans %}</h3> #}

                        <div class="row">
                            <div class="col-md-3 col-xs-6 clearfix">
                                {{ form_row(form.series) }}
                            </div>
                            <div class="col-md-3 col-xs-6 clearfix">
                                {{ form_label(form.number) }}
                                {{ form_widget(form.number, {'value' : "%09d"|format(form.number.vars.value) }) }}
                            </div>
                            <div class="col-md-6 col-xs-12 clearfix">
                                {{ form_row(form.issue_date) }}
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4 clearfix">
                                <div class="form-group">
                                    {{ form_label(form.customer_identification) }}
                                    <div class="input-group">
                                        {{ form_widget(form.customer_identification) }}
                                        <span class="input-group-btn">
                                            <button id="buscarcli" type="button" class="btn btn-info btn-flat">
                                                <i class="glyphicon glyphicon-search"></i>
                                            </button>
                                        </span>
                                    </div>
                                    {{ form_errors(form.customer_identification) }}
                                </div>
                            </div>

                            <div class="col-md-8 clearfix">
                                {% if formcustomer is defined %}
                                    {{ form_label(form.customer_name) }}
                                    <div class="input-group">
                                        {{ form_widget(form.customer_name) }}
                                        <span class="input-group-btn">
                                          <button type="button" class="btn btn-success btn-flat" data-toggle="modal"
                                                  data-target="#modal-default"><i
                                                      class="glyphicon glyphicon-plus"></i></button>
                                        </span>
                                    </div>
                                    {{ form_errors(form.customer_name) }}
                                {% else %}
                                    {{ form_row(form.customer_name) }}
                                {% endif %}
                            </div>
                        </div>
                        {# <div class="col-md-6 clearfix">
                          {{ form_row(form.contact_person) }}
                        </div>
                        #}
                        <div class="row">
                            <div class="col-md-6 clearfix">
                                <div class="form-group">
                                    {{ form_label(form.customer_email) }}
                                    <div class="input-group">
                                <span class="input-group-addon"><span
                                            class="glyphicon glyphicon-envelope"></span></span>
                                        {{ form_widget(form.customer_email) }}
                                    </div>
                                    {{ form_errors(form.customer_email) }}
                                </div>
                            </div>

                            <div class="col-md-6 clearfix">
                                {{ form_row(form.invoicing_address) }}
                            </div>
                        </div>

                        {% if estransportista %}
                            <div class="row">
                                <div class="col-md-3 clearfix">
                                    {{ form_row(form.placa) }}
                                </div>
                            </div>
                        {% endif %}

                    </div>


                    <div id="invoice-like-properties" class="col-md-4" style="display: none; visibility: hidden;">
                        <div id="invoice-like-properties" class="col-md-4">
                            <div class="panel panel-default">
                                <h3 class="panel-heading">{% trans %}abstract_invoice.form.properties{% endtrans %}</h3>

                                <div class="panel-body form-inline">
                                    {% block properties_form %}{% endblock %}
                                </div>
                            </div>
                        </div>
                    </div>


                    {% block additional_form_data %}{% endblock %}
                </div>


                {% if movil is defined %}
                    {% include "Invoice/movil.item.twig" with {'entity': entity, 'form': form} %}
                {% else %}
                    {% include "Invoice/layout.item.twig" with {'entity': entity, 'form': form} %}
                {% endif %}

                <div id="invoice-like-notes" class="row">
                    {# <div class="col-md-6">
                      {{ form_row(form.terms) }}
                    </div>
                    #}
                    <div class="col-md-12">
                        {{ form_row(form.notes) }}
                    </div>
                </div>
                <div id="invoice-like-notes" class="row">
                    {# <div class="col-md-6">
                      {{ form_row(form.terms) }}
                    </div>
                    #}
                    <div class="col-md-12">
                        {{ form_row(form.note1) }}
                    </div>
                </div>

                {% if entity.statusString != 'anulado' and entity.statusString != 'autorizado' %}
                    <button type="submit" class="btn btn-success" name="savesend" id="btn-save">
                        <i class="fa fa-save"></i>&nbsp;Guardar y Enviar SRI
                    </button>&nbsp;&nbsp;
                    <button type="submit" class="btn btn-info" name="save">
                        <i class="fa fa-save"></i>&nbsp;Guardar
                    </button>
                {% endif %}

                {{ form_rest(form) }}

            </div>

        </div>


        <style>
            @keyframes pulse-grow {
                0% {
                    transform: scale(1);
                }
                50% {
                    transform: scale(1.1);
                }
                100% {
                    transform: scale(1);
                }
            }

            .animate-attention {
                animation: pulse-grow 1.8s ease-in-out infinite;
            }

            .tutorial-btn {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                cursor: pointer;
            }

            .tutorial-btn:hover {
                transform: scale(1.15);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            }

            @media (max-width: 768px) {
                .tutorial-btn {
                    font-size: 14px;
                    padding: 10px;
                }
            }

            .video-thumbnails {
                display: flex;
                overflow-x: auto;
                padding-top: 15px;
                gap: 10px;
            }

            .video-thumbnails img {
                cursor: pointer;
                max-width: 150px;
                height: auto;
                border: 2px solid transparent;
                border-radius: 6px;
                transition: border-color 0.3s ease;
            }

            .video-thumbnails img:hover,
            .video-thumbnails img.active {
                border-color: #007bff;
            }

            @media (max-width: 768px) {
                .video-thumbnails {
                    flex-direction: column;
                    align-items: center;
                }

                .video-thumbnails img {
                    max-width: 90%;
                }
            }
        </style>

        <!-- Bot贸n animado que abre el modal -->
        <a href="#" class="btn btn-app tutorial-btn animate-attention" data-toggle="modal" data-target="#tutorialModal">
            <i class="glyphicon glyphicon-play-circle"></i>
            Tutoriales
        </a>

        <!-- Modal con videos -->
        <div class="modal fade" id="tutorialModal" tabindex="-1" aria-labelledby="tutorialModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title" id="tutorialModalLabel">馃摌 Tutoriales de Facturaci贸n Electr贸nica</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <div class="embed-responsive embed-responsive-16by9 mb-3">
                            <iframe id="mainVideoFrame"
                                    class="embed-responsive-item"
                                    src="https://www.youtube.com/embed/fnT4HUOlruk"
                                    allowfullscreen></iframe>
                        </div>

                        <div class="video-thumbnails">
                            <img src="https://img.youtube.com/vi/fnT4HUOlruk/hqdefault.jpg" data-video="fnT4HUOlruk"
                                 alt="C贸mo llenar factura" class="active">
                            <img src="https://img.youtube.com/vi/i1pz-WkIjAs/hqdefault.jpg" data-video="i1pz-WkIjAs"
                                 alt="Anular factura">
                            <img src="https://img.youtube.com/vi/WmGZOqbxqbI/hqdefault.jpg" data-video="WmGZOqbxqbI"
                                 alt="Modificar cliente">
                            <img src="https://img.youtube.com/vi/Gm9D7AmyH5Y/hqdefault.jpg" data-video="Gm9D7AmyH5Y"
                                 alt="Agregar productos">
                            <img src="https://img.youtube.com/vi/wk0_1H8KmeU/hqdefault.jpg" data-video="wk0_1H8KmeU"
                                 alt="Subir firma electr贸nica">
                        </div>
                    </div>
                </div>
            </div>
        </div>


        {{ form_end(form) }}

        <div class="modalwait">

        </div>

    </article>

    {% if cambioplan is defined and cambioplan  == true %}
        {% if formcambioplan is defined %}

            {% include "Invoice/cambioplan.html.twig" %}

        {% endif %}
    {% endif %}

    {% include "Core/customer.form.html.twig" %}

{% endblock %}

{% block javascripts %}
    {{ parent() }}



    <!-- Modal video -->
    <script>
        $(document).ready(function () {
            var $thumbnails = $('.video-thumbnails img');
            var $mainFrame = $('#mainVideoFrame');

            $thumbnails.click(function () {
                var videoId = $(this).data('video');
                $mainFrame.attr('src', 'https://www.youtube.com/embed/' + videoId);

                // Marca el thumbnail activo
                $thumbnails.removeClass('active');
                $(this).addClass('active');
            });

            // Limpiar video al cerrar el modal
            $('#tutorialModal').on('hidden.bs.modal', function () {
                $mainFrame.attr('src', '');
                $thumbnails.removeClass('active');
            });

            // Restaurar video inicial y thumbnail activo al abrir modal
            $('#tutorialModal').on('shown.bs.modal', function () {
                $mainFrame.attr('src', 'https://www.youtube.com/embed/fnT4HUOlruk');
                $thumbnails.removeClass('active');
                $thumbnails.filter('[data-video="fnT4HUOlruk"]').addClass('active');
            });
        });
    </script>

    <script src="{{ asset('js/products.js') }}"></script>
    <script src="{{ asset('js/invoices-common.js') }}"></script>

   <script>

jQuery(function ($) {
    $(document).on('change', '.edit-item-row select, .edit-item-row input', function () {
        updateInvoiceTotals('{{ path('invoice_form_totals') }}', $(this).parents('tr'));
    });
});

document.addEventListener('DOMContentLoaded', function () {

    const form = document.getElementById('invoice');

    if (!form) return;

    // Detectar qué botón se presionó
    document.querySelectorAll('button[type="submit"]').forEach(btn => {
        btn.addEventListener('click', function () {

            const hidden = document.getElementById('submit_action');
            if (hidden) {
                hidden.value = this.name;
            }

        });
    });

    form.addEventListener('submit', function () {

        // Esperar un momento para que el navegador envíe el botón presionado
        setTimeout(function(){

            const buttons = form.querySelectorAll('button[type="submit"]');

            buttons.forEach(btn => {
                btn.disabled = true;
            });

            const btnSave = document.getElementById('btn-save');

            if (btnSave) {
                btnSave.innerHTML =
                    '<i class="fa fa-spinner fa-spin"></i>&nbsp;Enviando al SRI...';
            }

            $('.modalwait').show();

        },100);

    });

});

</script>

{% endblock %}