@extends('admin.app')
@section('toolbar')
    <div class="toolbar d-flex align-items-stretch">
        <div class="container-fluid py-6 py-lg-0 d-flex flex-column flex-lg-row align-items-lg-stretch justify-content-lg-between">
            <div class="page-title d-flex justify-content-center flex-column me-5">
                <h1 class="d-flex flex-column text-dark fw-bold fs-3 mb-0">Configuración de la página</h1>
                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 pt-1">
                    <li class="breadcrumb-item text-muted"><a href="{{route('admin.index')}}" class="text-muted text-hover-primary">Inicio</a></li>
                    <li class="breadcrumb-item"><span class="bullet bg-gray-200 w-5px h-2px"></span></li>
                    <li class="breadcrumb-item text-dark">Configuración</li>
                </ul>
            </div>
        </div>
    </div>
@endsection
@section('content')
    @include('admin._includes.flash')
    {!! Form::open(['class' => 'form d-flex flex-column flex-lg-row justify-content-center', 'id' => 'kt_form', 'enctype'=> 'multipart/form-data']) !!}
        <div class="d-flex flex-column gap-7 gap-lg-10">
            <div class="card card-flush">
                <div class="card-header">
                    <div class="card-title"><h2>Contacto</h2></div>
                </div>
                <div class="card-body d-flex flex-column pt-0 gap-7 gap-lg-10">
                    <div class="d-flex flex-wrap gap-5">
                        <div class="fv-row w-100 flex-md-root">
                            {!! Form::label('INFO_EMAIL', 'Email de Contacto', ['class' => 'required form-label']) !!}
                            {!! Form::text('INFO_EMAIL', config('SETTINGS.INFO_EMAIL'), ['class' => 'form-control form-control-solid mb-2', 'required']) !!}
                            <span class="text-muted fs-7">Ingrese el correo para contacto</span>
                        </div>
                        <div class="fv-row w-100 flex-md-root">
                            {!! Form::label('INFO_PHONE', 'Número de Contacto', ['class' => 'required form-label']) !!}
                            {!! Form::text('INFO_PHONE', config('SETTINGS.INFO_PHONE'), ['class' => 'form-control form-control-solid', 'required']) !!}
                        </div>
                    </div>
                    <div class="d-flex flex-wrap gap-7 gap-lg-10">
                        <div class="w-100 flex-md-root">
                            {!! Form::label('INFO_FACEBOOK', 'URL a Facebook', ['class' => 'form-label']) !!}
                            {!! Form::text('INFO_FACEBOOK', config('SETTINGS.INFO_FACEBOOK'), ['class' => 'form-control form-control-solid mb-2']) !!}
                            <span class="text-muted fs-7">Ingrese la url a Facebook</span>
                        </div>
                        <div class="w-100 flex-md-root">
                            {!! Form::label('INFO_INSTAGRAM', 'URL a Instagram', ['class' => 'form-label']) !!}
                            {!! Form::text('INFO_INSTAGRAM', config('SETTINGS.INFO_INSTAGRAM'), ['class' => 'form-control form-control-solid mb-2']) !!}
                            <span class="text-muted fs-7">Ingrese la url a Instagram</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card card-flush py-4">
                <div class="card-header">
                    <div class="card-title">
                        <h2>SEO</h2>
                    </div>
                </div>
                <div class="card-body pt-0" id="seo">
                    <div class="alert bg-light-warning d-flex align-items-center p-5 mb-10">
                        <span class="svg-icon svg-icon-2hx svg-icon-warning me-4">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path opacity="0.3" d="M20.5543 4.37824L12.1798 2.02473C12.0626 1.99176 11.9376 1.99176 11.8203 2.02473L3.44572 4.37824C3.18118 4.45258 3 4.6807 3 4.93945V13.569C3 14.6914 3.48509 15.8404 4.4417 16.984C5.17231 17.8575 6.18314 18.7345 7.446 19.5909C9.56752 21.0295 11.6566 21.912 11.7445 21.9488C11.8258 21.9829 11.9129 22 12.0001 22C12.0872 22 12.1744 21.983 12.2557 21.9488C12.3435 21.912 14.4326 21.0295 16.5541 19.5909C17.8169 18.7345 18.8277 17.8575 19.5584 16.984C20.515 15.8404 21 14.6914 21 13.569V4.93945C21 4.6807 20.8189 4.45258 20.5543 4.37824Z" fill="currentColor"></path>
                                <path d="M10.5606 11.3042L9.57283 10.3018C9.28174 10.0065 8.80522 10.0065 8.51412 10.3018C8.22897 10.5912 8.22897 11.0559 8.51412 11.3452L10.4182 13.2773C10.8099 13.6747 11.451 13.6747 11.8427 13.2773L15.4859 9.58051C15.771 9.29117 15.771 8.82648 15.4859 8.53714C15.1948 8.24176 14.7183 8.24176 14.4272 8.53714L11.7002 11.3042C11.3869 11.6221 10.874 11.6221 10.5606 11.3042Z" fill="currentColor"></path>
                            </svg>
                        </span>
                        <div class="d-flex flex-column">
                            <h4 class="fw-semibold">SEO <small>(Search Engine Optimization)</small></h4>
                            <span>Campos dirigidos a la optimización del motor de busqueda de buscadores (Google, Bing y otros). Ayudá a que el sitio sea fácil de encontrar en los buscadores web.</span>
                        </div>
                    </div>
                    <div class="mb-10">
                        {!! Form::label('SEO_TITLE', 'Título', ['class' => 'required form-label']) !!}
                        {!! Form::text('SEO_TITLE', config('SETTINGS.SEO_TITLE'), ['class' => 'form-control form-control-solid mb-2', 'required', 'maxlength' => 70, 'data-relation' => 'titlePreview']) !!}
                        <div class="text-muted fs-7">Ingrese un título simple y preciso. Máx: 70 carácteres</div>
                    </div>
                    <div class="mb-10">
                        {!! Form::label('SEO_DESCRIPTION', 'Descripción', ['class' => 'required form-label']) !!}
                        {!! Form::textarea('SEO_DESCRIPTION', config('SETTINGS.SEO_DESCRIPTION'), ['class' => 'form-control form-control-solid min-h-100px mb-2', 'rows' => 3, 'maxlength' => 160, 'data-relation' => 'update-desc', 'required']) !!}
                        <div class="text-muted fs-7">Ingrese una descripción breve describiendo la página o el negocio. Máx: 160 carácteres</div>
                    </div>
                    <div class="mb-10">
                        {!! Form::label('SEO_KEYWORDS', 'Palabras claves', ['class' => 'required form-label']) !!}
                        {!! Form::text('SEO_KEYWORDS', config('SETTINGS.SEO_KEYWORDS'), ['class' => 'form-control form-control-solid mb-2', 'rows' => 3, 'maxlength' => 160, 'required']) !!}
                        <div class="text-muted fs-7">Ingrese palabras claves que faciliten la busqueda de la página en los buscadores, separados por coma<code>,</code> entre cada palabra. Máx: 160 carácteres.</div>
                    </div>
                    <div class="d-flex flex-column">
                        <h5>Previsualización del SEO</h5>
                        <div class="card border border-gray-300 bg-light-dark text-dark">
                            <div class="card-body">
                                <div class="serp-preview-container">
                                    <div class="serp-content">
                                        <div class="snippet-container"><span class="update-url">{{route('site.index')}}</span></div>
                                        <div class="snippet-container">
                                            <div id="update-title">
                                                <a href="javascript:;" class="title-href" id="titlePreview">{{config('SETTINGS.SEO_TITLE')?? 'Previsualización del elemento de búsqueda'}}</a>
                                            </div>
                                        </div>
                                        <div class="snippet-container">
                                            <span id="update-desc">{{config('SETTINGS.SEO_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>
            </div>
            <div class="card card-flush py-4">
                <div class="card-header">
                    <div class="card-title">
                        <h2>RECAPTCHA</h2>
                    </div>
                </div>
                <div class="card-body pt-0">
                    <div class="alert bg-light-warning d-flex align-items-center p-5 mb-10">
                        <span class="svg-icon svg-icon-2hx svg-icon-warning me-4">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path opacity="0.3" d="M20.5543 4.37824L12.1798 2.02473C12.0626 1.99176 11.9376 1.99176 11.8203 2.02473L3.44572 4.37824C3.18118 4.45258 3 4.6807 3 4.93945V13.569C3 14.6914 3.48509 15.8404 4.4417 16.984C5.17231 17.8575 6.18314 18.7345 7.446 19.5909C9.56752 21.0295 11.6566 21.912 11.7445 21.9488C11.8258 21.9829 11.9129 22 12.0001 22C12.0872 22 12.1744 21.983 12.2557 21.9488C12.3435 21.912 14.4326 21.0295 16.5541 19.5909C17.8169 18.7345 18.8277 17.8575 19.5584 16.984C20.515 15.8404 21 14.6914 21 13.569V4.93945C21 4.6807 20.8189 4.45258 20.5543 4.37824Z" fill="currentColor"></path>
                                <path d="M10.5606 11.3042L9.57283 10.3018C9.28174 10.0065 8.80522 10.0065 8.51412 10.3018C8.22897 10.5912 8.22897 11.0559 8.51412 11.3452L10.4182 13.2773C10.8099 13.6747 11.451 13.6747 11.8427 13.2773L15.4859 9.58051C15.771 9.29117 15.771 8.82648 15.4859 8.53714C15.1948 8.24176 14.7183 8.24176 14.4272 8.53714L11.7002 11.3042C11.3869 11.6221 10.874 11.6221 10.5606 11.3042Z" fill="currentColor"></path>
                            </svg>
                        </span>
                        <div class="d-flex flex-column">
                            <h4 class="fw-semibold">reCAPTCHA</h4>
                            <span>reCAPTCHA es un servicio de Google que protege tu sitio web del fraude y abuso. <a href="https://www.google.com/recaptcha/about/" target="_blank" class="text-primary fw-bold">Más info</a></span>
                        </div>
                    </div>
                    <div class="d-flex flex-column flex-md-row gap-7 gap-lg-10">
                        <div class="w-100 flex-md-root">
                            {!! Form::label('RECAPTCHA_PUBLIC', 'Clave Pública', ['class' => 'form-label']) !!}
                            {!! Form::text('RECAPTCHA_PUBLIC', config('SETTINGS.RECAPTCHA_PUBLIC'), ['class' => 'form-control form-control-solid w-100']) !!}
                        </div>
                        <div class="w-100 flex-md-root">
                            {!! Form::label('RECAPTCHA_PRIVATE', 'Clave Privada', ['class' => 'form-label']) !!}
                            {!! Form::text('RECAPTCHA_PRIVATE', config('SETTINGS.RECAPTCHA_PRIVATE'), ['class' => 'form-control form-control-solid w-100']) !!}
                        </div>

                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-end">
                <button type="reset" class="btn btn-danger me-2">Limpiar</button>
                <button type="submit" class="btn btn-primary" id="kt_submit">Guardar</button>
            </div>
        </div>
    {!! Form::close() !!}
@endsection
@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
@push('scripts')
    <script src="/assets/dash/3rdparty/tinymce/tinymce.bundle.js"></script>
    <script>
        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;
                })
            });

            let validator;
            const form = document.getElementById('kt_form');
            const submitButton = document.getElementById('kt_submit');

            validator = FormValidation.formValidation(form,{
                fields: {
                    'INFO_EMAIL': { validators: { notEmpty: { message: 'Ingrese un email para contacto' } } },
                    'INFO_PHONE': { validators: { notEmpty: { message: 'Ingrese un número de contacto' } } },
                },
				plugins: {
                    submitButton: new FormValidation.plugins.SubmitButton(),
					trigger: new FormValidation.plugins.Trigger(),
					bootstrap: new FormValidation.plugins.Bootstrap5({
                        rowSelector: '.fv-row',
                        eleInvalidClass: 'is-invalid border-danger',
                        eleValidClass: ''
                    })
				}
            });

            // Handle submit button
            submitButton.addEventListener('click', e => {
                e.preventDefault();
                submitButton.disabled = true;
                validator.validate().then(function (status) {
                    submitButton.disabled = false;
                    if (status == 'Valid') {
                        form.submit();
                    } else {
                        Swal.fire({
                            html: "Se ha detectado algunos errores, revísalos e intentalo de nuevo.",
                            icon: "error",
                            buttonsStyling: false,
                            confirmButtonText: "Ok, entendido!",
                            customClass: {
                                confirmButton: "btn btn-primary"
                            }
                        });
                    }
                });
            })
        })
    </script>
@endpush