@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">Edit Song: {{ $song->code }}</h1>
        <p class="text-slate-400 mt-1">Update metadata for this track in the catalog.</p>
    </div>

    <div class="bg-glass p-8 rounded-2xl shadow-xl">
        <form action="{{ route('songs.update', $song->id) }}" method="POST" class="space-y-6">
            @csrf
            @method('PUT')

            <!-- 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" value="{{ old('title', $song->title) }}" required 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" value="{{ old('artist', $song->artist) }}" required 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>

            <!-- Read Only Fields -->
            <div class="grid grid-cols-2 gap-4">
                <div class="space-y-2">
                    <label class="block text-sm font-semibold text-slate-500">6-Digit Code</label>
                    <input type="text" disabled value="{{ $song->code }}" class="w-full bg-indigo-950/20 border border-indigo-950/40 rounded-xl px-4 py-3 text-sm text-slate-500 cursor-not-allowed">
                </div>
                <div class="space-y-2">
                    <label class="block text-sm font-semibold text-slate-500">Filename</label>
                    <input type="text" disabled value="{{ $song->filename }}" class="w-full bg-indigo-950/20 border border-indigo-950/40 rounded-xl px-4 py-3 text-sm text-slate-500 cursor-not-allowed truncate">
                </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">
                    Save Changes
                </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