@extends('layouts.admin')

@section('title', 'Create Addon')
@section('page-title', 'Create Addon')

@section('content')
    <div class="max-w-3xl mx-auto">
        <a href="{{ route('admin.addons.index') }}"
            class="inline-flex items-center gap-2 text-purple-300 hover:text-purple-200 mb-6">
            <svg class="w-5 h-5" 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"></path>
            </svg>
            Back to Addons
        </a>

        <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-8 border border-white/20">
            <form action="{{ route('admin.addons.store') }}" method="POST">
                @csrf

                <!-- Addon Title -->
                <div class="mb-6">
                    <label for="title" class="block text-sm font-medium text-purple-300 mb-2">Addon Title</label>
                    <input type="text" id="title" name="title" value="{{ old('title') }}" required
                        class="w-full px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all"
                        placeholder="e.g., Extra Recording Time, Premium Transcription">
                    @error('title')
                        <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Description -->
                <div class="mb-6">
                    <label for="description" class="block text-sm font-medium text-purple-300 mb-2">Description</label>
                    <textarea id="description" name="description" rows="3"
                        class="w-full px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all"
                        placeholder="Addon description">{{ old('description') }}</textarea>
                    @error('description')
                        <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Price -->
                <div class="mb-6">
                    <label for="price" class="block text-sm font-medium text-purple-300 mb-2">Price (USD)</label>
                    <input type="number" id="price" name="price" value="{{ old('price') }}" step="0.01" min="0" required
                        class="w-full px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all"
                        placeholder="9.99">
                    @error('price')
                        <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Value -->
                <div class="mb-6">
                    <label for="value" class="block text-sm font-medium text-purple-300 mb-2">Value</label>
                    <input type="number" id="value" name="value" value="{{ old('value') }}" min="0" required
                        class="w-full px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all"
                        placeholder="100">
                    <p class="mt-1 text-sm text-gray-400">Numeric value representing the addon quantity or amount</p>
                    @error('value')
                        <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Type -->
                <div class="mb-6">
                    <label for="type" class="block text-sm font-medium text-purple-300 mb-2">Type</label>
                    <select id="type" name="type" required
                        class="w-full px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all">
                        <option value="">Select addon type</option>
                        <option value="recording" {{ old('type') == 'recording' ? 'selected' : '' }}>Recording</option>
                        <option value="bookmark" {{ old('type') == 'bookmark' ? 'selected' : '' }}>Bookmark</option>
                        <option value="transcription" {{ old('type') == 'transcription' ? 'selected' : '' }}>Transcription
                        </option>
                        <option value="summary" {{ old('type') == 'summary' ? 'selected' : '' }}>Summary</option>
                        <option value="search" {{ old('type') == 'search' ? 'selected' : '' }}>Search</option>
                    </select>
                    @error('type')
                        <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Plan -->
                <div class="mb-6">
                    <label for="plan_id" class="block text-sm font-medium text-purple-300 mb-2">Plan (Optional)</label>
                    <select id="plan_id" name="plan_id"
                        class="w-full px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all">
                        <option value="">Select a plan (optional)</option>
                        @foreach($plans as $plan)
                            <option value="{{ $plan->id }}" {{ old('plan_id') == $plan->id ? 'selected' : '' }}>
                                {{ $plan->title }}
                            </option>
                        @endforeach
                    </select>
                    @error('plan_id')
                        <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Is Active -->
                <div class="mb-6">
                    <div class="flex items-center gap-2">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}
                                class="sr-only peer">
                            <div
                                class="w-11 h-6 bg-white/10 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-500/25 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-500/50">
                            </div>
                        </label>
                        <span class="text-sm font-medium text-purple-300">Active</span>
                    </div>
                </div>

                <!-- Submit Buttons -->
                <div class="flex gap-4">
                    <button type="submit"
                        class="px-6 py-3 bg-purple-500/20 hover:bg-purple-500/30 text-purple-300 rounded-lg border border-purple-500/30 transition-all font-medium">
                        Create Addon
                    </button>
                    <a href="{{ route('admin.addons.index') }}"
                        class="px-6 py-3 bg-white/5 hover:bg-white/10 text-gray-300 rounded-lg border border-white/10 transition-all font-medium">
                        Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>
@endsection