{% extends 'base.html.twig' %}

{% block preloader %}{% endblock %}

{% block title %}Orden de Compra #{{ orden.correlativo }}{% endblock %}

{% block body %}

<div class="container pb-5">

    <h2 class="mb-4 text-primary">
        Orden de Compra #{{ orden.correlativo }}
    </h2>

    <div class="row">

        <div class="mb-3 col-md-6">
            <div class="row">

            <div class="col-md-12 mb-3">
                <div class="card">

                    <div class="tab-area card-header bg-primary">
                        <ul class="nav nav-pills nav-tabs nav-fill card-header-tabs">

                            <li class="nav-item mr-3">
                                <a data-toggle="list" role="tab" class="nav-link active" href="#hosting-area">
                                    <i class="fas fa-hdd" aria-hidden="true"></i>
                                    Hostings
                                </a>
                            </li>
                            <li class="nav-item mr-3">
                                <a data-toggle="list" class="nav-link" href="#dominios-area">
                                    <i class="fas fa-globe" aria-hidden="true"></i>
                                    Dominios
                                </a>
                            </li>
                            <li class="nav-item mr-3">
                                <a data-toggle="list" class="nav-link" href="#pagos-area">
                                    <i class="fas fa-cash-register" aria-hidden="true"></i>
                                    Pagos
                                </a>
                            </li>
                        </ul>
                    </div>


    {% set ordenCosto = 0 %}
    {% set ordenCostoReal = 0 %}

<div class="card-body tab-content">

<div class="tab-pane fade show active" id="hosting-area" role="tabpanel">

{% if orden.ordenHosting is not empty %}

    {% for index, ordenH in orden.ordenHosting %}

<div class="mb-4">
    <div class="card">

        {% set indexMostrar = index + 1 %}

        <div class="card-header bg-light text-center text-orange">
            <strong><i class="fas fa-hdd" aria-hidden="true"></i> Hosting #{{ indexMostrar }}</strong>
        </div>

        <ul class="list-group list-group-flush">
            <li class="list-group-item" >

                <!--div>
                    <h5 class="text-center text-orange">
                        <i class="fas fa-hdd" aria-hidden="true"></i>
                            Hosting #{{ indexMostrar }}
                    </h5>
                </div>
                <hr/-->

                <div class="d-flex justify-content-between">
                    <div>
                        <strong>Plan</strong>
                    </div>
                    <div class="text-primary">
                        {{ ordenH.planDestino.nombre }}
                    </div>
                </div>
                <hr/>

                <div class="d-flex justify-content-between">
                    <div>
                        <strong>Duracion</strong>
                    </div>
                    <div class="text-primary">
                        {{ ordenH.duracion }} Año(s)
                    </div>
                </div>
                <hr/>

                <div class="d-flex justify-content-between">
                    <div>
                        <strong>Costo</strong>
                    </div>
                    <div class="text-primary">

        $<span class="costo-individual" data-costo="{{ ordenH.costo }}">{{ ordenH.costo|number_format }}</span>

        {% set ordenCosto = ordenCosto + ordenH.costo %}

        {% if ordenH.estatus == constant('ESTATUS_APROBADA', ordenH) %}
            {% set ordenCostoReal = ordenCostoReal + ordenH.costo %}
        {% endif %}

                    </div>
                </div>

                <hr/>
                <div class="d-flex justify-content-between">
                    <div>
                        <strong>Dominio a usar</strong>
                    </div>
                    <div class="text-primary">
                        {{ ordenH.detalle }}
                    </div>
                </div>

                <hr/>
                <div class="d-flex justify-content-between">
                    <div>
                        <strong>Estatus</strong>
                    </div>
                    <div class="text-primary">
                        {% include 'all/orden/_estatusOH.html.twig' with {'estatus':ordenH.estatus} %}
                    </div>
                </div>

            </li>
        </ul>

    </div>
</div>

    {% endfor %}

{% else %}

    <div>
        <strong>No tiene / No aplica</strong>
    </div>

{% endif %}

</div>



<div class="tab-pane fade" id="dominios-area" role="tabpanel">

{% if orden.ordenDominio is not empty %}

    {% for index, ordenD in orden.ordenDominio %}


