@extends('admin.layouts.app')

@section('admin.content')
<div class="upperbar">
	<h1 style="margin:0;">Newsletter</h1>
	<div class="container-pulsanti">
		<a class="bottone_blu" href="{{ route('admin.newsletter.create') }}">Nuovo</a>
	</div>
</div>

@if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
@endif

<div class="calendar_container">
	<div id="calendar"></div>
</div>

<div class="container_lista_newsletter">
	<form class="filter-form">
		<div class="form-row">
			<div class="form-group">
				<label for="titolo">Titolo</label>
				<input type="text" id="titolo" name="titolo" placeholder="Titolo Evento" value="{{ request('titolo') }}">
			</div>
			<div class="form-group">
				<label for="commessa">Commessa</label>
				<input type="text" name="commessa" id="commessa" placeholder="Nome Commessa" value="{{ request('commessa') }}">
			</div>
			<div class="form-group">
				<label for="risorsa_responsabile">Risorsa responsabile</label>
				<input type="text" name="risorsa_responsabile" id="risorsa_responsabile" placeholder="Risorsa responsabile" value="{{ request('risorsa_responsabile') }}">
			</div>
			<div class="form-group">
				<label for="stato">Stato Newsletter</label>
				<select class="form-select" name="stato" id="stato">
					<option value="" selected>tutti</option>						
					<option value="-1" {{request()->get('stato')==-1?'selected':''}}>
						Pendente
					</option>
					<option value="1" {{request()->get('stato')==1?'selected':''}}>
						Completato
					</option>
					
				</select>
			</div>
			<div class="form-group">
				<label for="data_invio">Data invio</label>
				<input type="date" name="data_invio" id="data_invio" value="{{ request('data_invio') }}">
			</div>
			<div class="form-group">
				<button type="submit" class="bottone_filtra">
					🔍 Filtra
				</button>
			</div>
			<div class="form-group">
				<div class="bottone_reset">
					<a href="{{ route('admin.newsletter.index') }}">Reset</a>
				</div>
			</div>
		</div>
	</form>
	
	<div class="" style="">{{ $newsletters->links('pagination::bootstrap-5') }}</div>
	
	<h2>Elenco newsletter</h2>
	@if($newsletters->isEmpty())
	<p class="text-center text-muted">Non ci sono richieste di newsletter al momento.</p>	
	@else

	@php
	$campi=[
		'commessa'=>'Commessa',
		'titolo'=>'Titolo',
		'risorsa_responsabile'=>'Responsabile',
		'data_invio'=>'Data invio',
		'area'=>'Area',
		'dem'=>'DEM',
		'note'=>'Note'
	];
	@endphp
	
	<table id="table_newsletter" class="table table-bordered table-hover align-middle text-center">
		<thead class="table-dark text-center align-middle">
			<tr>						
				@foreach($campi as $k=>$v)
				<th>{{$v}}</th>
				@endforeach
				<th>Azioni</th>												
			</tr>
		</thead>
		<tbody>
			@foreach($newsletters as $newsletter)
			@php
			$lista_dem_tmp=json_decode($newsletter->dem,true);
			$lista_dem=implode("<br>",$lista_dem_tmp);
			@endphp
			<tr>
				<td class="row_commessa">{{ $newsletter->commessa }}</td>
				<td class="row_titolo">{{ $newsletter->titolo }}</td>
				<td class="row_responsabile">{{ $newsletter->risorsa_responsabile }}</td>
				<td class="row_data_invio text-center">{{$newsletter->data_invio}}</td>
				<td class="row_area">{{ $newsletter->area }}</td>
				<td class="row_lista">{!! $lista_dem !!}</td>
				<td class="row_note">{{ Str::limit($newsletter->note,50) }}</td>
				<td class="text-center" data-no-modal="true">						
					@if($newsletter->stato==-1)
					<form action="{{ route('admin.newsletter.completato',$newsletter->id) }}" method="POST">
						@csrf
						@method('PUT')
						<a href="{{ route('admin.newsletter.edit',$newsletter->id) }}" class="btn btn-warning btn-sm mt-1">
							<i class="bi bi-pencil"></i> Modifica
						</a>
						@if(auth()->user() && auth()->user()->hasRole('admin'))
							<button type="submit" class="btn btn-success btn-sm mt-1">Completato</button>
						@endif
					</form>
					@else
					<strong>Data completamento:</strong><br>
					{{$newsletter->data_completamento}}

					<form action="{{ route('admin.newsletter.annullaCompletamento',$newsletter->id) }}" method="POST" class="mt-2">
						@csrf
						@method('PUT')
						<button type="submit" class="btn btn-danger btn-sm">Annulla Completamento</button>
					</form>
					@endif
				</td>
			</tr>
			@endforeach
		</tbody>
	</table>		
	@endif

	<div class="" style="">{{ $newsletters->links('pagination::bootstrap-5') }}</div>

	<!-- MODAL CALENDAR -->
	<div class="modal" tabindex="-1" aria-labelledby="detailsModalLabel" role="dialog" aria-hidden="true" id="modalCalendar">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="detailsModalLabel">Dettagli</h5>
					
					<div class="d-flex align-items-center gap-2 ms-3">
						<a href="#" id="btn-edit-newsletter" class="btn btn-outline-primary btn-sm">
							<i class="bi bi-pencil"></i> Modifica
						</a>
						<button id="btn-delete-newsletter" class="btn btn-outline-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteModal" data-action="" data-identificativo="">
							<i class="bi bi-trash"></i> Elimina
						</button>					
					</div>

					<button type="button" class="btn-close ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<p><strong>Commessa:</strong><br><span id="evento-commessa"></span></p>
					<p><strong>Titolo:</strong><br><span id="evento-titolo"></span></p>
					<p><strong>Responsabile:</strong><br><span id="evento-responsabile"></span></p>
					<p><strong>Dem:</strong><br><span id="evento-dem"></span></p>
					{{-- <p><strong>Data Richiesta:</strong> <span id="modal-data-richiesta"></span></p>
					<p><strong>Area:</strong> <span id="modal-area"></span></p>
					<p><strong>Note:</strong> <span id="modal-note"></span></p>
					<p><strong>Inviato da:</strong> <span id="modal-inviato-da"></span></p> --}}
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Chiudi</button>
				</div>
			</div>
		</div>
	</div>

	<!-- MODAL DELETE -->
	<div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">Conferma eliminazione</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
				</div>

				<div class="modal-body">
					Sei sicuro di voler eliminare la newsletter
					<strong id="eliminaTitolo"></strong>?
					<br>
					<span class="text-danger">Questa azione è irreversibile.</span>
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annulla</button>

					<form method="POST">
					@csrf
					@method('DELETE')
						<button type="submit" class="btn btn-danger">
							Elimina definitivamente
						</button>
					</form>
				</div>
			</div>
		</div>
	</div>

