@extends('layout.template')
@section('contenido')
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <header class="card-header">
                    <h3 class="card-title">Mapeo de Atributos</h3>
                </header>
                <div class="card-body">
                    <div class="form-group">
                        <label class="control-label">Seleccione el atributo a gestionar:</label>
                        <select id="atributo" name="atributo" class="form-control form-control-border form-control-sm system_validador_vacio">
                            <option value="">Seleccione</option>
                            @foreach ($MLAtributo as $Atributo)
                                <option value=" {{ $Atributo['id_atributo'] }}"> {{ $Atributo['nombre'] }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>
        @if(count($ListaAtributo) > 0 || is_object($AtributoInfo))
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <form id="ml_atributo" name="ml_atributo">
                            <input type="hidden" name="idatributo" value=" {{ $AtributoInfo['id_atributo'] }}"/>
                            <input type="hidden" name="ml_atributo_etiqueta" id="ml_atributo_etiqueta" value=""/>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label class="control-label">Equivalente</label>
                                    <select id="ml_atributo_codigo" name="ml_atributo_codigo" class="form-control m-bot15 system_validador_vacio">
                                        <option></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label class="control-label">Valor Cliente</label>
                                    <input name="valor_cliente" id="valor_cliente" value="" type="text" class="form-control system_validador_vacio">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <button type="button" id="btn_guardar" class="btn btn-sm btn-success">Guardar</button>
                                <br>
                                <div id="resultado_ajax"></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        @endif
    </div>
    @if(count($ListaAtributo) > 0 || is_object($AtributoInfo))
        @if(count($ListaAtributo) <= 0)
            <div class="row">
                <div class="col-lg-12 card p-3 m-2">
                    <div class="card-body">
                        <h5 class="card-header">
                            Valores para: <span style="color: #FF6C60"> {{ $AtributoInfo['nombre'] }}</span>
                        </h5>
                        <center>
                            Aun no hay atributos equivalentes creados.
                        </center>
                    </div>
                </div>
            </div>
        @else
            <div class="row">
                <div class="col-lg-12 card p-3 m-2">
                    <input type="hidden" name="procesar" class="form-control" value="1">
                    <h5 class="card-header">
                        Valores para: <span style="color: #FF6C60"> {{ $AtributoInfo['nombre'] }}</span>
                    </h5>
                    <div class="card-body">
                        <section id="flip-scroll">
                            <table class="table table-bordered table-striped table-condensed cf">
                                <thead class="cf">
                                <tr>
                                    <th>Valor Cliente</th>
                                    <th>Valor Equivalente MercadoLibre</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach ($ListaAtributo as $Atributo)
                                    <tr>
                                        <td> {{ $Atributo['cliente_valor'] }}</td>
                                        <td> {{ $Atributo['ml_etiqueta'] }}</td>
                                        <td>
                                            <center>
                                                <button onclick="Eliminar( '{{ $Atributo['id_equivalencia'] }}' )" type="button" class="btn btn-shadow btn-danger">Eliminar</button>
                                                <span id="resultado_ {{ $Atributo['id_equivalencia'] }}"></span>
                                            </center>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </section>
                    </div>
                </div>
            </div>
        @endif
        <script>
			var AtributosML;

			jQuery('#ml_atributo_codigo').on('change', function () {
				jQuery("#ml_atributo_etiqueta").val(jQuery(this).find("option:selected").text());
			});

			jQuery('#btn_guardar').on('click', function () {
				if (system_validarcampos('ml_atributo', 1)) {
					var formulario = jQuery("#ml_atributo").serializeObject();
					jQuery("#loader_proceso").fadeIn(100);
					jQuery("#resultado_ajax").html("<span style='color:red'>Procesando</span>");
					axios({
						method: "POST",
						responseType: 'json',
						url: "{{ url('request/producto/crearrelacionatributo') }}",
						data: formulario
					}).then(function (data) {
							if (data.data.resultado) {
								jQuery("#resultado_ajax").html("<span style='color:green'>Atributo creado.</span>");
								setTimeout(function () {
									window.location.href = "{{url('mercadolibre/mapeoatributo/?atributo=')}}" + "{{ $AtributoInfo['id_atributo'] }}";
								}, 1000);
							} else {
								jQuery("#resultado_ajax").html("<span style='color:orange'>No se puedo registrar el atributo.</span>");
							}
							jQuery("#loader_proceso").fadeOut(100);
						}
					);
				}
				;
			});

			function Eliminar(Id) {
				var answer = confirm("¿Esta seguro de eliminar esta relación de atributo?");
				if (answer) {
					jQuery("#resultado_" + Id).text("Procesando");
					axios({
						method: "GET",
						responseType: "json",
						url: "{{ url('request/producto/eliminaratributo?idequivalencia=')}}" + Id,
					}).then(function (data) {
						if (data.data.resultado) {
							jQuery("#resultado_" + Id).text("Atributo eliminado.");
							setTimeout(function () {
								window.location.href = " {{ url('mercadolibre/mapeoatributo/?atributo=')}}" + "{{ $AtributoInfo['id_atributo']}}"
							}, 1000);
						} else {
							jQuery("#resultado_" + Id).text("No fue posible eliminar el atributo.");
						}
					});
				}
			}

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

			var CargarAtributos = function () {
				Mostrarloader();
				axios({
					method: "GET",
					responseType: "json",
					url: "{{env('ML_API_URL_ROOT') }}" + "categories/MCO1747/attributes", //MCO59825 MCO8439 (categorias atributos quemada vieja)
				}).then(function (data) {
					AtributosML = data.data
					for (var i in AtributosML) {
						jQuery('#ml_atributo_codigo').append(jQuery('<option>', {
							value: AtributosML[i].id,
							text: AtributosML[i].name
						}));
						if (AtributosML[i].name === "{{ $AtributoInfo['nombre'] }}") {

						}
					}
					Ocultarloader();
				});
			};
        </script>
    @endif
    <script>
		jQuery('#atributo').on('change', function () {
			window.location.href = " {{ url('mercadolibre/mapeoatributo?atributo=')}}" + this.value;
		});
    </script>
@endsection