{% 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
        'bundles/app/css/filepond.css'
        'bundles/app/css/filepond.min.css'
        'bundles/app/css/filepond-plugin-image-preview.min.css'
        filter='cssrewrite' 
    %}
        <link rel="stylesheet" href="{{ asset_url }}"/>
    {% endstylesheets %} 
    
{% 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 title 'Orden ' ~ order.getReferenceorden() ~ ' - ' ~ order.getEmpresamarketplace().getMarketplace() |trans %}

{% block content_header %}
    <div style="text-align: end;">
        {% if seller_id == 185 %}
        <a type="button" class="btn btn-custom-secondary" href="?oldEdit=1">Volver a la vista antigua</a>
        {% endif %}
        <a type="button" class="btn btn-custom-primary" href="{{ path('app_orden') }}">Volver</a>
    </div>
{% endblock %}

{% block content %}
    {% stylesheets 
        'bundles/app/css/new-boostrap-common-styles.css'
        'bundles/app/css/views/Order/edit.css' 
    filter='cssrewrite' %}
        <link rel="stylesheet" href="{{ asset_url }}"/>
    {% endstylesheets %}

    <div class="box">
        <div class="box-body">
            <input type="hidden" id="orden_id" value="{{ order.getId() }}"/>
            <input type="hidden" id="order_reference" value="{{ order.getReferenceorden() }}"/>
            <div class="row">
                <div class="col-sm-12 col-md-8 col-lg-8">
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-6 col-lg-6 p-1">
                            {% set marketplace = order.getEmpresamarketplace().getMarketplace() %}
                            {% include "AppBundle:Ordenes:edit/components/principal_panel.html.twig"
                                with {
                                    'marketplace_icon': marketplace.getLogo(), 
                                    'marketplace_name': marketplace.getNombre(),  
                                    'impacted_provider': order.getImpactadaProveedor(), 
                                    'reference': order.getReferenceorden(), 
                                    'order_id_marketplace': order.getOrderIdOnMarket(),
                                    'order_date': order.getDateAdd().format('Y-m-d H:i'),
                                    'current_color': order.getCurrentColor(),
                                    'order_id': order.getId()
                                } 
                            %}
                        </div>
                        <div class="col-12 col-sm-12 col-md-6 col-lg-6 p-1">
                            {% set total_discount = 0 %}
                            {% for d in discounts %}
                                {% set total_discount = total_discount + d.unit_price_with_taxes %}
                            {% endfor %}
                            {% include "AppBundle:Ordenes:edit/components/prices_panel.html.twig" 
                                with {
                                    'subtotal_products': order.getTotalproductos(),
                                    'subtotal_shipping': order.getTotalshipping(),
                                    'financial_cost': order.getFinancialCost(),
                                    'discount': total_discount,
                                    'total': order.getTotalpaid() + total_discount
                                }
                            %}
                        </div>

                        <div class="col-12 col-sm-12 p-1">
                            {% include "AppBundle:Ordenes:edit/components/products_panel.html.twig" 
                                with {

                                }
                            %}
                        </div>

                        <div class="col-12 col-sm-12 p-1">
                            {% include "AppBundle:Ordenes:edit/components/shippings_panel.html.twig" 
                                with {
                                    'packages' : packages,
                                    'shipping_data': order.getCliente(),
                                    'warehouses' : warehouses
                                }
                            %}
                        </div>

                        <div class="col-12 col-sm-12 p-1">
                            {% include "AppBundle:Ordenes:edit/components/payments_panel.html.twig" 
                                with {
                                    'payments': payments
                                }
                            %}
                        </div>

                    </div>
                </div>

                <div class="col-sm-12 col-md-4 col-lg-4">
                    <div class="row">
                        <div id="incident-render-block" style="padding:0px;">
                            <div class="col-12 col-sm-12 p-1" {% if not order_incident %}style="display:none;"{% endif %}>
                                {% include "AppBundle:Ordenes:edit/components/incidents_panel.html.twig" 
                                    with {
                                        'order_incident': order_incident
                                    }
                                %}
                            </div>
                        </div>
                        <div class="col-12 col-sm-12 p-1">
                            {% include "AppBundle:Ordenes:edit/components/comments_panel.html.twig" 
                                with {
                                    'order_comments': order_comments
                                }
                            %}
                        </div>
                        <div class="col-12 col-sm-12 p-1">
                            {% include "AppBundle:Ordenes:edit/components/client_panel.html.twig" 
                                with {
                                    'billing_data': order.getFacturacion(),
                                    'shipping_data': order.getCliente()
                                }
                            %}
                        </div>
                        {% if andreani_panel %}
                        <div class="col-12 col-sm-12 p-1">
                            {% include "AppBundle:Ordenes:edit/components/andreani_panel.html.twig" 
                                with {
                                    'shipping_number' : order.getShippingNumber()
                                }
                            %}
                        </div>
                        {% endif %}
                        <div class="col-12 col-sm-12 p-1">
                            {% include "AppBundle:Ordenes:edit/components/documents_panel.html.twig" 
                                with {
                                    'document_types' : document_types
                                }
                            %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="position-fixed bottom-0 end-0 p-3" id="toast-container-edit-order" style="z-index: 200000">
    </div>

    <div class="offcanvas offcanvas-end offcanvas-custom-width" id="incidentOffcanvas" tabindex="-1" aria-labelledby="incidentOffcanvasLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="incidentOffcanvasLabel">Nueva Incidencia</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="mb-3">
                <label for="incidentType" class="form-label">Tipo de incidencia</label>
                <select id="incidentType" class="form-select" aria-describedby="incidentTypeHelp">
                    {% for incident_type in incidents_types %}
                    <option value="{{incident_type.getId()}}">{{incident_type.getName()}}</option>
                    {% endfor %}
                </select>
                <div id="incidentTypeHelp" class="form-text">Para crear tipos de incidencia hacer click <a href="{{ path('SellerController_indexView') }}">aquí</a></div>
            </div>
            <div class="mb-3">
                <label for="incidentComment" class="form-label">Detalle</label>
                <input type="text" class="form-control" id="incidentComment">
            </div>
        </div>
        <div class="offcanvas-footer mt-auto p-3 text-end">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="offcanvas">Cerrar</button>
            <button type="button" class="btn btn-custom-primary save" data-url="{{path('app_order_incident_new', {'orderId': 'ORDER_ID'})}}">Guardar</button>
        </div>
        <div class="spinner-container d-none" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">
            <div class="spinner-border" role="status" style="color: #00554e;">
                <span class="sr-only">Cargando...</span>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('*[data-currency-number]').forEach(number => {
                var value = parseFloat(number.getAttribute('data-currency-number'));
                value = isNaN(value) ? 0 : value;
                number.innerText = new Intl.NumberFormat('es-AR', { style:'currency', currency: 'ARS' }).format(value);
            });
        });
    </script>

{% endblock %}

{% block javascripts2nd %}

    {% javascripts
        '@AppBundle/Resources/public/js/Filepond/filepond-plugin-pdf-preview.min.js'
        '@AppBundle/Resources/public/js/Filepond/filepond-plugin-image-preview.min.js'
        '@AppBundle/Resources/public/js/Filepond/filepond-plugin-image-exif-orientation.min.js'
        '@AppBundle/Resources/public/js/Filepond/filepond-plugin-file-validate-size.min.js'
        '@AppBundle/Resources/public/js/Filepond/filepond-plugin-file-validate-type.min.js'
        '@AppBundle/Resources/public/js/Filepond/filepond-plugin-file-encode.min.js'
        '@AppBundle/Resources/public/js/Filepond/filepond-plugin-file-metadata.min.js'
        '@AppBundle/Resources/public/js/Filepond/filepond.min.js'
    %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}

{% endblock %}

{% block javascripts3rd %}
{% endblock %}