@extends('admin.app')
<x-navigation page-title="Configuración" group-name="Gestión del Sitio" />
@section('content')
    {!! Form::open(['route' => 'admin.configurations.update', 'class' => 'form d-flex flex-column', 'id' => 'kt_form']) !!}

        @include('admin._includes.flash')

        <div class="d-flex flex-wrap gap-5 mb-10">
            <div class="flex-sm-root">
                <div class="card card-flush shadow-sm">
                    <div class="card-header">
                        <div class="card-title"><h2>General</h2></div>
                    </div>
                    <div class="card-body pt-0">
                        <div class="fv-row mb-10">
                            {!! Form::label('SITE_NAME', 'Nombre del Sitio', ['class' => 'form-label']) !!}
                            {!! Form::text('SITE_NAME', getConfigValue('SITE_NAME'), ['class' => 'form-control', 'required']) !!}
                        </div>
                        <div class="mb-5">
                            {!! Form::label('NUMBER_NAME', 'Teléfono', ['class' => 'form-label']) !!}
                            <div class="input-group mb-5">
                                <span class="input-group-text" id="basic-addon7">
                                    <i class="ki-duotone ki-phone fs-1"><span class="path1"></span><span class="path2"></span></i>
                                </span>
                                {!! Form::text('NUMBER_NAME', getConfigValue('NUMBER_NAME'), ['class' => 'form-control']) !!}
                            </div>
                        </div>
                        <div class="mb-5">
                            {!! Form::label('EMAIL_NAME', 'Correo electrónico', ['class' => 'form-label']) !!}
                            <div class="input-group mb-5">
                                <span class="input-group-text" id="basic-addon8">
                                    <i class="ki-duotone ki-message-text-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                                </span>
                                {!! Form::text('EMAIL_NAME', getConfigValue('EMAIL_NAME'), ['class' => 'form-control']) !!}
                            </div>
                        </div>
                        <div class="mb-5">
                            {!! Form::label('FACEBOOK_NAME', 'Facebook Link', ['class' => 'form-label']) !!}
                            <div class="input-group mb-5">
                                <span class="input-group-text" id="basic-addon1">
                                    <i class="ki-duotone ki-facebook fs-1"><span class="path1"></span><span class="path2"></span></i>
                                </span>
                                {!! Form::text('FACEBOOK_NAME', getConfigValue('FACEBOOK_NAME'), ['class' => 'form-control']) !!}
                            </div>
                        </div>
                        <div class="mb-5">
                            {!! Form::label('INSTAGRAM_NAME', 'Instagram Link', ['class' => 'form-label']) !!}
                            <div class="input-group mb-5">
                                <span class="input-group-text" id="basic-addon2">
                                    <i class="ki-duotone ki-instagram fs-1"><span class="path1"></span><span class="path2"></span></i>
                                </span>
                                {!! Form::text('INSTAGRAM_NAME', getConfigValue('INSTAGRAM_NAME'), ['class' => 'form-control']) !!}
                            </div>
                        </div>
                        <div class="mb-5">
                            {!! Form::label('TWITTER_NAME', 'Twitter Link', ['class' => 'form-label']) !!}
                            <div class="input-group mb-5">
                                <span class="input-group-text" id="basic-addon3">
                                    <i class="ki-duotone ki-twitter fs-1"><span class="path1"></span><span class="path2"></span></i>
                                </span>
                                {!! Form::text('TWITTER_NAME', getConfigValue('TWITTER_NAME'), ['class' => 'form-control']) !!}
                            </div>
                        </div>
                        <div class="mb-5">
                            {!! Form::label('LINKEDIN_NAME', 'Linkedin Link', ['class' => 'form-label']) !!}
                            <div class="input-group mb-5">
                                <span class="input-group-text" id="basic-addon9">
                                    <i class="ki-duotone ki-abstract-10"><span class="path1"></span><span class="path2"></span></i>
                                </span>
                                {!! Form::text('LINKEDIN_NAME', getConfigValue('LINKEDIN_NAME'), ['class' => 'form-control']) !!}
                            </div>
                        </div>
                        <div class="mb-5">
                            {!! Form::label('TIKTOK_NAME', 'Tiktok Link', ['class' => 'form-label']) !!}
                            <div class="input-group mb-5">
                                <span class="input-group-text" id="basic-addon5">
                                    <i class="ki-duotone ki-tiktok fs-1"><span class="path1"></span><span class="path2"></span></i>
                                </span>
                                {!! Form::text('TIKTOK_NAME', getConfigValue('TIKTOK_NAME'), ['class' => 'form-control']) !!}
                            </div>
                        </div>
                        <div class="mb-5">
                            {!! Form::label('YOUTUBE_NAME', 'Youtube Link', ['class' => 'form-label']) !!}
                            <div class="input-group mb-5">
                                <span class="input-group-text" id="basic-addon6">
                                    <i class="ki-duotone ki-youtube fs-1"><span class="path1"></span><span class="path2"></span></i>
                                </span>
                                {!! Form::text('YOUTUBE_NAME', getConfigValue('YOUTUBE_NAME'), ['class' => 'form-control']) !!}
                            </div>
                        </div>
                        <div class="mb-10">
                            {!! Form::label('RECAPTCHA_PUBLIC', 'Código ReCaptcha Público', ['class' => 'form-label']) !!}
                            {!! Form::text('RECAPTCHA_PUBLIC', getConfigValue('RECAPTCHA_PUBLIC'), ['class' => 'form-control']) !!}
                        </div>
                        <div class="mb-10">
                            {!! Form::label('RECAPTCHA_PRIVATE', 'Código ReCaptcha Privado', ['class' => 'form-label']) !!}
                            {!! Form::text('RECAPTCHA_PRIVATE', getConfigValue('RECAPTCHA_PRIVATE'), ['class' => 'form-control']) !!}
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-sm-root">
                <div class="card card-flush shadow-sm mb-5">
                    <div class="card-header">
                        <div class="card-title"><h2>SEO <small>(Search Engine Optimization)</small></h2></div>
                    </div>
                    <div class="card-body pt-0" id="seo">
                        <div class="pb-10 pb-lg-0">
                            <p class="fs-6 fw-semibold text-gray-600 py-2">Campos opcional orientadas a optimizar y mejorar la visibilidad y posicionamiento en la lista de resultados de Google, Yahoo, Bing, u otros buscadores de Internet.​ </p>
                        </div>
                        <div class="d-flex flex-wrap gap-5 mb-10 fv-row">
                            {!! Form::label('META_TITLE', 'Título', ['class' => 'form-label']) !!}
                            {!! Form::text('META_TITLE', getConfigValue('META_TITLE'), ['class' => 'form-control', 'required', 'maxlength' => 70, 'data-relation' => 'titlePreview']) !!}
                            <span class="text-muted fs-7">Máximo: 70 carácteres</span>
                        </div>
                        <div class="fv-row mb-10">
                            {!! Form::label('META_DESCRIPTION', 'Descripción', ['class' => 'form-label']) !!}
                            {!! Form::textarea('META_DESCRIPTION', getConfigValue('META_DESCRIPTION'), ['class' => 'form-control', 'rows' => 2, 'maxlength' => 160, 'data-relation' => 'updateDesc', 'required']) !!}
                            <span class="text-muted fs-7">Ingrese una descripción breve describiendo el producto. Máximo: 160 carácteres.</span>
                        </div>
                        <div class="">
                            {!! Form::label('META_KEYWORDS', 'Palabras claves', ['class' => 'form-label']) !!}
                            {!! Form::text('META_KEYWORDS', getConfigValue('META_KEYWORDS'), ['class' => 'form-control', 'maxlength' => 160]) !!}
                            <span class="text-muted fs-7">Ingrese palabras claves que faciliten la busqueda de la página en los buscadores. Máximo: 160 carácteres.</span>
                        </div>
                    </div>
                </div>
                <div class="card card-flush shadow-sm">
                    <div class="card-header">
                        <div class="card-title"><h2>Previsualización del SEO</h2></div>
                    </div>
                    <div class="card-body pt-0">
                        <div class="serp-preview-container">
                            <div class="serp-content">
                                <div class="snippet-container">
                                    <div id="update-title">
                                        <a href="javascript:;" class="title-href" id="titlePreview">{{getConfigValue('META_TITLE')? getConfigValue('META_TITLE') :'Previsualización del elemento de búsqueda'}}</a>
                                    </div>
                                </div>
                                <span class="update-url">{{route('site.index')}}</span>
                                <div class="snippet-container">
                                    <span id="updateDesc">{{getConfigValue('META_DESCRIPTION') ? getConfigValue('META_DESCRIPTION') : 'Introduzca un título, una descripción y modifique la url amigable, para previsualizar como se vería en una búsqueda real en los sitios de búsqueda'}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <x-forms.buttons :return-url="route('admin.index')" />
    {!! Form::close() !!}
@endsection
@push('scripts')
	<script src="/assets/dash/3rdparty/stringtoslug/speakingurl.min.js"></script>
	<script src="/assets/dash/3rdparty/stringtoslug/jquery.stringtoslug.min.js"></script>
    <script>

        let validator;
        const form = document.getElementById('kt_form');
        const submitButton = document.getElementById('kt_submit');
        const messages = document.querySelector('#notiMsg');

        KTUtil.onDOMContentLoaded(function() {

            $('[maxlength]').maxlength({
                warningClass: "badge badge-warning badge-rounded badge-inline",
                limitReachedClass: "badge badge-success badge-rounded badge-inline"
            });

            const seoItems = document.querySelectorAll('#seo [data-relation]')
            seoItems.forEach(seo => {
                seo.addEventListener('keyup', function(){
                    let relation = seo.getAttribute('data-relation')
                    let example = document.querySelector(`#${relation}`)
                    example.innerHTML = seo.value;
                })
            });

            $(".permalink").stringToSlug({
                setEvents: 'keyup keydown blur',
                getPut: '#slug',
                space: '-'
            });

            <x-forms.validation>
                'SITE_NAME': { validators: { notEmpty: { message: 'El nombre del sitio no ha sido especificado' } } },
                'META_TITLE': { validators: { notEmpty: { message: 'El título no ha sido especificado' } } },
                'META_DESCRIPTION': { validators: { notEmpty: { message: 'La descripción del sitio no ha sido específicado' } } },
            </x-forms.validation>
        });
    </script>
@endpush
@prepend('styles')
    <style>
        .serp-preview-container .title-href {
            cursor: pointer;
            color: #1a0dab;
            text-decoration: none;
            font-size: 20px;
            font-weight: normal;
            font-family: arial, sans-serif;
            list-style: none;
            width: auto;
            display: inline;
            line-height: 1.58;
        }

        .serp-preview-container span#update-desc {
            line-height: 1.58;
            color: #4d5156;
            font-size: 14px;
            list-style: none;
            font-weight: 400;
            padding-top: 3px;
            word-wrap: break-word;
        }

        .serp-preview-container span.update-url,
        .serp-preview-container span#update-url {
            font-size: 14px;
            color: #202124;
            font-style: normal;
            line-height: 1.3;
        }
    </style>
@endprepend