@extends('layout.backoffice')
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row">
            <div class="col-md-12">
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="nav-align-top mb-4">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-apariencia" aria-controls="navs-apariencia" aria-selected="false">
                                        Apariencia
                                    </button>
                                </li>
                                <li class="nav-item">
                                    <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-bloques-estaticos" aria-controls="navs-bloques-estaticos" aria-selected="false">
                                        Bloques Estaticos
                                    </button>
                                </li>
                                <li class="nav-item">
                                    <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-buscador-principal" aria-controls="navs-buscador-principal" aria-selected="false">
                                        Buscador principal
                                    </button>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="navs-apariencia" role="tabpanel">
                                    @include('page.gestion_front.apariencia.gestionar', ['grupo' => 'configuracion','subgrupo' => "apareciencia", "formulario" => "colores-front"])
                                </div>
                                <div class="tab-pane fade" id="navs-bloques-estaticos" role="tabpanel">
                                    @include('page.gestion_front.bloques_estaticos.gestionar', ['grupo' => 'configuracion','subgrupo' => "bloques_estaticos", "formulario" => "bloques-estaticos"])
                                </div>
                                <div class="tab-pane fade" id="navs-buscador-principal" role="tabpanel">
                                    @include('page.gestion_front.buscador.gestionar', ['grupo' => 'configuracion','subgrupo' => "tipo_buscador", "formulario" => "buscador-principal"])
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        jQuery(document).on('click', '.guardar-configuracion', async function () {
            let formularioActivo = jQuery(this).data("form")
            if (system_validarcampos(formularioActivo)) {
                Mostrarloader()
                if (formularioActivo === "form-buscador-principal") {
                    await cargarDocImg('#configuracion_tipo_buscador_buscador_imagen_fondo_file', 'configuracion/buscador', '#configuracion_tipo_buscador_buscador_imagen_fondo');
                }

                axios.post('appconfig/gestionaratrib', getDataJson(formularioActivo)).then(function (resp) {
                    Ocultarloader()
                    if (resp.data.error === 0) {
                        Swal.fire("Datos guardados.", '', 'success').then(function () {
                            location.reload();
                        });
                    } else {
                        notificarUsuario(resp.data.mensaje);
                    }
                });
            }
        });
    </script>
@endsection