<?php
use Flux\Flux;
use App\Models\Province;
use App\Models\Island;
use Livewire\Volt\Component;
use Livewire\WithPagination;
use App\Livewire\BaseVolt;
?>

<div class="space-y-6">
    <div class="flex justify-between items-center">
        <div>
            <flux:heading size="xl" level="1">Provinsi</flux:heading>
            <flux:subheading size="lg">Data List Provinsi</flux:subheading>
        </div>
        <flux:modal.trigger name="data">
            <flux:button href="{{ route('provinces.create') }}" variant="primary" icon="plus" class="cursor-pointer">{{ __('Add Province') }}</flux:button>
        </flux:modal.trigger>
    </div>

    <flux:card>
        <flux:table :paginate="$this->provinces">
            <flux:table.columns>
                <flux:table.column sortable :sorted="$sortBy === 'name'" :direction="$sortDirection"
                    wire:click="sort('name')">{{ __('Name') }}</flux:table.column>
                <flux:table.column sortable :sorted="$sortBy === 'island_id'" :direction="$sortDirection"
                    wire:click="sort('island_id')">{{ __('Island') }}</flux:table.column>
                <flux:table.column></flux:table.column>
            </flux:table.columns>

            <flux:table.rows>
                @forelse ($this->provinces as $province)
                    <flux:table.row :key="$province->id">
                        <flux:table.cell variant="strong">{{ $province->name }}</flux:table.cell>
                        <flux:table.cell variant="strong">{{ $province->island?->name }}</flux:table.cell>

                        <flux:table.cell>
                            <flux:dropdown>
                                <flux:button variant="ghost" size="sm" icon="ellipsis-horizontal" inset="top bottom">
                                </flux:button>

                                <flux:menu>
                                    <flux:menu.item href="{{ route('provinces.edit', $province->id) }}" icon="pencil-square">Edit</flux:menu.item>

                                    <flux:menu.item
                                        x-data
                                        x-on:click="confirmDelete(() => $wire.delete({{ $province->id }}))"
                                        icon="trash"
                                        variant="danger"
                                    >
                                        Delete
                                    </flux:menu.item>

                                </flux:menu>
                            </flux:dropdown>
                        </flux:table.cell>
                    </flux:table.row>
                @empty
                    <flux:table.row>
                        <flux:table.cell colspan="4" class="text-center">
                            No tags found.
                        </flux:table.cell>
                    </flux:table.row>
                @endforelse
            </flux:table.rows>
        </flux:table>
    </flux:card>

</div>