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

{% block preloader %}{% endblock %}

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

{% block body %}

<div class="container pb-5">

    {{ form_start(form, {'attr': {'id': 'orden-pagar'} }) }}

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

    <div class="row">

        <div class="mb-3 col-md-7">
            <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 active">
                                <a data-toggle="list" role="tab" class="nav-link pestana-form 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 pestana-form" 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 pestana-form" href="#pagos-area">
                                    <i class="fas fa-cash-register" aria-hidden="true"></i>
                                    Pagar
                                </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">
        
        {{ form_row(form._token) }} 

        <div class="row">
            <div class="col-md-12 mb-3">
                {{ form_label(form.metodopago) }}
                {{ form_widget(form.metodopago) }}
                {{ form_errors(form.metodopago) }}
            </div>
        </div>

        <hr/>

        {% for transf in form.transferencias %}

            <div class="row metodo-pago metodo-transferencia">

                <div class="col-md-12 mb-3">
                    <h4 class="text-primary">Transferencia</h4>
                </div>

                <div class="col-md-6 mb-3">
                    {{ form_label(transf.banco) }}
                    {{ form_widget(transf.banco) }}
                    {{ form_errors(transf.banco) }}
                </div>

                <div class="col-md-6 mb-3">
                    {{ form_label(transf.fecha) }}
                    {{ form_widget(transf.fecha) }}
                    {{ form_errors(transf.fecha) }}
                </div>

                <div class="col-md-12 mb-3">
                    {{ form_label(transf.cuenta) }}
                    {{ form_widget(transf.cuenta) }}
                    {{ form_errors(transf.cuenta) }}
                </div>

                <div class="col-md-12 mb-3">
                    <div class="form-group">
                        {{ form_label(transf.imageFile, 'Adjuntar imagen (Maximo 2MB, Formato jpg/png)') }}
                        {{ form_widget(transf.imageFile) }}
                        {{ form_errors(transf.imageFile) }}
                    </div>
                </div>

                <div class="col-md-12 mb-3">
                    {{ form_label(transf.observacion) }}
                    {{ form_widget(transf.observacion) }}
                    {{ form_errors(transf.observacion) }}
                </div>
            </div>

        {% endfor %}


        {% for deposito in form.depositos %}

            <div class="row metodo-pago metodo-deposito">

                <div class="col-md-12 mb-3">
                    <h4 class="text-primary">Depositos</h4>
                </div>

                <div class="col-md-6 mb-3">
                    {{ form_label(deposito.tipo) }}
                    {{ form_widget(deposito.tipo) }}
                    {{ form_errors(deposito.tipo) }}
                </div>

                <div class="col-md-6 mb-3">
                    {{ form_label(deposito.fecha) }}
                    {{ form_widget(deposito.fecha) }}
                    {{ form_errors(deposito.fecha) }}
                </div>

                <div class="col-md-12 mb-3">
                    {{ form_label(deposito.cuenta) }}
                    {{ form_widget(deposito.cuenta) }}
                    {{ form_errors(deposito.cuenta) }}
                </div>

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

                <div class="form-group">
                        {{ form_label(deposito.imageFile, 'Adjuntar imagen (Maximo 2MB, Formato jpg/png)') }}
                        {{ form_widget(deposito.imageFile) }}
                        {{ form_errors(deposito.imageFile) }}
                    </div>
                </div>

                <div class="col-md-12 mb-3">
                    {{ form_label(deposito.observacion) }}
                    {{ form_widget(deposito.observacion) }}
                    {{ form_errors(deposito.observacion) }}
                </div>
            </div>

        {% endfor %}


        <div class="row metodo-pago metodo-deposito metodo-transferencia">

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

                <h4 class="text-primary">Datos para Depósito o Transferencia</h4>

                <table class="table">
                    <tbody>
                        <tr>
                            <th>Banco:</th>
                            <td>BancoEstado (Cheq Electronica o Cta Vista)</td>
                        </tr>
                        <tr>
                            <th>Titular:</th>
                            <td>Servicios de Ingenieria Netnexo Ltda</td>
                        </tr>
                        <tr>
                            <th>N° Cuenta:</th>
                            <td>346-70400486</td>
                        </tr>
                        <tr>
                            <th>RUT Cuenta:</th>
                            <td>76.343.928-3</td>
                        </tr>
                    </tbody>
                </table>

            </div>

        </div>


    </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-5">
    <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>
    </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-pagar-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/pagar.js') }}></script>
    {% endblock %}