<div class="mb-4">
    <div class="card">

        {% set indexMostrar = index + 1 %}

        <div class="card-header bg-light text-center text-orange">
            <strong><i class="fas fa-globe" aria-hidden="true"></i> Dominio #{{ indexMostrar }}</strong>
        </div>


        <ul class="list-group list-group-flush">
            <li class="list-group-item" >

                <!--div>
                    <h5 class="text-center text-orange">
                        <i class="fas fa-globe" aria-hidden="true"></i>
                            Dominio #{{ indexMostrar }}
                    </h5>
                </div>
                <hr/-->

                <div class="d-flex justify-content-between">
                    <div>
                        <strong>Dominio</strong>
                    </div>
                    <div class="text-primary">
                        {{ ordenD.nombre }}.{{ ordenD.extension.nombre }}
                    </div>
                </div>
                <hr/>

                <div class="d-flex justify-content-between">
                    <div>
                        <strong>Duracion</strong>
                    </div>
                    <div class="text-primary">
                        {{ ordenD.duracion }} Año(s)
                    </div>
                </div>
                <hr/>

                <div class="d-flex justify-content-between">
                    <div>
                        <strong>Costo</strong>
                    </div>
                    <div class="text-primary">

        $<span class="costo-individual" data-costo="{{ ordenD.costo }}">{{ ordenD.costo|number_format }}</span>

        {% set ordenCosto = ordenCosto + ordenD.costo %}

        {% if ordenD.estatus == constant('ESTATUS_APROBADA', ordenD) %}
            {% set ordenCostoReal = ordenCostoReal + ordenD.costo %}
        {% endif %}

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

                <div class="d-flex justify-content-between">
                    <div>
                        <strong>Estatus</strong>
                    </div>
                    <div class="text-primary">
                        {% include 'all/orden/_estatusOD.html.twig' with {'estatus':ordenD.estatus} %}
                    </div>
                </div>

            </li>
        </ul>
    </div>
</div>

    {% endfor %}

{% else %}

    <div>
        <strong>No tiene / No aplica</strong>
    </div>

{% endif %}


</div><!--Fin area Dominio-->


<div class="tab-pane fade" id="pagos-area" role="tabpanel">

{% if orden.transferencias is not empty %}

    {% for index, transferencia in orden.transferencias %}

<div class="mb-4">
    <div class="card">

        {% set indexMostrar = index + 1 %}

        <div class="card-header bg-light text-center text-orange">
            <strong><i class="fas fa-exchange-alt" aria-hidden="true"></i> Transferencia #{{ indexMostrar }}</strong>
        </div>

        <ul class="list-group list-group-flush">
            <li class="list-group-item" >

                <div class="d-flex justify-content-between">
                    <div>
                        <strong>Banco</strong>
                    </div>
                    <div class="text-primary">
                        {{ transferencia.banco.nombre }}
                    </div>
                </div>
                <hr/>

                <div class="d-flex justify-content-between">
                    <div>
                        <strong>Fecha del Pago</strong>
                    </div>
                    <div class="text-primary">
                        {{ transferencia.fecha|date("d/m/Y") }}
                    </div>
                </div>
                <hr/>

                <div class="d-flex justify-content-between">
                    <div>
                        <strong>Cuenta</strong>
                    </div>
                    <div class="text-primary">
                        {{ transferencia.cuenta.titular }}
                    </div>
                </div>
                <hr/>

                {% if transferencia.imageName is not empty %}
                    <div>
                        <div>
                            <strong>Imagen</strong>
                        </div>
                        <div>
                            <a href="#transf-{{ indexMostrar }}" class="modal-imagen">
                                Click para expandir
                                <img class="img-fluid modal-imagen" src="{{ vich_uploader_asset(transferencia, 'imageFile')|datauri }}" alt="transferencia" />
                            </a>
                        </div>
                    </div>
                    <hr/>
                {% endif %}

                <div>
                    <div>
                        <strong>Observacion</strong>
                    </div>
                    <div class="text-primary">
                        {{ transferencia.observacion }}
                    </div>
                </div>
                <hr/>

            </li>
        </ul>

    </div>
</div>

    {% endfor %}

{% elseif orden.depositos is not empty %}

    {% for index, deposito in orden.depositos %}

        <div class="mb-4">
            <div class="card">

                {% set indexMostrar = index + 1 %}

                <div class="card-header bg-light text-center text-orange">
                    <strong><i class="fas fa-money-bill-alt" aria-hidden="true"></i> Deposito #{{ indexMostrar }}</strong>
                </div>

                <ul class="list-group list-group-flush">
                    <li class="list-group-item" >

                        <div class="d-flex justify-content-between">
                            <div>
                                <strong>Tipo</strong>
                            </div>

                            <div class="text-primary">
                                {{ deposito.getTipoLabel(deposito.tipo) }}
                            </div>
                        </div>
                        <hr/>

                        <div class="d-flex justify-content-between">
                            <div>
                                <strong>Fecha del Pago</strong>
                            </div>
                            <div class="text-primary">
                                {{ deposito.fecha|date("d/m/Y") }}
                            </div>
                        </div>
                        <hr/>

                        <div class="d-flex justify-content-between">
                            <div>
                                <strong>Cuenta</strong>
                            </div>
                            <div class="text-primary">
                                {{ deposito.cuenta.titular }}
                            </div>
                        </div>
                        <hr/>

                        {% if deposito.imageName is not empty %}
                            <div>
                                <div>
                                    <strong>Imagen</strong>
                                </div>
                                <div>
                                    <a href="#depo-{{ indexMostrar }}" class="modal-imagen">
                                        Click para expandir
                                        <img class="img-fluid modal-imagen" src="{{ vich_uploader_asset(deposito, 'imageFile')|datauri }}" alt="deposito" />
                                    </a>
                                </div>
                            </div>
                            <hr/>
                        {% endif %}

                        <div>
                            <div>
                                <strong>Observacion</strong>
                            </div>
                            <div class="text-primary">
                                {{ deposito.observacion }}
                            </div>
                        </div>

                    </li>
                </ul>

            </div>
        </div>

    {% endfor %}

