@inject('carbon', 'Carbon\Carbon')
@section('title', 'Aanwezigheden signeren')
<div>


    <div class="clearfix"></div>

    <div>
    	@include('errors.messages')	
	</div>
	
	<table>
        <thead>
        <tr>
			<th>Datum</th>
            <th>Opleiding</th>
			<th># lesuren</th>
			<th># deelnemers</th>
			<th>Lector</th>
        </tr>
        </thead>
        <tbody>
			@foreach ($opleidingen as $opleiding)
			@foreach ($opleidingsdeelInfos as $opleidingsdeelInfo)
            <tr>
                <td>{{ $carbon::parse($opleidingsdeelInfo->datum)->format('d-m-Y H:i:s') }}</td>
				<td>
					@if($opleiding->opleidingsid != 0) 
					{{ opleidingstypeByID($opleiding->opleidingsid) }}
					@else
					{{ $opleiding->altname }}
					@endif
				</td>
				<td>{{ $opleidingsdeelInfo->lesuren }} van {{ $opleiding->lesuren }}</td>
				<td>{{ studentenByOpleidingsdeel($opleidingsdeelInfo->id) }}</td>
				<td>{{ userByID($opleiding->lector) }}</td>
                
            </tr>
			 @endforeach
			@endforeach
        </tbody>
    </table>
	
	<div class="grid grid-cols-1 md:grid-cols-2 lg:gap-6">
		<div class="col-span-1">
			<div class="card">
				<h3>Bestaande deelnemer toevoegen</h3>
				
				<div class="relative">
						<input
							type="text"
							class="block w-full dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-light-blue-500 focus:border-light-blue-500 sm:text-sm"
							placeholder="Zoek deelnemers..."
							wire:model="query"
							wire:keydown.escape="resetData"
							wire:keydown.tab="resetData"

						/>

						<div wire:loading class="absolute z-50 w-full bg-white dark:bg-gray-500 dark:text-gray-200 border border-gray-300 dark:border-gray-400 rounded-md text-gray-700 text-sm divide-y divide-gray-200">
							<div class="flex items-center px-1 py-1 hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-150">Aan het zoeken...</div>
						</div>

						@if(!empty($query))
							<div class="fixed top-0 right-0 bottom-0 left-0" wire:click="reset"></div>

							<ul class="absolute z-50 w-full bg-white dark:bg-gray-500 dark:text-gray-200 border border-gray-300 dark:border-gray-400 rounded-md text-gray-700 text-sm divide-y divide-gray-200">
								@if(!empty($contacts))
									@foreach($contacts as $i => $contact)
										<li class="list-none"><a href="{{ route('admin.opleidingen.addstudent', ['student' => $contact['id'], 'opleiding' => $opleiding, 'opleidingsdeel' => $opleidingsdeel, 'routetosign' => 'yes']) }}" class="flex items-center px-1 py-1 hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-150">{{ $contact['first_name'] }} {{ $contact['last_name'] }}</a></li>
									@endforeach
								@else
									<div class="list-item">Geen resultaten!</div>
								@endif
							</ul>
						@endif
					</div>
				
			</div>
		</div>
		
		<div class="col-span-1">
			<div class="card">
				@php($routetosign="yes")
				<h3>Nieuwe deelnemer toevoegen</h3>		
				<livewire:admin.crm.create-student :opleiding="$opleidingsdeelInfo->opleidingsid" :opleidingsdeel="$opleidingsdeelInfo->id" :routetosign="$routetosign" :company_id="$opleiding->company_id"/>		
			</div>
		</div>
	</div>	

	<div class="grid6">
        <div class="lg:col-span-3">
			<div class="card">
				<h2>Aanwezigheden</h2>

				
				<table>
					<thead>
					<tr>
						<th>Achternaam</th>
						<th>Voornaam</th>
						<th>Aangemeld</th>
						<th>Handtekening</th>
						<th>Actie</th>
					</tr>
					</thead>
					<tbody>
						@foreach($studentenopleiding as $studentopleiding)
						<tr>
							<td>{{ $studentopleiding->student->last_name }}</td>
							<td>{{ $studentopleiding->student->first_name }}</td>
							<td>
								@if($studentopleiding->aanwezig == 0) 
								<a href="{{ route('admin.opleidingen.signature', ['opleiding' => $opleiding->id, 'studentopleiding' => $studentopleiding->id])  }}" data-original-title="Handtekenen"><span style="color: darkred;"><i class="fa-regular fa-square"></i></span></a>
								@elseif($studentopleiding->aanwezig == 1) 
								<span style="color: darkgreen;"><i class="fa-solid fa-square-check"></i></span>
								@endif
							</td>
							<td>
								@if($studentopleiding->handtekening != NULL) 
								<img src="{{ $studentopleiding->handtekening }}" alt="Handtekening" style="height:75px" />
								@endif	
							</td>
							<td>
								<a href="{{ route('admin.opleidingen.signature', ['opleiding' => $opleiding->id, 'studentopleiding' => $studentopleiding->id])  }}" title="" class="btn btn-info" data-original-title="Handtekenen">Handtekenen &nbsp;&nbsp;<i class="fa-solid fa-file-signature"></i></a>
							</td>

						</tr>
						 @endforeach
					</tbody>
				</table>

			</div>
		</div>
	</div>



</div>