@inject('carbon', 'Carbon\Carbon')
@section('title', 'Bekijk opleiding')

<div>
    <div>
        <div class="mb-5">
            <a href="{{ route('admin.opleidingen') }}">Opleidingen</a>
            <span class="dark:text-gray-200">- <a href="{{ route('admin.opleidingen.view', ['opleiding' => $opleidingsdeelInfo->opleidingsid]) }}"> {{ opleidingsnaamByIDwHerkenning($opleidingsdeelInfo->opleidingsid) }} </a></span>
        </div>
    </div>

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

    <table>
        <thead>
            <tr>
                <th>Datum</th>
                <th># lesuren</th>
                <th># studenten</th>
                <th>Docent</th>
                <th></th>
            </tr>
			
        </thead>
        <tbody>
            <tr>
                <td>{{ $carbon::parse($opleidingsdeelInfo->datum)->format('d-m-Y H:i') }}</td>
                <td>{{ $opleidingsdeelInfo->lesuren }} van {{ $opleidingen->lesuren }}</td>
                <td>{{ studentenByOpleidingsdeel($opleidingsdeelInfo->id) }}</td>
                <td>
				@if(!empty($opleidingsdeelInfo->lector))
					<a href="{{ route('admin.users.show', ['user' => $opleidingsdeelInfo->lector]) }}">{{ userByID($opleidingsdeelInfo->lector) }}</a>
				@else
					Geen lesgever gekoppeld
				@endif	
				</td>
                <td>
                    @can('view_opleidingsinstellingen')
                        @if($carbon::parse($opleidingsdeelInfo->datum)->isFuture())
                            <a href="{{ route('admin.opleidingen.editdeel', ['opleiding' => $opleidingsdeelInfo->opleidingsid, 'opleidingsdeel' => $opleidingsdeelInfo->id]) }}" @click="on = true" style="margin-right: 15px;">
                                <i class="fa-solid fa-edit"></i>
                            </a>
                        @endif

                        @if(studentenByOpleidingsdeel($opleidingsdeelInfo->id) == 0)
                            <x-modal>
                                <x-slot name="trigger">
                                    <a href="#" @click="on = true"><i class="fa-solid fa-trash-can"></i></a>
                                </x-slot>

                                <x-slot name="modalTitle">Verwijderen bevestigen</x-slot>
                                <x-slot name="content">
                                    <div class="text-center">
                                        Ben je zeker dat je opleidingsdeel <b>{{ $opleidingsdeelInfo->datum }}</b> van de opleiding <b>{{ opleidingsnaamByIDwHerkenning($opleidingsdeelInfo->opleidingsid) }}</b>
                                        @if(!empty($opleidingsdeelInfo->opleiding->company_id))
                                            voor het bedrijf <b>{{ companyByID($opleidingsdeelInfo->opleiding->company_id) }}</b>
                                        @endif
                                        wil verwijderen?
                                    </div>
                                </x-slot>

                                <x-slot name="footer">
                                    <x-button variant="gray" @click="on = false">Annuleer</x-button>
                                    <x-button variant="red" wire:click="deleteOpleidingsdeel('{{ $opleidingsdeelInfo->opleidingsid }}', '{{ $opleidingsdeelInfo->id }}')"><i class="fa-solid fa-trash-can"></i>&nbsp; Verwijder</x-button>
                                </x-slot>
                            </x-modal>
                        @endif
                    @endcan
                </td>
            </tr>
			<tr style="vertical-align: top;">
				<td>
					<strong>Locatie:</strong><br>
					{!! $this->getLocation() !!}
					
					
				</td>	
				<td colspan="2">
					<strong>Opmerkingen:</strong><br>
					{!! $this->getOpmerking() !!}
					
					
				</td>
				<td>
					<livewire:admin.opleidingen.edit-opleidingsoptie 
						:opleiding="$opleiding" 
						:opleidingsdeel="$opleidingsdeel" 
						:optie="'locatie'" 
						:key="'edit-locatie'" 
					/>
					
					<livewire:admin.opleidingen.edit-opleidingsoptie 
						:opleiding="$opleiding" 
						:opleidingsdeel="$opleidingsdeel" 
						:optie="'opmerking'" 
						:key="'edit-opmerking'" 
					/>
				</td>
				<td>
					<a href="{{ route('admin.opleidingen.qr', ['opleiding' => $opleidingsdeelInfo->opleidingsid, 'opleidingsdeel' => $opleidingsdeelInfo->id]) }}" title="" class="btn btn-info" target="_blank">
						QR Beamen &nbsp;&nbsp;<i class="fa-solid fa-arrow-up-right-from-square"></i>
					</a>

					<livewire:admin.opleidingen.download-qr 
						:opleiding="$opleiding" 
						:opleidingsdeel="$opleidingsdeel" 
						/>
				</td>
			</tr>
			
        </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 student toevoegen</h3>

                <livewire:admin.opleidingen.connect-student-to-opleiding 
					:opleiding="$opleiding" 
					:opleidingsdeel="$opleidingsdeel" 
					routetosign="no"
				/>

            </div>
        </div>

        <div class="col-span-1">
            <div class="card">
                <h3>Nieuwe student toevoegen</h3>
                <livewire:admin.crm.create-student :opleiding="$opleidingsdeelInfo->opleidingsid" :opleidingsdeel="$opleidingsdeelInfo->id" :company_id="$opleidingen->company_id" wire:key="create-student-{{ $opleidingsdeelInfo->id }}" />
            </div>
        </div>
    </div>
	
	<div>
    @include('errors.messages')
	</div>
	
	<div 
    x-data="{ message: '', show: false }" 
    x-on:notify.window="message = $event.detail; show = true; setTimeout(() => show = false, 5000)"
    x-show="show"
    x-transition
	>
		<x-alert variant="success" x-text="message" class="block"></x-alert>
	</div>

    <div>
        <div class="card">
            <h3>Gekoppelde studenten</h3>

            <a href="{{ route('admin.opleidingen.sign', ['opleiding' => $opleidingsdeelInfo->opleidingsid, 'opleidingsdeel' => $opleidingsdeelInfo->id]) }}" title="" class="btn btn-info" target="_blank" style="float:right; margin-bottom:20px;">
                Handtekenen &nbsp;&nbsp;<i class="fa-solid fa-file-signature"></i>
            </a>

            @can('send_mails')
                <a href="{{ route('admin.opleidingen.download', ['id' => $opleidingsdeelInfo->opleidingsid, 'deelid' => $opleidingsdeelInfo->id]) }}" target="_blank"
						  title="" class="btn btn-info" style="float:right; margin-bottom:20px;@if(studentenByOpleidingsdeel($opleidingsdeelInfo->id) == 0) pointer-events: none; cursor: not-allowed; @endif">
                    Download Aanwezigheidslijst &nbsp;&nbsp;<i class="fas fa-download"></i>
                </a>

                @if($opleidingen->company_id != 0)
                    <x-modal>
                        <x-slot name="trigger">
                            <a href="#"  class="btn btn-info" @click="on = true" style="float:right; margin-bottom:20px; @if(studentenByOpleidingsdeel($opleidingsdeelInfo->id) == 0) pointer-events: none; cursor: not-allowed; @endif" >
                                Aanwezigheidslijst mailen &nbsp;&nbsp;<i class="fa-solid fa-envelope" title="Aanwezigheidslijst mailen"></i>
                            </a>
                        </x-slot>

                        <x-slot name="modalTitle">Aanwezigheidslijst mailen</x-slot>

                        <x-slot name="content">
                            <div class="text-center">
                                Ben je zeker dat je de aanwezigheidslijst van {{ $opleidingsdeelInfo->datum }} wil mailen naar <strong>{{ $companyInfo->first_name }} {{ $companyInfo->last_name }}</strong> de contactpersoon van <strong>{{ companyByID($opleidingen->company_id) }}</strong>?
                            </div>
                        </x-slot>

                        <x-slot name="footer">
							<x-button variant="gray" @click="on = false">Annuleer</x-button>
							<x-button
								wire:click="sendAanwezigheidslijst('{{ $opleidingen->id }}', '{{ $opleidingsdeelInfo->id }}')"
								wire:loading.attr="disabled"
								wire:target="sendAanwezigheidslijst"
								variant="primary"
							>
								<!-- Tekst als niet aan het laden -->
								<span wire:loading.remove wire:target="sendAanwezigheidslijst">
									Verzend e-mail
								</span>
								<!-- Tekst + icon tijdens laden -->
								<span wire:loading wire:target="sendAanwezigheidslijst" class="flex items-center space-x-2">
									<i class="fa-solid fa-gear fa-spin" title="Verwerking bezig"></i>
									<span>Lijst wordt verzonden</span>
								</span>
							</x-button>
						</x-slot>
                    </x-modal>
                @endif
            @endcan

            <table>
                <thead>
                    <tr>
                        <th>Voornaam</th>
                        <th>Achternaam</th>
                        <th>Aanwezig</th>
                        <th width="100">Handtekening</th>
                        <th width="250">Actie</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($studentopleiding as $studentopleiding)
                        <tr wire:key="studentopleiding-{{ $studentopleiding->id }}">
                            <td>{{ $studentopleiding->first_name }}</td>
                            <td>{{ $studentopleiding->last_name }}</td>
                            <td>
                                @if($studentopleiding->aanwezig == 0)
                                    <span style="color: darkred;"><i class="fa-regular fa-square"></i></span>
                                @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>
                                @if($studentopleiding->handtekening == NULL)
                                <x-dropdown label="Verwijderen">
									<x-dropdown.link wire:click="deleteStudentfromEducationpart('{{ $studentopleiding->id }}')" style="cursor:pointer;color:#bb0707;font-weight:bold;">Verwijderen bevestigen</x-dropdown.link>
								</x-dropdown>    
								
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>