@extends('layouts.app')

@section('content')
<div class="max-w-2xl mx-auto space-y-6">
    <div>
        <h1 class="text-3xl font-extrabold tracking-tight text-white">Add New Song</h1>
        <p class="text-slate-400 mt-1">Upload a KAR or MIDI file. The system will auto-assign a 6-digit code.</p>
    </div>

    <div class="bg-glass p-8 rounded-2xl shadow-xl">
        <form action="{{ route('songs.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf

            <!-- Title -->
            <div class="space-y-2">
                <label for="title" class="block text-sm font-semibold text-slate-300">Song Title</label>
                <input type="text" id="title" name="title" required placeholder="e.g. Bohemian Rhapsody" class="w-full bg-indigo-950/40 border border-indigo-900 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-cyan-500 transition">
            </div>

            <!-- Artist -->
            <div class="space-y-2">
                <label for="artist" class="block text-sm font-semibold text-slate-300">Artist / Band</label>
                <input type="text" id="artist" name="artist" required placeholder="e.g. Queen" class="w-full bg-indigo-950/40 border border-indigo-900 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-cyan-500 transition">
            </div>

            <!-- File Upload -->
            <div class="space-y-2">
                <label for="song_file" class="block text-sm font-semibold text-slate-300">Karaoke File (.kar, .mid)</label>
                <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-indigo-900/60 border-dashed rounded-xl hover:border-cyan-500/50 transition">
                    <div class="space-y-1 text-center">
                        <svg class="mx-auto h-12 w-12 text-slate-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                            <path d="M28 8H12a4 4 0 00-4 4v20a4 4 0 004 4h20a4 4 0 004-4V20m-8-12v8h8M14 22h12m-12 6h12m-12-12h4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <div class="flex text-sm text-slate-400 justify-center">
                            <label for="song_file" class="relative cursor-pointer rounded-md font-semibold text-cyan-400 hover:text-cyan-300 focus-within:outline-none">
                                <span>Upload a file</span>
                                <input id="song_file" name="song_file" type="file" required class="sr-only" accept=".kar,.mid,.midi">
                            </label>
                        </div>
                        <p class="text-xs text-slate-500">MIDI, KAR up to 10MB</p>
                    </div>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="pt-4 flex gap-4">
                <button type="submit" class="flex-grow bg-gradient-to-r from-cyan-500 to-indigo-500 hover:opacity-90 text-white font-bold py-3 px-6 rounded-xl transition text-sm shadow-lg shadow-cyan-950/20">
                    Upload Song
                </button>
                <a href="{{ route('songs.index') }}" class="bg-indigo-950/60 border border-indigo-900 hover:bg-indigo-900 text-slate-300 font-bold py-3 px-6 rounded-xl transition text-sm">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
@endsection