{% extends 'base_admin.html.twig' %}
{% form_theme form 'bootstrap_4_layout.html.twig' %}
{% block body %}
    <div class="breadcrumb-holder">
        <div class="container-fluid">
            <ul class="breadcrumb">

                <li class="breadcrumb-item active">Shipments</li>
            </ul>
        </div>
    </div>
    <div class="container-fluid">
        <div id="defaultAlert" class="alert alert-success" role="alert" style="display: none;"></div>

        {% for message in app.flashes('notice') %}
            <br/>
            <div class="alert alert-success" role="alert">
                {{ message }}
            </div>
        {% endfor %}
        {% for message in app.flashes('error') %}
            <br/>
            <div class="alert alert-danger" role="alert">
                {{ message }}
            </div>
        {% endfor %}
        <br/>
        <div class="alert alert-danger" id="alertDanger" style="display: none;" role="alert"></div>

        <!-- Actions -->
        {% include 'order_shipment/_actions.html.twig' %}

        <br/>
        <!-- Filters -->
        {% include 'order_shipment/_filters.html.twig' %}



    <div id="orderContainer">
    </div>
    <div class="js-routes"
    data-shipments-route="{{ path('orders_list') }}"
         data-clone-order-form-route="{{ path('clone_order_form') }}" data-update-orders-month-route="{{ path('update_orders_for_month') }}"></div>

    <form method="post" id="deleteForm" action="{{ path('shipment_delete') }}">
        <input type="hidden" name="id" id="id_shipment"/>
    </form>

    <div class="modal fade" id="cloneModal" tabindex="-1" role="dialog" aria-labelledby="cloneModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Clone order <span id="orderToClone"></span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="cloneFormContainer">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary submit">Save</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modals -->
    {% include 'order_shipment/modal_export_orders.html.twig' %}
    {% include 'order_shipment/modal_confirm_payment_orders.html.twig' %}
    {% include 'order_shipment/modal_export_transfers.html.twig' %}
    {% include 'order_shipment/modal_export_total_skus.html.twig' %}
    {% include 'order_shipment/modal_export_report_cost.html.twig' %}
    {% include 'order_shipment/modal_export_report_sales.html.twig' %}

{% endblock %}
{% block javascripts %}
    <script src="{{ asset('js/app/order_shipment/index_filters_v26.js') }}"></script>
    <script src="{{ asset('js/bootstrap3-typeahead.min.js') }}"></script>
    <script>
        //Por alguna raz�n no funciona si se pone en index_filters
        function deleteConfirm(shipment, id) {
            var r = confirm("Are you sure to delete the shipment <" + shipment + "> and all of its lines?");
            if (r == true) {
                $("#id_shipment").val(id);
                $("#deleteForm").submit();
            }
        }

        var route = null;

        $(document).ready(function() {
            var timeout;
            var input = $('.typeahead');
            input.typeahead({
                source: function (query, process) {
                    if (timeout) {
                        clearTimeout(timeout);
                    }
                    timeout = setTimeout(function () {
                        return $.get("{{ path('product_search_orders') }}", {search: query, seller: $("#order_shipment_filter_seller").val()}, function (data) {
                            return process(data.source);
                        }, 'json');
                    }, 300);
                }
                ,
                afterSelect: function (data) {
                    $('#order_shipment_filter_product').val(data.id);
                }
            });
        });

        $('.submit').click(function() {
            $.post(route, $("#clone_form").serialize(), function (data, status) {
                if (status == 'success') {
                    window.location.href = data.url;
                } else {
                    $('#cloneFormContainer').html('<p style="color: red;">An error occurred while loading the form...</p>');
                    console.log(status + ' ' + data);
                }
            }).fail(function (error) {
                $('#cloneFormContainer').html('<p style="color: red;">An error occurred while loading the form...</p>');
                console.log(error);
            });
        });

        $('#orderContainer').on('click', '#clone-order-btn', function() {
            var orderShipmentId = $(this).data('id');
            route = $(".js-routes").data().cloneOrderFormRoute + '?id='+orderShipmentId;
            $("#orderToClone").text($(this).data('orderId'));
            $("#cloneModal").modal();
            $("#cloneFormContainer").html("Loading form...");
            $.get(route, function (data, status) {
                if (status == 'success') {
                    $('#cloneFormContainer').html(data);
                } else {
                    $('#cloneFormContainer').html('<p style="color: red;">An error occurred while loading the form...</p>');
                    console.log(status + ' ' + data);
                }
            }).fail(function (error) {
                $('#cloneFormContainer').html('<p style="color: red;">An error occurred while loading the form...</p>');
                console.log(error);
            });
        });
    </script>
{% endblock %}