@section('title', 'Bedrijven')

<div>
    <div class="flex justify-between mb-4">
        <h1 class="text-xl font-semibold">Bedrijven</h1>
        <div>
            <livewire:admin.crm.create-company />
        </div>
    </div>

    @include('errors.messages')

    <div class="grid sm:grid-cols-1 md:grid-cols-4 gap-4 mb-4">
        <div class="col-span-2">
            <x-form.input 
                type="search" 
                id="companies" 
                name="query" 
                wire:model.live="query" 
                label="none" 
                placeholder="Zoek bedrijven" 
            />
        </div>
    </div>
	<div class="overflow-x-auto">
    <table class="w-full table-auto border-collapse">
        <thead>
            <tr class="text-left border-b">
                <th class="p-2">
                        Bedrijfsnaam
                </th>
                <th class="p-2">Contactpersoon</th>
                <th class="p-2">E-mailadres</th>
                <th class="p-2">Actie</th>
            </tr>
        </thead>
        <tbody>
            @forelse($companies as $company)
                <tr class="border-b hover:bg-gray-50">
                    <td class="p-2">{{ $company->name }}</td>
                    <td class="p-2">{{ $company->first_name }} {{ $company->last_name }}</td>
                    <td class="p-2">{{ $company->email }}</td>
                    <td class="p-2">
                        <div class="flex gap-2 items-center">
                            <a href="{{ route('admin.crm.viewcompany', ['company' => $company->id]) }}" class="text-blue-600 hover:underline">Bekijk</a>
                            <a href="{{ route('admin.crm.editcompany', ['company' => $company->id]) }}" class="text-yellow-600 hover:underline">Bewerk</a>

                            <x-modal>
                                <x-slot name="trigger">
                                    <a href="#" @click.prevent="on = true" class="text-red-600 hover:underline">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 het bedrijf <strong>{{ $company->name }}</strong> wil verwijderen? Alle gekoppelde studenten verliezen hun koppeling met dit bedrijf.
                                    </div>
                                </x-slot>

                                <x-slot name="footer">
                                    <x-button variant="gray" @click="on = false">Annuleer</x-button>
                                    <x-button variant="red" wire:click="deleteCompany('{{ $company->id }}')">Verwijder bedrijf</x-button>
                                </x-slot>
                            </x-modal>
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="4" class="p-4 text-center text-gray-500">Geen bedrijven gevonden.</td>
                </tr>
            @endforelse
        </tbody>
    </table>
	</div>	

    <div class="mt-4">
        {{ $companies->links() }}
    </div>
</div>