{% extends "base.html.twig" %}
{% block title %}Establecimiento {{ establecimiento.sfid }}{% endblock %}

{% block stylesheets %}
    <link href="{{ asset("/vendors/select2/dist/css/select2.min.css") }}" rel="stylesheet" />
{% endblock stylesheets %}
{% block main %}
    <div class="page-title">
        <div class="title_left">
            <h3>Establecimiento {{ establecimiento.sfid }}</h3>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="row">
        <div class="col-md-8">
            <div class="x_panel">
                <div class="x_title">
                    <h2>{{ establecimiento.nombre }} <small>{{ establecimiento.cliente }}</small></h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                            <ul class="dropdown-menu" role="menu">
                                <li>
                                    <a href="{{ path("gestion_establecimiento_edit", {'establecimiento':establecimiento.id}) }}">Editar</a>
                                </li>
                                <li>
                                    <a href="{{ path("gestion_establecimiento_delete", {'establecimiento':establecimiento.id}) }}">Borrar</a>
                                </li>
                            </ul>
                        </li>
                    </ul>

                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="" role="tabpanel" data-example-id="togglable-tabs">
                        <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#tab_datos" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true">Datos</a>
                            </li>
                            <li role="presentation" class=""><a href="#tab_mapa" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">Mapa</a>
                            </li>
                            <li role="presentation" class=""><a href="#tab_proyectos" role="tab" id="profile-tab2" data-toggle="tab" aria-expanded="false">Proyectos</a>
                            </li>
                            <li role="presentation" class=""><a href="#tab_planos" role="tab" id="tab-planos" data-toggle="tab" aria-expanded="false">Planogramas</a>
                            </li>
                            <li role="presentation" class="">
                                <a href="#tab_movimientos" role="tab" id="tab-movimientos" data-toggle="tab" aria-expanded="false">
                                    Inventario/Movimientos
                                </a>
                            </li>
                            <li role="presentation" class="">
                                <a href="#tab_almacen" role="tab" id="tab-almacen" data-toggle="tab" aria-expanded="false">
                                    Almacén Central
                                </a>
                            </li>

                        </ul>
                        <div id="myTabContent" class="tab-content">
                            <div role="tabpanel" class="tab-pane fade active in" id="tab_datos" aria-labelledby="home-tab">
                                <b>Gerente:</b> {{ establecimiento.gerente }}<br>
                                <b>Telefono:</b> <a href="tel:{{ establecimiento.telefono|url_encode() }}">{{ establecimiento.telefono }}</a><br>
                                <b>Email:</b> <a href="mailto:{{ establecimiento.email }}">{{ establecimiento.email }}</a><br>
                                <b>Horario:</b> {{ establecimiento.horario }}<br>
                                <b>Dirección:</b> {% include 'Partes/EstablecimientoDireccion.twig' with {'establecimiento':establecimiento} %} <br>
                                <b>Observaciones:</b> {{ establecimiento.observaciones }}<br />
                                <b>Posiciones Actualizadas:</b> {{establecimiento.cantidadPosicionesActualizados}} (
                                {% if establecimiento.cantidadTerminales > 0 %}
                                    {{ ((establecimiento.cantidadPosicionesActualizados/establecimiento.cantidadTerminales) * 100)|round(2) }}%
                                {% else %}
                                    100%
                                {% endif %})
                                <br />


                            </div>
                            <div role="tabpanel" class="tab-pane fade" id="tab_mapa" aria-labelledby="profile-tab">
                                <div id="mapaTienda" style="width:100%; height: 300px;"></div>
                            </div>
                            <div role="tabpanel" class="tab-pane fade" id="tab_proyectos" aria-labelledby="profile-tab">
                                <table class="table table-responsive table-striped">
                                    <thead>
                                        <tr>
                                            <th>Nombre</th>
                                            <th>Cliente</th>
                                            <th>Contrata</th>
                                            <th>Fecha Inicio</th>
                                            <th>Fecha Fin</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for proyecto in proyectos %}
                                            <tr>
                                                <td>{{ proyecto.nombre }}</td>
                                                <td>{{ proyecto.cliente }}</td>
                                                <td>{{ proyecto.contrata }}</td>
                                                <td>{{ proyecto.fechaInicio.format("d/m/Y")|default('') }}</td>
                                                <td>{{ proyecto.fechaFin.format("d/m/Y")|default('') }}</td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <div role="tabpanel" class="tab-pane fade" id="tab_planos" aria-labelledby="tab-planos">
                                <div class="row">
                                    <div class="col-md-9">
                                        {% include 'Partes/EstablecimientoPlanograma.twig' with {'establecimiento':establecimiento} %}
                                    </div>
                                    <div class="col-md-3">
                                        {% for plano in establecimiento.planogramas %}
                                            <a href="#" onclick="cambiaPlano('{{plano.file}}')">{{ plano.fecha.format("d-m-Y")|default("Planograma") }}</a><br />
                                        {% endfor %}
                                        <h4>Nuevo Planograma</h4>
                                        <form method="POST" action="{{ path("establecimiento_fichero_agregar",{'establecimiento':establecimiento.id})}}" enctype='multipart/form-data' >
                                            <input type="file" name="plano" />
                                            <input type="submit" class="btn btn-default" value="Subir" />
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div role="tabpanel" class="tab-pane fade" id="tab_movimientos" aria-labelledby="tab-movimientos">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="x_panel">
                                            <div class="x_title">
                                                <h2>Inventario</h2>
                                                <div class="clearfix"></div>
                                            </div>
                                            <div class="x_content">
                                                <table class="table table-striped DataTable">
                                                    <thead>
                                                        <tr>
                                                            <th>Material</th>
                                                            <th>Cantidad</th>
                                                        </tr>
                                                    <thead>
                                                    <tbody>
                                                        {% if inventario_entregas|length > 0 %}
                                                            {% for inventario in inventario_entregas %}
                                                                <tr>
                                                                    <td>{{ inventario.material }}</td>
                                                                    {% for inv in inventario_recogidas %}
                                                                        {% if inv.material == inventario.material %}
                                                                            <td>{{ inventario.subtotal - inv.subtotal }}</td>
                                                                        {% endif %}
                                                                    {% endfor %}
                                                                </tr>
                                                            {% endfor %}
                                                        {% else %}
                                                            {% for inv in inventario_recogidas %}
                                                                <tr>
                                                                    <td>{{ inv.material }}</td>
                                                                    <td>- {{ inv.subtotal }}</td>
                                                                </tr>
                                                            {% endfor %}
                                                        {% endif %}
                                                    <tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="x_panel">
                                            <div class="x_title">
                                                <h2>Movimientos</h2>
                                                <div class="clearfix"></div>
                                            </div>
                                            <div class="x_content">
                                                <table class="table table-striped DataTable">
                                                    <thead>
                                                        <tr>
                                                            <th>Material</th>
                                                            <th>Cantidad</th>
                                                            <th>Técnico</th>
                                                            <th>Fecha</th>
                                                        </tr>
                                                    <thead>
                                                    <tbody>
                                                        {% for movimiento in movimientos %}
                                                            {% if movimiento.tipo == "Retirado" or movimiento.tipo == "Instalado" %}
                                                                <tr>
                                                                    <td>{{ movimiento.material.nombre }}</td>
                                                                    <td>{% if movimiento.tipo == "Retirado" %}-{% endif %}{{ movimiento.cantidad }}</td>
                                                                    <td><a href="{{ path('gestion_movimientos_tecnico',{'id':movimiento.tecnico.id}) }}">{{ movimiento.tecnico.nombre }}</td>
                                                                    <td>{{ movimiento.fechaMovimiento.format("d-m-Y H:i")}}</td>
                                                                </tr>
                                                            {% endif %}
                                                        {% endfor %}
                                                    <tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div role="tabpanel" class="tab-pane fade" id="tab_almacen" aria-labelledby="tab-almacen">
                                <div class="row">
                                    <div class="x_panel">
                                        <div class="x_title">
                                            <h2>Inventario/Almacén</h2>
                                            <div class="clearfix"></div>
                                        </div>
                                        <div class="x_content">
                                            <table class="table table-striped DataTable">
                                                <thead>
                                                    <tr>
                                                        <th>Material</th>
                                                        <th>Cantidad</th>
                                                    </tr>
                                                <thead>
                                                <tbody>
                                                    {% if inventario_recogidas_almacen|length > 0 %}
                                                        {% for inventario in inventario_recogidas_almacen %}
                                                            <tr>
                                                                <td>{{ inventario.material }}</td>
                                                                {% for inv in inventario_entregas_almacen %}
                                                                    {% if inv.material == inventario.material %}
                                                                        <td>{{ inventario.subtotal - inv.subtotal }}</td>
                                                                    {% endif %}
                                                                {% endfor %}
                                                            </tr>
                                                        {% endfor %}
                                                    {% else %}
                                                        {% for inv in inventario_entregas_almacen %}
                                                            <tr>
                                                                <td>{{ inv.material }}</td>
                                                                <td>- {{ inv.subtotal }}</td>
                                                            </tr>
                                                        {% endfor %}
                                                    {% endif %}
                                                <tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="x_panel">
                <div class="x_title">
                    <h2>Partes</h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <table class="table table-responsive table-striped">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Proyecto</th>
                                <th>Fecha Fin</th>
                                <th>Técnico</th>
                                <th>Respuesta</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for parte in partes %}
                                <tr>
                                    <td><a href="{{ path("gestion_parte_view",{'parte':parte.id}) }}">{{ parte.ident }}</a></td>
                                    <td>{{ parte.proyecto }}</td>
                                    <td>{{ parte.fechaFin.format("d-m-Y H:i")|default('') }}</td>
                                    <td>{{ parte.tecnico }}</td>
                                    <td></td>
                                {% endfor %}
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="x_panel">
                <div class="x_title">
                    <h2>Muebles</h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>

                    </ul>

                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    {% for mueble in establecimiento.muebles %}
                        <h4>{{ mueble}}</h4>
                        <table id="mueble_{{mueble.id}}" class="table table-responsive table-striped">
                            <thead>
                                <tr>
                                    <th>Posición</th>
                                    <th>Terminal</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for terminal in mueble.terminales %}
                                    <tr id="terminal_{{loop.index}}">
                                        <td>{{ loop.index }}</td>
                                        <td>
                                            {{ terminal }}
                                            {% if mueble.estados[loop.index] is defined and not mueble.estados[loop.index] is empty %}
                                                <span class="text-danger">
                                                    <br>
                                                    <strong>Desactualizado: </strong>
                                                    {% for estado in mueble.estados[loop.index] %}
                                                        {% if estado == 'prodpad' %}Product Pad{% else %}{{ estado|capitalize }}{% endif %}{% if not loop.last %}, {% endif %}
                                                    {% endfor %}
                                                </span>
                                            {% endif %}
                                        </td>
                                        <td><a href="#" onclick="eliminarTerminal(event, '{{mueble.id}}', '{{ loop.index }}')"><i class="fa fa-trash"></i></a></td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="3">
                                        <div class="form-horizontal">
                                            <div class="col-sm-9">
                                                <select id="sel_terminales_{{mueble.id}}"   class="form-control select2-terminales">
                                                </select>
                                            </div>
                                            <div class="col-sm-3">
                                                <a href="#" class="btn btn-default" onclick="agregarTerminal(event, '{{mueble.id}}')" style="float: right;">Agregar</a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    {% endfor %}
                </div>
                <div class="x_footer">
                    <h4>Nueva mesa</h4>
                    <div class="form-horizontal">
                        <div class="col-sm-9">
                            <select id="sel_mueb_new" class="form-control">
                                <option value="TopTen">TopTen</option>
                                <option value="ProdTab">ProdTab</option>
                                <option value="Suple">Suple</option>
                                <option value="Hero 1 TP">Hero 1 TP</option>
                                <option value="Hero 2 TP">Hero 2 TP</option>
                                <option value="Hero 1 FQ">Hero 1 FQ</option>
                                <option value="Hero 2 FQ">Hero 2 FQ</option>
                                <option value="Hero 3 COIN-ECI">Hero 3 COIN-ECI</option>
                                <option value="Hero 4 FQ">Hero 4 FQ</option>
                            </select>
                        </div>
                        <div class="col-sm-3">
                            <a href="#" class="btn btn-default" onclick="agregarMesa()" style="float: right;">Agregar</a>
                        </div>
                    </div>
                    <div class="clearfix"></div>

                </div>
            </div>
        </div>
    </div>
{% endblock main %}

