@extends('admin.layout')
@section('title', 'Editar Producto')
@section('page-title', 'Ürünü Düzenle')

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

        <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', $product->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', $product->slug) }}">
                    @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', $product->short_description) }}" maxlength="500">
                    @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', $product->description) }}</textarea>
                    @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                @if ($product->images->count() > 0)
                    <div class="mb-3">
                        <label class="form-label">Mevcut Görseller</label>
                        <div class="d-flex flex-wrap gap-2">
                            @foreach ($product->images as $image)
                                <div class="border rounded p-1 text-center" style="width:100px;">
                                    <img src="{{ asset($image->path) }}" alt="" style="width:90px;height:90px;object-fit:cover;border-radius:6px;">
                                    <div class="small mt-1">
                                        @if ($image->is_primary)
                                            <span class="badge bg-success">Kapak</span>
                                        @else
                                            <form action="{{ route('admin.products.images.primary', [$product, $image]) }}" method="POST" class="d-inline">
                                                @csrf
                                                <button type="submit" class="btn btn-link btn-sm p-0" title="Kapak yap"><i class="bi bi-star"></i></button>
                                            </form>
                                        @endif
                                        <form action="{{ route('admin.products.images.destroy', [$product, $image]) }}" method="POST" class="d-inline" onsubmit="return confirm('Bu görseli silmek istediğinizden emin misiniz?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-link btn-sm p-0 text-danger" title="Eliminar"><i class="bi bi-trash"></i></button>
                                        </form>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                <div class="mb-3">
                    <label for="images" class="form-label">Yeni Görsel Ekle</label>
                    <input type="file" class="form-control @error('images') is-invalid @enderror @error('images.*') is-invalid @enderror" id="images" name="images[]" accept="image/*" multiple>
                    @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', $product->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">
                        @foreach ($product->variants as $i => $variant)
                            <div class="border rounded p-2 variant-row">
                                <div class="row g-2 align-items-end">
                                    <input type="hidden" name="variants[{{ $i }}][id]" value="{{ $variant->id }}">
                                    <div class="col-md-3">
                                        <label class="form-label small mb-1">SKU</label>
                                        <input type="text" class="form-control form-control-sm" name="variants[{{ $i }}][sku]" value="{{ $variant->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" name="variants[{{ $i }}][size]" value="{{ $variant->options['size'] ?? '' }}">
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label small mb-1">Renk</label>
                                        <input type="text" class="form-control form-control-sm" name="variants[{{ $i }}][color]" value="{{ $variant->options['color'] ?? '' }}">
                                    </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" name="variants[{{ $i }}][price_override]" value="{{ $variant->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" name="variants[{{ $i }}][stock]" value="{{ $variant->stock }}">
                                    </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>
                        @endforeach
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-primary" id="addVariantRow">
                        <i class="bi bi-plus-circle"></i> Varyant Ekle
                    </button>
                    <div class="form-text text-muted mt-1">Kaldırılan, daha önce satışı yapılmamış varyantlar silinir; satışı olanlar otomatik pasife çekilir.</div>
                    @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', $product->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', $product->stock) }}" 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', $product->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', $product->base_price) }}" min="0" required>
                    @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', $product->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', $product->is_active ? '1' : '0') == '1' ? 'selected' : '' }}>Aktif</option>
                        <option value="0" {{ old('is_active', $product->is_active ? '1' : '0') == '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', $product->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', $product->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> Değişiklikleri Kaydet</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 = {{ $product->variants->count() }};

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

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