@extends('layouts.admin',['activePage' => 'plantilla', 'menuParent' => 'Secciones', 'titlePage'=>('Administrador Plantilla')])


@section('titulo', 'Página Generales')

@section('breadcrumb')
    <li class="breadcrumb-item active">@yield('titulo')</li>
@endsection
@section('estilos')
    <script src="https://cdn.tiny.cloud/1/sjv6q4h8z9rv3smegxq0wcu05jf5ju8vfpkqdlp6cm4n29dx/tinymce/6/tinymce.min.js"
            referrerpolicy="origin"></script>
@endsection


@section('contenido')
    <style>
        .carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img {
            display: block;
            max-width: 100%;
            height: auto;
        }

        .center-block {
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: 10%;
        }

        .sinborde {
            border: 0;
            /*background: inherit;*/
            border-radius: 0;
            border: 0;
        }

        .contentImg {
            cursor: pointer;
        }

        .delete {
            color: white;
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .contentImg:hover .delete {
            display: block;
            filter: brightness(150%);
        }

        .contentImg:hover {
            filter: brightness(50%);
            transition: .4s;
        }
    </style>

    <div class="card-body">
        <div class="container">

            <form method="post" enctype="multipart/form-data" id="formUploadLogo">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-5">
                            <label for="Image" class="form-label">Logo</label>
                            <div class="alert alert-primary" role="alert">
                                Las medida de las imagenes deben ser de: <b>180 x 134 pixeles en fondo transparente.</b>

                            </div>
                            <input class="form-control" type="file" id="formFile_rines" name="files_ad[]"
                                   onchange="previewLogo()" required>
                            <br>
                            <button type="submit"
                                    class="btn btn-primary btn-block mb-3">Subir
                            </button>

                        </div>
                    </div>
                    <div class="col-md-6 p-60 bg-blue center-pills">
                        <img id="frame_logo" src="{{ asset('asset') }}/images/{{$logo->url}}"
                             class="img-fluid img-responsive center-block"/>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="alert alert-secondary" role="alert">
                REDES SOCIALES
            </div>
        </div>
    </div>
    <div class="card-body">

        <div class="jumbotron" id="editRedes">
            <div class="row">
                <div class="col-md-6">

                </div>
                <div class="col-md-6">
                    <button class="btn btn-primary btn-block float-right"
                            data-toggle="modal" data-target="#md_redes">Agregar
                    </button>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>Icono</th>
                        <th>URL</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($redes as $r)
                        <tr>
                            <td>{{$r->icon}}</td>
                            <td>{{$r->link}}</td>
                            <td>
                                <i class="fa fa-edit" style="cursor: pointer" title="Editar"
                                   onclick="editarRedSocialConfirmacion('{{$r->id}}','{{$r->icon}}','{{$r->link}}')"></i>
                                &nbsp;
                                <i class="fa fa-trash" style="cursor: pointer" title="Eliminar"
                                   onclick="eliminarRedSocialConfirmacion({{$r->id}})"></i>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>

            </div>
        </div>
        <input type="button" class="btn btn-block btn-primary" value="GUARDAR"
               onclick="guardarRedesConfirmacion()">

    </div>


    <div class="row">
        <div class="col-12">
            <div class="alert alert-secondary" role="alert">
                HEADER
            </div>

        </div>
    </div>
    <div class="card-body">

        <div class="jumbotron" id="editHeader">
            {!! $header->codigo!!}
        </div>
        <input type="button" class="btn btn-block btn-primary" value="GUARDAR"
               onclick="guardarHeaderConfirmacion()">

    </div>


    <div class="row">
        <div class="col-12">
            <div class="alert alert-secondary" role="alert">
                FOOTER
            </div>

        </div>
    </div>
    <div class="card-body">

        <div class="jumbotron" id="editFooter">
            {!! $footer->codigo!!}
        </div>
        <input type="button" class="btn btn-block btn-primary" value="GUARDAR"
               onclick="guardarFooterConfirmacion()">

    </div>


    <div class="row">
        <div class="col-12">
            <div class="alert alert-secondary" role="alert">
                Colores Globales
            </div>

        </div>
    </div>
    <div class="card-body">

        <div class="jumbotron" id="">
            <a href="https://fontawesome.com/v4/icons/" class="float-right" title="Ayuda"
               data-toggle="modal" data-target="#md_colores">
                <i class="fa fa-question-circle"></i>
            </a>
            <div class="row">
                <div class="col-md-6">
                    <div class="card-body text-center d-flex justify-content-center align-items-center flex-column">
                        <p>Accent 1</p>
                        <small></small>
                        <div class="accent1" id="accent1"
                             style="background: {{session('colors')->accent1}}; width: 100%; height: 180px">
                            <input class="form-control sinborde" id="accent1-input" type="text"
                                   value="{{session('colors')->accent1}}"/>
                            <input id="accent1_value" type="hidden"
                                   value="{{session('colors')->accent1}}"/>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card-body text-center d-flex justify-content-center align-items-center flex-column">
                        <p>Accent 2</p>
                        <div class="accent2" id="accent2"
                             style="background: {{session('colors')->accent2}}; width: 100%; height: 180px">
                            <input class="form-control sinborde" id="accent2-input" type="text"
                                   value="{{session('colors')->accent2}}"/>
                            <input id="accent2_value" type="hidden"
                                   value="{{session('colors')->accent2}}"/>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card-body text-center d-flex justify-content-center align-items-center flex-column">
                        <p>Accent 3</p>
                        <div class="accent3" id="accent3"
                             style="background: {{session('colors')->accent3}}; width: 100%; height: 180px">
                            <input class="form-control sinborde" id="accent3-input" type="text"
                                   value="{{session('colors')->accent3}}"/>
                            <input id="accent3_value" type="hidden"
                                   value="{{session('colors')->accent3}}"/>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card-body text-center d-flex justify-content-center align-items-center flex-column">
                        <p>Accent 4</p>
                        <div class="accent4" id="accent4"
                             style="background: {{session('colors')->accent4}}; width: 100%; height: 180px">
                            <input class="form-control sinborde" id="accent4-input" type="text"
                                   value="{{session('colors')->accent4}}"/>
                            <input id="accent4_value" type="hidden"
                                   value="{{session('colors')->accent4}}"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input type="button" class="btn btn-block btn-primary" value="GUARDAR"
               onclick="guardarColoresConfirmacion()">

    </div>


    <div class="row">
        <div class="col-12">
            <div class="alert alert-secondary" role="alert">
                Fuentes del Sistema
            </div>

        </div>
    </div>
    <div class="card-body">

        <div class="jumbotron" id="">
            <div class="row">

                <div class="col-md-4">
                    <span>Fuente Primaria</span>
                    <select class="form-control" id="fuente_primaria"
                            onchange="cambiaFuente(this.value,'fuente_primaria')">
                        <option value="Roboto" @if(session('fonts')->primary_font=='Robot') selected
                                @endif style="font-family: Roboto;">Roboto
                        </option>
                        <option value="Raleway" @if(session('fonts')->primary_font=='Raleway') selected
                                @endif style="font-family: Raleway;">Raleway
                        </option>
                        <option value="Montserrat" @if(session('fonts')->primary_font=='Montserrat') selected
                                @endif  style="font-family: Montserrat">Montserrat
                        </option>
                        <option value="Titillium Web" @if(session('fonts')->primary_font=='Titillium Web') selected
                                @endif style="font-family: Titillium Web">Titillium Web
                        </option>
                        <option value="Pacifico" @if(session('fonts')->primary_font=='Pacifico') selected
                                @endif style="font-family: Pacifico">Pacifico
                        </option>
                        <option value="Josefin Slab" @if(session('fonts')->primary_font=='Josefin Slab') selected
                                @endif style="font-family: Josefin Slab">Josefin Slab
                        </option>
                        <option value="Orbitron" @if(session('fonts')->primary_font=='Orbitron') selected
                                @endif style="font-family: Orbitron">Orbitron
                        </option>
                        <option value="Comfortaa" @if(session('fonts')->primary_font=='Comfortaa') selected
                                @endif style="font-family: Comfortaa;">Comfortaa
                        </option>
                        <option value="Courgette" @if(session('fonts')->primary_font=='Courgette') selected
                                @endif style="font-family: Courgette;">Courgette
                        </option>
                        <option value="Ubuntu" @if(session('fonts')->primary_font=='Ubuntu') selected
                                @endif style="font-family: Ubuntu;">Ubuntu
                        </option>
                        <option value="Chewy" @if(session('fonts')->primary_font=='Chewy') selected
                                @endif style="font-family: Chewy;">Chewy
                        </option>
                        <option value="Lobster Two" @if(session('fonts')->primary_font=='Lobster Two') selected
                                @endif style="font-family: Lobster Two;">Lobster Two
                        </option>
                        <option value="Kaushan Script"
                                @if(session('fonts')->primary_font=='Kaushan Script') selected
                                @endif style="font-family: Kaushan Script;">Kaushan
                            Script
                        </option>
                        <option id="Economica" @if(session('fonts')->primary_font=='Economica') selected
                                @endif style="font-family: Economica;">Economica
                        </option>
                        <option id="Satisfy" @if(session('fonts')->primary_font=='Satisfy') selected
                                @endif style="font-family: Satisfy;">Satisfy
                        </option>
                        <option id="Nunito" @if(session('fonts')->h1=='Nunito') selected
                                @endif style="font-family: Nunito;">Nunito
                        </option>
                    </select>

                </div>
                <div class="col-md-8 p-2">

                    <span id="fuente_primaria_result"
                          style="font-size: 40px; font-size: {{session('fonts')->primary_font}}"> Lorem Ipsum is simply </span>
                </div>

            </div>
            <div class="row">

                <div class="col-md-4">
                    <span>Titulos</span>
                    <select class="form-control" id="h1"
                            onchange="cambiaFuente(this.value,'h1')">
                        <option value="Roboto" @if(session('fonts')->h1=='Robot') selected
                                @endif style="font-family: Roboto;">Roboto
                        </option>
                        <option value="Raleway" @if(session('fonts')->h1=='Raleway') selected
                                @endif style="font-family: Raleway;">Raleway
                        </option>
                        <option value="Montserrat" @if(session('fonts')->h1=='Montserrat') selected
                                @endif  style="font-family: Montserrat">Montserrat
                        </option>
                        <option value="Titillium Web" @if(session('fonts')->h1=='Titillium Web') selected
                                @endif style="font-family: Titillium Web">Titillium Web
                        </option>
                        <option value="Pacifico" @if(session('fonts')->h1=='Pacifico') selected
                                @endif style="font-family: Pacifico">Pacifico
                        </option>
                        <option value="Josefin Slab" @if(session('fonts')->h1=='Josefin Slab') selected
                                @endif style="font-family: Josefin Slab">Josefin Slab
                        </option>
                        <option value="Orbitron" @if(session('fonts')->h1=='Orbitron') selected
                                @endif style="font-family: Orbitron">Orbitron
                        </option>
                        <option value="Comfortaa" @if(session('fonts')->h1=='Comfortaa') selected
                                @endif style="font-family: Comfortaa;">Comfortaa
                        </option>
                        <option value="Courgette" @if(session('fonts')->h1=='Courgette') selected
                                @endif style="font-family: Courgette;">Courgette
                        </option>
                        <option value="Ubuntu" @if(session('fonts')->h1=='Ubuntu') selected
                                @endif style="font-family: Ubuntu;">Ubuntu
                        </option>
                        <option value="Chewy" @if(session('fonts')->h1=='Chewy') selected
                                @endif style="font-family: Chewy;">Chewy
                        </option>
                        <option value="Lobster Two" @if(session('fonts')->h1=='Lobster Two') selected
                                @endif style="font-family: Lobster Two;">Lobster Two
                        </option>
                        <option value="Kaushan Script" @if(session('fonts')->h1=='Kaushan Script') selected
                                @endif style="font-family: Kaushan Script;">Kaushan
                            Script
                        </option>
                        <option id="Economica" @if(session('fonts')->h1=='Economica') selected
                                @endif style="font-family: Economica;">Economica
                        </option>
                        <option id="Satisfy" @if(session('fonts')->h1=='Satisfy') selected
                                @endif style="font-family: Satisfy;">Satisfy
                        </option>
                        <option id="Nunito" @if(session('fonts')->h1=='Nunito') selected
                                @endif style="font-family: Nunito;">Nunito
                        </option>
                    </select>

                </div>
                <div class="col-md-8 p-2">

                    <span id="h1_result"
                          style="font-size: 40px; font-size: {{session('fonts')->h1}}"> dummy text of the printing  </span>
                </div>

            </div>
            <div class="row">

                <div class="col-md-4">
                    <span>Textos</span>
                    <select class="form-control" id="p"
                            onchange="cambiaFuente(this.value,'p')">
                        <option value="Roboto" @if(session('fonts')->p=='Robot') selected
                                @endif style="font-family: Roboto;">Roboto
                        </option>
                        <option value="Raleway" @if(session('fonts')->p=='Raleway') selected
                                @endif style="font-family: Raleway;">Raleway
                        </option>
                        <option value="Montserrat" @if(session('fonts')->p=='Montserrat') selected
                                @endif  style="font-family: Montserrat">Montserrat
                        </option>
                        <option value="Titillium Web" @if(session('fonts')->p=='Titillium Web') selected
                                @endif style="font-family: Titillium Web">Titillium Web
                        </option>
                        <option value="Pacifico" @if(session('fonts')->p=='Pacifico') selected
                                @endif style="font-family: Pacifico">Pacifico
                        </option>
                        <option value="Josefin Slab" @if(session('fonts')->p=='Josefin Slab') selected
                                @endif style="font-family: Josefin Slab">Josefin Slab
                        </option>
                        <option value="Orbitron" @if(session('fonts')->p=='Orbitron') selected
                                @endif style="font-family: Orbitron">Orbitron
                        </option>
                        <option value="Comfortaa" @if(session('fonts')->p=='Comfortaa') selected
                                @endif style="font-family: Comfortaa;">Comfortaa
                        </option>
                        <option value="Courgette" @if(session('fonts')->p=='Courgette') selected
                                @endif style="font-family: Courgette;">Courgette
                        </option>
                        <option value="Ubuntu" @if(session('fonts')->p=='Ubuntu') selected
                                @endif style="font-family: Ubuntu;">Ubuntu
                        </option>
                        <option value="Chewy" @if(session('fonts')->p=='Chewy') selected
                                @endif style="font-family: Chewy;">Chewy
                        </option>
                        <option value="Lobster Two" @if(session('fonts')->p=='Lobster Two') selected
                                @endif style="font-family: Lobster Two;">Lobster Two
                        </option>
                        <option value="Kaushan Script" @if(session('fonts')->p=='Kaushan Script') selected
                                @endif style="font-family: Kaushan Script;">Kaushan
                            Script
                        </option>
                        <option id="Economica" @if(session('fonts')->p=='Economica') selected
                                @endif style="font-family: Economica;">Economica
                        </option>
                        <option id="Satisfy" @if(session('fonts')->p=='Satisfy') selected
                                @endif style="font-family: Satisfy;">Satisfy
                        </option>
                        <option id="Nunito" @if(session('fonts')->h1=='Nunito') selected
                                @endif style="font-family: Nunito;">Nunito
                        </option>
                    </select>

                </div>
                <div class="col-md-8 p-2">

                    <span id="p_result"
                          style="font-size: 40px; font-size: {{session('fonts')->p}}">  and typesetting industry </span>
                </div>

            </div>
        </div>
        <input type="button" class="btn btn-block btn-primary" value="GUARDAR"
               onclick="guardarFuentesConfirmacion()">

    </div>


    <div class="modal fade" id="loadingSave" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h6 class="text-center">Guardando...</h6>
                    <label class="text-secondary">Se esta guardando la información, por favor espera.</label>
                    <div class="logo text-center" id="modalImg">
                        <img src="{{ asset('asset') }}/images/load.gif" class="img-responsive logo-mini" width="50">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="md_redes" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="form-group">
                        <label>Icono <span class="text-danger">*</span>
                            <a href="https://fontawesome.com/v4/icons/" target="_blank">
                                <i class="fa fa-question-circle"></i>
                            </a>
                        </label>
                        <input type="text" class="form-control" id="icon">
                    </div>
                    <div class="form-group">
                        <label>LINK <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="link">
                    </div>

                    <input type="button" class="btn btn-block btn-primary" value="GUARDAR"
                           onclick="guardarRedSocialConfirmacion()">
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="md_colores" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <h1>Inicio</h1>
                            <img src="{{asset('imagenes/webcork_home.jpg')}}" class="img-responsive">
                        </div>

                        <div class="col-md-12">
                            <h1>Tienda</h1>
                            <img src="{{asset('imagenes/ewbcork_tienda.jpg')}}" class="img-responsive">
                        </div>
                        <div class="col-md-12">
                            <h1>Producto Detalle</h1>
                            <img src="{{asset('imagenes/webcork_detalle_prod.jpg')}}" class="img-responsive">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="md_editar_red">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title text-center">Editar</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-4">
                            <input type="text" class="form-control" id="editar_icono">
                        </div>
                        <div class="col-md-8">
                            <input type="text" class="form-control" id="editar_link">
                        </div>
                    </div>


                </div>
                <div class="modal-footer">
                    <input type="hidden" class="form-control" id="editar_id">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-primary" onclick="editarRedSocial();">Guardar</button>
                </div>
            </div>
        </div>
    </div>


@endsection
@section('scripts')
    <script>
        {{--var accent1 = {!! session('colors')->accent1 !!} ;--}}
        {{--var accent2 = {{session('colors')->accent2}};--}}
        {{--var accent3 = {{session('colors')->accent3}};--}}
        {{--var accent4 = {{session('colors')->accent4}};--}}
		$(document).ready(function () {

			$.ajaxSetup({
				headers: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				}
			});


			// Basic instantiation:
			var accent1 = $("#accent1_value").val();
			var accent2 = $("#accent2_value").val();
			var accent3 = $("#accent3_value").val();
			var accent4 = $("#accent4_value").val();


			// console.log(accent1);
			// alert(accent1.replace('#', ''));

			// var accent1 = "#0C1B4A";
			$('#accent1-input').colorpicker();
			$('#accent2-input').colorpicker();
			$('#accent3-input').colorpicker();
			$('#accent4-input').colorpicker();


			$('#accent1-input').val(accent1);
			$('#accent2-input').val(accent2);
			$('#accent3-input').val(accent3);
			$('#accent4-input').val(accent4);


			$('#accent1-input').on('colorpickerChange', function (event) {
				$('#accent1').css('background-color', event.color.toString());
			});


			$('#accent2-input').on('colorpickerChange', function (event) {
				$('.accent2').css('background-color', event.color.toString());
			});


			$('#accent3-input').on('colorpickerChange', function (event) {
				$('.accent3').css('background-color', event.color.toString());
			});


			$('#accent4-input').on('colorpickerChange', function (event) {
				$('.accent4').css('background-color', event.color.toString());
			});

			var el = document.getElementById('contentImagenes');
			Sortable.create(el, {
				animation: 150,
				sort: true,
				group: 'lista-imagenes',
				store: {
					set: (sortable) => {
						var order = sortable.toArray();
						$.ajax({
							url: "{{ url('admin/save-banner-order')}}",
							type: "post",
							dataType: "json",
							data: {
								img_order: order,
							}
						})
					}
				}
			});


			$("#accent1-input").trigger('change');
			$("#accent2-input").trigger('change');
			$("#accent3-input").trigger('change');
			$("#accent4-input").trigger('change');

		});


		function cambiaFuente(value, id) {
			$("#" + id + "_result").css('font-family', value);
		}

		$("#formUploadLogo").on("submit", function (e) {
			e.preventDefault();
			var formData = new FormData(document.getElementById("formUploadLogo"));
			$('#loadingSave').modal('show');
			$.ajax({
				url: "{{ url('admin/save-logo')}}",
				type: "post",
				dataType: "json",
				data: formData,
				cache: false,
				contentType: false,
				processData: false
			})
				.done(function (resp) {
					setTimeout(() => {
						// clearImageR()
					}, 2000);

				})
				.fail(function () {
					setTimeout(() => {
						// showNotification('error', 'top', 'center', 'danger', 'Algo salio mal durante el proceso.', '¡ERROR!')
					}, 2000);
				})
				.always(function () {
					setTimeout(() => {
						$('#loadingSave').modal('hide');
					}, 2000);
				});
		});


		function previewLogo() {

			frame_logo.src = URL.createObjectURL(event.target.files[0]);
		}

		$('.delete').click(function () {
			$(this).parents('.contentPImg').remove();
			var id = $(this).attr('id_image');
			$.ajax({
				url: "{{ url('admin/delete-banner')}}",
				type: "post",
				dataType: "json",
				data: {
					id: id,
					seccion: 'inicio',
				}
			})
				.done(function (resp) {

				})
				.fail(function () {
					setTimeout(() => {
					}, 2000);
				})
				.always(function () {

				});
		});

		$('#filer_input_banners').filer({
			addMore: true,
			extensions: ["webp", "jpg", "jpeg", "png"],
			showThumbs: true,
			// limit: 1,
			captions: {
				button: "Explorar archivos",
				feedback: "Elige tus imágenes a subir",
				feedback2: "imágenes seleccionadas",
				removeConfirmation: "¿Estas seguro de remover la imágen?",
				errors: {
					filesType: "Solo se pueden subir imágenes.",
				}
			}

		});

		function nuevaImagenSelect() {
			$('#contentBtnUpload').show();
		}

		$("#formUploadImages").on("submit", function (e) {
			e.preventDefault();
			var formData = new FormData(document.getElementById("formUploadImages"));
			formData.append("section", 'contacto');
			$('#loadingSave').modal('show');
			$.ajax({
				url: "{{ url('admin/save-banners')}}",
				type: "post",
				dataType: "json",
				data: formData,
				cache: false,
				contentType: false,
				processData: false
			})
				.done(function (resp) {
					setTimeout(() => {
						window.location.reload();
					}, 2000);

				})
				.fail(function () {
					setTimeout(() => {
						// showNotification('error', 'top', 'center', 'danger', 'Algo salio mal durante el proceso.', '¡ERROR!')
					}, 2000);
				})
				.always(function () {
					setTimeout(() => {
						$('#loadingSave').modal('hide');
					}, 2000);
				});
		});

		function editarRedSocialConfirmacion(id, icono, link) {
			$('#md_editar_red').modal();
			$('#editar_id').val(id);
			$('#editar_icono').val(icono);
			$('#editar_link').val(link);
		}

		function editarRedSocial() {

			var id = $('#editar_id').val();
			var icono = $('#editar_icono').val();
			var link = $('#editar_link').val();

			$.ajax({
				url: '{{ url("admin/editar-red-social")}}',
				type: 'POST',
				dataType: 'json',
				data: {
					id: id,
					icono: icono,
					link: link,
				},
			})
				.done(function (resp) {
					console.log(resp);
					if (resp.result == 1) {
						Swal.fire({
							icon: 'success',
							title: '¡la página se publicó correctamente!',
							showConfirmButton: false,
							timer: 2500
						});
						window.location.reload();

					} else {
						Swal.fire({
							icon: 'error',
							title: 'Oops...',
							text: resp.msg
						})
					}
				})
				.fail(function () {
					// console.log("error");
					Swal.fire({
						icon: 'error',
						title: 'Oops...',
						text: '¡Algo salió mal!'
					})
				})
				.always(function () {
					// console.log("complete");
					setTimeout(() => {
						$('#loadingSave').modal('hide');
					}, 2000);
				});
		}

		function eliminarRedSocialConfirmacion(id) {
			Swal.fire({
				title: '¿Está seguro que desea continuar?',
				text: "¡Los cambios se publicaran automaticamente en el sitio web!",
				icon: 'warning',
				showCancelButton: true,
				confirmButtonColor: '#0C1B4A',
				cancelButtonColor: '#AF0000',
				confirmButtonText: '¡Sí, continuar!',
				cancelButtonText: 'Cancelar'
			}).then((result) => {
				if (result.value) {

					// var codigo= $("#editContacto").val();
					$('#loadingSave').modal('show');
					var ed = tinyMCE.get('editHeader');
					var data = ed.getContent();
					$.ajax({
						url: '{{ url("admin/delete-red-social")}}',
						type: 'POST',
						dataType: 'json',
						data: {
							id: id
						},
					})
						.done(function (resp) {
							console.log(resp);
							if (resp.result == 1) {
								Swal.fire({
									icon: 'success',
									title: '¡la página se publicó correctamente!',
									showConfirmButton: false,
									timer: 2500
								});
								window.location.reload();

							} else {
								Swal.fire({
									icon: 'error',
									title: 'Oops...',
									text: resp.msg
								})
							}
						})
						.fail(function () {
							// console.log("error");
							Swal.fire({
								icon: 'error',
								title: 'Oops...',
								text: '¡Algo salió mal!'
							})
						})
						.always(function () {
							// console.log("complete");
							setTimeout(() => {
								$('#loadingSave').modal('hide');
							}, 2000);
						});
				}

			})
		}

		function guardarRedSocialConfirmacion() {
			var icon = $("#icon").val();
			var link = $("#link").val();

			Swal.fire({
				title: '¿Está seguro que desea continuar?',
				text: "¡Los cambios se publicaran automaticamente en el sitio web!",
				icon: 'warning',
				showCancelButton: true,
				confirmButtonColor: '#0C1B4A',
				cancelButtonColor: '#AF0000',
				confirmButtonText: '¡Sí, continuar!',
				cancelButtonText: 'Cancelar'
			}).then((result) => {
				if (result.value) {

					// var codigo= $("#editContacto").val();
					$('#loadingSave').modal('show');

					$.ajax({
						url: '{{ url("admin/save-red-social")}}',
						type: 'POST',
						dataType: 'json',
						data: {
							icon: icon,
							link: link,
						},
					})
						.done(function (resp) {
							console.log(resp);
							if (resp.result == 1) {
								Swal.fire({
									icon: 'success',
									title: '¡la página se publicó correctamente!',
									showConfirmButton: false,
									timer: 2500
								});

								window.location.reload();

							} else {
								Swal.fire({
									icon: 'error',
									title: 'Oops...',
									text: resp.msg
								})
							}
						})
						.fail(function () {
							// console.log("error");
							Swal.fire({
								icon: 'error',
								title: 'Oops...',
								text: '¡Algo salió mal!'
							})
						})
						.always(function () {
							// console.log("complete");
							setTimeout(() => {
								$('#loadingSave').modal('hide');
							}, 2000);
						});
				}

			})
		}

		function guardarHeaderConfirmacion() {
			Swal.fire({
				title: '¿Está seguro que desea continuar?',
				text: "¡Los cambios se publicaran automaticamente en la plantilla HEADER!",
				icon: 'warning',
				showCancelButton: true,
				confirmButtonColor: '#0C1B4A',
				cancelButtonColor: '#AF0000',
				confirmButtonText: '¡Sí, continuar!',
				cancelButtonText: 'Cancelar'
			}).then((result) => {
				if (result.value) {

					// var codigo= $("#editContacto").val();
					$('#loadingSave').modal('show');
					var ed = tinyMCE.get('editHeader');
					var data = ed.getContent();
					$.ajax({
						url: '{{ url("admin/save-header")}}',
						type: 'POST',
						dataType: 'json',
						data: {
							data: data
						},
					})
						.done(function (resp) {
							console.log(resp);
							if (resp.result == 1) {
								Swal.fire({
									icon: 'success',
									title: '¡la página se publicó correctamente!',
									showConfirmButton: false,
									timer: 2500
								});

							} else {
								Swal.fire({
									icon: 'error',
									title: 'Oops...',
									text: resp.msg
								})
							}
						})
						.fail(function () {
							// console.log("error");
							Swal.fire({
								icon: 'error',
								title: 'Oops...',
								text: '¡Algo salió mal!'
							})
						})
						.always(function () {
							// console.log("complete");
							setTimeout(() => {
								$('#loadingSave').modal('hide');
							}, 2000);
						});
				}

			})
		}

		function guardarFooterConfirmacion() {
			Swal.fire({
				title: '¿Está seguro que desea continuar?',
				text: "¡Los cambios se publicaran automaticamente en la plantilla FOOTER!",
				icon: 'warning',
				showCancelButton: true,
				confirmButtonColor: '#0C1B4A',
				cancelButtonColor: '#AF0000',
				confirmButtonText: '¡Sí, continuar!',
				cancelButtonText: 'Cancelar'
			}).then((result) => {
				if (result.value) {

					// var codigo= $("#editContacto").val();
					$('#loadingSave').modal('show');
					var ed = tinyMCE.get('editFooter');
					var data = ed.getContent();
					$.ajax({
						url: '{{ url("admin/save-footer")}}',
						type: 'POST',
						dataType: 'json',
						data: {
							data: data
						},
					})
						.done(function (resp) {
							console.log(resp);
							if (resp.result == 1) {
								Swal.fire({
									icon: 'success',
									title: '¡la página se publicó correctamente!',
									showConfirmButton: false,
									timer: 2500
								});

							} else {
								Swal.fire({
									icon: 'error',
									title: 'Oops...',
									text: resp.msg
								})
							}
						})
						.fail(function () {
							// console.log("error");
							Swal.fire({
								icon: 'error',
								title: 'Oops...',
								text: '¡Algo salió mal!'
							})
						})
						.always(function () {
							// console.log("complete");
							setTimeout(() => {
								$('#loadingSave').modal('hide');
							}, 2000);
						});
				}

			})
		}


		function guardarColoresConfirmacion() {
			Swal.fire({
				title: '¿Está seguro que desea continuar?',
				text: "¡Los cambios se publicaran automaticamente!",
				icon: 'warning',
				showCancelButton: true,
				confirmButtonColor: '#0C1B4A',
				cancelButtonColor: '#AF0000',
				confirmButtonText: '¡Sí, continuar!',
				cancelButtonText: 'Cancelar'
			}).then((result) => {
				if (result.value) {

					// var codigo= $("#editContacto").val();
					$('#loadingSave').modal('show');
					var accent1 = $('#accent1-input').val();
					var accent2 = $('#accent2-input').val();
					var accent3 = $('#accent3-input').val();
					var accent4 = $('#accent4-input').val();

					var ed = tinyMCE.get('editFooter');
					var data = ed.getContent();
					$.ajax({
						url: '{{ url("admin/save-colors")}}',
						type: 'POST',
						dataType: 'json',
						data: {
							accent1: accent1,
							accent2: accent2,
							accent3: accent3,
							accent4: accent4,
						},
					})
						.done(function (resp) {
							console.log(resp);
							if (resp.result == 1) {
								Swal.fire({
									icon: 'success',
									title: '¡la página se publicó correctamente!',
									showConfirmButton: false,
									timer: 2500
								});

							} else {
								Swal.fire({
									icon: 'error',
									title: 'Oops...',
									text: resp.msg
								})
							}
						})
						.fail(function () {
							// console.log("error");
							Swal.fire({
								icon: 'error',
								title: 'Oops...',
								text: '¡Algo salió mal!'
							})
						})
						.always(function () {
							// console.log("complete");
							setTimeout(() => {
								$('#loadingSave').modal('hide');
							}, 2000);
						});
				}
			})
		}

		function guardarFuentesConfirmacion() {
			Swal.fire({
				title: '¿Está seguro que desea continuar?',
				text: "¡Los cambios se publicaran automaticamente!",
				icon: 'warning',
				showCancelButton: true,
				confirmButtonColor: '#0C1B4A',
				cancelButtonColor: '#AF0000',
				confirmButtonText: '¡Sí, continuar!',
				cancelButtonText: 'Cancelar'
			}).then((result) => {
				if (result.value) {

					// var codigo= $("#editContacto").val();
					$('#loadingSave').modal('show');
					var fuente_primaria = $('#fuente_primaria').val();
					var h1 = $('#h1').val();
					var p = $('#p').val();

					var ed = tinyMCE.get('editFooter');
					var data = ed.getContent();
					$.ajax({
						url: '{{ url("admin/save-fonts")}}',
						type: 'POST',
						dataType: 'json',
						data: {
							fuente_primaria: fuente_primaria,
							h1: h1,
							p: p
						},
					})
						.done(function (resp) {
							console.log(resp);
							if (resp.result == 1) {
								Swal.fire({
									icon: 'success',
									title: '¡la página se publicó correctamente!',
									showConfirmButton: false,
									timer: 2500
								});

							} else {
								Swal.fire({
									icon: 'error',
									title: 'Oops...',
									text: resp.msg
								})
							}
						})
						.fail(function () {
							// console.log("error");
							Swal.fire({
								icon: 'error',
								title: 'Oops...',
								text: '¡Algo salió mal!'
							})
						})
						.always(function () {
							// console.log("complete");
							setTimeout(() => {
								$('#loadingSave').modal('hide');
							}, 2000);
						});
				}
			})
		}
    </script>

    <script>
		tinymce.init({
			selector: '#editHeader',
			inline: true,
			plugins: 'advcode code',
			toolbar: 'undo redo | code',
		});

		tinymce.init({
			selector: '#editFooter',
			inline: true,
			plugins: 'advcode code',
			toolbar: 'undo redo | code',
		});
    </script>
@endsection