{% extends "AppBundle::layout_backend.html.twig" %}

{% block stylesheets2nd %}

    {# <link href="https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.min.css" rel="stylesheet">#}

    {% stylesheets %}
        <link rel="stylesheet" href="{{ asset_url }}"/>
    {% endstylesheets %} 

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css"/>

{% endblock %}

{% block bootstrap_stylesheets %}
    <link 
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" 
        crossorigin="anonymous"
    >
{% endblock %}

{% block bootstrap_javascript %}
    <script 
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" 
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" 
        crossorigin="anonymous">
    </script>
{% endblock %}

{% block content %}
    {% stylesheets 'bundles/app/css/views/Order/index.css' filter='cssrewrite' %}
        <link rel="stylesheet" href="{{ asset_url }}"/>
    {% endstylesheets %}
    <div class="box">
        <div class="box-body">
            <div class="row">
                {% include 'AppBundle:Ordenes:filter_cards.html.twig' with {'cards': cards } %}
                {% include 'AppBundle:Ordenes:index/header_options.html.twig' with {'seller': seller } %}
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="filters-applied"></div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-2" id="select-all-container" hidden>
                    <div class="card card-body bg-light" style="margin: 0; padding: 10px; border: 1px solid #ddd;">
                        <div class="d-flex align-items-center justify-content-start">
                            <span id="selectedItemsInfo" class="text-muted">No hay elementos seleccionados.</span>
                            <a id="selectAllHref" href="#" class="text-primary ml-3"></a>
                        </div>
                    </div>
                </div>
                <div class='col-lg-12 col-md-12 col-sm-12 col-xs-12 pt-2'>
                    <div class="card card-body" style="margin: 0; padding: 0;">
                        <table id='ordersTable' class="table mb-0">
                            <thead class="table-light">
                                <tr>
                                    {% set tableColumnsWidth = {
                                        'checkAllRecords'   : 2,
                                        'reference'         : 15,
                                        'date'              : 8,
                                        'client'            : 15,
                                        'comments'          : 2,
                                        'total'             : 9,
                                        'products'          : 9,
                                        'status'            : 9,
                                        'shipping'          : 15,
                                        'sync'              : 8,
                                        'actions'           : 8,
                                    } %}
                                    <th style="width:{{ tableColumnsWidth.checkAllRecords }}%;" scope="col">
                                        <label>
                                            <input type="checkbox" id="checkAllRecords">
                                        </label>
                                    </th>
                                    <th style="width:{{ tableColumnsWidth.reference }}%;" scope="col" >ID Venta</th>
                                    <th style="width:{{ tableColumnsWidth.date }}%;" scope="col">Fecha</th>
                                    <th style="width:{{ tableColumnsWidth.client }}%;" scope="col">Cliente</th>
                                    <th style="width:{{ tableColumnsWidth.comments }}%;" scope="col"></th>
                                    <th style="width:{{ tableColumnsWidth.total }}%;" scope="col">Total</th>
                                    <th style="width:{{ tableColumnsWidth.products }}%;" scope="col">Productos</th>
                                    <th style="width:{{ tableColumnsWidth.status }}%;" scope="col">Estado</th>
                                    <th style="width:{{ tableColumnsWidth.shipping }}%;" scope="col">Envío</th>
                                    <th style="width:{{ tableColumnsWidth.sync }}%; text-align: center" scope="col">Sincro. ERP</th>
                                    <th style="width:{{ tableColumnsWidth.actions }}%; text-align: center;" scope="col">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="12" style="text-align: center;height:50px; vertical-align:middle;">
                                        <i class="fa fa-circle-o-notch fa-spin loading"></i> Cargando órdenes...
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="text-center" id="orderPaginationDiv">
                        <nav aria-label="Paginado" id="orderPagination"></nav>
                    </div>
                </div>
            </div>
            {% include 'AppBundle:Ordenes:index/syncro_modal.html.twig' %}
            {% include 'AppBundle:Ordenes:index/filter_box_modal.html.twig' %}
            {% include 'AppBundle:Ordenes:index/comments_box_modal.html.twig' %}
            {% include 'AppBundle:Ordenes:index/create_order_modal.html.twig' %}
            {% include 'AppBundle:Ordenes:index/transition_modal.html.twig' %}
            {% include 'AppBundle:Ordenes:index/massive-comments_modal.html.twig' %}
        </div>
    </div>

    <script>
        const routes = {
            simpleProductEdit: "{{ path('ProductViewsController_simpleProductEditView', { 'id': 'REPLACE_ID' }) }}",
            comboProductEdit: "{{ path('ProductViewsController_comboProductEditView', { 'id': 'REPLACE_ID' }) }}",
            variantProductEdit: "{{ path('ProductViewsController_variantProductEditView', { 'id': 'REPLACE_ID' }) }}"
        };
        const defaultSearch = "{{xsearch}}";
    </script>

{% endblock %}

{% block javascripts2nd %}
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

    {% javascripts 
        '@AppBundle/Resources/public/js/Ordenes/indexHelper.js'
        '@AppBundle/Resources/public/js/Ordenes/cardFilterHelper.js'
     %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}