@extends('layout.backoffice')
@section('content')
<div class="row">
    <div class="col-12 col-lg-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Grupo</h3>
            </div>
            <form id="grupo">
                <div class="card-body">
                    <div class="row">
                        <input type="hidden" value="" name="entity" />
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label>Nombre</label>
                                <input value=""   name="nombre" type="text" class="form-control form-control-border form-control-sm system_validador_vacio" id="nombre">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="card-footer">
                                    <button type="button" id="btn_guardar" class="btn btn-primary btn-sm btn-flat">Guardar</button>
                            </div>
        </div>
    </div>
    </div>
<div class="modal fade" id="modal-default" style="display: none;" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Gestionar Atributo</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="info_atributo">
                    <input type="hidden" name="entity" id="entity" value="" />
                    <div class="row">
                        <div class="form-group col-12 col-md-6">
                            <label>Código</label>
                            <input type="text" name="codigo" id="codigo" class="form-control form-control-border form-control-sm rounded-0 system_validador_vacio" maxlength="50" onkeypress="return /[a-z-_]/i.test(event.key)">
                        </div>
                        <div class="form-group col-12 col-md-6">
                            <label>Nombre</label>
                            <input type="text" name="nombre" id="atributo_nombre" class="form-control form-control-border form-control-sm rounded-0 system_validador_vacio" maxlength="50">
                        </div>
                        <div class="form-group col-12 col-md-2">
                            <label>Obligatorio</label>
                            <select name="obligatorio" id="obligatorio" class="custom-select form-control-border form-control-sm rounded-0 system_validador_vacio">
                                <option value=""></option>
                                <option value="1">Si</option>
                                <option value="0">No</option>
                            </select>
                        </div>
                        <div class="form-group col-12 col-md-2">
                            <label>Filtrable</label>
                            <select name="generar_filtro" id="generar_filtro" class="custom-select form-control-border form-control-sm rounded-0 system_validador_vacio">
                                <option value=""></option>
                                <option value="1">Si</option>
                                <option value="0">No</option>
                            </select>
                        </div>
                        <div class="form-group col-12 col-md-4">
                            <label>Tipo de dato</label>
                            <select name="tipo_dato" id="tipo_dato" class="custom-select form-control-border form-control-sm rounded-0 system_validador_vacio">
                                <option value=""></option>
                                <option value="varchar">Campo de texto</option>
                                <option value="bool">Si/No</option>
                                <option value="select">Desplegable</option>
                                <option value="double">Numérico</option>
                                <option value="datetime">Fecha</option>
                                <option value="longtext">Editor Texto</option>
                            </select>
                        </div>
                        <div class="form-group col-12 col-md-4">
                            <label>Tipo de Validación</label>
                            <select name="tipo_entrada" id="tipo_entrada" class="custom-select form-control-border form-control-sm rounded-0">
                                <option value="">Ninguna</option>
                                <option value="system_validador_email">Email</option>
                                <option value="system_validador_numerico">Número</option>
                                <option value="system_validador_numformato">Formato Moneda</option>
                                <option value="system_validador_url">URL</option>
                                <option value="system_validador_fecha">Fecha</option>
                                <option value="system_editor">Editor texto</option>
                            </select>
                        </div>
                    </div>
                    <div class="row d-none" id="atributo_opciones">
                        <table class="table table-sm col-12">
                            <thead>
                                <tr>
                                    <th style="width: 10px">#</th>
                                    <th>Opción</th>
                                </tr>
                            </thead>
                            <tbody id="opciones_lista">
                            </tbody>
                        </table>
                    </div>
                </form>
                <div class="row mt-2 d-none" id="atributo_opciones_crear">
                    <input type="hidden" value="" id="atributo_id" name="entity" />
                    <div class="form-group col-12 col-md-8">
                        <input placeholder="Opción" type="text" name="opcion" id="opcion" class="form-control form-control-border form-control-sm rounded-0 system_validador_vacio" maxlength="50">
                    </div>
                    <div class="form-group col-12 col-md-4">
                        <button type="button" class="btn btn-default btn-block btn-sm btn-flat" id="btn_crear_opcion" >Crear opción</button>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default btn-flat" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary btn-flat" id="btn_crear_atributo">Crear</button>
                <button type="button" class="btn btn-primary btn-flat d-none" id="btn_actualizar_atributo">Actualizar</button>
            </div>
        </div>
    </div>