{% block javascripts %}
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCgQoPE-2JRlbdjoA5nU75ASxqmEDdxi-o&callback=initMap">
    </script>
    <script src="{{ asset("/vendors/select2/dist/js/select2.min.js") }}"></script>

    <script>
                                var map;
                                var uluru = {lat:{{establecimiento.direccion.lat|default("0.0")}}, lng:{{establecimiento.direccion.long|default("0.0")}}};
                                function initMap() {
                                    map = new google.maps.Map(document.getElementById('mapaTienda'), {
                                        zoom: 14,
                                        center: uluru
                                    });
                                    var marker = new google.maps.Marker({
                                        position: uluru,
                                        map: map
                                    });
                                }
                                $('.nav-tabs a').on('shown.bs.tab', function (event) {
                                    if ($(event.target).text() == "Mapa") {
                                        google.maps.event.trigger(map, 'resize');
                                        map.setCenter(uluru);
                                    }
                                });
                                function eliminarTerminal(event, mueble, posicion) {
                                    event.preventDefault();
                                    $.ajax({
                                        type: 'POST',
                                        url: '{{ path("establecimiento_terminal_eliminar",{'establecimiento':establecimiento.id}) }}',
                                        data: {'mueble': mueble, 'posicion': posicion},
                                        success: function (response) {
                                            $("#mueble_" + mueble).find("#terminal_" + posicion).remove();
                                        }
                                    });
                                }
                                function agregarTerminal(event, mueble) {
                                    event.preventDefault();
                                    var terminal = $("#sel_terminales_" + mueble).select2('val');
                                    $.ajax({
                                        type: 'POST',
                                        url: '{{ path("establecimiento_terminal_agregar",{'establecimiento':establecimiento.id}) }}',
                                        data: {'mueble': mueble, 'terminal': terminal},
                                        success: function (response) {
                                            window.location.reload();
                                        }
                                    });
                                }
                                // $('.select2-terminales').select2();

                                /*
                                 $('.select2-terminales').select2({
                                 ajax: {
                                 url: '{{ path("terminales_search")}}',
                                 dataType: 'json',
                                 processResults: function (data) {
                                 // Tranforms the top-level key of the response object from 'items' to 'results'
                                 return {
                                 results: data.data
                                 };
                                 }
                                 }
                                 });*/
                                function cargarTerminal(mueble_id) {
                                    alert('entro');
                                    var sel_terminal_mueble = '#sel_terminales_' + mueble_id;
                                    $(sel_terminal_mueble).select2({
                                        ajax: {
                                            url: '{{ path("terminales_search")}}',
                                            dataType: 'json',
                                            processResults: function (data) {
                                                // Tranforms the top-level key of the response object from 'items' to 'results'
                                                return {
                                                    results: data.data
                                                };
                                            }
                                        }
                                    });
                                }

                                function agregarMesa() {
                                    tipo = $("#sel_mueb_new option:selected").val();
                                    $.ajax({
                                        type: 'POST',
                                        url: '{{ path("establecimiento_mueble_agregar",{'establecimiento':establecimiento.id}) }}',
                                        data: {'tipo': tipo},
                                        success: function (response) {
                                            window.location.reload();
                                        }
                                    });
                                }

                                function cambiaPlano(url) {
                                    console.log(url);
                                    $("#plano_pdf").attr('src', "/uploads/" + url);
                                }

    </script>

{% endblock javascripts %}