@extends('layout.template')
@section('contenido')
    <div class="row">
        <div class="col-md-12">
			<div class="card">
                <input type="hidden" name="procesar" class="form-control" value="1">
                <header class="card-header">
                    <h3 class="card-title">Categorías Mapeadas</h3>
                </header>
                <div class="card-body">
                    <section id="flip-scroll">
                        <table class="table table-bordered table-striped table-condensed cf">
                            <thead class="cf">
                            <tr>
                                <th>Categoría Cliente</th>
                                <th>Categoría MercadoLibre</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach ($ListaEquivalencias as $Categoria)
                                <tr>
                                    <td> {{ $Categoria['categoria_externa'] }}</td>
                                    <td> {{ $Categoria['categoria_mp_nombre'] }}</td>
                                    <td>
                                        <button onclick="Eliminar( '{{ $Categoria['id_equivalencia'] }}' )" type="button" class="btn btn-shadow btn-danger">Eliminar</button>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </section>
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="card">
                <input type="hidden" name="procesar" class="form-control" value="1">
                <header class="card-header">
                    <h3 class="card-title">Mapear Categoría</h3>
                </header>
                <div class="card-body">
                    <form class="form-horizontal tasi-form" name="formcategoria" id="formcategoria" method="post">
                        @csrf
                        <div class="form-group">
                            <label class=" control-label">Categoría local</label>
                            <div id="contenedor_categoria">
                                <input type="text" value="" id="categoria_local" name="categoria_local" value="" class="form-control system_validador_vacio">
                            </div>
                        </div>
                        <section id="flip-scroll-categoria" class="row">
                            <div id="ml_contenedor_categoria_0" class="col-sm-4" style="margin-bottom: 10px">
                                <select consecutivo="0" style="height: 200px" id="ml_categoria_0" class="form-control ml_categoria" size="20">
                                </select>
                            </div>
                        </section>
                        <div id="contenedor_categoria_final" class="col-sm-4" style="margin-bottom: 10px; display: none">
                            <h1>OK Listo, ya puedes guardar</h1>
                            <input type="hidden" id="seleccion_categoria_codigo" name="seleccion_categoria_codigo" value="0"/>
                            <input type="hidden" id="seleccion_categoria_nombre" name="seleccion_categoria_nombre" value="0"/>
							<input type="hidden" id="market_place" name="market_place" value="mercado_libre" />
                        </div>
                    </form>
                    <button type="button" id="btn_guardar" class="btn btn-sm btn-success">Guardar</button>
                    <br>
                    <div id="resultado_ajax"></div>
                </div>

            </div>
        </div>
    </div>
    <script>

		function Eliminar(IdEquivalencia) {
			var answer = confirm("¿Esta seguro de eliminar esta relación?");
			if (answer) {
				window.location.href = "{{ url('mercadolibre/mapeocategoria?idequivalente=') }}" + IdEquivalencia;
			}
		}

		setTimeout(function () {
			CargarCategoriaPrincipal();
		}, 1000);

		setTimeout(function () {
			CargarCategoriaSitioWeb();
		}, 1000);

		var NumCatGlobal = 1;
		var CargarCategoriaSitioWeb = function (CategoriaPadre = "") {
			let CatSuperior = "";
			if (CategoriaPadre != "") {
				CatSuperior = "&categoria=" + CategoriaPadre;
			}
			axios({
				method: "GET",
				responseType: "json",
				data: CatSuperior,
				url: "{{ url('request/producto/get-categoria-externa?') }}" + CatSuperior,
			}).then(function (data) {
				if (data.data.length == 0) {
					return;
				}
				jQuery("#categoria_local").attr("type", "hidden");
				jQuery("#contenedor_categoria").append('<select id="categoria_externa_' + NumCatGlobal + '" name="categoria_1" class="categoria_externa form-control form-control-border form-control-sm system_validador_vacio"><option></option></select>');

				Object.values(data.data).forEach(val => {
					jQuery('#categoria_externa_' + NumCatGlobal).append(jQuery('<option>', {value: val.id, text: val.nombre}, '</option>'));
				});
				NumCatGlobal++;
			});
		};

		jQuery('body').on('click', '.categoria_externa', function () {
			jQuery(jQuery(this)).next().remove();

			jQuery("#categoria_local").val();
			let CategoriasUnidas = "";
			jQuery('.categoria_externa').each(function () {
				CategoriasUnidas = CategoriasUnidas + jQuery(this).children("option:selected").text() + "\\";
			});
			jQuery("#categoria_local").val(CategoriasUnidas.substring(0, CategoriasUnidas.length - 1));
			if (jQuery(this).val() != "") {
				CargarCategoriaSitioWeb(jQuery(this).val());
			}
		});

		var NumContenedoresCategoria = 0;
		var CargarCategoriaPrincipal = function () {
			axios({
				method: "GET",
				responseType: "json",
				url: "{{ url('request/mercadolibre/getcategoriaroot?codigopais=') }}" + "{{ $Conf['ml_pais_codigo'] }}",
			}).then(function (data) {
				data = JSON.parse(data.data)
				for (var i in data) {
					jQuery('#ml_categoria_0').append(jQuery('<option>', {
						value: data[i].id,
						text: data[i].name
					}));
				}
			});
		};

		jQuery('body').on('click', '.ml_categoria', function () {
			let CodCAtegoria = jQuery(this).val();
			let TextoCategoria = jQuery(this).children("option:selected").text();

			let ConsecActual = jQuery(this).attr("consecutivo");
			ConsecActual++;
			for (i = ConsecActual; i <= NumContenedoresCategoria; i++) {
				jQuery("#ml_contenedor_categoria_" + i).remove();
			}

			axios({
				method: "GET",
				responseType: "json",
				url: "{{ url('request/mercadolibre/getsubcategoria?codigocatpadre=') }}" + CodCAtegoria,
			}).then(function (data) {
				data = JSON.parse(data.data)
				if (data.children_categories.length === 0) {
					jQuery("#contenedor_categoria_final").fadeIn(100);
					jQuery("#seleccion_categoria_codigo").val(CodCAtegoria);
					jQuery("#seleccion_categoria_nombre").val(TextoCategoria);
					return;
				} else {
					jQuery("#seleccion_categoria_codigo").val("0");
					jQuery("#seleccion_categoria_nombre").val("");
				}

				jQuery("#contenedor_categoria_final").fadeOut(100);
				jQuery('#flip-scroll-categoria').append('<div id="ml_contenedor_categoria_' + (NumContenedoresCategoria + 1) + '" class="col-sm-4"  style="margin-bottom: 10px"><select style="height: 200px;" consecutivo="' + (NumContenedoresCategoria + 1) + '" id="ml_categoria_' + (NumContenedoresCategoria + 1) + '" class="form-control ml_categoria" size="20"></select></div>');

				for (var i in data.children_categories) {
					jQuery('#ml_categoria_' + (NumContenedoresCategoria + 1)).append(jQuery('<option>', {
						value: data.children_categories[i].id,
						text: data.children_categories[i].name
					}));
				}
				NumContenedoresCategoria++;
				contenedor_categoria
			});
		});

		jQuery('#btn_guardar').on('click', function () {
			if (system_validarcampos('formcategoria', 1)) {
				var SeleccionoCategoria = jQuery("#seleccion_categoria_codigo").val();
				if (SeleccionoCategoria !== 0) {
					let formulario = jQuery("#formcategoria").serializeObject();
					jQuery("#loader_proceso").fadeIn(100);
					axios({
						method: "POST",
						responseType: 'json',
						url: "{{ url('request/producto/crear-relacion-categoria') }}",
						data: formulario
					}).then(function (resp) {
						if (resp.data.error === 0) {
							Swal.fire('Relacion creada', '', 'success').then(function () {
								window.location.reload();
							});
						} else {
							notificarUsuario(resp.data.mensaje);
						}
					});
				} else {
					notificarUsuario("Debe seleccionar la categoria final del grupo.")
				}
			}
		});
    </script>
@endsection