sam-manage/resources/views/rd/cm-song/index.blade.php

@extends('layouts.app')

@section('title', '나레이션 관리')

@section('content')
<!-- 페이지 헤더 -->
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
        <i class="ri-music-2-line text-indigo-600"></i>
        나레이션 관리
    </h1>
    <div class="flex gap-2">
        <a href="{{ route('rd.index') }}" class="bg-white hover:bg-gray-100 text-gray-700 px-4 py-2 rounded-lg border transition">
            <i class="ri-arrow-left-line mr-1"></i> R&D
        </a>
        <a href="{{ route('rd.cm-song.create') }}" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition">
            <i class="ri-add-line mr-1"></i> 나레이션 제작
        </a>
    </div>
</div>

<!-- 목록 -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100">
    @if($songs->count() > 0)
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b border-gray-100 bg-gray-50">
                    <th class="text-left px-5 py-3 font-medium text-gray-600">No.</th>
                    <th class="text-left px-5 py-3 font-medium text-gray-600">회사명</th>
                    <th class="text-left px-5 py-3 font-medium text-gray-600">업종/제품</th>
                    <th class="text-left px-5 py-3 font-medium text-gray-600">분위기</th>
                    <th class="text-center px-5 py-3 font-medium text-gray-600">길이</th>
                    <th class="text-center px-5 py-3 font-medium text-gray-600">음성</th>
                    <th class="text-left px-5 py-3 font-medium text-gray-600">생성자</th>
                    <th class="text-left px-5 py-3 font-medium text-gray-600">생성일</th>
                    <th class="text-center px-5 py-3 font-medium text-gray-600">관리</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach($songs as $song)
                <tr class="hover:bg-gray-50 transition">
                    <td class="px-5 py-3.5 text-gray-500">{{ $songs->total() - ($songs->perPage() * ($songs->currentPage() - 1)) - $loop->index }}</td>
                    <td class="px-5 py-3.5">
                        <a href="{{ route('rd.cm-song.show', $song->id) }}" class="font-medium text-gray-800 hover:text-indigo-600">
                            {{ $song->company_name }}
                        </a>
                    </td>
                    <td class="px-5 py-3.5 text-gray-600">{{ Str::limit($song->industry, 30) }}</td>
                    <td class="px-5 py-3.5">
                        <span class="px-2 py-0.5 bg-indigo-50 text-indigo-600 text-xs rounded-full">{{ $song->getMood() }}</span>
                    </td>
                    <td class="px-5 py-3.5 text-center text-gray-600">{{ $song->getDuration() }}초</td>
                    <td class="px-5 py-3.5 text-center">
                        @if($song->audio_path)
                            <span class="text-green-500"><i class="ri-volume-up-line"></i></span>
                        @else
                            <span class="text-gray-300">-</span>
                        @endif
                    </td>
                    <td class="px-5 py-3.5 text-gray-600">{{ $song->user?->name ?? '-' }}</td>
                    <td class="px-5 py-3.5 text-gray-500">{{ $song->created_at->format('Y-m-d H:i') }}</td>
                    <td class="px-5 py-3.5 text-center">
                        <div class="flex items-center justify-center gap-1">
                            @if($song->audio_path)
                            <a href="{{ route('rd.cm-song.download', $song->id) }}" class="p-1.5 text-gray-400 hover:text-blue-600 transition" title="다운로드">
                                <i class="ri-download-line"></i>
                            </a>
                            @endif
                            <button
                                type="button"
                                onclick="deleteSong({{ $song->id }})"
                                class="p-1.5 text-gray-400 hover:text-red-600 transition"
                                title="삭제"
                            >
                                <i class="ri-delete-bin-line"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    @if($songs->hasPages())
    <div class="px-5 py-3 border-t border-gray-100">
        {{ $songs->links() }}
    </div>
    @endif
    @else
    <div class="py-16 text-center text-gray-400">
        <i class="ri-music-2-line text-5xl mb-3 block opacity-20"></i>
        <p>아직 생성된 나레이션이 없습니다.</p>
        <a href="{{ route('rd.cm-song.create') }}" class="text-indigo-600 hover:text-indigo-800 text-sm mt-2 inline-block">
            첫 번째 나레이션을 만들어보세요 →
        </a>
    </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
function deleteSong(id) {
    if (!confirm('이 나레이션을 삭제하시겠습니까?')) return;
    fetch(`/rd/cm-song/${id}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json',
        },
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert(data.error || '삭제에 실패했습니다.');
        }
    })
    .catch(() => alert('삭제 중 오류가 발생했습니다.'));
}
</script>
@endpush