@extends('layout.backoffice')
@section('content')
    @if(!isset($entidad["tab_info_extendido"]) && !isset($entidad["id_producto"]))
        @include('page.producto.modal.tipo_atributo')
    @endif
    <form id="producto" enctype="multipart/form-data">
        <input type="hidden" value="{{$entidad["id_producto"] ?? ''}}" name="entity" id="entity"/>
        <input type="hidden" value="{{$grupo_extendido ?? ''}}" name="grupo_ext"/>
        <div class="row">
            <div class="col-12 col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <ul class="nav nav-tabs card-header-tabs flex-column flex-sm-row" id="custom-tabs-four-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="pill" href="#tab-general" role="tab" aria-controls="custom-tabs-four-home" aria-selected="true">General</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="pill" href="#tab-categorias" role="tab" aria-controls="custom-tabs-four-messages" aria-selected="false">Categorias</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="pill" href="#tab-imagenes" role="tab" aria-controls="custom-tabs-four-settings" aria-selected="false">Imagenes</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="pill" href="#tab-info-extendida" role="tab" aria-controls="custom-tabs-four-settings" aria-selected="false">Información Extendida</a>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="tab-content">
                            <div class="tab-pane fade active show" id="tab-general" role="tabpanel" aria-labelledby="custom-tabs-four-home-tab">
                                <div class="row">
                                    @include('page.producto.tab.general')
                                </div>
                            </div>
                            <div class="tab-pane fade" id="tab-categorias" role="tabpanel" aria-labelledby="custom-tabs-four-messages-tab">
                                <div class="row">
                                    @include('page.producto.tab.categorias')
                                </div>
                            </div>
                            <div class="tab-pane fade" id="tab-imagenes" role="tabpanel" aria-labelledby="custom-tabs-four-settings-tab">
                                <div class="row">
                                    @include('page.producto.tab.imagenes')
                                </div>
                            </div>
                            <div class="tab-pane fade" id="tab-info-extendida" role="tabpanel" aria-labelledby="custom-tabs-four-settings-tab">
                                <div class="row">
                                    @include('page.producto.tab.extendido')
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        @if (isset($entidad['id_producto']))
                            @if(validarAccion("crear_actualizar_productos"))
                                <button type="button" id="btn-actualizar" class="btn btn-primary btn-sm btn-flat">
                                    <i class="bx bx-save me-2"></i>Actualizar
                                </button>
                                <button type="button" id="btn-eliminar" class="btn btn-danger btn-sm btn-flat">
                                    <i class="bx bx-trash me-2"></i>Eliminar
                                </button>
                            @endif
                            <a href="{{ url('backoffice/producto/gestionar/') }}">
                                <button type="button" class="btn btn-secondary btn-sm btn-flat">
                                    <i class="bx bx-arrow-back me-2"></i>Volver
                                </button>
                            </a>
                        @else
                            @if(validarAccion("crear_actualizar_productos"))
                                <button type="button" id="btn-guardar" class="btn btn-primary btn-sm btn-flat">
                                    <i class="bx bx-save me-2"></i>Guardar
                                </button>
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </form>
    <script src="{{ URL::asset('dist/js/bootstrap-datepicker.js') }}"></script>
    <link rel="stylesheet" href="{{URL::asset('dist/css/datepicker.css')}}">
    <script src="{{ URL::asset('dist/js/bs-custom-file-input.min.js') }}"></script>
    <style>
        .hummingbird-treeview .fa {
            font-size: 14px
        }

        .hummingbird-treeview, .hummingbird-treeview * {
            font-size: 18px
        }

        .hummingbird-treeview,
        .hummingbird-treeview label {
            font-weight: normal;
        }

        .hummingbird-treeview input[type=checkbox] {
            width: 14px;
            height: 14px;
            padding: 0px;
            margin: 0 15px 0;
        }

        .hummingbird-treeview ul:not(.hummingbird-base) {
            display: none;
        }

        .hummingbird-treeview .fa {
            font-style: normal;
            cursor: pointer;
        }

        .fa-vacio:before {
            content: " "
        }
    </style>
    <script>
        let productoId = {{$entidad["id_producto"] ?? '0'}};
        jQuery("#treeview").hummingbird();
        jQuery("#treeview").hummingbird("expandAll");

        jQuery(document).on('click', '#btn-actualizar', function () {
            if (system_validarcampos("producto")) {
                Mostrarloader()
                axios.put('productos', getDataJson("producto")).then(async function (resp) {
                    Ocultarloader()
                    if (resp.data.error === 0) {
                        const respImg = await gestionarImagenes()

                        if (respImg) {
                            Swal.fire("Producto actualizado", '', 'success').then(function () {
                                location.reload();
                            });
                        }
                    } else {
                        notificarUsuario(resp.data.mensaje);
                    }
                });
            } else {
                Swal.fire("Faltan datos por llenar", "", "info")
            }
        });

        jQuery(document).on('click', '#btn-guardar', function () {
            if (system_validarcampos("producto")) {
                Mostrarloader()
                axios.post('productos/crear', getDataJson("producto")).then(function (resp) {
                    Ocultarloader()
                    if (resp.data.error === 0) {
                        Swal.fire("Producto creado", '', 'success').then(function () {
                            window.location = UrlGlobal + 'producto/gestionar/' + resp.data.data.id;
                        });
                    } else {
                        notificarUsuario(resp.data.mensaje);
                    }
                });
            } else {
                Swal.fire("Faltan datos por llenar", "", "info")
            }
        });

        async function gestionarImagenes() {
            formImg = new FormData()
            formImg.append("producto_id", productoId)

            jQuery('.img-carga-imagenes').each(function () {
                const inputFile = jQuery(this).closest("div").find(".upload-info-img")
                formImg.append('files[]', inputFile.prop('files')[0]);
            });

            const respCargaImg = await axios.post("productos/imagen/cargar", formImg);

            return true
        }

        jQuery(document).on('click', '#btn-eliminar', function () {
            Swal.fire({
                title: '¿Está seguro de eliminar el producto?',
                text: "Esta acción no se puede revertir.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Si',
                cancelButtonText: 'No'
            }).then((result) => {
                if (result.value) {
                    Mostrarloader()
                    axios.delete('productos/' + jQuery("#entity").val(), getDataJson("producto")).then(function (resp) {
                        Ocultarloader()
                        if (resp.data.error === 0) {
                            Swal.fire("Producto eliminado", '', 'success').then(function () {
                                window.location = UrlGlobal + 'producto/listar/';
                            });
                        } else {
                            notificarUsuario(resp.data.mensaje);
                        }
                    });
                }
            });
        });

        $(function () {
            bsCustomFileInput.init();
        });

        jQuery(".es_principal").change(function () {
            validarActivo(this);
        });

        function validarActivo(objeto) {
            jQuery('.es_principal').each(function (index) {
                if (jQuery(this).attr('name') !== jQuery(objeto).attr('name')) {
                    jQuery(this).val("0");
                }
            });
        }

        async function cargarDocImg(objeto) {
            let fileData = jQuery(objeto)[0].files[0];
            let formData = new FormData();
            formData.append('file', fileData);
            jQuery(objeto).closest("tr").find(".progress-bar").width('0%');
            axios.post("productos/imagen/cargar", formData).then(function (resp) {
                if (resp.data.error === 0) {
                    jQuery(objeto).closest("tr").find(".img_url").val(resp.data.data.ruta);
                    jQuery(objeto).addClass("is-valid");
                    jQuery(objeto).closest("tr").find(".progress-bar").removeClass("bg-danger");
                    jQuery(objeto).closest("tr").find(".progress-bar").addClass("bg-success");
                    jQuery(objeto).closest("tr").find(".progress-bar").width('100%');
                } else {
                    jQuery(objeto).closest("tr").find(".progress-bar").removeClass("bg-success");
                    jQuery(objeto).closest("tr").find(".progress-bar").addClass("bg-danger");
                    jQuery(objeto).closest("tr").find(".progress-bar").width('100%');
                    jQuery(objeto).addClass("is-invalid");
                }
            });
        }

        jQuery(".btn_img_eliminar").click(function () {
            Swal.fire({
                title: '¿Está seguro de eliminar esta imagen?',
                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('/productos/imagen/' + jQuery(this).data("id")).then(function (resp) {
                        if (resp.data.error === 0) {
                            Swal.fire("Imagen eliminada", '', 'success').then(function () {
                                location.reload();
                            });
                        } else {
                            notificarUsuario(resp.data.mensaje);
                        }
                    });
                }
            });
        });
    </script>
@endsection