@inject('carbon', 'Carbon\Carbon')
@section('title', 'Opleidingen')
<div>
    <div class="flex justify-between mb-4">
        <h1 class="text-xl font-semibold">Opleidingen</h1>

        <div>
            <livewire:admin.opleidingen.create-opleiding />
        </div>
    </div>

    <div>
        @include('errors.messages')
    </div>

    <div class="grid sm:grid-cols-1 md:grid-cols-4 gap-4">
        <div class="col-span-2">
            <x-form.input 
                type="search" 
                id="opleidingen" 
                name="query" 
                wire:model.live="query" 
                label="none" 
                placeholder="Zoek opleidingen">
                {{ old('query', request('query')) }}
            </x-form.input>
        </div>
    </div>
	<div class="overflow-x-auto">
    <table>
        <thead>
            <tr>
                <th>
                    <a href="#" wire:click.prevent="sortBy('datum')">Datum</a>
                </th>
                <th>Opleiding</th>
                <th>Bedrijf</th>
                <th># lesuren</th>
                <th># studenten</th>
				<th>Offerte</th>
                <th>Actie</th>
            </tr>
        </thead>
        <tbody>
            @forelse($opleidingen as $opleiding)
                <tr>
                    <td>
                        {{ $carbon::parse($opleiding->datum)->format('d-m-Y') }}
                        @if($opleiding->einddatum)
                            - {{ $carbon::parse($opleiding->einddatum)->format('d-m-Y') }}
                        @endif
                    </td>
                    <td>
                        {{ opleidingsnaamByIDwHerkenning($opleiding->id) }}
                    </td>
                    <td>{{ companyByID($opleiding->company_id) }}</td>
                    <td>{{ $opleiding->lesuren }}</td>
                    <td>{{ studentenByOpleiding($opleiding->id) }}</td>
					<td>
						@if($opleiding->offerte == 0)
                            <span style="color: darkred;"><i class="fa-regular fa-square"></i></span>
                        @elseif($opleiding->offerte == 1)
                            <span style="color: darkgreen;"><i class="fa-solid fa-square-check"></i></span>
                        @endif
					</td>
                    <td>
                        <div class="flex space-x-2">
                            <a href="{{ route('admin.opleidingen.view', ['opleiding' => $opleiding->id]) }}">Bekijk</a>
                            @can('view_opleidingsinstellingen')
                                <a href="{{ route('admin.opleidingen.editopleiding', ['opleiding' => $opleiding->id]) }}">Bewerk</a>
                                @if(studentenByOpleiding($opleiding->id) == 0)
                                    <x-modal>
                                        <x-slot name="trigger">
                                            <a href="#" @click="on = true">Verwijder</a>
                                        </x-slot>

                                        <x-slot name="title">Verwijderen bevestigen</x-slot>

                                        <x-slot name="content">
                                            <div class="text-center">
                                                Ben je zeker dat je opleiding <b>
                                                @if($opleiding->opleidingsid != 0) 
                                                    {{ opleidingstypeByID($opleiding->opleidingsid) }}
                                                @else
                                                    {{ $opleiding->altname }}
                                                @endif 
                                                op {{ $opleiding->datum }}</b> 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="deleteOpleiding('{{ $opleiding->id }}')">Verwijder opleiding</x-button>
                                        </x-slot>
                                    </x-modal>
                                @endif
                            @endcan
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="7" class="p-4 text-center text-gray-500">Geen opleidingen gevonden.</td>
                </tr>
            @endforelse
        </tbody>
    </table>
	</div>
    {{ $opleidingen->links() }}

</div>