@extends('agency.layouts.app')

@section('title', 'Yeni Kategori Ekle')
@section('page_title', 'Yeni Kategori Ekle')

@php
    $breadcrumbs = [
        ['title' => 'Ana Sayfa', 'url' => route('agency.dashboard')],
        ['title' => 'Hizmet Türleri', 'url' => route('agency.product-types.index')],
        ['title' => 'Kategoriler', 'url' => route('agency.categories.index')],
        ['title' => 'Yeni Kategori', 'url' => '']
    ];
@endphp

@push('styles')
    <style>
        .form-section {
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .form-section-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--gray-900);
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid var(--gray-200);
        }

        .icon-preview {
            width: 60px;
            height: 60px;
            border: 2px solid var(--gray-200);
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: var(--gray-600);
            background: var(--gray-50);
        }

        .color-preview {
            width: 40px;
            height: 40px;
            border: 2px solid var(--gray-200);
            border-radius: var(--radius-md);
            background: #3b82f6;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h1 class="h3 mb-1">Yeni Kategori Ekle</h1>
                <p class="text-muted mb-0">Yeni bir ürün kategorisi oluşturun</p>
            </div>
            <div>
                <a href="{{ route('agency.categories.index') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i>
                    Geri Dön
                </a>
            </div>
        </div>

        <form action="{{ route('agency.categories.store') }}" method="POST">
            @csrf

            <div class="row">
                <div class="col-lg-8">
                    <!-- Temel Bilgiler -->
                    <div class="form-section">
                        <h5 class="form-section-title">Temel Bilgiler</h5>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="product_type_id" class="form-label">Hizmet Türü <span class="text-danger">*</span></label>
                                <select name="product_type_id" id="product_type_id" class="form-select @error('product_type_id') is-invalid @enderror" required>
                                    <option value="">Seçiniz</option>
                                    @foreach($productTypes as $type)
                                        <option value="{{ $type->id }}" {{ old('product_type_id', request('product_type_id')) == $type->id ? 'selected' : '' }}>
                                            {{ $type->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('product_type_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="parent_id" class="form-label">Üst Kategori</label>
                                <select name="parent_id" id="parent_id" class="form-select @error('parent_id') is-invalid @enderror">
                                    <option value="">Ana Kategori (Üst Kategori Yok)</option>
                                    @foreach($parentCategories as $parent)
                                        <option value="{{ $parent->id }}" {{ old('parent_id') == $parent->id ? 'selected' : '' }}>
                                            {{ $parent->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('parent_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Bu kategori bir alt kategori ise üst kategorisini seçin</small>
                            </div>

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

                            <div class="col-md-4">
                                <label for="code" class="form-label">Kategori Kodu</label>
                                <input type="text" name="code" id="code" class="form-control @error('code') is-invalid @enderror"
                                       value="{{ old('code') }}" placeholder="Otomatik oluşturulacak">
                                @error('code')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label for="short_description" class="form-label">Kısa Açıklama</label>
                                <input type="text" name="short_description" id="short_description"
                                       class="form-control @error('short_description') is-invalid @enderror"
                                       value="{{ old('short_description') }}"
                                       placeholder="Kategori hakkında kısa bilgi">
                                @error('short_description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label for="description" class="form-label">Detaylı Açıklama</label>
                                <textarea name="description" id="description" rows="4"
                                          class="form-control @error('description') is-invalid @enderror"
                                          placeholder="Kategori hakkında detaylı açıklama">{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- SEO Ayarları -->
                    <div class="form-section">
                        <h5 class="form-section-title">SEO Ayarları</h5>

                        <div class="row g-3">
                            <div class="col-12">
                                <label for="meta_title" class="form-label">Meta Başlık</label>
                                <input type="text" name="meta_title" id="meta_title"
                                       class="form-control @error('meta_title') is-invalid @enderror"
                                       value="{{ old('meta_title') }}"
                                       placeholder="SEO için meta başlık">
                                @error('meta_title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label for="meta_description" class="form-label">Meta Açıklama</label>
                                <textarea name="meta_description" id="meta_description" rows="3"
                                          class="form-control @error('meta_description') is-invalid @enderror"
                                          placeholder="SEO için meta açıklama">{{ old('meta_description') }}</textarea>
                                @error('meta_description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label for="meta_keywords" class="form-label">Meta Anahtar Kelimeler</label>
                                <input type="text" name="meta_keywords" id="meta_keywords"
                                       class="form-control @error('meta_keywords') is-invalid @enderror"
                                       value="{{ old('meta_keywords') }}"
                                       placeholder="Virgülle ayrılmış anahtar kelimeler">
                                @error('meta_keywords')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <!-- Görsel Ayarlar -->
                    <div class="form-section">
                        <h5 class="form-section-title">Görsel Ayarlar</h5>

                        <div class="mb-3">
                            <label for="icon" class="form-label">İkon (Font Awesome)</label>
                            <div class="input-group">
                                <input type="text" name="icon" id="icon"
                                       class="form-control @error('icon') is-invalid @enderror"
                                       value="{{ old('icon', 'fa-folder') }}"
                                       placeholder="fa-folder">
                                <span class="input-group-text">
                                    <div class="icon-preview">
                                        <i id="icon-preview" class="fas fa-folder"></i>
                                    </div>
                                </span>
                            </div>
                            @error('icon')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">
                                <a href="https://fontawesome.com/icons" target="_blank">Font Awesome</a> ikon sınıfı
                            </small>
                        </div>

                        <div class="mb-3">
                            <label for="color_code" class="form-label">Renk Kodu</label>
                            <div class="input-group">
                                <input type="color" name="color_code" id="color_code"
                                       class="form-control form-control-color @error('color_code') is-invalid @enderror"
                                       value="{{ old('color_code', '#3b82f6') }}">
                                <input type="text" id="color_code_text" class="form-control"
                                       value="{{ old('color_code', '#3b82f6') }}" readonly>
                            </div>
                            @error('color_code')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="sort_order" class="form-label">Sıralama</label>
                            <input type="number" name="sort_order" id="sort_order"
                                   class="form-control @error('sort_order') is-invalid @enderror"
                                   value="{{ old('sort_order', 0) }}" min="0">
                            @error('sort_order')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Durum Ayarları -->
                    <div class="form-section">
                        <h5 class="form-section-title">Durum Ayarları</h5>

                        <div class="form-check mb-3">
                            <input type="checkbox" name="is_active" id="is_active" class="form-check-input"
                                   value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                            <label for="is_active" class="form-check-label">
                                <strong>Aktif</strong>
                                <br>
                                <small class="text-muted">Kategori aktif olarak görüntülensin</small>
                            </label>
                        </div>

                        <div class="form-check mb-3">
                            <input type="checkbox" name="is_featured" id="is_featured" class="form-check-input"
                                   value="1" {{ old('is_featured') ? 'checked' : '' }}>
                            <label for="is_featured" class="form-check-label">
                                <strong>Öne Çıkan</strong>
                                <br>
                                <small class="text-muted">Kategori öne çıkan olarak işaretlensin</small>
                            </label>
                        </div>

                        <div class="form-check mb-3">
                            <input type="checkbox" name="show_on_homepage" id="show_on_homepage" class="form-check-input"
                                   value="1" {{ old('show_on_homepage') ? 'checked' : '' }}>
                            <label for="show_on_homepage" class="form-check-label">
                                <strong>Ana Sayfada Göster</strong>
                                <br>
                                <small class="text-muted">Kategori ana sayfada görüntülensin</small>
                            </label>
                        </div>
                    </div>

                    <!-- Form Actions -->
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="fas fa-save me-2"></i>
                            Kategoriyi Kaydet
                        </button>
                        <a href="{{ route('agency.categories.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times me-2"></i>
                            İptal
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Icon preview
            const iconInput = document.getElementById('icon');
            const iconPreview = document.getElementById('icon-preview');

            iconInput.addEventListener('input', function() {
                iconPreview.className = 'fas ' + this.value;
            });

            // Color code sync
            const colorInput = document.getElementById('color_code');
            const colorText = document.getElementById('color_code_text');

            colorInput.addEventListener('input', function() {
                colorText.value = this.value;
            });

            // Product type change - load parent categories
            const productTypeSelect = document.getElementById('product_type_id');
            const parentSelect = document.getElementById('parent_id');

            productTypeSelect.addEventListener('change', async function() {
                const productTypeId = this.value;

                if (!productTypeId) {
                    parentSelect.innerHTML = '<option value="">Ana Kategori (Üst Kategori Yok)</option>';
                    return;
                }

                try {
                    const response = await fetch(`/agency/categories/by-type/${productTypeId}`);
                    const categories = await response.json();

                    parentSelect.innerHTML = '<option value="">Ana Kategori (Üst Kategori Yok)</option>';

                    categories
                        .filter(cat => cat.parent_id === null)
                        .forEach(category => {
                            const option = document.createElement('option');
                            option.value = category.id;
                            option.textContent = category.name;
                            parentSelect.appendChild(option);
                        });
                } catch (error) {
                    console.error('Error loading parent categories:', error);
                }
            });

            // Auto-generate code from name
            const nameInput = document.getElementById('name');
            const codeInput = document.getElementById('code');
            let codeManuallyEdited = false;

            codeInput.addEventListener('input', function() {
                codeManuallyEdited = true;
            });

            nameInput.addEventListener('input', function() {
                if (!codeManuallyEdited) {
                    const slug = this.value
                        .toLowerCase()
                        .replace(/ğ/g, 'g')
                        .replace(/ü/g, 'u')
                        .replace(/ş/g, 's')
                        .replace(/ı/g, 'i')
                        .replace(/ö/g, 'o')
                        .replace(/ç/g, 'c')
                        .replace(/[^a-z0-9]+/g, '-')
                        .replace(/^-+|-+$/g, '');

                    codeInput.value = slug;
                }
            });
        });
    </script>
@endpush