@extends('layout')

@section('content')


<script>
	$(document).ready(function() {

		$('#tblPromociones').DataTable({
			destroy: true,
			ordering: true,
			sSearch: '<span class="kt-input-icon__icon kt-input-icon__icon--left"><span>&ensp;<i class="la la-search"></i></span>&ensp;Buscar</span >',
			language: {
				sProcessing: "Procesando...",
				sLengthMenu: "Mostrar _MENU_ registros",
				sZeroRecords: "No se encontraron resultados",
				sEmptyTable: "Ningún dato disponible en esta tabla",
				sInfo: "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
				sInfoEmpty: "Mostrando registros del 0 al 0 de un total de 0 registros",
				sInfoFiltered: "(filtrado de un total de _MAX_ registros)",
				sInfoPostFix: "",
				sSearch: "Buscar:",
				sUrl: "",
				sInfoThousands: ",",
				sLoadingRecords: "Cargando...",
				oPaginate: {
					sFirst: "Primero",
					sLast: "Último",
					sNext: "Siguiente",
					sPrevious: "Anterior",
				},
			},
		}).draw();
	});

	/*FUNCIÓN ONCLICK PARA EL BOTON DE ELIMINAR*/
	$(document).on('click', '[id^="btnEliminar-"]', function() {
		var $button = $(this);
		var id = this.id.split('-').pop();

		var table = $('#tblPromociones').DataTable(); // replace with your table id        

		const swalWithBootstrapButtons = Swal.mixin({
			customClass: {
				confirmButton: 'btn btn-success',
				cancelButton: 'btn btn-danger'
			},
			buttonsStyling: false
		})

		const Toast = Swal.mixin({
			toast: true,
			position: 'top-end',
			showConfirmButton: false,
			timer: 3000,
			timerProgressBar: true,
			didOpen: (toast) => {
				toast.addEventListener('mouseenter', Swal.stopTimer)
				toast.addEventListener('mouseleave', Swal.resumeTimer)
			}
		})

		swalWithBootstrapButtons.fire({
			title: '¿Desea eliminar el siguiente registro?',
			text: "Esta acción no es reversible.",
			icon: 'warning',
			showCancelButton: true,
			confirmButtonText: 'Sí, Eliminar',
			cancelButtonText: 'No, cancelar',
			reverseButtons: true
		}).then((result) => {
			if (result.isConfirmed) {

				var token = $("meta[name='csrf-token']").attr("content");

				$.ajax({
					url: "{{url('noticias')}}" + "/" + id,
					type: 'DELETE',
					data: {
						_token: '{{csrf_token()}}',
					},
					success: function() {
						table.row($button.parents('tr')).remove().draw();
						Toast.fire({
							icon: 'success',
							title: 'Registro eliminado'
						});
					}
				});
			}
		})

	});
</script>

<div class="d-flex flex-column-fluid">

	<!--begin::Container-->
	<div class="container">
		<!--begin::Card-->
		<div class="card card-custom">
			<!--begin::Header-->
			<div class="card-header flex-wrap border-0 pt-6 pb-0">
				<div class="card-title">
					<h3 class="card-label">Noticias</h3>
				</div>
				<div class="card-toolbar">
					<!--begin::Button-->
					@can('crear_noticias')
					<a href="{{route('noticias.create')}}" class="btn btn-primary font-weight-bolder">
						<span class="svg-icon svg-icon-md">
							<!--begin::Svg Icon | path:assets/media/svg/icons/Design/Flatten.svg-->
							<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
								<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
									<rect x="0" y="0" width="24" height="24" />
									<circle fill="#000000" cx="9" cy="15" r="6" />
									<path d="M8.8012943,7.00241953 C9.83837775,5.20768121 11.7781543,4 14,4 C17.3137085,4 20,6.6862915 20,10 C20,12.2218457 18.7923188,14.1616223 16.9975805,15.1987057 C16.9991904,15.1326658 17,15.0664274 17,15 C17,10.581722 13.418278,7 9,7 C8.93357256,7 8.86733422,7.00080962 8.8012943,7.00241953 Z" fill="#000000" opacity="0.3" />
								</g>
							</svg>
							<!--end::Svg Icon-->
						</span>Nuevo
					</a>
					@endcan
					<!--end::Button-->
				</div>
			</div>
			<!--end::Header-->
			<!--begin::Body-->
			<div class="card-body">
				<table class="table border" id="tblPromociones">
					<thead>
						<tr>
							<th>Estado</th>
							<th>Fecha de creación</th>
							<th>Autor</th>
							<th>Categoría/Tipo</th>
							<th>Nombre</th>
							<th>Sucursal</th>
							@can('editar_noticias')
							<th>Editar</th>
							@endcan
							@can('eliminar_noticias')
							<th>Eliminar</th>
							@endcan
						</tr>
					</thead>
					<tbody>
						@foreach($promociones as $promocion)
						<tr>
							<td>{{ $promocion->estado }}</td>
							<td>{{ $promocion->updated_at->format('d/m/Y H:i:s') }}</td>
							<td>{{ $promocion->updatedBy->fullName }}</td>
							<td>{{ $promocion->tipoNombre }}</td>
							<td>{{ $promocion->nombre }}</td>
							<td>{!! $promocion->sucursal->pluck('nombre')->join('<br>') !!} </td>
							@can('editar_noticias')
							<td>
								<a class="btn btn-warning" href="{{url('/noticias/'.$promocion->id.'/edit')}}">
									<i class="fa-solid fa-pen-to-square"></i>
								</a>
							</td>
							@endcan
							@can('eliminar_noticias')
							<td>
								<button class="btn btn-danger" id="btnEliminar-{{$promocion->id}}"><i class="fa-solid fa-circle-minus"></i></button>
							</td>
							@endcan
						</tr>
						@endforeach
					</tbody>
				</table>
			</div>
			<!--end::Body-->
		</div>
		<!--end::Card-->
	</div>
	<!--end::Container-->
</div>
@endsection