KTV/resources/views/livewire/admin/song-import-data.blade.php

<x-wireui:modal-card title="{{ __('songs.ImportData') }}" blur wire:model.defer="showModal">
    
    {{-- resources/views/components/import-format-info.blade.php --}}

    <div class="mb-4 p-4 bg-gray-100 border border-gray-300 rounded text-sm text-gray-700">
        <p class="font-semibold mb-2">匯入格式說明</p>
        <p class="mb-2">請依下列表格格式準備 Excel 或 CSV 檔案：</p>

        <div class="overflow-x-auto mb-2">
            <table class="min-w-full text-sm text-left border border-collapse border-gray-300">
                <thead class="bg-gray-200">
                    <tr>
                        <th class="border border-gray-300 px-3 py-1">欄位名稱</th>
                        <th class="border border-gray-300 px-3 py-1">說明</th>
                        <th class="border border-gray-300 px-3 py-1">範例</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="border border-gray-300 px-3 py-1">編號</td>
                        <td class="border border-gray-300 px-3 py-1">歌曲唯一編號</td>
                        <td class="border border-gray-300 px-3 py-1">993794</td>
                    </tr>
                    <tr>
                        <td class="border border-gray-300 px-3 py-1">歌名</td>
                        <td class="border border-gray-300 px-3 py-1">歌曲名稱</td>
                        <td class="border border-gray-300 px-3 py-1">小幸運</td>
                    </tr>
                    <tr>
                        <td class="border border-gray-300 px-3 py-1">檔名</td>
                        <td class="border border-gray-300 px-3 py-1">歌曲檔名</td>
                        <td class="border border-gray-300 px-3 py-1">993794.mpg</td>
                    </tr>
                    <tr>
                        <td class="border border-gray-300 px-3 py-1">日期</td>
                        <td class="border border-gray-300 px-3 py-1">新增日期（格式：YYYY-MM-DD）</td>
                        <td class="border border-gray-300 px-3 py-1">2015-08-14</td>
                    </tr>
                    <tr>
                        <td class="border border-gray-300 px-3 py-1">歌星A</td>
                        <td class="border border-gray-300 px-3 py-1">可填入歌手名稱</td>
                        <td class="border border-gray-300 px-3 py-1">田馥甄</td>
                    </tr>
                    <tr>
                        <td class="border border-gray-300 px-3 py-1">歌星B</td>
                        <td class="border border-gray-300 px-3 py-1">可填入歌手名稱</td>
                        <td class="border border-gray-300 px-3 py-1"></td>
                    </tr>
                    <tr>
                        <td class="border border-gray-300 px-3 py-1">語別</td>
                        <td class="border border-gray-300 px-3 py-1">可用語別：國語、台語、英語、日語、粵語、韓語、越語、客語、其他 等</td>
                        <td class="border border-gray-300 px-3 py-1">國語</td>
                    </tr>
                    <tr>
                        <td class="border border-gray-300 px-3 py-1">分類</td>
                        <td class="border border-gray-300 px-3 py-1">可填入多個分類代碼（用 , 分隔）A1(情歌),B1(選秀),C1(串燒),D1(90年),E1(懷念),F1(大陸)</td>
                        <td class="border border-gray-300 px-3 py-1">A1,B1,C1,D1,E1,F1</td>
                    </tr>
                    <tr>
                        <td class="border border-gray-300 px-3 py-1">分貝增減</td>
                        <td class="border border-gray-300 px-3 py-1">歌曲播放時的音量調整（正數為增加，負數為減少）</td>
                        <td class="border border-gray-300 px-3 py-1">-2</td>
                    </tr>
                    <tr>
                        <td class="border border-gray-300 px-3 py-1">人聲</td>
                        <td class="border border-gray-300 px-3 py-1">是否有人聲（1：有人聲，0：純音樂）</td>
                        <td class="border border-gray-300 px-3 py-1">1</td>
                    </tr>
                    <tr>
                        <td class="border border-gray-300 px-3 py-1">情境</td>
                        <td class="border border-gray-300 px-3 py-1">可標註使用情境，例如：婚禮、派對、練唱</td>
                        <td class="border border-gray-300 px-3 py-1"></td>
                    </tr>
                    <tr>
                        <td class="border border-gray-300 px-3 py-1">版權01</td>
                        <td class="border border-gray-300 px-3 py-1">版權擁有者或公司名稱</td>
                        <td class="border border-gray-300 px-3 py-1">華研國際</td>
                    </tr>
                    <tr>
                        <td class="border border-gray-300 px-3 py-1">版權02</td>
                        <td class="border border-gray-300 px-3 py-1">次要版權擁有者或管理單位</td>
                        <td class="border border-gray-300 px-3 py-1">滾石唱片</td>
                    </tr>
                    <tr>
                        <td class="border border-gray-300 px-3 py-1">備註01</td>
                        <td class="border border-gray-300 px-3 py-1">其他補充資訊，例如：原唱者、翻唱說明等</td>
                        <td class="border border-gray-300 px-3 py-1">原唱：田馥甄</td>
                    </tr>
                    <tr>
                        <td class="border border-gray-300 px-3 py-1">備註02</td>
                        <td class="border border-gray-300 px-3 py-1">其他補充資訊</td>
                        <td class="border border-gray-300 px-3 py-1">翻唱版</td>
                    </tr>
                    <tr>
                        <td class="border border-gray-300 px-3 py-1">備註03</td>
                        <td class="border border-gray-300 px-3 py-1">其他補充資訊</td>
                        <td class="border border-gray-300 px-3 py-1">高音質</td>
                    </tr>
                    <tr>
                        <td class="border border-gray-300 px-3 py-1">備註04</td>
                        <td class="border border-gray-300 px-3 py-1">其他補充資訊</td>
                        <td class="border border-gray-300 px-3 py-1">2023重錄版</td>
                    </tr>
                    <tr>
                        <td class="border border-gray-300 px-3 py-1">狀態</td>
                        <td class="border border-gray-300 px-3 py-1">是否啟用（1：啟用，0：停用）</td>
                        <td class="border border-gray-300 px-3 py-1">1</td>
                    </tr>
                    <tr>
                        <td class="border border-gray-300 px-3 py-1">點播次數</td>
                        <td class="border border-gray-300 px-3 py-1">記錄此歌曲被點播的次數</td>
                        <td class="border border-gray-300 px-3 py-1">128</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <p class="text-gray-600 text-xs">
            ※ 語別、情境、分類等欄位請依系統定義填寫，避免導致匯入失敗。
        </p>
        <p class="text-gray-600 text-xs">
            ※ 分類代碼請參照後台歌曲分類列表。
        </p>
    </div>
    {{-- 檔案上傳 --}}
    <input type="file" wire:model="file" accept=".csv, .xls, .xlsx" class="mb-4 w-full" />
    
    <x-slot name="footer">
        <div class="flex justify-between w-full">
            <x-wireui:button flat label="{{ __('songs.cancel') }}" wire:click="closeModal" />
            <x-wireui:button primary label="{{ __('songs.submit') }}" wire:click="import" />
        </div>
    </x-slot>
</x-wireui:modal-card>