@extends('layout.backoffice')
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="nav-align-left nav-tabs-shadow">
                    <ul class="nav nav-tabs" role="tablist">
                        @if(validarAccion("configurar_informacion_empresarial"))
                            <li class="nav-item" role="presentation">
                                <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#tab_empresa" aria-controls="navs-left-home" aria-selected="false" tabindex="-1">
                                    Información De Empresa
                                </button>
                            </li>
                        @endif
                        <li class="nav-item" role="presentation">
                            <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tab_seo" aria-controls="navs-left-profile" aria-selected="true">
                                SEO
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tab_catalogo" aria-controls="navs-left-messages" aria-selected="false" tabindex="-1">
                                Catálogo
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tab_plantilla_correo" aria-controls="navs-left-messages" aria-selected="false" tabindex="-1">
                                Plantilla Correos
                            </button>
                        </li>
                        @if(validarAccion("configurar_informacion_correos"))
                            <li class="nav-item" role="presentation">
                                <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tab_correo" aria-controls="navs-left-messages" aria-selected="false" tabindex="-1">
                                    Configuración de Correo
                                </button>
                            </li>
                        @endif
                        @if(esUsuarioAdministrador())
                            <li class="nav-item" role="presentation">
                                <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tab_pago" aria-controls="navs-left-messages" aria-selected="false" tabindex="-1">
                                    Métodos de Pago
                                </button>
                            </li>

                            <li class="nav-item" role="presentation">
                                <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tab_googletagmanager" aria-controls="navs-left-messages" aria-selected="false" tabindex="-1">
                                    Google Tag Manager
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tab_javascript" aria-controls="navs-left-messages" aria-selected="false" tabindex="-1">
                                    Javascript
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tab_css" aria-controls="navs-left-messages" aria-selected="false" tabindex="-1">
                                    CSS
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tab_mkp" aria-controls="navs-left-messages" aria-selected="false" tabindex="-1">
                                    MarketPlace
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tab_seguridad" aria-controls="navs-left-messages" aria-selected="false" tabindex="-1">
                                    Token API
                                </button>
                            </li>
                        @endif
                    </ul>
                    <div class="card-body p-0">
                        <div class="tab-content" id="custom-tabs-four-tabContent">
                            @if(validarAccion("configurar_informacion_empresarial"))
                                <div class="tab-pane fade show active" id="tab_empresa" role="tabpanel" aria-labelledby="tab_empresa-tab">
                                    @include('page.configuracion.empresa.tabs.empresa', ['codigo' => "empresa"])
                                </div>
                            @endif
                            <div class="tab-pane fade" id="tab_seo" role="tabpanel" aria-labelledby="tab_seo-tab">
                                @include('page.configuracion.seo.gestionar', ['grupo' => 'configuracion','subgrupo' => "seo", "formulario" => "seo-general"])
                            </div>
                            <div class="tab-pane fade" id="tab_catalogo" role="tabpanel" aria-labelledby="tab_seo-tab">
                                @include('page.configuracion.catalogo.gestionar', ['grupo' => 'configuracion','subgrupo' => "catalogo", "formulario" => "catagalogo-general"])
                            </div>
                            <div class="tab-pane fade" id="tab_plantilla_correo" role="tabpanel" aria-labelledby="tab_plantilla_correo-tab">
                                @include('page.configuracion.empresa.tabs.plantilla-correos', ['codigo' => "plantilla_correos"])
                            </div>
                            @if(validarAccion("configurar_informacion_correos"))
                                <div class="tab-pane fade" id="tab_correo" role="tabpanel" aria-labelledby="tab_correo-tab">
                                    @include('page.configuracion.empresa.tabs.correo', ['codigo' => "empresa"])
                                </div>
                            @endif
                            <div class="tab-pane fade" id="tab_pago" role="tabpanel" aria-labelledby="tab_pago-tab">
                                @include('page.configuracion.metodo_pago.gestionar')
                            </div>
                            <div class="tab-pane fade" id="tab_googletagmanager" role="tabpanel" aria-labelledby="tab_googletagmanager-tab">
                                @include('page.configuracion.google_tag_manager.gestion', ['codigo' => "google_tag_manager"])
                            </div>
                            <div class="tab-pane fade" id="tab_javascript" role="tabpanel" aria-labelledby="tab_javascript-tab">
                                @include('page.configuracion.java_script.gestion', ['codigo' => "custom_java_script"])
                            </div>
                            <div class="tab-pane fade" id="tab_mkp" role="tabpanel" aria-labelledby="tab_mkp-tab">
                                @include('page.configuracion.marketplace.gestionar', ["formulario" => "config-mkp"])
                            </div>
                            <div class="tab-pane fade" id="tab_css" role="tabpanel" aria-labelledby="tab_mkp-tab">
                                @include('page.configuracion.css.gestion', ["codigo" => "custom_css"])
                            </div>
                            <div class="tab-pane fade" id="tab_seguridad" role="tabpanel">
                                @include('page.configuracion.seguridad.gestion')
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script>
        jQuery(document).ready(function () {
            jQuery('#seguridad_correo').val("{{ $empresa['correo-seguridad'] ?? "" }}")

            jQuery('.ver-contra').on('click', function () {
                const group = jQuery(this).closest('.input-group');
                let input = group.find('input.form-control').first();
                if (input.length === 0) {
                    input = jQuery(this).prev('input');
                }
                const icon = jQuery(this).find('i');

                if (input.attr('type') === 'password') {
                    input.attr('type', 'text');
                    icon.removeClass('bx-show').addClass('bx-hide');
                } else {
                    input.attr('type', 'password');
                    icon.removeClass('bx-hide').addClass('bx-show');
                }
            });
        });

        jQuery('.btn-info-empresa').on('click', function () {
            let formularioActivo = jQuery(this).data("form")
            if (system_validarcampos(formularioActivo)) {
                Mostrarloader()
                let form = document.getElementById(formularioActivo);
                let formData = new FormData(form);
                axios.post('empresa/crear', formData).then(function (resp) {
                    Ocultarloader()
                    if (resp.data.error === 0) {
                        Swal.fire("Se ha procesado los datos correctamente", '', 'success').then(function () {
                            window.location.reload();
                        });
                    } else {
                        notificarUsuario(resp.data.mensaje);
                    }
                });
            }
        });

        jQuery('#btnVolver').click(function (e) {
            e.preventDefault();
            window.history.back();
        });

        jQuery('#logo').on('change', function (event) {
            let file = event.target.files[0];
            let preview = jQuery('#logo-preview');
            let placeholder = jQuery('#logo-placeholder');
            let label = jQuery(this).next('.custom-file-label');

            if (file) {
                let reader = new FileReader();

                reader.onload = function (e) {
                    placeholder.hide();
                    preview
                        .attr('src', e.target.result)
                        .show();
                }

                reader.readAsDataURL(file);
                label.text(file.name);
            }
        });

        jQuery(document).on('click', '.guardar-configuracion', async function () {
            let formularioActivo = jQuery(this).data("form")
            if (system_validarcampos(formularioActivo)) {
                Mostrarloader()
                if (formularioActivo === "form_plantilla_correos") {
                    await cargarDocImg('#pedido_creado_enc_img_file', 'email', '#pedido_creado_enc_img');
                    await cargarDocImg('#guia_enviada_enc_img_file', 'email', '#guia_enviada_enc_img');
                }

                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);
                    }
                });
            }
        });

        jQuery('#favicon').on('change', function (event) {
            let file = event.target.files[0];
            let preview = jQuery('#favicon-preview');
            let placeholder = jQuery('#favicon-placeholder');
            let label = jQuery(this).next('.custom-file-label');

            if (file) {
                let reader = new FileReader();

                reader.onload = function (e) {
                    placeholder.hide();
                    preview
                        .attr('src', e.target.result)
                        .show();
                }

                reader.readAsDataURL(file);
                label.text(file.name);
            }
        });
    </script>
@endsection