@extends('layout.backoffice')
@section('content')
    <div class="row">
        <div class="col-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" href="#tab_empresa" data-toggle="tab">Información De Empresa</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#tab_seo" data-toggle="tab">SEO</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#tab_catalogo" data-toggle="tab">Catalogo</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#tab_plantilla_correo" data-toggle="tab">Plantilla Correos</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#tab_correo" data-toggle="tab">Configuración de Correo</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#tab_pago" data-toggle="tab">Métodos de Pago</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#tab_googletagmanager" data-toggle="tab">Google Tag Manager</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#tab_javascript" data-toggle="tab">Javascript</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#tab_mkp" data-toggle="tab">MarketPlace</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="custom-tabs-four-tabContent">
                        <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>
                        <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>
                        <div class="tab-pane fade" id="tab_correo" role="tabpanel" aria-labelledby="tab_correo-tab">
                            @include('page.configuracion.empresa.tabs.correo', ['codigo' => "empresa"])
                        </div>
                        <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>
                </div>
            </div>
        </div>
    </div>
    <script>
        jQuery(document).ready(function () {
            jQuery('#seguridad_correo').val("{{ $empresa['correo-seguridad'] ?? "" }}")

            jQuery('.ver-contra').on('click', function () {
                const input = jQuery('#correo_clave');
                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