@props(['paramvariable', 'options', 'recTypeFilter' => ''])

<div x-data="dropdownComponent('{{ $paramvariable }}', '{{ $recTypeFilter }}')">
    <button id="filterDropdownButton" @click="toggleDropdown" class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg md:w-auto focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700" type="button">
        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-4 h-4 mr-2 text-gray-400" viewbox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd" />
        </svg>
        Record Type
        <svg class="-mr-1 ml-1.5 w-5 h-5" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path clip-rule="evenodd" fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
        </svg>
    </button>
    <div x-show="dropdownOpen" @click.away="dropdownOpen = false" id="filterDropdown" class="z-10 w-48 p-3 bg-white rounded-lg shadow dark:bg-gray-700 absolute">
        <ul class="space-y-2 text-sm" aria-labelledby="dropdownDefault">
            <li class="flex items-center">
                <input id="all_{{ $paramvariable }}" type="checkbox" @change="selectAll($event)" :checked="isAllSelected" value="all"
                    class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500" />
                <label for="all_{{ $paramvariable }}" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">
                    All
                </label>
            </li>
            @foreach($options as $type)
            <li class="flex items-center">
                <input id="{{ $type->id }}_{{ $paramvariable }}" type="checkbox" @change="updateUrl('{{ $type->id }}', $event)" :checked="selectedOptions.includes('{{ $type->id }}')" value="{{ $type->id }}"
                    class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500" />
                <label for="{{ $type->id }}_{{ $paramvariable }}" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">
                    {{ $type->title }}
                </label>
            </li>
            @endforeach
        </ul>
    </div>
</div>

<script>
    function dropdownComponent(paramvariable, recTypeFilter) {
        return {
            dropdownOpen: false,
            selectedOptions: recTypeFilter ? recTypeFilter.split(',') : [],
            toggleDropdown() {
                this.dropdownOpen = !this.dropdownOpen;
            },
            selectAll(event) {
                if (event.target.checked) {
                    this.selectedOptions = [];
                    const url = new URL(window.location.href);
                    url.searchParams.set(paramvariable, '');
                    window.location = url;
                }
            },
            updateUrl(value, event) {
                const url = new URL(window.location.href);
                let params = url.searchParams.get(paramvariable) ? url.searchParams.get(paramvariable).split(',') : [];

                if (event.target.checked) {
                    params.push(value);
                } else {
                    params = params.filter(param => param != value);
                }

                url.searchParams.set(paramvariable, params.join(','));
                window.location = url;
            },
            get isAllSelected() {
                return this.selectedOptions.length === 0;
            }
        }
    }
</script>