{% extends "base/base-front-home.html.twig" %}
{% block title %}{% trans into locale %}Nearest distributors{% endtrans %} | Cershop{% endblock %}
{% block metadescription %}{% endblock %}
{% block robots %}noindex,follow{% endblock %}
{% block stylesheet %}
    {{ parent() }}
{% endblock %}

{% block bodyclass %}{{ parent() }}{% endblock %}
{% block contenido %}
<div class="page-content pb-10 mb-4">
    <!-- Migas de pan -->
    <nav class="breadcrumb-nav">
        <div class="container">
            <ul class="breadcrumb">
                <li><a href="{{ path('home.'~locale) }}"><i class="d-icon-home"></i></a></li>
                <li><a href="{{ path('categorias.'~locale) }}">Categoría</a></li>
                <li><a href="{{ path('detallePieza.'~locale, {slug: variante.slug}) }}">{{ variante.prefijo~" "~variante.nombre }}</a></li>
                <li class="active">{% trans into locale %}Nearest distributors{% endtrans %}</li>
            </ul>
        </div>
    </nav>
    <!-- ./migas de pan -->

    {% include '/partials/front-ubicacion.html.twig' %}
    
    <section id="distribuidores" class="pt-10 mt-3 appear-animate" data-animation-options="{'delay': '.3s'}"{% if longitud is null %} style="display: none;"{% endif %}>
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <h1 class="title title-center">{% trans into locale %}Nearest distributors{% endtrans %}</h1>
                    <div class="alert alert-message alert-light alert-primary alert-link mb-10 text-center">
                        <p>{% trans into locale %}Showing nearest distributors offering the product{% endtrans %} <b>{{ variante.prefijo~" "~variante.nombre }}</b>.</p>
                        <button type="button" class="btn btn-link btn-close">
                            <i class="d-icon-times"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div id="resultados" class="row pt-5">
            </div>
        </div>
    </section>
                
</div>
{% endblock %}

{% block javascript %}
{{ parent() }}
<script>
    function filtrar_distribuidores() {
        $.ajax({
            url: '{{ path('filtrarDistribuidores', {slug: app.request.get('slug')}) }}',
            type: 'post',
            dataType: 'html',
            data: {
                'longitud': longitud,
                'latitud': latitud
            },
            async: true,
            success: function(data) {
                $('#resultados').html(data);
            }
        });
    }
    function confirmarZip(event) {
        event.preventDefault();
        formulario = new FormData(document.getElementById('localizacion'));
        formulario.append('locale', '{{ locale }}');
        $.ajax({
            url: '{{ path('confirmarZip') }}',
            type: 'post',
            dataType: 'json',
            data: formulario,
            processData: false,
            contentType: false,
            async: true,
            success: function(data) {
                if(data.output == 'ok') {
                    longitud = data.longitud;
                    latitud = data.latitud;
                    $('#aviso').toggle();
                    $('#distribuidores').toggle();
                    filtrar_distribuidores();
                }
                else {
                    $('#error-zip').html(data.error);
                    $('#error-zip').show();
                }
            }
        });
    }
    function setearPosicion(position) {
        longitud = position.coords.longitude;
        latitud = position.coords.latitude;
        $('#aviso').toggle();
        $('#distribuidores').toggle();
        filtrar_distribuidores();
    }
    $(document).ready(function() {
        {% if longitud is null %}
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(setearPosicion);
            }
        {% else %}
            longitud = {{ longitud }};
            latitud = {{ latitud }};
            filtrar_distribuidores();
        {% endif %}
    });
</script>
{% endblock %}