{% extends "AppBundle::layout_backend.html.twig" %}
{% block stylesheets %}
    <link href="{{ asset('bundles/app/plugins/sweetalert/css/sweetalert.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('bundles/app/plugins/datatables.1.10.16/css/dataTables.bootstrap.min.css') }}" rel="stylesheet"
          type="text/css"/>
    <style>
        .modal-lg {
            width: 100%;
            margin: auto;
        }

        .imagen-thumbnail {
            width: 50%;
            height: auto;
        }
    </style>
{% endblock %}

{% block content %}
    <div class='box'>
        <div class='row'>
            <div class='col-xs-12 col-lg-12 col-md-12'>
                <div class="table-responsive">
                    <table id='tablesorter1' class="table  table-bordered table-hover ">
                        <thead>
                        <tr class='tr-top-table'>
                            {# sorting of properties based on query components #}
                            <th></th>
                            <th{% if pagination.isSorted('nombre') %} class="sorted"{% endif %}>{{ knp_pagination_sortable(pagination, 'Nombre', 'nombre') }}</th>
                            <th>Logo</th>
                            <th></th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class='tr-filter-table'>
                            <form action="{{ path('app_search_marca') }}" method="get">
                                <th></th>
                                <th><input class="form-control" placeholder="" name="search" type="text"></th>
                                <th></th>
                                <th colspan='2'><span class="input-group-btn right-side">
								<button class="btn btn-default btn-flat" type="submit"><i
                                            class="fa fa-search"></i>{% trans %}Filtrar{% endtrans %}</button>
							</span>
                                </th>
                            </form>
                        </tr>
                        {% for d in pagination %}
                            <tr>
                                <td>
                                    {{ d.id }}
                                </td>
                                <td>
                                    {{ d.nombre }}
                                </td>
                                <td>
                                    {% if (d.imagen) %}
                                        {% set foto1=asset(d.imagen,'directoriofotosmarca') %}
                                        <img id='verfoto1' width="80" height="80" data-url="{{ foto1 }}"
                                             class="verfoto1" src="{{ foto1 }}" title="Ver foto" data-toggle="modal"
                                             data-target="#myModal{{ d.id }}"/>

                                        <!-- Modal -->
                                        <div class="modal fade" id="myModal{{ d.id }}" tabindex="-1" role="dialog"
                                             aria-labelledby="myModalLabel">
                                            <div class="modal-dialog modal-lg" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal"
                                                                aria-label="Close"><span
                                                                    aria-hidden="true">&times;</span></button>
                                                        <h4 class="modal-title" id="myModalLabel">Vista Previa de la
                                                            Foto</h4>
                                                    </div>
                                                    <div class="modal-body">
                                                        <img data-url="{{ foto1 }}" class="imagen-thumbnail"
                                                             src="{{ foto1 }}"/>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default"
                                                                data-dismiss="modal">Cerrar
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}
                                </td>
                                <td>
                                    <a class="actualizardatos" title="Actualizar Datos"
                                       data-url="{{ path('app_marca_edit', { 'id': d.id ,'filtro': app.request.QueryString  }) }}"
                                       href="#"><i class="fa  fa-edit"></i></a>
                                </td>
                                <td>
                                    <a href="{{ path('app_delete_marca', { 'id': d.id }) }}"><i
                                                class="fa fa-remove"></i></a>
                                </td>
                            </tr>
                        {% else %}
                            <tr class="danger">
                                <td colspan="4">
                                    No hay resultados para mostrar.
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {#	<div class='col-xs-12 col-lg-3 col-md-3 box-tools' style=''>
                    <div class='box-tools-inner' style=''>
                        <h2>Acciones</h2>
                        <div class="form-group">
                                <button id="btnagregar" class="btn btn-primary btn-flat" type="submit"><i class="fa fa-plus"></i>Agregar Marca</button>
                        </div>
                        <div class="form-group">
                            <form action="{{path('app_marca_index')}}" method="get">
                            <div class="input-group">
                                <select id="xnroregistros" name="xnroregistros" class="form-control">
                                    <option value="5">5</option>
                                    <option value="10">10</option>
                                    <option value="15">15</option>
                                    <option value="20">20</option>
                                    <option value="25">25</option>
                                    <option value="30">30</option>
                                    <option value="35">35</option>
                                    <option value="40">40</option>
                                    <option value="45">45</option>
                                    <option value="50">50</option>
                                    <option value="55">55</option>
                                    <option value="60">60</option>
                                    <option value="65">65</option>
                                    <option value="70">70</option>
                                    <option value="75">75</option>
                                    <option value="80">80</option>
                                    <option value="85">85</option>
                                    <option value="90">90</option>
                                    <option value="95">95</option>
                                    <option value="100">100</option>
                                </select>
                                <span class="input-group-btn">
                                    <button id="btnfiltroreg" class="btn btn-default btn-flat" type="submit"><i class="fa fa-sort-amount-asc"></i>{%trans%}Aplicar{%endtrans%}</button>
                                </span>
                            </div>
                            </form>
                        </div>
                        <div class="form-group">
                            <button id="btnsincronizar" class="btn btn-success btn-flat" type="submit"><i class="fa fa-share-square-o"></i>Sincronizar con Vtex</button>
                        </div>
                    </div>
                </div>		#}
        </div>
    </div>
    <div class="box">

        <div class="box-body">
        </div>
        <div class="box-footer">
            <div class="pull-left">
                Total Registros: {{ pagination.getTotalItemCount }}
            </div>
            <div class="pull-right">
                {{ knp_pagination_render(pagination) }}
            </div>

        </div><!-- box-footer -->

    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('bundles/app/plugins/sweetalert/js/sweetalert.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bundles/app/plugins/datatables.1.10.16/js/jquery.dataTables.min.js') }}"
            type="text/javascript"></script>
    <script src="{{ asset('bundles/app/plugins/datatables.1.10.16/js/dataTables.bootstrap.min.js') }}"
            type="text/javascript"></script>
    <script>
        $(document).ready(function () {

            $(".actualizardatos").tooltip();

            $(".actualizardatos").click(function () {
                var url = $(this).attr('data-url');
                document.location.href = url;
            });

            $("body").addClass('sidebar-collapse').trigger('collapsed.pushMenu');

            $("#btnsincronizar").click(function () {
                var xurl;
                xurl = "{{ path('app_update_marca_vtex') }}";
                var url = xurl;
                //success,info,warning,error
                swal({
                        title: "¿Esta seguro que desea sincronizar todos las Marcas con el api de VTEX?",
                        text: "El proceso actualizara las Marcas que no hayan sido subidas a VTEX.",
                        type: "info",
                        showCancelButton: true,
                        confirmButtonColor: "#00a65a",
                        confirmButtonText: "Si",
                        cancelButtonText: "No",
                        closeOnConfirm: true,
                        closeOnCancel: false
                    },
                    function (isConfirm) {
                        if (isConfirm) {
                            swal("Actualizar Marcas",
                                "Iniciado",
                                "success");
                            document.location.href = url;
                        } else {
                            swal("Actualizar Marcas",
                                "Se cancelo el proceso",
                                "error");
                        }
                    }
                );
            });
        });
    </script>
{% endblock %}