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

{% block preloader %}{% endblock %}

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

{% block body %}

<div class="container pb-5">

    {{ form_start(form) }}

    {{ form_row(form._token) }}

    <h2 class="my-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-dark">
                        <ul class="nav nav-pills nav-tabs nav-fill card-header-tabs">

                            <li class="nav-item mr-3">
                                <a data-toggle="list" class="nav-link active pestana-form" href="#pagos-area">
                                    <i class="fas fa-cash-register" aria-hidden="true"></i>
                                    Pagos
                                </a>
                            </li>
                            <li class="nav-item mr-3">
                                <a data-toggle="list" role="tab" class="nav-link pestana-form" 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 pestana-form" href="#dominios-area">
                                    <i class="fas fa-globe" aria-hidden="true"></i>
                                    Dominios
                                </a>
                            </li>
                            
                        </ul>
                    </div>


    {% set ordenCosto = 0 %}

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


<div class="tab-pane fade show active" 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">
            <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="#depo-{{ 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>

            </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">
                    <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="#transf-{{ 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 class="tab-pane fade" 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">
            <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 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 %}


                    </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>
                    <strong>{{ form_label(form.ordenHosting[index].estatus) }}</strong>
                    {{ form_widget(form.ordenHosting[index].estatus) }}
                    {{ form_errors(form.ordenHosting[index].estatus) }}
                </div>

                <hr/>
                <div>
                    <strong>{{ form_label(form.ordenHosting[index].observacion) }}</strong>
                    {{ form_widget(form.ordenHosting[index].observacion, {'attr': {'placeholder': 'Observacion'} }) }}
                    {{ form_errors(form.ordenHosting[index].observacion) }}
                </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">
            <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 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 %}

                    </div>
                </div>

                <hr/>
                <div>
                    <strong>{{ form_label(form.ordenDominio[index].estatus) }}</strong>
                    {{ form_widget(form.ordenDominio[index].estatus) }}
                    {{ form_errors(form.ordenDominio[index].estatus) }}
                </div>

                <hr/>
                <div>
                    <strong>{{ form_label(form.ordenDominio[index].observacion) }}</strong>
                    {{ form_widget(form.ordenDominio[index].observacion, {'attr': {'placeholder': 'Observacion'} }) }}
                    {{ form_errors(form.ordenDominio[index].observacion) }}
                </div>

            </li>
        </ul>

    </div>
</div>

    {% endfor %}

{% else %}

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

{% endif %}

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



</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-dark">
                    <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> Resume
                            </a>
                        </li>
                        <li class="nav-item mr-3">
                            <a data-toggle="list" class="nav-link" href="#usuario-area">
                                <i class="fas fa-user" aria-hidden="true"></i> Usuario
                            </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>


        <hr/>
        <div class="d-flex justify-content-between">
            <div>
                <strong>Costo Total</strong>
            </div>
            <div class="text-primary">
                CLP $ <span id="orden-costo-real">0,00</span> / {{ ordenCosto|number_format }}

            </div>
        </div>

        <hr/>
        <div>
            <strong>{{ form_label(form.observacion, null, {'label': 'Observacion privada'}) }}</strong>
            {{ form_widget(form.observacion, {'attr': {'placeholder': 'Esto solo podra ser visto por el personal administrativo'} }) }}
            {{ form_errors(form.observacion) }}
        </div>

        <hr/>
        <div>
            
            <strong>{{ form_label(form.nota, null, {'label': 'Nota para el usuario'}) }}</strong>
            {{ form_widget(form.nota, {'attr': {'placeholder': 'Esta informacion podra ser vista por el usuario'} }) }}
            {{ form_errors(form.nota) }}
        </div>

    </div>

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

        <div class="d-flex justify-content-between">
            <div>
                <strong>Usuario</strong>
            </div>
            <div class="text-primary">
                {{ orden.usuario.username }}
            </div>
        </div>
        <hr/>
        <div class="d-flex justify-content-between">
            <div>
                <strong>Correo</strong>
            </div>
            <div class="text-primary">
                {{ orden.usuario.email }}
            </div>
        </div>
        <hr/>
        <div class="d-flex justify-content-between">
            <div>
                <strong>Cliente</strong>
            </div>
            <div class="text-primary">
                {{ orden.usuario.persona.nombre }}
            </div>
        </div>
        <hr/>
        <div class="d-flex justify-content-between">
            <div>
                <strong>Estatus</strong>
            </div>
            <div class="text-primary">
                {% include 'all/usuario/_estatus.html.twig' with {'estatus':orden.usuario.estatus} %}
            </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 class="col-md-12">
        <button id="boton-procesar-orden" class="btn btn-primary btn-lg btn-block" type="submit">Siguiente</button>
    </div>

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

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

    {{ form_end(form) }}

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

{% endblock %}

    {% block javascripts %}
        <script src={{ asset('build/js/procesar-orden.js') }}></script>
    {% endblock %}