</div>
<script>
    jQuery(document).on('click', '#btn_guardar', function () {
        if (system_validarcampos("grupo")) {
            axios.post('producto_grupo', getDataJson("grupo")).then(function (resp) {
                if (resp.data.error === 0) {
                    Swal.fire("Grupo creado", '', 'success').then(function () {
                        location.reload();
                    });
                } else {
                    notificarUsuario(resp.data.mensaje);
                }
            });
        }
    });

    jQuery(document).on('click', '#btn_crear_atributo', function () {
        if (system_validarcampos("info_atributo")) {
            axios.post('producto_grupo_atributo', getDataJson("info_atributo")).then(function (resp) {
                if (resp.data.error === 0) {
                    Swal.fire("Atributo creado", '', 'success').then(function () {
                        location.reload();
                    });
                } else {
                    notificarUsuario(resp.data.mensaje);
                }
            });
        }
    });

    jQuery(document).on('click', '.btn_editar', function () {
        cargarAtributo(jQuery(this).data("id"));
    });

    function cargarAtributo(idAtributo) {
        axios.get('producto_grupo_atributo/' + idAtributo).then(function (resp) {
            if (resp.data.error === 0) {
                jQuery("#entity").val(resp.data.data.id_atributo);
                jQuery("#atributo_id").val(resp.data.data.id_atributo);
                jQuery("#codigo").attr('readonly', true);
                jQuery("#codigo").val(resp.data.data.cod_atrib);
                jQuery("#atributo_nombre").val(resp.data.data.etiqueta);
                jQuery("#obligatorio").val(resp.data.data.obligatorio).change();
                jQuery("#tipo_dato").val(resp.data.data.tipo_dato).change();
                jQuery("#tipo_dato").prop('disabled', true);
                jQuery("#tipo_entrada").val(resp.data.data.tipo_entrada).change();
                jQuery("#generar_filtro").val(resp.data.data.generar_filtro).change();
                jQuery('#modal-default').modal('show');
                jQuery('#btn_crear_atributo').addClass("d-none");
                jQuery('#btn_actualizar_atributo').removeClass("d-none");

                if (resp.data.data.opciones != undefined) {

                    jQuery('#opciones_lista').html("");

                    for (i = 0; i < resp.data.data.opciones.length; i++) {
                        jQuery('#opciones_lista').append('<tr><td><button data-id="' + resp.data.data.opciones[i].id_opcion + '" type="button" class="btn btn_atributo_opcion_eliminar badge btn-outline-danger btn-block btn-sm btn-flat"><i class="fa fa-eraser"></i></button></td><td>' + resp.data.data.opciones[i].opcion + '</td></tr>');
                    }

                    jQuery('#atributo_opciones').removeClass("d-none");
                    jQuery('#atributo_opciones_crear').removeClass("d-none");
                } else {
                    jQuery('#atributo_opciones').addClass("d-none");
                    jQuery('#atributo_opciones_crear').addClass("d-none");
                }

            } else {
                notificarUsuario(resp.data.mensaje);
            }
        });
    }

    jQuery(document).on('click', '#btn_actualizar_atributo', function () {
        if (system_validarcampos("info_atributo")) {
            axios.put('producto_grupo_atributo', getDataJson("info_atributo")).then(function (resp) {
                if (resp.data.error === 0) {
                    Swal.fire("Atributo actualizado", '', 'success').then(function () {
                        location.reload();
                    });
                } else {
                    notificarUsuario(resp.data.mensaje);
                }
            });
        }
    });

    jQuery(document).on('click', '#btn_crear_opcion', function () {
        if (system_validarcampos("atributo_opciones_crear")) {
            axios.post('producto_grupo_atributo_opcion', getDataJson("atributo_opciones_crear :input")).then(function (resp) {
                if (resp.data.error === 0) {
                    Swal.fire("Opción agregada", '', 'success').then(function () {
                        cargarAtributo(jQuery("#entity").val());
                    });
                } else {
                    notificarUsuario(resp.data.mensaje);
                }
            });
        }
    });

    jQuery(document).on('click', '.btn_atributo_opcion_eliminar', function () {
        Swal.fire({
            title: '¿Está seguro de eliminar esta opción?',
            text: "Esta acción no se puede revertir.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Si',
            cancelButtonText: 'No'
        }).then((result) => {
            if (result.value) { Swal.showLoading(Swal.getDenyButton());
                axios.delete('producto_grupo_atributo_opcion/' + jQuery(this).data("id")).then(function (resp) {
                    if (resp.data.error === 0) {
                        Swal.fire("Atributo eliminado", '', 'success').then(function () {
                            cargarAtributo(jQuery("#entity").val());
                        });
                    } else {
                        notificarUsuario(resp.data.mensaje);
                    }
                });
            }
        });
    });
    
    jQuery(document).on('click', '#modal_crear_atributo', function () {
        limpiarCampos("info_atributo");
        jQuery("#codigo").attr('readonly', false);
        jQuery("#tipo_dato").prop('disabled', false);
    });
</script>
@endsection