@extends('layouts.app')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
        <div>
            <h1 class="text-3xl font-extrabold tracking-tight text-white">Songs Database</h1>
            <p class="text-slate-400 mt-1">Manage and sync MIDI/KAR tracks in the catalog.</p>
        </div>
        <div class="flex items-center gap-4">
            <!-- Search bar -->
            <form action="{{ route('songs.index') }}" method="GET" class="flex gap-2">
                <input type="text" name="search" placeholder="Search songs..." value="{{ request('search') }}" class="bg-indigo-950/40 border border-indigo-900 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:border-cyan-500 w-64 transition">
                <button type="submit" class="bg-indigo-950 border border-indigo-900 hover:bg-indigo-900 text-white font-semibold text-sm px-4 py-2 rounded-xl transition">
                    Search
                </button>
            </form>
            <a href="{{ route('songs.create') }}" class="bg-gradient-to-r from-cyan-500 to-indigo-500 hover:opacity-90 text-white font-bold py-2.5 px-6 rounded-xl transition text-sm whitespace-nowrap shadow-lg shadow-cyan-950/20">
                Add Song
            </a>
        </div>
    </div>

    <!-- Table -->
    <div class="bg-glass rounded-2xl shadow-xl overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-indigo-950/20 text-slate-400 text-xs font-semibold uppercase tracking-wider border-b border-indigo-950">
                        <th class="px-6 py-4">Code</th>
                        <th class="px-6 py-4">Title</th>
                        <th class="px-6 py-4">Artist</th>
                        <th class="px-6 py-4">Filename</th>
                        <th class="px-6 py-4 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-indigo-950/40 text-sm">
                    @forelse($songs as $song)
                        <tr class="hover:bg-indigo-950/10 transition">
                            <td class="px-6 py-4 font-mono text-cyan-400 font-bold">{{ $song->code }}</td>
                            <td class="px-6 py-4 text-white font-medium">{{ $song->title }}</td>
                            <td class="px-6 py-4 text-slate-300">{{ $song->artist }}</td>
                            <td class="px-6 py-4 font-mono text-slate-400 text-xs">{{ $song->filename }}</td>
                            <td class="px-6 py-4 text-right space-x-2">
                                <a href="{{ route('songs.edit', $song->id) }}" class="text-xs bg-indigo-950 border border-indigo-900 hover:bg-indigo-900 text-slate-300 py-1.5 px-3 rounded-lg transition inline-block">
                                    Edit
                                </a>
                                <form action="{{ route('songs.destroy', $song->id) }}" method="POST" class="inline-block" onsubmit="return confirm('Are you sure you want to delete this song?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-xs bg-rose-950/40 border border-rose-900/60 hover:bg-rose-900/40 text-rose-400 py-1.5 px-3 rounded-lg transition">
                                        Delete
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-6 py-12 text-center text-slate-500">No matching songs found in database.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($songs->hasPages())
            <div class="px-6 py-4 border-t border-indigo-950">
                {{ $songs->links() }}
            </div>
        @endif
    </div>
</div>
@endsection