@extends('admin.layout')
@section('title', 'Nuevo Producto')
@section('page-title', 'Yeni Ürün')

@section('content')
<div class="content-card">
    <form action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data" id="productForm">
        @csrf

        <div class="row">
            <div class="col-md-8">
                <div class="mb-3">
                    <label for="name" class="form-label">Ürün 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>

                <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">
                    @error('slug')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="mb-3">
                    <label for="short_description" class="form-label">Kısa Açıklama</label>
                    <input type="text" class="form-control @error('short_description') is-invalid @enderror" id="short_description" name="short_description" value="{{ old('short_description') }}" maxlength="500">
                    <small class="form-text text-muted">Ürün kartında görünen kısa özet.</small>
                    @error('short_description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

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

                <div class="mb-3">
                    <label for="images" class="form-label">Ürün Görselleri</label>
                    <input type="file" class="form-control @error('images') is-invalid @enderror @error('images.*') is-invalid @enderror" id="images" name="images[]" accept="image/*" multiple>
                    <small class="form-text text-muted">Birden fazla görsel seçebilirsiniz. İlk görsel kapak (birincil) görsel olarak ayarlanır.</small>
                    @error('images')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <hr class="my-4">

                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h6 class="mb-0">Varyantlar (Beden / Renk)</h6>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" id="has_variants" name="has_variants" value="1" {{ old('has_variants') ? 'checked' : '' }}>
                        <label class="form-check-label" for="has_variants">Bu ürünün varyantları var</label>
                    </div>
                </div>

                <div id="variantsSection" class="d-none">
                    <div id="variantRows" class="d-flex flex-column gap-2 mb-2"></div>
                    <button type="button" class="btn btn-sm btn-outline-primary" id="addVariantRow">
                        <i class="bi bi-plus-circle"></i> Varyant Ekle
                    </button>
                    @error('variants')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                </div>

                <div id="simpleStockSection">
                    <div class="row g-3 mt-1">
                        <div class="col-md-6">
                            <label for="sku" class="form-label">SKU</label>
                            <input type="text" class="form-control @error('sku') is-invalid @enderror" id="sku" name="sku" value="{{ old('sku') }}">
                            @error('sku')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label for="stock" class="form-label">Stok Adedi</label>
                            <input type="number" class="form-control @error('stock') is-invalid @enderror" id="stock" name="stock" value="{{ old('stock', 0) }}" min="0">
                            @error('stock')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="mb-3">
                    <label for="product_category_id" class="form-label">Kategori</label>
                    <select class="form-select @error('product_category_id') is-invalid @enderror" id="product_category_id" name="product_category_id">
                        <option value="">— Kategori yok —</option>
                        @foreach ($categories as $category)
                            <option value="{{ $category->id }}" @selected(old('product_category_id') == $category->id)>{{ $category->name }}</option>
                        @endforeach
                    </select>
                    @error('product_category_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="mb-3">
                    <label for="base_price" class="form-label">Taban Fiyat (₺) <span class="text-danger">*</span></label>
                    <input type="number" step="0.01" class="form-control @error('base_price') is-invalid @enderror" id="base_price" name="base_price" value="{{ old('base_price') }}" min="0" required>
                    <small class="form-text text-muted">Varyantlı ürünlerde, fiyat geçersiz kılınmamış varyantlar için kullanılır.</small>
                    @error('base_price')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="mb-3">
                    <label for="weight_grams" class="form-label">Ağırlık (gram)</label>
                    <input type="number" class="form-control @error('weight_grams') is-invalid @enderror" id="weight_grams" name="weight_grams" value="{{ old('weight_grams') }}" min="0">
                    @error('weight_grams')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <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>

                <hr>

                <div class="mb-3">
                    <label for="meta_title" class="form-label">Meta Başlık (SEO)</label>
                    <input type="text" class="form-control" id="meta_title" name="meta_title" value="{{ old('meta_title') }}">
                </div>
                <div class="mb-3">
                    <label for="meta_description" class="form-label">Meta Açıklama (SEO)</label>
                    <textarea class="form-control" id="meta_description" name="meta_description" rows="2">{{ old('meta_description') }}</textarea>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-between mt-4">
            <a href="{{ route('admin.products.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> Ürünü Oluştur</button>
        </div>
    </form>
</div>

<template id="variantRowTemplate">
    <div class="border rounded p-2 variant-row">
        <div class="row g-2 align-items-end">
            <div class="col-md-3">
                <label class="form-label small mb-1">SKU</label>
                <input type="text" class="form-control form-control-sm" data-field="sku">
            </div>
            <div class="col-md-2">
                <label class="form-label small mb-1">Beden</label>
                <input type="text" class="form-control form-control-sm" data-field="size" placeholder="örn. M">
            </div>
            <div class="col-md-2">
                <label class="form-label small mb-1">Renk</label>
                <input type="text" class="form-control form-control-sm" data-field="color" placeholder="örn. Kırmızı">
            </div>
            <div class="col-md-2">
                <label class="form-label small mb-1">Fiyat (opsiyonel)</label>
                <input type="number" step="0.01" min="0" class="form-control form-control-sm" data-field="price_override">
            </div>
            <div class="col-md-2">
                <label class="form-label small mb-1">Stok</label>
                <input type="number" min="0" class="form-control form-control-sm" data-field="stock" value="0">
            </div>
            <div class="col-md-1">
                <button type="button" class="btn btn-sm btn-outline-danger remove-variant-row" title="Eliminar"><i class="bi bi-trash"></i></button>
            </div>
        </div>
    </div>
</template>

@push('scripts')
<script>
(function () {
    const hasVariantsCheckbox = document.getElementById('has_variants');
    const variantsSection = document.getElementById('variantsSection');
    const simpleStockSection = document.getElementById('simpleStockSection');
    const variantRows = document.getElementById('variantRows');
    const addBtn = document.getElementById('addVariantRow');
    const template = document.getElementById('variantRowTemplate');
    let rowIndex = 0;

    function syncSections() {
        const on = hasVariantsCheckbox.checked;
        variantsSection.classList.toggle('d-none', !on);
        simpleStockSection.classList.toggle('d-none', on);
        if (on && variantRows.children.length === 0) {
            addRow();
        }
    }

    function addRow() {
        const fragment = template.content.cloneNode(true);
        const row = fragment.querySelector('.variant-row');
        row.querySelectorAll('[data-field]').forEach(function (input) {
            input.name = 'variants[' + rowIndex + '][' + input.dataset.field + ']';
        });
        rowIndex++;
        variantRows.appendChild(row);
    }

    addBtn.addEventListener('click', addRow);
    hasVariantsCheckbox.addEventListener('change', syncSections);
    variantRows.addEventListener('click', function (e) {
        const btn = e.target.closest('.remove-variant-row');
        if (!btn) return;
        if (variantRows.children.length <= 1) return;
        btn.closest('.variant-row').remove();
    });

    // ✅ Sayı alanları (stok vb.) varsayılan bir değerle (ör. "0") dolu geliyor.
    // Kullanıcı tıklayıp temizlemeden direkt yazmaya başlarsa imleç konumuna göre
    // değer bozuluyor — örn. "5" yazmak isterken alanda "0" varsa "50" olarak
    // kaydediliyor. focusin ile (dinamik eklenen varyant satırlarını da kapsar)
    // odaklanınca içeriği otomatik seçili hale getiriyoruz.
    document.getElementById('productForm').addEventListener('focusin', function (e) {
        if (e.target.matches('input[type="number"]')) {
            e.target.select();
        }
    });

    syncSections();
})();
</script>
@endpush
@endsection