@extends('admin.layout')

@section('header-title', 'Yeni Kategori Oluştur')

@section('content')
<style>
    .form-wrap { max-width: 640px; }
    .field { margin-bottom: 18px; }
    .field label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
    .field input, .field textarea { width: 100%; padding: 10px 14px; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: 14px; font-family: inherit; color: #0f172a; background: #fff; transition: border-color 0.2s; outline: none; }
    .field input:focus, .field textarea:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }
    .field textarea { resize: vertical; min-height: 100px; }
    .field .err { color: #dc2626; font-size: 12px; margin-top: 5px; }
    .form-actions { display: flex; gap: 10px; margin-top: 24px; }
</style>

<div class="page-header">
    <div>
        <h1 class="page-title">📁 Yeni Kategori Oluştur</h1>
        <p class="page-subtitle">Blog yazısı kategorisi ekleyin</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('admin.blog-categories.index') }}" class="btn btn-secondary">← Geri Dön</a>
    </div>
</div>

<div class="card form-wrap">
    <div class="card-body" style="padding: 24px;">
        <form action="{{ route('admin.blog-categories.store') }}" method="POST">
            @csrf

            <div class="field">
                <label for="name">Kategori Adı <span style="color:#dc2626;">*</span></label>
                <input type="text" id="name" name="name" value="{{ old('name') }}"
                       placeholder="Örn: KPSS, MSÜ, Subaylık" required autofocus>
                @error('name')
                    <div class="err">{{ $message }}</div>
                @enderror
            </div>

            <div class="field">
                <label for="description">Açıklama <span style="color:#94a3b8; font-weight:400;">(opsiyonel)</span></label>
                <textarea id="description" name="description"
                          placeholder="Kategori hakkında kısa açıklama">{{ old('description') }}</textarea>
                @error('description')
                    <div class="err">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary">✓ Kategori Oluştur</button>
                <a href="{{ route('admin.blog-categories.index') }}" class="btn btn-secondary">İptal</a>
            </div>
        </form>
    </div>
</div>
@endsection
