{% extends '@EasyAdmin/default/show.html.twig' %}
{% block head_stylesheets %}
    {{parent()}}
    <style>
        .select2-container--default .select2-selection--single{
        border: transparent !important;
    }
    </style>
{% endblock %}

{% block actions_tabs %}
<div class="row nav-action-tab nav-product-detail" id="nav-tab" role="tablist">
    <ul class="nav nav-material nav-material-white responsive-tab" id="v-pills-tab" role="tablist">
        <div class="global-actions"></div>
        <li>
            <a class="nav-link nav-item active" id="v-pills-clients-tab" title="{{ 'details'| trans }}" href="#product_details" data-toggle="tab" role="tab" aria-controls="home" aria-selected="true">
                <span class="link-new">
                    {{ 'detail'| trans }}        
                </span>
            </a>
        </li>
        <li>
            <a class="nav-link nav-item" title="{{ 'orderReturns.title'| trans }}" href="{{path('easyadmin',{'action':'list', 'entity':'OrderReturnClient'})}}">
                <span class="link-new">
                    {{ 'orderReturns.title'| trans }}    
                </span>
            </a>
        </li>  
        {% if  is_granted('ROLE_EMPLOYEE') %}
            <li>
                <a class="nav-link nav-item" title="{{ 'orderReturns.new_title'| trans }}" href="{{ path('app_order_returns_crate') }}" type="button">
                    <span class="link-new">
                        {{'orderReturns.new_title'|trans}}
                    </span>
                </a>
            </li>  
        {% endif %}
    </ul>
</div>
  
{% endblock actions_tabs %}

{% block title_entity %}
    {{parent()}} #{{entity.numberReturn}} {{entity.client.username}}
{% endblock %}