{% else %}

        <div>
            <strong>No tiene / No aplica</strong>
        </div>

{% endif %}

</div><!--Fin area Pagos-->


</div><!--Fin area Card-Body-->

</div><!--Fin area Card-->

</div><!--Fin Colm-12-->
</div><!--Fin Row-->

</div><!--Fin Colm-6-->


<div class="mb-3 col-md-6">
    <div class="row">

        <div class="col-md-12 mb-3">
            <div class="card">

                <div class="tab-area card-header bg-primary">
                    <ul class="nav nav-pills nav-tabs nav-fill card-header-tabs">

                        <li class="nav-item mr-3">
                            <a data-toggle="list" role="tab" class="nav-link active" href="#resume-area">
                                <i class="fas fa-clipboard-list" aria-hidden="true"></i> Resumen
                            </a>
                        </li>
                        <li class="nav-item mr-3">
                            <a data-toggle="list" class="nav-link" href="#facturacion-area">
                                <i class="fas fa-file-invoice-dollar" aria-hidden="true"></i> Facturacion
                            </a>
                        </li>
                    </ul>
                </div>


<div class="card-body tab-content">

    <div class="tab-pane fade show active" id="resume-area" role="tabpanel">

        <div class="d-flex justify-content-between">
            <div>
                <strong>Estatus de la Orden</strong>
            </div>
            <div class="text-primary">

                {% include 'all/orden/_estatus.html.twig' with {'estatus':orden.estatus} %}

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

        <div class="d-flex justify-content-between">
            <div>
                <strong>Fecha Solicitud</strong>
            </div>
            <div class="text-primary">
                {{ orden.createdAt|date("d-m-Y g:ia") }}
            </div>
        </div>

        {% if orden.fechaCierre is not empty %}
            <hr/>
            <div class="d-flex justify-content-between">
                <div>
                    <strong>Fecha Procesado</strong>
                </div>
                <div class="text-primary">
                    {{ orden.fechaCierre|date("d-m-Y g:ia") }}
                </div>
            </div>
        {% endif %}

        <hr/>
        <div class="d-flex justify-content-between">
            <div>
                <strong>Costo Total</strong>
            </div>
            <div class="text-primary">
                CLP $ {{ ordenCostoReal|number_format }} / {{ ordenCosto|number_format }}
            </div>
        </div>

        <hr/>
        <div>
            <div>
                <strong>Observacion</strong>
            </div>
            <div class="text-primary">
                {{ orden.nota }}
            </div>
        </div>

    </div>

    <div class="tab-pane fade" id="facturacion-area" role="tabpanel">

{% if orden.ordenFactura is not empty %}

    <div class="d-flex justify-content-between">
        <div>
            <strong>Razon social</strong>
        </div>
        <div class="text-primary">
            {{ orden.ordenFactura.nombre }}
        </div>
    </div>
    <hr/>

    <div class="d-flex justify-content-between">
        <div>
            <strong>RUT</strong>
        </div>
        <div class="text-primary">
            {{ orden.ordenFactura.dni }}
        </div>
    </div>
    <hr/>

    <div class="d-flex justify-content-between">
        <div>
            <strong>Giro</strong>
        </div>
        <div class="text-primary">
            {{ orden.ordenFactura.giro }}
        </div>
    </div>
    <hr/>

    <div class="d-flex justify-content-between">
        <div>
            <strong>Telefono</strong>
        </div>
        <div class="text-primary">
            {{ orden.ordenFactura.telefono }}
        </div>
    </div>
    <hr/>

    <div class="d-flex justify-content-between">
        <div>
            <strong>Fono</strong>
        </div>
        <div class="text-primary">
            {{ orden.ordenFactura.fono }}
        </div>
    </div>
    <hr/>

    <div class="d-flex justify-content-between">
        <div>
            <strong>Ciudad</strong>
        </div>
        <div class="text-primary">
            {{ orden.ordenFactura.ciudad }}
        </div>
    </div>
    <hr/>

    <div class="d-flex justify-content-between">
        <div>
            <strong>Comuna</strong>
        </div>
        <div class="text-primary">
            {{ orden.ordenFactura.comuna }}
        </div>
    </div>
    <hr/>

    <div class="d-flex justify-content-between">
        <div>
            <strong>Dirección</strong>
        </div>
        <div class="text-primary">
            {{ orden.ordenFactura.direccion }}
        </div>
    </div>
    <hr/>

    <div class="d-flex justify-content-between">
        <div>
            <strong>Pais</strong>
        </div>
        <div class="text-primary">
            {{ orden.ordenFactura.pais.nombre }}
        </div>
    </div>

{% else %}

    <div>
        <strong>No tiene / No aplica</strong>
    </div>

{% endif %}

    </div><!--Fin Facturacion Area-->
    </div><!--Fin Card Body -->
    </div><!--Fin Card -->

    </div><!--Fin Colm 12 -->

    </div><!--Fin Row -->
    </div><!--Fin 6 -->

</div><!--Fin Row Total -->
</div><!--Fin Container Total -->

{% endblock %}