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

{% block preloader %}{% endblock %}

{% block title %}Nueva Orden{% endblock %}

{% block body %}

    <div class="container pb-5">

        <h2 class="my-4 text-primary">
            Orden de Compra
        </h2>

    <form id="orden-registro" method="post" enctype="multipart/form-data"
    data-hosting-plan="{{ app.request.query.get('h')|default(0) }}"
    data-dominio="{{ app.request.query.get('d')|default('') }}"
    data-extension="{{ app.request.query.get('e')|default(0) }}">

        {{ form_row(form._token) }}

        <div class="row">

            <div class="col-md-8 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">

                            <!-- Para Dominios Extras -->
                            <li class="nav-item mr-3">
                                <a data-toggle="list" class="nav-link active" href="#dominio-datos">
                                    <i class="fas fa-globe" aria-hidden="true"></i>
                                    Dominios</a>
                            </li>
                            <li class="nav-item mr-3">
                                <a data-toggle="list" role="tab" class="nav-link" href="#hosting-datos">
                                    <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="#factura-datos">
                                    <i class="fas fa-file-invoice-dollar" aria-hidden="true"></i>
                                    Facturación
                                </a> 
                            </li>
                            <li class="nav-item mr-3">
                                <a data-toggle="list" class="nav-link" href="#acuerdo-legal-area">
                                    <i class="fas fa-handshake" aria-hidden="true"></i>
                                    Acuerdo Legal</a>
                            </li>
                            <li class="nav-item mr-3">
                                <a data-toggle="list" class="nav-link" href="#datos-pago">
                                    <i class="fas fa-cash-register" aria-hidden="true"></i>
                                    Formas de Pago</a>
                            </li>
                            <li class="nav-item mr-3">
                                <a data-toggle="list" class="nav-link" href="#post-pago">
                                    <i class="fas fa-list-ol" aria-hidden="true"></i>
                                    Intrucciones</a>
                            </li>
                        </ul>
                    </div>


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

    <div class="tab-pane fade show active" id="dominio-datos" role="tabpanel">

        <h4 class="text-primary">Dominios</h4>

        {% for index, dominio in form.ordenDominio %}

        <div class="row orden-dominio">
            <div class="col-md-5 mb-3">
                {{ form_label(dominio.nombre) }}
                {{ form_widget(dominio.nombre) }}
                {{ form_errors(dominio.nombre) }}
            </div>

            <div class="col-md-2 mb-3">
                {{ form_label(dominio.extension) }}
                {{ form_widget(dominio.extension) }}
                {{ form_errors(dominio.extension) }}
            </div>

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

            <div class="col-md-2 mb-3">
                <label>&nbsp;</label>
                <button data-url="{{ path('website_buscar_dominio') }}" class="btn btn-primary btn-block buscar-dominio-disponible" type="button">
                    <i class="fas fa-search" aria-hidden="true"></i>
                </button>
            </div>

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

        </div>

        {% endfor %}

    </div>

    <div class="tab-pane fade" id="hosting-datos" role="tabpanel">

        <h4 class="text-primary">Hostings</h4>

        {% for index, hosting in form.ordenHosting %}

        <div class="row mb-3 orden-hosting">
            <div class="col-md-12 mb-3">
                {{ form_label(hosting.planDestino, 'Plan') }}
                {{ form_widget(hosting.planDestino) }}
                {{ form_errors(hosting.planDestino) }}
            </div>
            <div class="col-md-12 mb-3">
                {{ form_label(hosting.duracion) }}
                {{ form_widget(hosting.duracion) }}
                {{ form_errors(hosting.duracion) }}
            </div>

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

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

        {% endfor %}

    </div>

    <div class="tab-pane fade" id="factura-datos" role="tabpanel">

        <h4 class="text-primary">Facturación</h4>

        <div class="row orden-factura">

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

            <div class="col-md-12 mt-3">
                <hr/>
            </div>

            <div class="col-md-12 mb-3">
                {{ form_label(form.ordenFactura.nombre, 'Razon Social') }}
                {{ form_widget(form.ordenFactura.nombre) }}
                {{ form_errors(form.ordenFactura.nombre) }}
            </div>

            <div class="col-md-6 mb-3">
                {{ form_label(form.ordenFactura.dni, 'RUT') }}
                {{ form_widget(form.ordenFactura.dni) }}
                {{ form_errors(form.ordenFactura.dni) }}
            </div>

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

            <div class="col-md-6 mb-3">
                {{ form_label(form.ordenFactura.telefono) }}
                {{ form_widget(form.ordenFactura.telefono, { 'attr': {'placeholder': '+56123456789'} }) }}
                {{ form_errors(form.ordenFactura.telefono) }}
            </div>

            <div class="col-md-6 mb-3">
                {{ form_label(form.ordenFactura.fono) }}
                {{ form_widget(form.ordenFactura.fono, { 'attr': {'placeholder': '+56987654321'} }) }}
                {{ form_errors(form.ordenFactura.fono) }}
            </div>

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

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

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

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

    </div>

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

        <h4 class="text-primary">Acuerdo Legal</h4>

        <div class="col-md-12 my-4">
            {{ form_label(form.termino) }}
            {{ form_widget(form.termino) }}
            {{ form_errors(form.termino) }}
        </div>

        <hr/>

        <div class="col-md-12 acuerdo-caja-scroll">
            {% include 'all/orden/_acuerdo_legal.html.twig' %}
        </div>

    </div>

    <div class="tab-pane fade formas-pago" id="datos-pago" role="tabpanel">

        <!--h4 class="text-primary">Formas de Pago disponibles</h4>

        <h4><strong>Depósito o Transferencia Bancaria</strong></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>

        <h4 class="mt-4"><strong>Vía WebPay</strong></h4>
        <label>
            También puedes realizar tu pago vía WebPay haciendo clic <a href="#">Aquí</a>
        </label>

        <img src="{{ asset('/build/images/logos/webpay-ancho.png') }}">

        <hr/>
        <label>
            Una vez realizado el pago, por favor envíenos la confirmación al Email <a href="mailto:gestion@netnexo.cl">gestion@netnexo.cl</a>
        </label-->


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

        <hr/>

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

        {% 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>

    <div class="tab-pane fade" id="post-pago" role="tabpanel">

        <h4 class="text-primary">Instrucciones Post-Pago</h4>

        <p>
            Usted recibirá confirmación por email de la activación de sus servicios dentro de 24 horas de la recepción del pago.
        </p>

        <p>
            La renovación del contrato se avisará con 60, 30, 5 y 1 día de anticipación a la fecha de expiación.
        </p>

        <p>
            Esta orden de compra se mantendrá vigente en nuestros servidores, hasta 30 días a partir de la fecha de hoy.
        </p>

        <p>
            Los precios son validos por 30 días a contar de la generación de esta orden, excepto ofertas y/o precios especiales
        </p>

        <hr/>

        <div class="col-md-12 mb-3">
            {{ form_label(form.emailCopia, 'Deseo enviar una copia a:') }}
            {{ form_widget(form.emailCopia) }}
            {{ form_errors(form.emailCopia) }}
        </div>

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

</div>



        </div>
    </div>


                <div class="mb-3 col-md-4 wow fadeInUp">
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <div class="card">
                                <div class="card-header bg-primary text-white text-center">
                                    <strong><i class="fas fa-shopping-cart " aria-hidden="true"></i> Resumen de Compra</strong>
                                </div>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item" >
                                        <div class="d-flex justify-content-between">
                                            <div class="hosting-resumen-0"></div>
                                            <div class="hosting-precio-0 text-primary"></div>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <div class="dominio-resumen-0"></div>
                                            <div class="dominio-precio-0 text-primary"></div>
                                        </div>
                                        <hr/>
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <strong>Total</strong>
                                            </div>
                                            <div class="resumen-precio-total text-primary">

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

                        <div class="col-md-12">
                            <button id="boton-registro-orden" class="btn btn-primary btn-lg btn-block" type="submit">Siguiente</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</form>

    </div>

{% endblock %}


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