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

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

@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 Llantas</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/llantas/{{$img->img}}?0.04829500 1746522146"
                                             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", 'llantas');
			$('#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