@extends('layout.backoffice')
@section('content')
        <div class="row">
        <div class="col-12">
            <div class="card card-primary card-outline card-outline-tabs">
                <div class="card-header p-0 border-bottom-0">
                    <ul class="nav nav-tabs">
                        <li class="nav-item"><a class="nav-link active" href="#info" data-toggle="tab">Inf. General</a></li>
                        <li class="nav-item"><a onclick="cargarInternoPrecioCompetencia()" class="nav-link" href="#competencia" data-toggle="tab">Cambio Precios (Competencia)</a></li>
                        <li class="nav-item"><a onclick="cargarInterno()" class="nav-link" href="#interno" data-toggle="tab">Cambio Precios (Interno)</a></li>
                        <li class="nav-item"><a onclick="cargarInternoInventarioHistorico()" class="nav-link" href="#historico-inventario" data-toggle="tab">Inventario</a></li>
                        @if(!empty($producto))
                            <li class="nav-item"><a class="nav-link" href="#ventas-producto" data-toggle="tab">Ventas Producto</a></li>
                        @endif
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane active" id="info">
                            @include('page.productos.detallado.gestion')
                        </div>
                        <div class="tab-pane" id="competencia">
                            @include('page.productos.detallado.cambio-precio-competencio')
                        </div>
                        <div class="tab-pane" id="interno">
                            @include('page.productos.detallado.cambio-precio-interno')
                        </div>
                        <div class="tab-pane" id="historico-inventario">
                            @include('page.productos.detallado.inventario')
                        </div>
                        @if(!empty($producto))
                            <div class="tab-pane" id="ventas-producto">
                                @include('page.productos.detallado.ventas-prodcuto')
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let editar = 0;
        
        jQuery('#btn-guardar').on('click', function () {
            Swal.fire({
                title: '¿Seguro Guardar?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Si, Guardar',
                cancelButtonText: 'No, Cancelar',
                reverseButtons: true
            }).then(async (res) => {
                if (res.isConfirmed) {
                    const idform = 'producto_detallado_form';
                    if (system_validarcampos(idform)) {
                        const datos = getDataJson(idform)
                        const respuesta = editar ? await axios.put('productos', datos) : await axios.post('productos', datos);
                        if (respuesta.data.error) {
                            mensajes = "";
                            respuesta.data.mensaje.map((mensaje) => {
                                mensajes += String(mensaje);
                            })
                            Swal.fire("Error", mensajes, 'error').then(() => {
                            })
                        } else {
                            Swal.fire("Guardado con exito", '', 'success').then(() => {
                                location.reload();
                            })
                        }
                    }
                }
            })
        })

    </script>
@endsection