{% extends "AppBundle::layout_backend.html.twig" %}

{% block stylesheets %}
<link rel="Stylesheet" type="text/css" href="{{ asset('bundles/app/dist/croppie/dist/sweetalert.css') }}"/>
{% endblock %}

{% block content %}
<div class='box views'>
    <div class='row'>
        <div class="col-xs-12 col-lg-12 col-md-12 text-right">
            <a href="#"><buttom type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Nuevo Tag <i class="fa fa-tag" aria-hidden="true"></i></buttom></a>
        </div>
    </div>
    <div class='row'>
        <div class='col-xs-12 col-lg-12 col-md-12'>
            <div class="table-responsive showview">
                <table id='tablesorter' class='table table-responsive'>
                    <thead>
                        <tr class='tr-top-table'>
                            <th>Nombre</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for t in tags %}
                            <tr class="tr-data">
                                <td class="text-center">
                                    {{ t.name }}
                                </td>
                                <td class="text-center">
                                    <buttom type="button" class="btn btn-danger" data-name='{{t.name}}'> <i class="fa fa-trash" aria-hidden="true"></i></buttom>
                                </td>
                            </tr>
                        {% else %}
                            <tr class="danger">
                                <td colspan="4">
                                    No hay resultados para mostrar.
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" 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">Nuevo Tag</h4>
        </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="tag">Nombre</label>
                    <input type="text" class="form-control" id="tag" placeholder="Tag">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary">Crear Tag</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script src="{{ asset('bundles/app/dist/croppie/dist/sweetalert.min.js') }}" type="text/javascript"></script>
<script>
    const sellerId = getValuesFromTwig().empresa_id;
    $(document).ready(function () {        

        $('.btn-danger').click(function(){
            var name = $(this).data('name');
            var url = `{{ path('tags_delete',{'name':'tagname'}) }}?seller=${sellerId}`;
            var url2 = url.replace('tagname',name);
            swal({
                title: "Esta seguro que quiere eliminar?",
                text: "Si quitara todas las relaciones con los productos",
                type: "warning",
                showCancelButton: true,
                confirmButtonClass: "btn-success",
                confirmButtonText: "Si",
                closeOnConfirm: false
                },
                function(){
                $.ajax({
                    type: 'delete',
                    url: url2,
                    dataType: 'json',
                    success:function(data){
                        swal("Borrado", "Se pudo eliminar la Tag", "success");
                        location.reload();
                    },
                    error: function(data){
                        swal("Error", "No se pudo eliminar la Tag", "error")
                    }
                });
            });            
        });

        $('.btn-primary').click(function(){
            var name = $("#tag").val();
            var url = `{{path('tags_new')}}?seller=${sellerId}`;
            var settings = {
                "url": url,
                "method": "POST",
                "timeout": 0,
                "headers": {
                    "Content-Type": "application/json"
                },
                "data": JSON.stringify({"name":name}),
            };
            swal({
            title: "Esta seguro?",
            text: "Se enviara la solucitud al servidor",
            type: "info",
            showCancelButton: true,
            closeOnConfirm: false,
            showLoaderOnConfirm: true
            }, function () {
                $.ajax(settings).done(function (response) {
                    if(response['success']){
                        setTimeout(function () {
                            swal("La tag fue creada");
                        }, 2000);
                        location.reload();
                    }else{
                        swal("Error", "No se pudo crear la Tag", "error");
                    }
                });
            
            });
                           
        });
    });

</script>
{% endblock %}