{% include 'part_header.html' %}
{% include 'part_menu.html' %}
{% include 'part_menu_puntos_priv.html' %}
{% include 'part_menu_priv_small.html' %}
<!-- <div class="row hide-for-large login-small">
    <div class="column small-24 medium-12">
        {% include 'part_login.html' %}
    </div>
    <div class="column small-24 medium-12">
        {% include 'part_menu_banner_small.html' %}
    </div>
</div> -->
<script>{% include 'page_calcule_su_envio.js' %}</script>
<div class="content" ng-controller="page_calcule_su_envio">
    <div class="content-titulo">
        <div class="row">
            <div class="column small-24">
                <h1 class="titulo-pagina">
                    {% if site_env=='cusa' %}
                    Calcula tu Envío
                    <img src="tw{{template_url}}/img/icon-titulo.png" alt="" />
                    {% else %}
                    Calcula tu Envío
                    {% endif %}
                </h1>
            </div>
        </div>
    </div>

    {% if site_env=='cusa' %}
    <div class="row">
        <div class="column small-24">
            <div class="row">
                <div class="column small-24">
                    <div class="text-center">
                        tw{{calcule_su_envio.attrs.contenido.data[0]|raw}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br/><br/>
    {% endif %}


    <div class="row">
        <div class="column small-24">

            <div class="columns small-24 medium-24 large-15 padding-left-none padding-right-none">

                {% if site_env=='cyem' %}
                <div class="row">
                    <div class="column small-24 ">
                        <div class="xtitulo-contenedor">Parametros de Cotización</div>
                    </div>
                    <div class="column small-24 xdescripcion">
                        <div class="text-center">
                            tw{{calcule_su_envio.attrs.contenido.data[0]|raw}}
                        </div>
                    </div>
                </div>
                <br/>
                {% else %}
                <div class="column small-24">
                    <div class="titulo">
                        Parámetros de Cotización
                    </div>
                </div>
                {% endif %}

                <form id="form-cotizacion" class="form" action="" method="">

                    <div class="column small-24">
                        <label>Tipo de envío</label>
                        <select ng-model="f.id_producto" ng-options="r.label disable when r.disabled for r in ers.productos track by r.data">
                        </select>
                    </div>
                    <div class="column small-24 medium-12">
                        <label>Departamento de destino</label>
                        <select ng-model="f.id_departamento" ng-options="r.label disable when r.disabled for r in ers.departamentos track by r.data">
                        </select>
                    </div>
                    <div class="column small-24 medium-12">
                        <label>Ciudad de destino</label>
                        <select ng-model="f.id_ciudad" ng-options="r.label disable when r.disabled for r in ers.ciudades track by r.data">
                        </select>
                    </div>
                    <div class="column small-24 medium-10">
                        <label>Unidad de peso</label>
                        <select ng-model="f.unidad_peso" ng-options="r.label disable when r.disabled for r in ers.unidades_peso track by r.data">
                        </select>

                    </div>
                    <div class="column small-24 medium-4">
                        <label>Peso</label>
                        <input type="text" ng-model="f.peso">
                    </div>
                    <div class="column small-24 medium-10">
                        <label>Valor de la mercancía (USD)</label>
                        <input type="text" ng-model="f.valoracion_usd">
                    </div>
                    <div class="column small-24 medium-24 large-7">
                        <label>Unidad de medida</label>
                        <select ng-model="f.unidad_medida" ng-options="r.label disable when r.disabled for r in ers.unidades_medida track by r.data">
                        </select>
                    </div>
                    <div class="column small-8 medium-6 large-4">
                        <label>Alto</label>
                        <input type="text" ng-model="f.alto">
                    </div>
                    <div class="column small-8 medium-6 large-4">
                        <label>Ancho</label>
                        <input type="text" ng-model="f.ancho">
                    </div>
                    <div class="column small-8 medium-6 large-4">
                        <label>Largo</label>
                        <input type="text" ng-model="f.largo">
                    </div>
                    <div class="column small-24 medium-6 large-5">
                        <label>Peso Volumen</label>
                        <input type="text" disabled ng-model="d.peso_volumen_fmt">
                    </div>
                    <div class="column small-24 medium-9 large-8">
                        <label>Forma de pago</label>
                        <select ng-model="f.id_tipo_servicio" ng-options="r.label group by r.group_name disable when r.disabled === true for r in ers.formas_pago track by r.data">
                        </select>
                    </div>
                    <div class="column small-24 medium-15 large-16">
                        <label class="label-per paquetes">
                            Contenido de su envío &nbsp;
                            <img id="info-contenido" src="tw{{template_url}}/img/icon-info-2.png" alt="">
                            <div class="info-contenido" id="content-info-contenido">
                                <div class="cont">Envíos valorados en menos de $200 USD están exentos de IVA</div>
                            </div>
                        </label>

                        <select ng-model="f.id_gravamen" ng-options="r.label disable when r.disabled for r in ers.gravamenes track by r.data">
                        </select>
                    </div>
                    <div class="column small-24 medium-15 ">
                        <label class="font-9 label-per paquetes">
                            ¿Deseas consolidar varios paquetes en un solo envío?
                            <img id="info-paquetes" src="tw{{template_url}}/img/icon-info-2.png" alt="">
                            <div class="info-paquetes" id="content-info-paquetes">
                                <div class="azul bold">Consolidar</div>
                                <div class="cont">Se considera un paquete cada numero de tracking (rastreo) que recibamos para tu casillero en nuestra bodega.</div>
                            </div>
                        </label>

                        <select ng-model="f.consolidar_paq" ng-options="r.label disable when r.disabled for r in ers.consolidar_paq track by r.data">
                        </select>
                    </div>
                    <div class="column small-24 medium-9 ng-hide" ng-show="d.mostrar_trackins">
                        <label>Paquetes a consolidar</label>
                        <select ng-model="f.trackings" ng-options="r.label disable when r.disabled for r in ers.trackings track by r.data">
                        </select>
                    </div>
                    <div class="column small-24">
                        <input type="button" class="button submit" name="name" value="CALCULAR" ng-click="cotizar()">
                    </div>
                </form>
            </div>

            <div class="columns small-24 medium-24 large-9 padding-left-none padding-right-none">

                {% if site_env == 'cyem' %}
                <div class="row xadvertencia-container">
                    <br/>
                    <div class="column small-24">
                        <div class="row ">
                            <div class="column small-3 medium-2 large-3">
                                <img src="tw{{template_url}}/img/logo-warning.png" alt="">
                            </div>
                            <div class="column small-21 medium-22 large-21 xpadding-general">
                                <div class="span-recuerda">Recuerda</div>
                                El valor de la cotización es un valor aproximado, el cual puede variar según los datos reales del envío.
                            </div>
                        </div>
                        <br/>
                    </div>
                </div>
                <br/>
                {% else %}
                <div class="row">
                    <div class="column small-24">
                        <div class="titulo">
                            Cotización
                        </div>
                    </div>
                    <br/>
                    <div class="column small-24">
                        <p>
                            <span class="bold">RECUERDA</span> El valor de la cotización es un valor aproximado,
                            el cual puede variar según los datos reales del envío.
                        </p>
                        <br/>

                    </div>
                </div>
                {% endif %}


                <div class="x-content-valores">

                    {% if site_env == 'cyem' %}
                    <div class="row xcotizacion-titulo">
                        <div class="column small-3 medium-2 large-3">
                            <img src="tw{{template_url}}/img/logo-pesos.png" alt="">
                        </div>
                        <div class="column small-21 medium-22 large-21">
                            <span>Cotización</span>
                        </div>
                    </div>
                    {% endif %}

                    <div class="x-valores">
                        <div class="row">
                            <div class="column small-18">
                                <span>Flete</span><br/>
                            </div>
                            <div class="column small-6 text-right">
                                <span class="valor" ng-bind="d.val_flete_usd">-</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column small-24">
                                <hr/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column small-18">
                                <span>Seguro</span><br/>
                            </div>
                            <div class="column small-6 text-right">
                                <span class="valor" ng-bind="d.val_seguro_usd">-</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column small-24">
                                <hr/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column small-18">
                                <span>Impuestos</span><br/>
                            </div>
                            <div class="column small-6 text-right">
                                <span class="valor" ng-bind="d.val_impuestos_usd"></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column small-24">
                                <hr/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column small-18">
                                <span>Nacionalización</span><br/>
                            </div>
                            <div class="column small-6 text-right">
                                <span class="valor" ng-bind="d.val_nacionalizacion_usd">-</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column small-24">
                                <hr/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column small-18">
                                <span>Servicio collect</span><br/>
                            </div>
                            <div class="column small-6 text-right">
                                <span class="valor" ng-bind="d.val_recargo_tipo_servicio_usd">-</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column small-24">
                                <hr/>
                            </div>
                        </div>
                        <!-- <div class="row">
                            <div class="column small-18">
                                <span>Recargo</span><br/>
                            </div>
                            <div class="column small-6 text-right">
                                <span class="valor">ng{{d.val_recargos_usd}}</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column small-24">
                                <hr/>
                            </div>
                        </div> -->
                        <div class="row">
                            <div class="column small-18">
                                <span>Combustible</span><br/>
                            </div>
                            <div class="column small-6 text-right">
                                <span class="valor" ng-bind="d.val_recargo_combustible_usd">-</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column small-24">
                                <hr/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column small-18">
                                <span>Reexpedición</span><br/>
                            </div>
                            <div class="column small-6 text-right">
                                <span class="valor" ng-bind="d.val_recargo_reexpedicion_usd"></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column small-24">
                                <hr/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column small-12">
                                <span>Reempaque </span><br/>
                            </div>
                            <div class="column small-12 text-right">
                                <span class="valor">( Según mercancía )</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column small-24">
                                <hr/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column small-18">
                                <span>Logística</span><br/>
                            </div>
                            <div class="column small-6 text-right">
                                <span class="valor" ng-bind="d.val_consolidacion_usd">-</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column small-24">
                                <hr/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column small-18">
                                <span>Forma de pago</span><br/>
                            </div>
                            <div class="column small-6 text-right">
                                <span class="valor" ng-bind="d.val_forma_pago_usd">-</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column small-24">
                                <hr/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column small-18">
                                <span class="total-usd">TOTAL USD</span>
                            </div>
                            <div class="column small-6 text-right">
                                <span class="total-usd x-naranja" ng-bind="d.val_total_usd">-</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column small-18">
                                <span class="total-pesos">TOTAL PESOS</span>
                            </div>
                            <div class="column small-6 text-right">
                                <span class="total-pesos x-naranja" ng-bind="d.total_cop_fmt">-</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    {% include 'part_modal_sin_servicio.html' %}

</div>
<br/>
<br/>
{% include 'part_footer.html' %}