</div>
@endsection

@push('admin.scripts')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
<script>

	const deleteModal=document.getElementById('deleteModal');

	deleteModal.addEventListener('show.bs.modal',function(e){
		const button=e.relatedTarget;
		const action=button.getAttribute('data-action');
		const titolo=button.getAttribute('data-identificativo');
		const form=deleteModal.querySelector('form');
		form.action=action;
		deleteModal.querySelector('#eliminaTitolo').textContent=titolo;
	});

	const modalCalendar=new bootstrap.Modal(document.getElementById('modalCalendar'));

	const showEventCalendar=(info)=>{		
		const id=info.event.extendedProps.id_newsletter;
		document.getElementById('evento-titolo').innerText=info.event.extendedProps.titolo;
		document.getElementById('evento-commessa').innerText=info.event.extendedProps.commessa;
		document.getElementById('evento-responsabile').innerText=info.event.extendedProps.responsabile;
		let dem=info.event.extendedProps.dem;
		dem=JSON.parse(dem);
		dem=dem.join("\n");
		document.getElementById('evento-dem').innerText=dem;

		document.getElementById('btn-edit-newsletter').href=`/administrator/newsletter/${id}/edit`;

		const deleteBtn=document.getElementById('btn-delete-newsletter');
		deleteBtn.dataset.action=`/administrator/newsletter/${id}`;
		deleteBtn.dataset.identificativo=info.event.extendedProps.commessa+" "+info.event.extendedProps.titolo;

		modalCalendar.show();
	};

	const calendarEl=document.getElementById('calendar');	

	@php
	$newsletter_eventi=[];
	foreach($newsletter_totali as $newsletter)
	{
		//title e start in inglese per funzionamento libreria
		$newsletter_eventi[]=[
			'id_newsletter'=>$newsletter->id,
			'title'=>$newsletter->commessa,
			'titolo'=>$newsletter->titolo,
			'tipologia'=>$newsletter->tipologia_evento,
			'commessa'=>$newsletter->commessa,
			'responsabile'=>$newsletter->risorsa_responsabile,
			'dem'=>$newsletter->dem,
			'start'=>$newsletter->data_invio
		];
	}
	@endphp
	
	const newsletterEventi={!! json_encode($newsletter_eventi) !!};
	const tipologieEvento={!!json_encode($tipologie_evento)!!};
	
	const calendar=new FullCalendar.Calendar(calendarEl,{
		events:newsletterEventi,
		eventDidMount:function(info){
			const aliasTipologia=info.event.extendedProps.tipologia;
			const tipologia=tipologieEvento.find(
				item=>item.alias===aliasTipologia
			);
			info.el.style.backgroundColor=tipologia?tipologia.colore:'#000000';			
		},
		dayCellDidMount:function(info){
			//Colore sfondo giorni
			info.el.style.backgroundColor='#fff';

			//Colore sfondo oggi
			const today=new Date();
			if(
				info.date.getFullYear()===today.getFullYear()&&
				info.date.getMonth()===today.getMonth()&&
				info.date.getDate()===today.getDate()
			)
			{
				info.el.style.backgroundColor='#ffe0b2';
			}
		},
		height:'auto',
		dayMaxEventRows:true,
		views:{
			timeGrid:{
				//works on timegridweek/timegridday
				dayMaxEventRows:6
			}
		},
		initialView:'dayGridMonth',
		headerToolbar:{
			left:'dayGridYear,dayGridMonth,timeGridWeek',
			center:'title',
			right:'prev,next today'
		},		
		buttonText:{
			year:'Anno',
			today:'Oggi',
			month:'Mese',
			week:'Settimana'
		},
		allDayText:'Tutto il giorno',		
		eventClick:function(info){
			// info.el.style.backgroundColor='blue';
			showEventCalendar(info);
		}

	});
	calendar.setOption('locale','it-IT');
	calendar.setOption('noEventsText','Nessun evento da visualizzare');
	calendar.render();
</script>
@endpush