<div x-data="{ showConfirmDeleteModal: $wire.entangle('showBulkDeleteConfirm') }">
    <x-daylight::tables.table>
        <x-slot:heading>
            <div class="flex flex-wrap items-end gap-3 mb-4">
                {{-- Search --}}
                <div class="flex-grow max-w-sm">
                    <input
                        type="text"
                        wire:model.live.debounce.200ms="searchQuery"
                        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-sky-500 focus:ring-sky-500 sm:text-sm"
                        placeholder="{{ __('daylight::general.search') }}"
                    >
                </div>

                {{-- Date from --}}
                <div>
                    <label for="dateFrom" class="sr-only">{{ __('daylight::forms.date_from') }}</label>
                    <input
                        type="date"
                        id="dateFrom"
                        wire:model.live="dateFrom"
                        class="block rounded-md border-gray-300 shadow-sm focus:border-sky-500 focus:ring-sky-500 sm:text-sm"
                        title="{{ __('daylight::forms.date_from') }}"
                    >
                </div>

                {{-- Date to --}}
                <div>
                    <label for="dateTo" class="sr-only">{{ __('daylight::forms.date_to') }}</label>
                    <input
                        type="date"
                        id="dateTo"
                        wire:model.live="dateTo"
                        class="block rounded-md border-gray-300 shadow-sm focus:border-sky-500 focus:ring-sky-500 sm:text-sm"
                        title="{{ __('daylight::forms.date_to') }}"
                    >
                </div>

                @if($dateFrom || $dateTo)
                    <button
                        type="button"
                        wire:click="clearDateFilters"
                        class="text-sm text-gray-500 hover:text-gray-700 pb-2"
                    >
                        {{ __('daylight::forms.clear_filters') }}
                    </button>
                @endif

                {{-- Bulk actions (right-aligned) --}}
                <div class="flex-grow"></div>
                @if(count($selectedIds) > 0)
                    <div>
                        <select
                            class="block rounded-md border-gray-300 shadow-sm focus:border-sky-500 focus:ring-sky-500 sm:text-sm"
                            wire:model.live="bulkAction"
                        >
                            <option value="">{{ __('daylight::general.bulk_actions') }} ({{ count($selectedIds) }})</option>
                            @foreach($this->availableBulkActions as $action => $bulkAction)
                                <option value="{{ $action }}">{{ $bulkAction['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif
            </div>
        </x-slot:heading>

        <x-slot:columns>
            <th class="p-3 text-left text-sm font-semibold text-gray-900">
                #
            </th>

            <th class="p-3 text-left text-sm font-semibold text-gray-900">
                {{ __('daylight::forms.summary') }}
            </th>

            <th class="p-3 text-left text-sm font-semibold text-gray-900">
                {{ __('daylight::forms.ip_address') }}
            </th>

            <th class="p-3 text-left text-sm font-semibold text-gray-900">
                {{ __('daylight::forms.submitted_at') }}
            </th>
        </x-slot:columns>

        @foreach ($this->rows as $row)
            <x-daylight::tables.row wire:key="{{ $row->id }}" :$row>
                <x-daylight::tables.column>
                    {{ $row->id }}
                </x-daylight::tables.column>

                <x-daylight::tables.column>
                    @php
                        $summary = collect($row->data)->take(3)->map(function ($value, $key) {
                            $displayValue = is_array($value) ? implode(', ', $value) : $value;
                            return \Illuminate\Support\Str::limit((string) $displayValue, 40);
                        })->implode(' | ');
                    @endphp
                    <span class="text-sm text-gray-600">{{ $summary }}</span>
                </x-daylight::tables.column>

                <x-daylight::tables.column>
                    <span class="text-sm text-gray-500">{{ $row->ip_address }}</span>
                </x-daylight::tables.column>

                <x-daylight::tables.column>
                    {{ $row->created_at->isoFormat('LLL') }}
                </x-daylight::tables.column>

                <x-slot:actions>
                    @can('read:pages')
                        <a href="{{ route('daylight.content.forms.submissions.show', [$formId, $row]) }}"
                           class="py-0.5 pl-2 pr-1 inline-flex font-medium items-center gap-1 text-sm">
                            {{ __('daylight::forms.view_submission') }}
                        </a>
                    @endcan
                </x-slot:actions>
            </x-daylight::tables.row>
        @endforeach
    </x-daylight::tables.table>

    {{-- Bulk delete confirm modal --}}
    <x-daylight::modal.confirm-delete-modal>
        <x-slot name="content">
            <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">{{ __('daylight::forms.bulk_delete_title') }}</h3>
            <div class="mt-2">
                <p class="text-sm text-gray-500">
                    {{ __('daylight::forms.bulk_delete_confirm', ['count' => count($selectedIds)]) }}
                </p>
            </div>
        </x-slot>

        <x-slot name="footer">
            <button
                type="button"
                wire:click="confirmBulkDelete"
                class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-2 sm:w-auto"
            >
                {{ __('daylight::general.delete') }}
            </button>

            <button
                type="button"
                wire:click="cancelBulkDelete"
                class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100 sm:mt-0 sm:w-auto"
            >
                {{ __('daylight::general.cancel') }}
            </button>
        </x-slot>
    </x-daylight::modal.confirm-delete-modal>
</div>
