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


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

@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>
        .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="row">
        <div class="col-12">
            <div class="alert alert-primary" role="alert">
                Las medida de las imagenes del slider principal deben ser de: <b>1920 x 600 pixeles.</b>
                <hr>
                El orden del Slider es Ascendente como se muestra acontinuación, para cambiar el orden, solo arraste la
                imagen a su lugar correspondiente.
            </div>
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-6">
                            <h3 class="card-title">Banners</h3>
                        </div>
                        <div class="col-md-6">
                            <form method="post" enctype="multipart/form-data" id="formUploadImages">
                                <input type="file" name="files_ad[]" onchange="nuevaImagenSelect()"
                                       id="filer_input_banners" multiple="multiple" accept="image/webp">
                                <div class="col-12 text-right align-self-end">
                                    <button type="submit" style="display:none" id="contentBtnUpload"
                                            class="btn btn-primary mb-3">Subir imágenes
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>


                </div>
                <div class="card-body">
                    <div class="row" id="contentImagenes">
                        @foreach($banners as $key => $img)
                            <div class="col-md-4 contentPImg" data-id="{{$img->id}}">
                                <div class="card">
                                    <div class="card-header text-center">
                                    <!-- <div class="form-check">
                    <input type="radio" class="form-check-input" name="principalRadio" id="principalRadio_{{$img->id}}" id_image="{{$img->id}}" @if($img->Status == 'P')
                                        checked
@endif
                                            /> -->
                                        <!-- <label class="form-check-label">Volver imágen principal</label> -->
                                        <!-- </div> -->


                                        <h6>Banner</h6>

                                    </div>
                                    <div class="card-body contentImg ">
                                        <img src="../imagenes/banners/nosotros/{{$img->img}}?0.48148700 1746435386"
                                             class="img-thumbnail">
                                        <button id_image="{{$img->id}}" class="delete btn btn-danger" title="Eliminar">
                                            <i class="fa fa-trash" aria-hidden="true"></i></button>
                                    </div>

                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="p-60 bg-light">
                <div class="alert alert-primary" role="alert">
                    ¡Haga clic aquí para editar!
                    <hr>
                    Recuerde revisar bien antes de guardar
                </div>

            </div>
            <div class="jumbotron" id="editContacto">
                {!! $contacto->codigo!!}
            </div>
            <input type="button" class="btn btn-block btn-primary" value="GUARDAR"
                   onclick="guardarContactoConfirmacion()">
        </div>
    </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>


@endsection
@section('scripts')
    <script>
		$(document).ready(function () {

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

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

		});

		$('.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 guardarContactoConfirmacion() {
			Swal.fire({
				title: '¿Está seguro que desea continuar?',
				text: "¡Los cambios se publicaran automaticamente en la página de contacto!",
				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('editContacto');
					var data = ed.getContent();
					$.ajax({
						url: '{{ url("admin/save-contacto")}}',
						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);
						});
				}

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