{% include 'part_header.html' %}
{% include 'part_menu.html' %}
{% include 'part_menu_puntos_priv.html' %}
{% include 'part_menu_priv_small.html' %}

<script>{% include 'page_panel_inicio.js' %}</script>
<div class="content" ng-controller="page_panel_inicio" >
    {% if site_env == 'cusa' %}
        {% include 'part_menu_priv.html' %}
    {% endif %}
    <br/>

    {% if site_env=='cyem' %}
        <div class="content-titulo">
            <div class="row">
                <div class="column small-24">
                    <h1 class="titulo-pagina">
                        Mi casillero
                    </h1>
                </div>
            </div>
        </div>
    {% endif %}

    <div class="ng-hide" ng-show="d.ready">


        <div class="row">

            {% if site_env=='cusa' %}
            <div class="column small-24">
                <div class="titulo-bienvenida negro font-15">
                    <span class="negro bold font-15">¡Bienvenido</span> a tu Casillero!
                </div>
            </div>
            {% endif %}

            <div class="column small-24 medium-12">

                <!------------------------------------------ INFORMACION DEL CASILLERO ------------------------------------>

                {% if site_env=='cyem' %}
                <div class="row">
                    <div class="column small-24 medium-24 info-casillero padding-lateral">
                        <div class="row xcontainer-casillero">
                            <div class="column small-4 text-center">
                                <img src="tw{{template_url}}/img_tw{{site_env}}/icon-usuario-casillero.png" alt="">
                            </div>
                            <div class="column small-20 ln-txt">
                            <div class="titulo-bienvenida">
                                <span class=" bold font-12">¡Bienvenido a tu Casillero!</span>
                            </div>
                            <div>
                                <span class="font-12">ng{{si.nombre}}</span>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br/>
                <div class="row  xcodigo-container">
                    <div class="column medium-6 text-center padding-casillero show-for-medium">
                        <div class="row">
                            <div class="column small-24 xcod-casillero">
                                <span class="font-10 xresument">ng{{resumen.perfil.casillero}}</span>
                            </div>
                            <div class="column small-24">
                                <img src="tw{{template_url}}/img_tw{{site_env}}/caja-casillero.png" class="ximg-caja " alt="">
                            </div>
                        </div>
                    </div>

                    <div class="column small-24 medium-18 padding-casillero">
                        <div class="row">
                            <div class="column small-24 xinfo-mi-casillero xborder-casillero  padding-lateral">
                                <span class="xdesc-cas">Nombre y N de casillero</span><br/>
                                <span class="info-usuario font-10 bold">ng{{si.nombre}} ng{{resumen.perfil.casillero}}</span>
                            </div>
                            <div class="column small-24 xinfo-mi-casillero xbackground-direccion  padding-lateral">
                                <span class="xdesc-cas">Dirección</span><br/>
                                <span class="info-usuario font-10 bold">7630 NW 25 Street # 2B</span>
                            </div>
                            <div class="column small-24 xinfo-mi-casillero  padding-lateral">
                                <div class="row direccion-container">
                                    <div class="column small-8 xdireccion-bar">
                                        <div class="xdesc-cas">
                                            Ciudad
                                        </div>
                                        <div class="info-usuario font-10 bold">
                                            Miami
                                        </div>
                                    </div>
                                    <div class="column small-8 xdireccion-bar">
                                        <div class="xdesc-cas">
                                            Estado
                                        </div>
                                        <div class="info-usuario font-10 bold">
                                            Florida
                                        </div>
                                    </div>
                                    <div class="column small-8 xdireccion-bar">
                                        <div class="xdesc-cas">
                                            Zip Code
                                        </div>
                                        <div class="info-usuario font-10 bold">
                                            33122
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% else %}

                <div class="row">
                    <div class="column small-24 large-6 padding-left-none">
                        <div class="text-center img-caja ">
                            <img src="tw{{template_url}}/img/icon-caja.png" alt="" />
                        </div>
                    </div>
                    <div class="column small-24 large-18 padding-right-none padding-left-none">
                        <div class="card bg-gris">
                            <div class="titulo-azul">
                                Tu Casillero ng{{resumen.perfil.casillero}}
                            </div>
                            <div class="contenido">
                                <div class="bold negro font-9">
                                    Dirección de entrega
                                </div>
                                <div class="negro font-8">
                                    ng{{resumen.perfil.nombre}} ng{{resumen.perfil.casillero}}
                                </div>
                                <div class="negro font-8">
                                    7630 NW 25 Street # 2B Miami, FL, Zip 33122
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {% endif %}

                <!--------------------------------------------------------------------------------------------------------->

                {% if site_env == 'cyem' %}
                <br/>
                {% endif %}


                <!-- INVENTARIO RECIENTE -->
                <!-- <div class="row bg-gris inventario">
                    <div class="row">
                        <div class="column small-24">
                            <div class="titulo">
                                <span class="bold font-11">Saldos pendientes</span>
                            </div>
                        </div>
                    </div>
                    <div ng-if="resumen.saldos_pendientes.length > 0">

                        <div class="row item" ng-repeat="saldos in resumen.saldos_pendientes">
                            <div class="column small-24">
                                <div class="negro"><span class="bold">Fecha:</span> ng{{saldos.fechahora}}</div>
                                <div class="negro"><span class="bold">Referencia:</span> ng{{saldos.referencia}}</div>
                                <div class="negro"><span class="bold">Concepto:</span> ng{{saldos.concepto}}</div>
                                <div class="negro"><span class="bold">Valor:</span> ng{{saldos.valor}}</div>
                                <div class="negro">ng{{saldos.observaciones}}</div>
                            </div>
                        </div>
                    </div> -->
                    <!-- INFORMACION CUANDO NO HAY INVENTARIO -->
                    <!-- <div class="row" ng-if="resumen.saldos_pendientes.length == 0">
                        <div class="column small-24 padding-left-none padding-right-none">
                            <div class="sin-inventario">
                                Actualmente no tienes saldos pendientes
                            </div>
                        </div>
                    </div>
                </div> -->

                <!-- INVENTARIO RECIENTE -->
                <div class="row bg-gris inventario">
                    <div class="row">
                        <div class="column small-24">
                            <div class="titulo">
                                <span class="bold font-11">Inventario reciente</span>
                            </div>
                        </div>
                    </div>
                    <div ng-if="resumen.inventario.length > 0">

                        <div class="row item" ng-repeat="item in resumen.inventario">
                            <div class="column small-24 medium-5 large-5 text-center">
                                <div class="img-producto">
                                    <img ng-if="item.imagen" src="ng{{item.imagen}}" alt="" />
                                    <img ng-if="!item.imagen" src="tw{{template_url}}/img/img-caja-inventario.png" alt="" />
                                </div>

                            </div>
                            <div class="column small-24 medium-19 large-19">
                                <div class="negro"><span class="bold">Fecha de llegada:</span> ng{{item.fecha_llegada}}</div>
                                <div class="negro"><span class="bold">Tracking:</span> ng{{item.tracking}}</div>
                                <div class="negro">ng{{item.descripcion}}</div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="column small-24">
                                <a href="tw{{site_url}}/inventario" class="azul underline font-10">Ver todo el inventario</a>
                            </div>
                        </div>
                    </div>
                    <!-- INFORMACION CUANDO NO HAY INVENTARIO -->
                    <div class="row" ng-if="resumen.inventario.length == 0">
                        <div class="column small-24 padding-left-none padding-right-none">
                            <div class="sin-inventario">
                                Actualmente no tienes inventario
                            </div>
                        </div>
                    </div>
                </div>


                <!------------------------------------------ INVENTARIO DEL CASILLERO ------------------------------------>

                <!-- <div class="info-persona">
                    <div class="row bg-gris bg-gris-cyem inventario info-persona">
                        <div class="column small-24 padding-lateral" ng-if="resumen.inventario.length > 0">
                            <div class="titulo ">
                                <span class="bold font-11 xreciente-titulo ">Inventario reciente</span>
                            </div>
                        </div>

                        <div class="column small-24 info-persona">
                            <div class="row item " ng-repeat="item in resumen.inventario">
                                <div class="column small-6 medium-7 large-5 text-center">
                                    <div class="img-producto">
                                        <img ng-if="r.imagen" src="ng{{r.imagen}}" alt="" />
                                        <img ng-if="!r.imagen" src="tw{{template_url}}/img/img-caja-inventario.png" alt="" />
                                    </div>
                                </div>
                                {% if site_env == 'cusa' %}
                                <div class="column small-24 medium-17 large-19">
                                {% endif %}
                                {% if site_env == 'cyem' %}
                                <div class="column small-17 small-offset-1 medium-17 medium-offset-0 large-19 large-offset-0">

                                    <div class="negro ">ng{{item.descripcion}}</div>
                                    <div class="negro"><span class="bold">Fecha de llegada:</span> <br class="show-for-small-only"> ng{{item.fecha_llegada}}</div>
                                    <div class="negro "><span class="bold ">Tracking:</span> <br class="show-for-small-only"> ng{{item.tracking}}</div>

                                    {% else %}
                                    <div class="column small-24 medium-17 large-19">
                                        <div class="negro"><span class="bold">Fecha de llegada:</span> ng{{item.fecha_llegada}}</div>
                                        <div class="negro "><span class="bold ">Tracking:</span> ng{{item.tracking}}</div>
                                        <div class="negro ">ng{{item.descripcion}}</div>
                                    </div>
                                    {% endif %}

                                </div>
                            </div>
                        </div>
                        <div class="column small-24 text-right medium-text-left">
                            <a href="tw{{site_url}}/inventario" class="azul underline font-10 xver-inventario">Ver todo el inventario</a>
                        </div>
                    </div>
                    INFORMACION CUANDO NO HAY INVENTARIO
                    <div class="row" ng-if="resumen.inventario.length == 0">
                        <div class="column small-24 padding-left-none padding-right-none">
                            <div class="sin-inventario">
                                Actualmente no tienes inventario
                            </div>
                        </div>
                    </div>
                </div> -->

                <!--------------------------------------------------------------------------------------------------------->


            </div>


            <div class="column small-24 medium-12">


                <!------------------------------------------ INFORMACION POR PRIMERA VEZ ------------------------------>
                {% if site_env == 'cyem' %}

                <div class="row" ng-if="resumen.pendientes_pago.length == 0 && resumen.inventario.length == 0 && resumen.envios_recientes.length == 0">
                    <div class="column small-24 primero-casillero">
                        <div class="">
                            <span class="bold font-11 xreciente-titulo ">Bienvenido a nuestra compañia</span>
                        </div><br/>
                        <div class="row ">
                            <div class="column small-4 medium-2 padding-casillero">
                                <img src="tw{{template_url}}/img_tw{{site_env}}/icon-primer-casillero-1.png" class="img-primer-casillero" alt="">
                            </div>
                            <div class="column small-20 medium-22">
                                <span class="txt-primer-casillero">Es un gusto tenerte como cliente y poner a tu disposición nuestros servicios de <span class="bold">LOGÍSTICA INTEGRAL</span>.</span>
                                <br/><br/>
                            </div>

                            <div class="column small-4 medium-2 padding-casillero">
                                <img src="tw{{template_url}}/img_tw{{site_env}}/icon-primer-casillero-2.png" class="img-cas" alt="">
                            </div>
                            <div class="column small-20 medium-22">
                                <span class="txt-primer-casillero">Apartir de este momento podrás hacer llegar tu mercancía a nuestras oficinas en la ciudad de Miami.</span>
                            </div>
                            <div class="column small-24 padding-casillero pd-casillero">
                                <span class="bold font-11 xreciente-titulo ">Es importante que tengas en cuenta lo siguiente:</span>
                            </div>

                            <div class="column small-4 medium-2 padding-casillero">
                                <img src="tw{{template_url}}/img_tw{{site_env}}/icon-primer-casillero-3.png" class="img-cas" alt="">
                            </div>
                            <div class="column small-20 medium-22">
                                <span class="txt-primer-casillero">El casillero no se vence por lo cual no es necesario su renovación.</span>
                                <br/><br/><br class="show-for-medium">
                            </div>

                            <div class="column small-4 medium-2 padding-casillero">
                                <img src="tw{{template_url}}/img_tw{{site_env}}/icon-primer-casillero-4.png" class="img-cas" alt="">
                            </div>
                            <div class="column small-20 medium-22">
                                <span class="txt-primer-casillero">Puedes cambiar tus datos personales y de contacto en el momento que lo desees accediendo a tu cuenta.</span>
                                <br/><br/>
                            </div>

                            <div class="column small-4 medium-2 padding-casillero">
                                <img src="tw{{template_url}}/img_tw{{site_env}}/icon-primer-casillero-5.png" class="img-cas" alt="">
                            </div>
                            <div class="column small-20 medium-22">
                                <span class="txt-primer-casillero">Cumple con todas las disposiciones legales de protección de datos personales..</span>
                                <br/><br/>
                            </div>

                            <div class="column small-4 medium-2 padding-casillero">
                                <img src="tw{{template_url}}/img_tw{{site_env}}/icon-primer-casillero-6.png" class="img-cas" alt="">
                            </div>
                            <div class="column small-20 medium-22">
                                <span class="txt-primer-casillero">El casillero es para uso personal, toda la mercancía que direcciones debe estar rotulada con tu nombre.</span>
                                <br/><br/>
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}


                <!----------------------------------------------------------------------------------------------------->

                <!------------------------------------------ PENDIENTES DE PAGO ------------------------------------>

                <div class="x-content-pendientes" ng-if="resumen.saldos_pendientes.length > 0">
                    <div class="row card-pendientes ">
                        <div class="column small-24 padding-left-none info-persona">
                            <div class="bg-gris bg-naranja titulo bold font-11">
                                Pendientes de pago
                            </div>
                        </div>
                    </div>
                    <div class="pagos">
                        <div class="row div" ng-repeat="item in resumen.saldos_pendientes">
                            <div class="column small-24 pagar-x">
                                <div class="row">
                                    {% if site_env=='cyem' %}
                                        <div class="column small-12 medium-16 xcolumn-pago">
                                            <span class="cafe bold font-9">Número de Guía:<br class="show-for-small-only"> <span class="xval">ng{{item.id_guia}}</span></span><br/>
                                            <span class="cafe bold font-9">Fecha de llegada: <br class="show-for-small-only"><span class="xval"> ng{{item.fecha}}</span></span><br/>
                                            <span class="bold azul font-9 xflete show-for-medium">Flete $ ng{{item.val_total}} USD</span><br/>
                                        </div>
                                        <div class="column small-12 medium-8 pagar-x">
                                            <div class="row ">
                                                <div class="column small-24 show-for-small-only">
                                                    <span>Flete $ ng{{item.val_total}} USD</span>
                                                </div>
                                                <a href ng-click="modalPago(item.id_guia)">
                                                    <div class="column small-24 boton submit pagar hv-pagar">
                                                        IR A PAGAR
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    {% else %}
                                        <div class="column small-14 medium-15 large-17">
                                            <div class="cafe bold font-9">ng{{item.concepto}}</div>
                                            <div class="cafe font-9 fecha">Fecha:</div>
                                            <div class="cafe font-9">ng{{item.fechahora}}</div>
                                        </div>
                                        <div class="column small-10 medium-9 large-7">
                                            <div class="azul bold font-9 text-right">$ ng{{item.val_saldo_usd}} USD</div>
                                            <a href ng-click="modalPago(item)">
                                                <div class="boton submit pagar">
                                                    Ir a pagar
                                                </div>
                                            </a>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!----------------------------------------------------------------------------------------------------->

                <!------------------------- INFORMACION CUANDO NO HAY PENDIENTES DE PAGO ------------------------------>

                <div ng-if="resumen.saldos_pendientes.length == 0">
                    <div class="bold azul font-12 line-1-2">
                        Siempre que recibas mercancía<br/> en tu casillero:
                    </div>
                    <br/>
                    <div class="mercancia">
                        <img class="icon" src="tw{{template_url}}/img/icon-chulo.png" alt="" />
                        Recibirás información del producto.
                    </div>
                    <div class="mercancia">
                        <img class="icon" src="tw{{template_url}}/img/icon-chulo.png" alt="" />
                        Entrando a tu cuenta podrás consultar tu inventario en tiempo real.
                    </div>
                    <div class="mercancia">
                        <img class="icon" src="tw{{template_url}}/img/icon-chulo.png" alt="" />
                        Podrás programar tus despachos en el momento que lo estimes conveniente.
                    </div>
                </div>

                <!----------------------------------------------------------------------------------------------------->

                <!-------------------------------------------- ULTIMOS ENVIOS ----------------------------------------->

                <br/>

                <div class="row">
                    <div class="column small-24 padding-left-none info-persona" >
                        <div class="row bg-gris bg-gris-cyem ult-envios inventario">
                            <div class="row">
                                <div class="column small-24">
                                    <div class="titulo padding-lateral" ng-if="resumen.envios_recientes.length > 0">
                                        <span class="font-11 bold ">Últimos envíos</span>
                                    </div>
                                </div>
                            </div>
                            <div ng-if="resumen.envios_recientes.length > 0">
                                <div class="row" >
                                    <div ng-repeat="item in resumen.envios_recientes"  class="row item con-info-envios">
                                        <div class="column small-14 medium-15 large-17 envios-con padding-lateral">
                                            {% if site_env=='cyem' %}
                                            <div class="cafe bold font-9">Número de Solicitud: ng{{item.id_guia}}</div>
                                            <div class="cafe font-9 fecha">Estado Completo:</div>
                                            <div class="cafe font-9">2017.07.07 - 10:47:00 ng{{item.fechahora}}</div>
                                            {% else %}
                                            <div class="cafe bold font-9">Guía: ng{{item.id_guia}}</div>
                                            <div class="cafe font-9 fecha">Fecha de despacho:</div>
                                            <div class="cafe font-9">ng{{item.fechahora}}</div>
                                            {% endif %}
                                        </div>
                                        <div class="column small-10 medium-9 large-7 padding-right-none">
                                            {% if site_env=='cusa' %}
                                            <div class="cafe bold font-9 text-right">$ ng{{item.val_total}} USD</div>
                                            {% endif %}
                                            <a href ng-click="rastrear(item.id_guia)">
                                                <div class="boton submit rastrear">
                                                    Rastrear
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="row" ng-if="resumen.envios_recientes.length > 0">
                                    <div class="column small-24 vin-envios text-right medium-text-left">
                                        <a href="tw{{site_url}}/envios" class="azul underline font-10 cl-envio">Ver todos los envíos</a>
                                    </div>
                                </div>
                            </div>

                            {% if site_env=='cyem' %}
                            <div class="row" ng-if="resumen.envios_recientes.length == 0">
                                <div class="column small-24 padding-left-none padding-right-none">
                                    <div class="sin-inventario">
                                        Actualmente no tienes Envios recientes.
                                    </div>
                                </div>
                            </div>
                            {% endif %}

                        </div>
                    </div>


                    {% if site_env=='cusa' %}
                    <div ng-if="resumen.envios_recientes.length == 0">
                        {% include 'part_slider_informativo.html' %}
                    </div>
                    {% endif %}

                </div>

                <!----------------------------------------------------------------------------------------------------->

            </div>

        </div>


        <br/>
        <br/>

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