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


{% block body %}

    <!-- SLIDER -->

    <div id="carouselPrincipal" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselPrincipal" data-slide-to="0" class="active"></li>
            <!--li data-target="#carouselPrincipal" data-slide-to="1"></li-->
        </ol>

        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="first-slide" style="background-image: url({{ asset('build/images/slider/welcome-bg.jpg') }});">
                <div class="container">
                  <div class="carousel-caption">

                    <h3 class="carousel-titulo text-orange">Crea tu <span class="text-white">Negocio online</span></h3>
                    <p class="carousel-titulo">Bienvenido a Netnexo.cl</p>
                    <!--p><a class="btn btn-lg btn-primary" href="#" role="button">Promici&oacute;n</a></p-->
                  </div>
                </div>
            </div>

            <!--div class="carousel-item">
                <img class="second-slide" style="background-image: url({{ asset('build/images/slider/welcome-bg.jpg') }});">
                <div class="container">
                    <div class="carousel-caption">

                        <h3 class="carousel-titulo text-orange">Crea tu <span class="text-white">Negocio online</span></h3>
                        <p class="carousel-titulo">Bienvenido a Netnexo.cl</p>
                        <p><a class="btn btn-lg btn-primary" href="#" role="button">Promici&oacute;n</a></p>

                    </div>
                </div>
            </div-->

        </div>

        <a class="carousel-control-prev" href="#carouselPrincipal" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Anterior</span>
        </a>

        <a class="carousel-control-next" href="#carouselPrincipal" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Siguiente</span>
        </a>
    </div>


    <!-- BUSCADOR DOMINIOS -->

    <section id="dominio-buscar" class=" py-5">
        <div class="container">
            <div class="row">
                <div class="offset-md-1 col-md-10">

                    <div class="text-center">
                        <h4>Encuentra el nombre de tu dominio aquí</h4>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-8 mt-3">
                            <input class="form-control" name="nombreDominio" id="nombre-dominio" placeholder="Nombre del Dominio" type="text">
                        </div>
                        <div class="col-md-2 mt-3">
                            <select class="form-control custom-select select-orange text-center" name="extensionDominio" id="extension-dominio">
                                {% for extension in extensiones %}
                                    <option value="{{ extension.getNombre() }}">{{ extension.getNombre() }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-2 mt-3">
                            <button type="button" id="buscar-dominio-disponible" class="btn btn-default btn-block" data-url-buscar="{{ path('website_buscar_dominio') }}" data-url-registro="{{ path('orden_registrar') }}">Buscar</button>
                        </div>
                        <div class="col-md-12 mt-4">
                            <div id="resultado-dominio-inicio" class="no-display"></div>
                            <div id="resultado-dominio-cargando" class="pt-5 no-display">
                                <div class="cssload-loader"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- POPULARIDAD AREA -->

    <section id="popularidad-area" class="mb-5 py-5">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-3 mb-3">
                    <div class="text-center wow fadeInUp" data-wow-delay="0.2s">
                        <i class="mb-3 fab fa-pagelines" aria-hidden="true"></i>
                        <h3><span class="counter">11</span></h3>
                        <h5>Años de experiencia</h5>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-6 col-md-3 mb-3">
                    <div class="text-center wow fadeInUp" data-wow-delay="0.4s">
                        <i class="mb-3 fas fa-user-circle" aria-hidden="true"></i>
                        <h3><span class="counter">500</span>+</h3>
                        <h5>Clientes Satisfechos</h5>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-6 col-md-3 mb-3">
                    <div class="text-center wow fadeInUp" data-wow-delay="0.6s">
                        <i class="mb-3 fas fa-globe" aria-hidden="true"></i>
                        <h3><span class="counter">300</span>+</h3>
                        <h5>Websites en nuestros servidores</h5>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-6 col-md-3 mb-3">
                    <div class="text-center wow fadeInUp" data-wow-delay="0.8s">
                        <i class="mb-3 fab fa-facebook" aria-hidden="true"></i>
                        <h3><span class="counter">120</span>+</h3>
                        <h5>Seguidores en Redes Sociales</h5>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- PLAN AREA -->

    {% if planes|length > 0 %}

        <div id="plan-area" class="mb-5">
            <div class="container mb-5">
                <div class="row">
                    <div class="col-md-12">
                        <div class="wow fadeInUp mt-5">
                            <p class="text-center text-muted">Elige tú plan de Hosting</p>
                            <h3 class="plan-titulo text-center">Planes</h3>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container">
                <div class="row">

                    {% for plan in planes %}

                    <div class="col-sm-6 col-md-3">
                        <div class="plan-bloque p-3 mb-4 text-center active wow fadeInUp" data-wow-delay="0.4s">
                            <div>
                                <h3 class="plan-nombre">{{ plan.nombre }}</h3>
                            </div>
                            <div>
                                <h4><span class="plan-precio">$ {{ plan.costo|number_format }} Incluye IVA</span></h4>
                            </div>

                            <div class="plan-caracteristicas text-muted mt-5">

                            {% for detalle in plan.detalles %}

                                <p>
                                    <strong>{{ detalle.nombre }}
                                        {% if detalle.detalle|length > 0 %}
                                            ({{ detalle.detalle }})
                                        {% endif %}
                                    </strong>
                                </p>

                            {% endfor %}

                            </div>

                            <div class="button mt-4">
                                <a class="btn btn-default" href="{{ path('orden_registrar', {h: plan.id}) }}" role="button">Contratar Plan</a>
                            </div>
                        </div>
                    </div>

                    {% endfor %}

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

    {% endif %}


    <!-- NOSOTROS TAMBIEN -->

    <div id="publicar-area" class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-md-10 offset-md-1">
                    <div class="text-center wow fadeInUp" data-wow-delay="0.2s">
                        <h3>También nos puedes encontrar en cualquiera de nuestros otros Website para mas servicios</h3>

                    </div>
                </div>
                <div class="text-center col-md-4 wow fadeInUp" data-wow-delay="0.5s">
                    <a href="http://pymesdechile.com/">
                        <img height="200px" src="{{ asset('build/images/logos/pymevision.png') }}">
                    </a>
                </div>
                <div class="text-center col-md-4 wow fadeInUp" data-wow-delay="0.5s">
                    <a href="http://netnexo.cl/">
                        <img height="200px" src="{{ asset('build/images/logos/netnexo-lg.png') }}">
                    </a>
                </div>
                <div class="text-center col-md-4 wow fadeInUp" data-wow-delay="0.5s">
                    <a href="https://pymedominio.com">
                        <img height="200px" src="{{ asset('build/images/logos/pymedominio.png') }}">
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- NOSOTROS TAMBIEN -->

    <!-- PUBLICAR PyME -->

    <div id="publicar-area" class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-md-8 offset-md-1">
                    <div class="text-center wow fadeInUp" data-wow-delay="0.2s">
                        <h3>Publique su PyMe Aquí... Al igual que nuestros clientes</h3>

                    </div>
                </div>
                <div class="text-center col-md-2">
                    <div class="button">
                        <a class="btn btn-default btn-lg" href="http://pymesdechile.com/" target="_blank" role="button">Gratis</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- FIN PUBLICAR PyME -->

    <!-- SOCIOS -->

    <div id="carouselSocios" class="carousel slide py-5 my-5" data-ride="carousel">
        <div class="carousel-inner">

            {% set uno = ['patagoniavineyards.com.jpg', 'attavio.cl.jpg','aquafree.cl.jpg'] %}
            {% set dos = ['comercialguivar.cl.jpg', 'hofsan.com.jpg','RioItata.cl.jpg'] %}
            {% set tres = ['Taxcocantina.cl.jpg', 'LogopropiedadesGonzalez.png','LogoWolfdrilling.png'] %}
            {% set todos = [uno, dos, tres] %}

            {% for index, item in todos %}
                <div class="carousel-item {% if index == 1 %}active{% endif %} ">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row">
                                    {% for patrocinador in item %}
                                        <div class="text-center col-md-4 col-sm-2 my-4">
                                            <a>
                                                <img src="build/images/patrocinadores/{{ patrocinador }}" alt="">
                                            </a>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>


{% endblock %}