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

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

@section('breadcrumb')
    <li class="breadcrumb-item active">@yield('titulo')</li>
@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 451 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 Accesorios</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/accesorios/{{$img->img}}?0.83547900 1746546598"
											 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="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", 'accesorios');
			$('#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);
				});
		})

    </script>
@endsection