@extends('layouts.app')

@section('title', 'Create Playlist')

@section('content')
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    {{-- Page Header --}}
    <div class="mb-8">
        <a href="{{ route('playlists.index') }}" class="inline-flex items-center gap-1 text-gray-400 hover:text-yellow-400 transition-colors text-sm mb-4">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            Back to Playlists
        </a>
        <h1 class="text-3xl font-bold text-white">Create Playlist</h1>
        <p class="text-gray-400 mt-1">Organize your favorite videos into a custom playlist</p>
    </div>

    {{-- Form Card --}}
    <div class="bg-gray-900 rounded-xl border border-gray-800 p-6 sm:p-8">
        <form method="POST" action="{{ route('playlists.store') }}">
            @csrf

            {{-- Name --}}
            <div class="mb-6">
                <label for="name" class="block text-sm font-medium text-gray-300 mb-2">
                    Playlist Name <span class="text-red-400">*</span>
                </label>
                <input type="text"
                       name="name"
                       id="name"
                       value="{{ old('name') }}"
                       placeholder="My Awesome Playlist"
                       required
                       maxlength="255"
                       class="w-full bg-gray-900 border border-gray-600 text-white placeholder-gray-500 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors">
                @error('name')
                    <p class="mt-2 text-sm text-red-400">{{ $message }}</p>
                @enderror
            </div>

            {{-- Description --}}
            <div class="mb-6">
                <label for="description" class="block text-sm font-medium text-gray-300 mb-2">
                    Description
                </label>
                <textarea name="description"
                          id="description"
                          rows="4"
                          placeholder="What's this playlist about?"
                          class="w-full bg-gray-900 border border-gray-600 text-white placeholder-gray-500 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors resize-none">{{ old('description') }}</textarea>
                @error('description')
                    <p class="mt-2 text-sm text-red-400">{{ $message }}</p>
                @enderror
            </div>

            {{-- Public Toggle --}}
            <div class="mb-8">
                <label class="flex items-center gap-3 cursor-pointer group">
                    <div class="relative">
                        <input type="hidden" name="is_public" value="0">
                        <input type="checkbox"
                               name="is_public"
                               value="1"
                               {{ old('is_public') ? 'checked' : '' }}
                               class="sr-only peer">
                        <div class="w-11 h-6 bg-gray-600 rounded-full peer-checked:bg-red-600 transition-colors"></div>
                        <div class="absolute left-0.5 top-0.5 w-5 h-5 bg-white rounded-full shadow-md transform peer-checked:translate-x-5 transition-transform"></div>
                    </div>
                    <div>
                        <span class="text-sm font-medium text-gray-300 group-hover:text-white transition-colors">Make playlist public</span>
                        <p class="text-xs text-gray-500 mt-0.5">Anyone with the link can view this playlist</p>
                    </div>
                </label>
                @error('is_public')
                    <p class="mt-2 text-sm text-red-400">{{ $message }}</p>
                @enderror
            </div>

            {{-- Actions --}}
            <div class="flex items-center gap-4">
                <button type="submit"
                        class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-medium transition-colors shadow-lg shadow-red-900/30">
                    Create Playlist
                </button>
                <a href="{{ route('playlists.index') }}"
                   class="text-gray-400 hover:text-white px-4 py-3 rounded-lg font-medium transition-colors">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
@endsection