@php
    $projects = \Auth::user()->projects()->orderBy('name', 'asc')->get();

    if (isset($module)) {
        $moduleIds = $module->projects->modelKeys();
        $projects = $projects->whereIn('id', $moduleIds);
    }

    // Sin proyecto en sesión el <select> muestra la primera opción, así que el
    // input oculto debe reflejar esa misma selección y no quedar vacío.
    $selectedProject = $projects->firstWhere('id', session('project_id')) ?? $projects->first();
@endphp

<div class="preview">
    <small class="text-gray-700">PROYECTOS</small>
    <select data-search="true" name="project-user" id="project-user" class="input border w-full">
        @forelse ($projects as $element)
        <option
            {{ optional($selectedProject)->id === $element->id ? 'selected' : null  }}
            value="{{ route('update.project', $element->id) }}">
            {{ $element->name }}
        </option>
        @empty
            <option value="">
                Sin proyectos
            </option>
        @endforelse
    </select>
</div>

<input type="hidden" id="project-id" name="project-id">

<script>
    const selectProject = document.querySelector('#project-user')
    const inputProject = document.querySelector('#project-id')
    const selectedProjectId = @json(optional($selectedProject)->id)

    if (inputProject) {
        inputProject.value = selectedProjectId ?? ''
    }

    if (selectProject) {
        selectProject.addEventListener('change', function (event) {
            const targetUrl = event.target.value

            if (targetUrl) {
                window.location.replace(targetUrl)
            }
        })
    }
</script>