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

{% block title 'Asociar Categoria Proveedor con Full Jaus'|trans %}
    
{% block stylesheets %}
    <link href="{{ asset('bundles/app/dist/easyautocomplete/easy-autocomplete.min.css') }}" rel="stylesheet"/>
    <link rel="Stylesheet" type="text/css" href="{{ asset('bundles/app/dist/croppie/demo/prism.css') }}"/>
    <link rel="Stylesheet" type="text/css" href="{{ asset('bundles/app/dist/croppie/dist/sweetalert.css') }}"/>
    <link rel="Stylesheet" type="text/css" href="{{ asset('bundles/app/dist/croppie/croppie.css') }}"/>


{% endblock %}


{% block headercontent %}
    {% trans %}Asociar Categorias {% endtrans %}
{% endblock %}

{% block content %}
    <div class="box">
        <div class="box-header">
            <h3 class="box-title">{% trans %}Asociar Categoria Proveedor con Full Jaus{% endtrans %}</h3>


            <div class="box-tools">
                <a class="btn btn-danger" href="{{ path('CategoriaProveedor_indexAction') }}"><i
                            class="fa fa-remove text-white"></i> {% trans %}Regresar{% endtrans %} </a>
            </div>


        </div><!-- /.box-header -->
        <div class="box-body">


            <form action="{{ path('CategoriaProveedor_updateAssociationAction',{'id':categoriaproveedorid}) }}"
                  method="get">


                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <label class="label label-danger">Categorias del Proveedor</label> <br><br>
                        <div class="form-group">

                            <select id="parent_2" name="parent_2">

                                {% for p in categoriaproveedor %}
                                    <option value="{{ p.codigo }}">{{ p.nombre }}</option>
                                {% endfor %}

                            </select>

                        </div>

                    </div>
                </div>


                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <h1>ASOCIAR A LAS CATEGORIAS FULL JAUS</h1>

                    </div>
                </div>


                <div class="row">

                    <div class="col-xs-4 col-sm-4 col-md-4">
                        <label class="label  label-success">Departamentos</label><br><br>
                        <div class="form-group">
                            <select id="departamento_2" name="departamento_2"></select>
                        </div>

                    </div>


                    <div class="col-xs-4 col-sm-4 col-md-4">
                        <label class="label label-success">Categoria</label> <br><br>
                        <div class="form-group">
                            <select id="categoria_2" name="categoria_2"></select>
                        </div>

                    </div>


                    <div class="col-xs-4 col-sm-4 col-md-4">
                        <label class="label label-success">SubCategoria</label><br><br>
                        <div class="form-group">
                            <select id="subcategoria_2" name="subcategoria_2"></select>
                        </div>

                    </div>

                </div>


                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <button class="btn btn-primary btn-flat" type="submit"><i
                                    class="fa fa-save"></i>{% trans %}ASOCIAR CATEGORIA{% endtrans %}</button>
                    </div>
                </div>


            </form>

        </div><!-- /.box-body -->


        <div class="box-footer">

        </div><!-- box-footer -->
    </div><!-- /.box -->
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('bundles/app/dist/easyautocomplete/jquery.easy-autocomplete.min.js') }}"
            type="text/javascript"></script>
    <script src="{{ asset('bundles/app/plugins/datepicker/locales/bootstrap-datepicker.es.js') }}"
            type="text/javascript"></script>
    <script src="{{ asset('bundles/app/dist/croppie/demo/prism.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bundles/app/dist/croppie/dist/sweetalert.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bundles/app/dist/croppie/croppie.js') }}" type="text/javascript"></script>

    <script>

        $(document).ready(function () {

            $('form').on('submit', function (e) {

                $(this).submit();
            });


            $('.onoffswitch').on('click', function () {
                var input = $('input[id*="vigente"]');
                var check = input.prop('checked');
                if (!check) {
                    input.prop('checked', true);
                    //check = $('#appbundle_children_activo').prop('checked');
                } else {
                    input.prop('checked', false);
                    //check = $('#appbundle_children_activo').prop('checked');
                }
            });


            var data = {
                parentid: 0
            };


            var $mascota_selector2 = $('select[id*="departamento_2"]');
            $mascota_selector2.children().remove();
            $.ajax({
                type: 'post',
                url: "{{ path('CategoriaGlobal_searchGlobalParentsCategories') }}",
                data: data,
                dataType: 'json',
                success: function (data) {
                    $.each(data, function (i, e) {
                        $mascota_selector2.append('<option value="' + e.codigo + '">' + e.nombre + '</option>');
                    });
                }
            });


            $('select[id*="departamento_2"]').change(function () {

                var data2 = {
                    parentid: $(this).val(),
                };

                console.log($(this).val());


                var $mascota_selector4 = $('select[id="categoria_2"]');


                $mascota_selector4.children().remove();

                $.ajax({
                    type: 'post',
                    url: "{{ path('CategoriaGlobal_searchGlobalSubCategories') }}",
                    data: data2,
                    dataType: 'json',
                    success: function (data) {
                        $.each(data, function (i, e) {
                            $mascota_selector4.append('<option value="' + e.codigo + '">' + e.nombre + '</option>');
                        });
                    }
                });

            });


            $('select[id="categoria_2"]').change(function () {


                console.log($(this).val());

                var data3 = {
                    parentid: $(this).val(),
                };


                var $mascota_selector5 = $('select[id="subcategoria_2"]');

                $mascota_selector5.children().remove();
                $.ajax({
                    type: 'post',
                    url: "{{ path('CategoriaGlobal_searchGlobalSubCategories') }}",
                    data: data3,
                    dataType: 'json',
                    success: function (data) {
                        $.each(data, function (i, e) {
                            $mascota_selector5.append('<option value="' + e.codigo + '">' + e.nombre + '</option>');
                        });
                    }
                });

            });


        });
    </script>



{% endblock %}