89 lines
3.5 KiB
PHP
89 lines
3.5 KiB
PHP
<div class="space-y-4 p-4">
|
|
<div class="space-y-2">
|
|
<input
|
|
type="text"
|
|
wire:model.live.debounce.250ms="artistSearch"
|
|
placeholder="搜尋歌手..."
|
|
class="border rounded-lg p-2 w-full focus:ring-2 focus:ring-pink-400 focus:outline-none"
|
|
/>
|
|
|
|
<!-- 搜尋結果清單 -->
|
|
@if(!empty($artistOptions))
|
|
<div class="border rounded max-h-40 overflow-y-auto bg-white shadow">
|
|
@foreach($artistOptions as $artist)
|
|
<div class="px-2 py-1 cursor-pointer hover:bg-pink-100 flex justify-between items-center"
|
|
wire:click="addArtist({{ $artist['id'] }}, '{{ $artist['name'] }}')">
|
|
{{ $artist['name'] }}
|
|
@if(in_array($artist['id'], $selectedArtists))
|
|
<span class="text-pink-500 font-bold">✔</span>
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
<!-- 已選歌手 -->
|
|
@if($selectedArtists)
|
|
<div class="flex gap-2 flex-wrap mt-2">
|
|
@foreach($selectedArtists as $artistId => $artistName)
|
|
<span class="bg-pink-200 text-pink-700 px-2 py-1 rounded-full flex items-center gap-1">
|
|
{{ $artistName }}
|
|
<button type="button" wire:click="removeArtist({{ $artistId }})" class="font-bold">×</button>
|
|
</span>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
{{-- 搜尋框 --}}
|
|
<div class="w-full mb-4">
|
|
<input
|
|
type="text"
|
|
wire:model.live.debounce.250ms="search"
|
|
placeholder="輸入歌名查詢..."
|
|
class="border rounded-lg p-3 w-full focus:ring-2 focus:ring-pink-400 focus:outline-none"
|
|
/>
|
|
</div>
|
|
|
|
{{-- 語言篩選 --}}
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
@foreach($languages as $key => $label)
|
|
<button
|
|
wire:click="selectLanguage('{{ $key }}')"
|
|
class="px-4 py-2 rounded-lg border transition
|
|
{{ $selectedLanguage === $key ? 'bg-pink-500 text-white border-pink-500' : 'bg-white text-gray-700 border-gray-300' }}">
|
|
{{ $label }}
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
|
|
{{-- 歌曲列表 Table --}}
|
|
<x-table bordered striped size="sm" class="w-full">
|
|
<x-slot name="header">
|
|
<tr>
|
|
<th class="px-4 py-2 w-16 text-center">編號</th>
|
|
<th class="px-4 py-2">歌曲</th>
|
|
<th class="px-4 py-2 w-24 text-center">操作</th>
|
|
</tr>
|
|
</x-slot>
|
|
|
|
@forelse($songs as $song)
|
|
<tr wire:click="orderSong({{ $song->id }})" class="hover:bg-gray-50 cursor-pointer">
|
|
<td class="px-4 py-2 text-center">{{ $song->song_id }}</td>
|
|
<td class="px-4 py-2">
|
|
<div class="flex flex-col">
|
|
<span class="text-lg font-semibold">{{ $song->song_name }}</span>
|
|
<span class="text-xs text-gray-500 self-end">{{ $song->str_artists_plus() }}</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-2 text-blue-500 text-center">點歌</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td class="px-4 py-4 text-center text-gray-400" colspan="3">
|
|
沒有符合的歌曲
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</x-table>
|
|
|
|
</div> |