@extends('admin.layout')
@section('title', 'Yeni Kategori Oluştur')
@section('page-title', 'Yeni Kategori Oluştur')

@section('content')
<div class="content-card">
    <form action="{{ route('admin.categories.store') }}" method="POST">
        @csrf

        <div class="row">
            <div class="col-md-8">
                <!-- Kategori Adı -->
                <div class="mb-3">
                    <label for="name" class="form-label">Kategori Adı <span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('name') is-invalid @enderror" 
                           id="name" name="name" value="{{ old('name') }}" required>
                    @error('name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Slug -->
                <div class="mb-3">
                    <label for="slug" class="form-label">Slug (URL)</label>
                    <input type="text" class="form-control @error('slug') is-invalid @enderror" 
                           id="slug" name="slug" value="{{ old('slug') }}" 
                           placeholder="Otomatik oluşturulacak">
                    <small class="form-text text-muted">Boş bırakırsanız kategori adından otomatik oluşturulur</small>
                    @error('slug')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Açıklama -->
                <div class="mb-3">
                    <label for="description" class="form-label">Açıklama</label>
                    <textarea class="form-control @error('description') is-invalid @enderror" 
                              id="description" name="description" rows="4">{{ old('description') }}</textarea>
                    @error('description')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="col-md-4">
                <!-- Renk -->
                <div class="mb-3">
                    <label for="color" class="form-label">Renk (Hex)</label>
                    <div class="input-group">
                        <input type="color" class="form-control form-control-color" 
                               id="color" name="color" value="{{ old('color', '#0F5A4F') }}" 
                               title="Kategori rengi seçin">
                        <input type="text" class="form-control @error('color') is-invalid @enderror" 
                               id="color_text" value="{{ old('color', '#0F5A4F') }}" 
                               placeholder="#0F5A4F" pattern="^#[a-fA-F0-9]{6}$">
                    </div>
                    <small class="form-text text-muted">Kategori için renk seçin (opsiyonel)</small>
                    @error('color')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Durum -->
                <div class="mb-3">
                    <label for="is_active" class="form-label">Durum <span class="text-danger">*</span></label>
                    <select class="form-select @error('is_active') is-invalid @enderror" 
                            id="is_active" name="is_active" required>
                        <option value="1" {{ old('is_active', '1') == '1' ? 'selected' : '' }}>Aktif</option>
                        <option value="0" {{ old('is_active') == '0' ? 'selected' : '' }}>Pasif</option>
                    </select>
                    @error('is_active')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Buttons -->
        <div class="d-flex justify-content-between mt-4">
            <a href="{{ route('admin.categories.index') }}" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> İptal
            </a>
            <button type="submit" class="btn btn-primary">
                <i class="bi bi-check-circle"></i> Kategori Oluştur
            </button>
        </div>
    </form>
</div>

@push('scripts')
<script>
    // Renk seçici senkronizasyonu
    document.getElementById('color').addEventListener('input', function(e) {
        document.getElementById('color_text').value = e.target.value;
    });
    
    document.getElementById('color_text').addEventListener('input', function(e) {
        if (/^#[a-fA-F0-9]{6}$/.test(e.target.value)) {
            document.getElementById('color').value = e.target.value;
        }
    });
</script>
@endpush
@endsection