@extends('admin.layouts.app')

@section('title', 'Create Deck')
@section('page-title', 'Create New Deck')
@section('page-title-jp', '新しいデッキを作成')

@section('content')
<div style="background: white; padding: 24px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); max-width: 700px;">
    <form action="{{ route('admin.decks.store') }}" method="POST">
        @csrf

        <!-- Name -->
        <div style="margin-bottom: 24px;">
            <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Deck Name *</label>
            <input 
                type="text" 
                name="name" 
                value="{{ old('name') }}" 
                required
                style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; transition: all 0.2s;"
                onfocus="this.style.borderColor='#3b82f6'; this.style.boxShadow='0 0 0 3px rgba(59, 130, 246, 0.1)';"
                onblur="this.style.borderColor='#e2e8f0'; this.style.boxShadow='none';">
            @error('name')
                <span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
            @enderror
        </div>

        <!-- Description -->
        <div style="margin-bottom: 24px;">
            <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Description</label>
            <textarea 
                name="description" 
                style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; min-height: 100px; transition: all 0.2s; font-family: inherit;"
                onfocus="this.style.borderColor='#3b82f6'; this.style.boxShadow='0 0 0 3px rgba(59, 130, 246, 0.1)';"
                onblur="this.style.borderColor='#e2e8f0'; this.style.boxShadow='none';">{{ old('description') }}</textarea>
            <small style="color: #64748b; display: block; margin-top: 4px;">Brief description of the deck content and purpose</small>
            @error('description')
                <span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
            @enderror
        </div>

        <!-- Is Public -->
        <div style="margin-bottom: 24px;">
            <label style="display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 12px; background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; transition: all 0.2s;">
                <input 
                    type="checkbox" 
                    name="is_public" 
                    value="1" 
                    {{ old('is_public') ? 'checked' : '' }}
                    style="width: 18px; height: 18px; cursor: pointer;">
                <div>
                    <span style="font-weight: 600; color: #1e293b; display: block;">Make this deck public</span>
                    <small style="color: #64748b;">Allow all users to access this deck</small>
                </div>
            </label>
        </div>

        <!-- Action Buttons -->
        <div style="display: flex; gap: 12px; padding-top: 20px; border-top: 1px solid #e2e8f0;">
            <button 
                type="submit" 
                class="btn" 
                style="background-color: #3b82f6; color: white; padding: 10px 24px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s;">
                <x-icon name="plus" size="18" />
                Create Deck
            </button>
            <a 
                href="{{ route('admin.decks.index') }}" 
                class="btn" 
                style="background-color: #f1f5f9; color: #475569; padding: 10px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #e2e8f0; transition: all 0.2s;">
                <x-icon name="close" size="18" />
                Cancel
            </a>
        </div>
    </form>
</div>
@endsection