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


@section('titulo', 'Administración de Banners Inicio')

@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>
    {{--Banners--}}
    <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 Inicio</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">
                                        <h6>Banner</h6>
                                    </div>
                                    <div class="card-body contentImg ">
                                        <img src="{{ asset('imagenes') }}/banners/inicio/{{$img->img}}?0.28214400 1746435249"
                                             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>
    {{--Categorias--}}
    <div class="card">
        <div class="card-header">
            <div class="row">
                <div class="col-md-12">
                    <h3 class="card-title">Categorías</h3>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="container">
				<div class="alert alert-primary" role="alert">
					Las medida de las imagenes deben ser de: <b>738 x 312 pixeles.</b>
				</div>
                <div class="row">
                    <div class="col-md-4">
                        <form method="post" enctype="multipart/form-data" id="formUploadRines">
                            <div class="mb-5">
                                <label for="Image" class="form-label">Rines</label>
                                <input class="form-control" type="file" id="formFile_rines" name="files_ad[]"
                                       onchange="previewR()" required>
                                <br>
                                <button type="submit"
                                        class="btn btn-primary btn-block mb-3">Subir
                                </button>

                            </div>
                            <img id="frame_rines" src="{{ asset('imagenes') }}/banners/inicio/{{$url_img_rines->url}}"
                                 class="img-fluid"/>
                        </form>
                    </div>

                    <div class="col-md-4">
                        <form method="post" enctype="multipart/form-data" id="formUploadLlantas">
                            <div class="mb-5">
                                <label for="Image" class="form-label">Llantas</label>
                                <input class="form-control" type="file" id="formFile_llantas" name="files_ad[]"
                                       onchange="previewLl()" required>
                                <br>
                                <button type="submit"
                                        class="btn btn-primary  btn-block mb-3">Subir
                                </button>
                            </div>
                            <img id="frame_llantas"
                                 src="{{ asset('imagenes') }}/banners/inicio/{{$url_img_llantas->url}}"
                                 class="img-fluid"/>
                        </form>
                    </div>

                    <div class="col-md-4">
                        <form method="post" enctype="multipart/form-data" id="formUploadAccesorios">
                            <div class="mb-5">
                                <label for="Image" class="form-label">Accesorios</label>
                                <input class="form-control" type="file" id="formFile_accesorios" name="files_ad[]"
                                       onchange="previewA()" required>
                                <br>
                                <button type="submit"
                                        class="btn btn-primary  btn-block mb-3">Subir
                                </button>
                            </div>
                            <img id="frame_accesorios"
                                 src="{{ asset('imagenes') }}/banners/inicio/{{$url_img_accesorios->url}}"
                                 class="img-fluid"/>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{--Marcas--}}
    <div class="card">
        <div class="card-header">
            <div class="row">
                <div class="col-md-6">
                    <h3 class="card-title">Marcas</h3>
                </div>
                <div class="col-md-6">
                    <form method="post" enctype="multipart/form-data" id="formUploadImagesBrands">
                        <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="alert alert-primary" role="alert">
				Las medida de las imagenes deben ser de: <b>250 x 200 pixeles.</b>

			</div>
            <div class="row" id="contentImagenesBrands">
                @foreach($brands as $key => $img)
                    <div class="col-md-4 contentPImg" data-id="{{$img->id}}">
                        <div class="card">
                            <div class="card-header text-center">
                                <h6>Brand</h6>
                            </div>
                            <div class="card-body contentImg ">
                                <img src="{{ asset('imagenes') }}/banners/inicio/{{$img->url}}?0.28243200 1746435249"
                                     class="img-thumbnail bg-blue">
                                <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 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="editInicio">
                {!! $inicio->codigo!!}
            </div>
            <input type="button" class="btn btn-block btn-primary" value="GUARDAR"
                   onclick="guardarInicioConfirmacion()">
        </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,
							}
						})
					}
				}
			});

			var elB = document.getElementById('contentImagenesBrands');
			Sortable.create(elB, {
				animation: 150,
				sort: true,
				group: 'lista-imagenes',
				store: {
					set: (sortable) => {
						var order = sortable.toArray();
						$.ajax({
							url: "{{ url('admin/save-brand-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", 'inicio');
			$('#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);
				});
		});

		$("#formUploadImagesBrands").on("submit", function (e) {
			e.preventDefault();
			var formData = new FormData(document.getElementById("formUploadImages"));
			formData.append("section", 'inicio');
			$('#loadingSave').modal('show');
			$.ajax({
				url: "{{ url('admin/save-brands')}}",
				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);
				});
		});

		$("#formUploadRines").on("submit", function (e) {
			e.preventDefault();
			var formData = new FormData(document.getElementById("formUploadRines"));
			formData.append("section", 'inicio');
			formData.append("category", 'rines');
			$('#loadingSave').modal('show');
			$.ajax({
				url: "{{ url('admin/save-category')}}",
				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);
				});
		});

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

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

		$("#formUploadAccesorios").on("submit", function (e) {
			e.preventDefault();
			var formData = new FormData(document.getElementById("formUploadAccesorios"));
			formData.append("section", 'inicio');
			formData.append("category", 'accesorios');
			$('#loadingSave').modal('show');
			$.ajax({
				url: "{{ url('admin/save-category')}}",
				type: "post",
				dataType: "json",
				data: formData,
				cache: false,
				contentType: false,
				processData: false
			})
				.done(function (resp) {
					setTimeout(() => {
						// clearImageA()
					}, 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 guardarInicioConfirmacion() {
			Swal.fire({
				title: '¿Está seguro que desea continuar?',
				text: "¡Los cambios se publicaran automaticamente en la página de inicio!",
				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('editInicio');
					var data = ed.getContent();
					$.ajax({
						url: '{{ url("admin/save-inicio")}}',
						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>
		function previewR() {

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

		function clearImageR() {
			var nombre_file = 'formFile_rines';
			document.getElementById(nombre_file).value = null;
			frame_rines.src = "";
		}

		function previewLl() {

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

		function clearImageLl() {
			var nombre_file = 'formFile_llantas';
			document.getElementById(nombre_file).value = null;
			frame_llantas.src = "";
		}

		function previewA() {

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

		function clearImageA() {
			var nombre_file = 'formFile_accesorios';
			document.getElementById(nombre_file).value = null;
			frame_accesorios.src = "";
		}

    </script>
    <script>
		tinymce.init({
			selector: '#editInicio',
			inline: true,
			plugins: 'advcode image code',
			toolbar: 'undo redo | link image | code',
			images_upload_url: '/admin/postAcceptor/',
			automatic_uploads: true,
			image_title: true,
			file_picker_types: 'image',
			file_picker_callback: function (cb, value, meta) {

				var input = document.createElement('input');
				input.setAttribute('type', 'file');
				input.setAttribute('accept', 'image/*');

				input.onchange = function () {
					var file = this.files[0];

					var reader = new FileReader();
					reader.readAsDataURL(file);
					reader.onload = function () {
						var id = 'blobid' + (new Date()).getTime();
						var blobCache = tinymce.activeEditor.editorUpload.blobCache;
						var base64 = reader.result.split(',')[1];
						var blobInfo = blobCache.create(id, file, base64);
						blobCache.add(blobInfo);
						cb(blobInfo.blobUri(), {title: file.name});
					};
				};
				input.click();
			}
		});
    </script>

@endsection