{% block content %}
    <div class="content container-fluid animatedParent animateOnce infoClient">
        <div class="card r-0 shadow my-3">
            <section class="content-header ">
                <div class="d-flex flex-row justify-content-between align-content-center w-100">
                    <div class="content-header-title">
                        <h1 class="title">   </h1>
                        <h3>{% trans %}Client data{% endtrans %}</h3>
                    </div>

                </div>
            </section>
            <div class="card-body">
                <div class="row info-client">
                    <div class="col-md-4 pointer" data-toggle="tooltip" data-placement="bottom" title="{{'orderReturns.message_create_order_return'|trans()}}">
                        {{'provider_ea.show.companyName'|trans()}} <i class="fa fa-exclamation-circle rol-user" aria-hidden="true"></i>
                        <br><br>
                        <strong class="card-title label-black" id="cif">{{entity.client.companyName}}</strong>
                    </div>
                    <div class="col-md-4">
                        CIF
                        <br><br>
                        <strong class="card-title label-black">{{entity.client.cif}}</strong>
                    </div>
                    <div class="col-md-4">
                        {{'provider_ea.show.billingAddress'|trans()}}
                        <br><br>
                        <img class="img-message-order" src="{{asset('img/logo-google-maps.png')}}" alt="">
                        <strong class="card-title label-black">{{entity.client.billingAddress}}</strong>
                    </div>
                </div>
                <div class="row info-client">
                    <div class="col-md-4">
                        {{'provider_ea.show.phone'|trans()}}
                        <br><br>
                        <strong class="card-title label-black">{{entity.client.phone}}</strong>
                    </div>
                    <div class="col-md-4">
                        {{'provider_ea.show.mobile'|trans()}}
                        <br><br>
                        <strong class="card-title label-black">{{entity.client.mobile}}</strong>
                    </div>
                    <div class="col-md-4">
                        {{'provider_ea.show.email'|trans()}}
                        <br><br>
                        <strong class="card-title label-black">{{entity.client.email}}</strong>
                    </div>
                </div>
            </div>
        </div>
        <br><br>

        <div class="card r-0 shadow my-3 mb-5">
            <section class="content-header ">           
                <div class="d-flex flex-row justify-content-between align-content-center w-100">
                    <div class="content-header-title">
                        <h1 class="title">   </h1>
                        <h3>{% trans %}orderReturns.return_data{% endtrans %}</h3>

                        <a href="#" role="button" aria-expanded="false" class="absolute fab-top">
                            {{ include('admin/order_returns/order_state.html.twig', { 'item': entity }) }}
                            {# {% if entity.state == 1 %}
                                <span class="badge badge-secondary text-wrap" style="width: 90px; font-size: 75%; font-weight: 300; margin-right: 0px !important; background-color: #00E5FF;">
                                    {{'orderReturns.refund_requested'|trans}}
                                </span>
                            {% elseif entity.state == 2 %}
                                <span class="badge badge-warning text-wrap" style="width: 90px; font-size: 75%; font-weight: 300; margin-right: 0px !important;">{{'orderReturns.partial_refund'|trans}}</span>
                            {% elseif entity.state == 3 %}
                                <span class="badge badge-success text-wrap" style="width: 90px; font-size: 75%; font-weight: 300; margin-right: 0px !important;">{{'orderReturns.return_received'|trans}}</span> 
                            {% endif %} #}
                        </a>

                    </div>
                </div>
                <div>
                    {% if entity.additionaNote %}
                        <div class="alert alert-primary mt-3" role="alert">
                            {% if is_granted('ROLE_CLIENT_USER') %}
                                <p class='mb-0'><b>{{ 'orderReturns.note_to_customer_troa'|trans }}</b></p>
                            {% else %}
                                <p class='mb-0'><b>{{ 'orderReturns.note_to_customer'|trans }}</b></p>
                            {% endif %}
                            <p class='mb-0'>{{entity.additionaNote|raw}}</p>
                        </div>
                    {% endif %}
                    <br>
                    <h3 class="card-title label-black">{{ 'product list'|trans }}</h3>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">{{ 'product_ea.form.sku'|trans }}</th>
                                    <th scope="col">{{ 'product name'|trans|capitalize }}</th>
                                    <th scope="col">{{ 'orderReturns.stock'|trans|capitalize }}</th>
                                    <th scope="col">{{ 'price'|trans|capitalize }}</th>
                                    <th scope="col" style="width: 120px;">{{ 'orderReturns.quantity'|trans|capitalize }}</th>
                                    <th scope="col">{{ 'amount'|trans|capitalize }}</th>
                                    <th scope="col">
                                    {% if  is_granted('ROLE_CLIENT_USER') %}
                                        {{'delivered'|trans}}
                                    {% else %}
                                        {{ 'orderReturns.received'|trans|capitalize }}
                                    {% endif %}
                                    </th>
                                    <th scope="col">
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="productsSelect">
                                {% set priceSymbol = '€' %}
                                {% if is_granted('ROLE_ADMIN') %}
                                {% elseif is_granted('ROLE_PROVIDER') %}
                                    {% if app.user.country %}
                                        {% set priceSymbol = app.user.country.moneySymbol %}
                                    {% endif %}
                                {% elseif is_granted('ROLE_CLIENT_USER') %}
                                    {% if entity.provider.country is defined %}
                                        {% set priceSymbol = entity.provider.country.moneySymbol %}
                                    {% else %}
                                        {% set priceSymbol = entity.externalProvider.moneySymbol %}
                                    {% endif %}
                                {% else %}
                                    {% if app.user.provider.country %}
                                        {% set priceSymbol = app.user.provider.country.moneySymbol %}
                                    {% endif %}
                                {% endif %}
                                {% for product in entity.arrayProducts %}
                                    {% set cantRecived = 0 %}
                                    {% if product.quantity_received is defined %}
                                        {% set cantRecived = product.quantity_received %}
                                    {% endif %}
                                    <tr>
                                        <td>
                                            {% if product.image is defined  %}
                                                {% if product.image != ''  %}
                                                    <div class='d-flex'>
                                                        <div class="image mr-3">
                                                            <a href="#" class="easyadmin-thumbnail" data-featherlight="#easyadmin-lightbox-{{ product.id }}" data-featherlight-close-on-click="anywhere">
                                                                <img class="image-product-list" style="max-width: 7em !important;" src="{{asset('uploads/images/products/'~ product.image)}}" >
                                                            </a>
                                                        </div>
                                                    </div>

                                                    <div id="easyadmin-lightbox-{{product.id}}" class="easyadmin-lightbox">
                                                        <img src="{{asset('uploads/images/products/'~ product.image)}}">
                                                    </div>
                                                {% else %}
                                                    <img class="image-product-list" style="max-width: 7em !important;" src="{{asset('img/product.png')}}" alt="" >
                                                {% endif %}
                                            {% else %}
                                                <img class="image-product-list" style="max-width: 7em !important;" src="{{asset('img/product.png')}}" alt="" >
                                            {% endif %}
                                        </td>
                                        <td> {{product.sku}}</td>
                                        <td><p class='mb-0 avatar-name view-product' style="white-space: break-spaces;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; font-size: 14.5px !important;"> {{product.name}}</p></td>
                                        
                                        <td>{{product.stock}}</td>
                                        <td>
                                            {% set product_price = product.price|round(2, 'floor')  %}
                                            {{
                                                priceSymbol == '€' ? product_price ~ ' ' ~ priceSymbol :
                                                priceSymbol == '$' ? priceSymbol ~ ' ' ~ product_price :
                                                product_price
                                            }}
                                        </td>
                                        <td>
                                            {{product.quantity}}
                                        </td>
                                        <td>
                                            {% set product_amount = product.price * product.quantity|round(2, 'floor')  %}

                                            {{
                                                priceSymbol == '€' ? product_amount ~ ' ' ~ priceSymbol :
                                                priceSymbol == '$' ? priceSymbol ~ ' ' ~ product_amount :
                                                product_amount 
                                            }}
                                        </td>
                                        <td>
                                            {% if  is_granted('ROLE_CLIENT_USER') %}
                                                {{cantRecived}}
                                            {% else %}
                                                {% if  cantRecived != product.quantity %}
                                                    <input type="number" style="width:50px;text-align: center;" data-id="{{product.id}}" data-max="{{product.quantity}}"  data-recived="{{cantRecived}}" class='quantity_received' id="quantity_received_{{product.id}}" value="{{cantRecived}}" min="{{cantRecived}}" max='{{product.quantity}}' name="quantity_received" size="5" onchange="handleCambiarRecibido(this)"/>
                                                {% else %}
                                                    {{cantRecived}}
                                                {% endif %}
                                            {% endif %}
                                        </td>
                                        <td class='text-center'>
                                            {# orderClientActivity.received
                                            pending #}
                                            {# {% if  is_granted('ROLE_CLIENT_USER') %}
                                                {% if product.received is defined and product.received %}
                                                    <span class="badge badge-success text-wrap" style="width: 90px; font-size: 75%; font-weight: 300; margin-right: 0px !important;">{{'delivered'|trans}}</span>
                                                {% else %}
                                                    <span class="badge badge-warning text-wrap" style="width: 90px; font-size: 75%; font-weight: 300; margin-right: 0px !important;">{{'pending'|trans}}</span>
                                                {% endif %}
                                            {% else %} #}
                                                {% if product.received is defined and product.received %}
                                                    <i class="fa fa-check-square rol-user" style='font-size: 19px;' aria-hidden="true"></i>
                                                {% else %}
                                                    <i class="fa fa-check-square" style='font-size: 19px; color: #c5c5c5;' aria-hidden="true"></i>
                                                    {# <input type="checkbox" class="form-batch-checkbox checkbox-product" value="{{entity.id}},{{product.id}}"> #}
                                                {% endif %}
                                            {# {% endif %} #}
                                        </td>
                                        
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <div id="cont_alert"></div>

                {# <div class="my-3">
                    <button type="button" class="btn btn-primary" id="create_order" onclick="realizarPedido()">
                        {{'orderReturns.request_a_refund'|trans()}}
                        <div class="spinner-border d-none" id="spinner_create" role="status" >
                            <span class="sr-only">Loading...</span>
                        </div>
                    </button>
                </div> #}
            </section>
        </div>

    </div>

    {% if is_granted('ROLE_PROVIDER') or is_granted('ROLE_SUB_PROVIDER') %}
        <a href="#!" id='marcarCobrado' onclick='openModalCobrado()' class="btn-fab fab-right fab-right-bottom-fixed shadow btn-icon-plus" style='color:#fff !important'>
            {{'orderReturns.receive'|trans|raw}}
        </a>
    {% endif %}

    <div class="modal" tabindex="-1" role="dialog" id="modalCharge">
        <div class="modal-dialog" role="document" style="margin-top: 9rem;">
            <div class="modal-content">
                <div class="modal-body" id='modalBodyError'>
                    <h5 class="mb-2">
                        {{'orderReturns.modal_receive_header'|trans}}
                    </h5>
                    <p>{{'orderReturns.modal_receive_body'|trans}}</p>

                    <div id='cont_alert_modal_delete'>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary text-capitalize" data-dismiss="modal">{{'Calendar.Cancel'|trans}}</button>
                    <button type="button" class="btn btn-primary text-capitalize" onclick='handleMarcarCobrado()'>
                        {{'Accept'|trans}}
                        <div class="spinner-border d-none" id="spinner_delete_rate" role="status" >
                            <span class="sr-only">Loading...</span>
                        </div>
                    </button>
                </div>
            </div>
        </div>
    </div>
    {% include "/admin/order_returns/create/createOrder_css.html.twig" %} 
{% endblock %}

{% block body_javascript %}
    {{parent()}}

    <script>
        var totalArrayProducts = {{entity.arrayProducts|length}};
        var productsToCharge = [];
        $(".checkbox-product").change(function () {
            productsToCharge = [];
            $('.checkbox-product:checked').each(function() {
                productsToCharge.push({id: $(this).val()})
            });

            if(productsToCharge.length > 0){
                $('#marcarCobrado').removeClass('d-none')
            }else{
                $('#marcarCobrado').addClass('d-none')
            }

            if(productsToCharge.length != totalArrayProducts){
                $(".checkbox-product-all").prop('checked', false);
            }
        })

        $(".checkbox-product-all").click(function(event){
            console.log(`test, ${totalArrayProducts}`)

            if($(this).is(":checked")) {
                $(".checkbox-product").prop('checked', true);
            }else{
                $(".checkbox-product").prop('checked', false);
            }

            let productsToCharge = [];
            $('.checkbox-product:checked').each(function() {
                productsToCharge.push({id: $(this).val()})
            });

            if(productsToCharge.length > 0){
                $('#marcarCobrado').removeClass('d-none')
            }else{
                $('#marcarCobrado').addClass('d-none')
            }
        });

        function openModalCobrado(){
            $('#modalCharge').modal();
        }

        function handleCambiarRecibido(element) {
            // Obtener el valor del campo actual
            var value = parseFloat($(element).val());
            
            // Obtener el atributo data-id del campo actual
            var dataId = $(element).data('id');
            var dataMax = $(element).data('max');
            var recived = $(element).data('recived');

            if(value > dataMax){
                $(element).val(dataMax)
                value = dataMax;
            }
            
            if(value < recived){
                $(element).val(recived)
                value = recived;
            }
            
            // Verificar si ya existe un objeto con el mismo dataId en productsToCharge
            var exists = productsToCharge.some(function(product) {
                return product.id === dataId;
            });
            
            // Si no existe, agregarlo a productsToCharge
            if (!exists) {
                productsToCharge.push({id: dataId, 'value': value});
            } else {
                // Actualizar el valor si ya existe el dataId
                productsToCharge = productsToCharge.map(function(product) {
                    if (product.id === dataId) {
                        return {id: dataId, 'value': value};
                    }
                    return product;
                });
            }            
        }
        
        function handleMarcarCobrado(){

            let mathod = 'PUT'
            let url = `/admin/order/returns/markAsReceived`;
            $('#spinner_delete_rate').removeClass('d-none')
            __ajax(`${url}`, JSON.stringify({'orderReturn': `{{entity.id}}`, productsToCharge}), mathod)
                .done(function (obj) {
                    console.log(obj);
                    alertView("{{'orderReturns.mark_as_received_message'|trans()}}", 'success');
                    location.reload();
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    console.log('error',jqXHR.responseJSON);
                    alertView("{{'unexpected error'|trans()}}", 'danger');
                }).always(function () {
                    $('#spinner_delete_rate').addClass('d-none')
                    $('#add_produc').prop('disabled', false);
                     $('#modalCharge').modal('hide');
                });
        }
    </script>
{% endblock %}