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

@extends('layouts.app')

@section('title', '나레이션 상세 - ' . $song->company_name)

@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.cm-song.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> 목록
        </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="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- 정보 -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <h2 class="text-lg font-semibold text-gray-800 mb-5 flex items-center gap-2">
            <i class="ri-information-line text-indigo-500"></i>
            나레이션 정보
        </h2>

        <div class="space-y-4">
            <div class="flex items-center gap-3">
                <span class="text-sm text-gray-500 shrink-0" style="width: 90px;">회사명</span>
                <span class="font-medium text-gray-800">{{ $song->company_name }}</span>
            </div>
            <div class="flex items-center gap-3">
                <span class="text-sm text-gray-500 shrink-0" style="width: 90px;">업종/제품</span>
                <span class="text-gray-800">{{ $song->industry }}</span>
            </div>
            <div class="flex items-center gap-3">
                <span class="text-sm text-gray-500 shrink-0" style="width: 90px;">분위기</span>
                <span class="px-2.5 py-0.5 bg-indigo-50 text-indigo-600 text-sm rounded-full">{{ $song->getMood() }}</span>
            </div>
            <div class="flex items-center gap-3">
                <span class="text-sm text-gray-500 shrink-0" style="width: 90px;">길이</span>
                <span class="text-gray-800">{{ $song->getDuration() }}초</span>
            </div>
            <div class="flex items-center gap-3">
                <span class="text-sm text-gray-500 shrink-0" style="width: 90px;">생성자</span>
                <span class="text-gray-800">{{ $song->user?->name ?? '-' }}</span>
            </div>
            <div class="flex items-center gap-3">
                <span class="text-sm text-gray-500 shrink-0" style="width: 90px;">생성일</span>
                <span class="text-gray-800">{{ $song->created_at->format('Y-m-d H:i:s') }}</span>
            </div>
        </div>

        @if($song->audio_path)
        <div class="mt-6 pt-5 border-t border-gray-100">
            <a
                href="{{ route('rd.cm-song.download', $song->id) }}"
                class="inline-flex items-center gap-2 px-5 py-2.5 border-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 rounded-xl text-sm font-medium transition"
            >
                <i class="ri-download-line"></i>
                음성 파일 다운로드
            </a>
        </div>
        @endif
    </div>

    <!-- 가사 + 플레이어 -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <h2 class="text-lg font-semibold text-gray-800 mb-5 flex items-center gap-2">
            <i class="ri-file-music-line text-indigo-500"></i>
            가사
        </h2>

        <div class="bg-gray-50 p-6 rounded-xl border border-gray-100 mb-6">
            <p class="text-lg leading-relaxed text-gray-800 whitespace-pre-line font-medium text-center">{{ $song->lyrics }}</p>
        </div>

        @if($song->audio_path)
        <div class="flex flex-col items-center gap-4">
            <audio id="audioPlayer" src="{{ route('rd.cm-song.download', $song->id) }}" class="hidden"></audio>
            <button
                type="button"
                id="playBtn"
                class="w-16 h-16 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full flex items-center justify-center shadow-lg hover:shadow-xl transition hover:scale-105"
            >
                <i id="playIcon" class="ri-play-fill text-3xl ml-0.5"></i>
            </button>
            <p id="playLabel" class="text-sm text-gray-500 font-medium">들어보기</p>
        </div>
        @else
        <div class="text-center text-gray-400 py-4">
            <p class="text-sm">음성 파일이 없습니다.</p>
        </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const audioPlayer = document.getElementById('audioPlayer');
    const playBtn = document.getElementById('playBtn');
    const playIcon = document.getElementById('playIcon');
    const playLabel = document.getElementById('playLabel');

    if (!audioPlayer || !playBtn) return;

    let isPlaying = false;

    playBtn.addEventListener('click', function () {
        if (isPlaying) {
            audioPlayer.pause();
        } else {
            audioPlayer.play();
        }
    });

    audioPlayer.addEventListener('play', function () {
        isPlaying = true;
        playIcon.className = 'ri-pause-fill text-3xl';
        playIcon.classList.remove('ml-0.5');
        playLabel.textContent = '재생 중...';
    });

    audioPlayer.addEventListener('pause', function () {
        isPlaying = false;
        playIcon.className = 'ri-play-fill text-3xl ml-0.5';
        playLabel.textContent = '들어보기';
    });

    audioPlayer.addEventListener('ended', function () {
        isPlaying = false;
        playIcon.className = 'ri-play-fill text-3xl ml-0.5';
        playLabel.textContent = '들어보기';
    });
});
</script>
@endpush