<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h4>{{ if .IsEdit }}Ürünü Düzenle{{ else }}Yeni Ürün{{ end }}</h4>
                    <form
                        action="{{ if .IsEdit }}/admin/products/{{ .Product.ID }}/update{{ else }}/admin/products/create{{ end }}"
                        method="POST" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label class="form-label">Başlık</label>
                            <input type="text" name="title" class="form-control"
                                value="{{ if .IsEdit }}{{ .Product.Title }}{{ end }}" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Slug</label>
                            <input type="text" name="slug" class="form-control"
                                value="{{ if .IsEdit }}{{ .Product.Slug }}{{ end }}"
                                placeholder="Boş bırakılırsa başlıktan otomatik oluşturulur">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">İçerik</label>
                            <textarea id="contentInput" name="content" rows="8"
                                class="form-control d-none">{{ if .IsEdit }}{{ .Product.Content }}{{ end }}</textarea>
                            <div id="quillEditor" style="min-height:300px;border:1px solid #ddd;border-radius:4px;">
                                <!-- initial content will be loaded from the hidden textarea by JS -->
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Kategoriler (Ctrl/Tık birden çok seçim)</label>
                            <select name="categories" class="form-select" multiple>
                                {{ range .Categories }}
                                <option value="{{ .ID }}" {{ if $.IsEdit }}{{ range $.Product.Categories }}{{ if eq .ID
                                    $.ID }}selected{{ end }}{{ end }}{{ end }}>{{ .Title }}</option>
                                {{ end }}
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Etiketler (Ctrl/Tık birden çok seçim)</label>
                            <select name="tags" class="form-select" multiple>
                                {{ range .Tags }}
                                <option value="{{ .ID }}" {{ if $.IsEdit }}{{ range $.Product.Tags }}{{ if eq .ID $.ID
                                    }}selected{{ end }}{{ end }}{{ end }}>{{ .Name }}</option>
                                {{ end }}
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Ana Görsel (Tek dosya)</label>
                            <input type="file" name="image" class="form-control" accept="image/*">
                            <div class="mt-2">
                                <img id="imagePreview" src="" alt="preview" class="rounded"
                                    style="display:none;width:150px;height:150px;object-fit:cover;border:1px solid #ddd;">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Fiyat</label>
                            <input type="number" step="0.01" name="price" class="form-control"
                                value="{{ if .IsEdit }}{{ .Product.Price }}{{ else }}0.00{{ end }}" required>
                        </div>
                        <div class="row g-2 mb-3">
                            <div class="col-3">
                                <label class="form-label">Genişlik</label>
                                <input type="number" name="width" class="form-control"
                                    value="{{ if .IsEdit }}{{ .Product.Width }}{{ end }}" placeholder="Örn: 800">
                            </div>
                            <div class="col-3">
                                <label class="form-label">Yükseklik</label>
                                <input type="number" name="height" class="form-control"
                                    value="{{ if .IsEdit }}{{ .Product.Height }}{{ end }}" placeholder="Örn: 600">
                            </div>
                            <div class="col-3">
                                <label class="form-label">Kalite</label>
                                <input type="number" name="quality" class="form-control"
                                    value="{{ if .IsEdit }}{{ .Product.Quality }}{{ else }}80{{ end }}">
                            </div>
                            <div class="col-3">
                                <label class="form-label">Format</label>
                                <select name="format" class="form-select">
                                    <option value="avif" {{ if .IsEdit }}{{ if eq .Product.Format "avif" }}selected{{
                                        end }}{{ end }}>AVIF</option>
                                    <option value="webp" {{ if .IsEdit }}{{ if eq .Product.Format "webp" }}selected{{
                                        end }}{{ end }}>WebP</option>
                                    <option value="jpg" {{ if .IsEdit }}{{ if eq .Product.Format "jpg" }}selected{{ end
                                        }}{{ end }}>JPG</option>
                                    <option value="png" {{ if .IsEdit }}{{ if eq .Product.Format "png" }}selected{{ end
                                        }}{{ end }}>PNG</option>
                                </select>
                            </div>
                        </div>

                        <div class="mt-4 d-flex gap-2">
                            <button type="submit" class="btn btn-primary">{{ if .IsEdit }}Güncelle{{ else }}Oluştur{{
                                end }}</button>
                            <a href="/admin/content/products" class="btn btn-outline-secondary"
                                hx-get="/admin/content/products" hx-target="#main-content" hx-push-url="true">İptal</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow-sm mb-3">
                <div class="card-body">
                    <h6>Mevcut Ana Görsel</h6>
                    {{ if .IsEdit }}
                    {{ if .FirstImage }}
                    <div class="mb-2">
                        <img src="{{ .FirstImage }}" class="img-fluid rounded" alt="Mevcut Görsel">
                    </div>
                    {{ else }}
                    <div class="text-muted small">Henüz görsel yüklenmedi.</div>
                    {{ end }}
                    {{ else }}
                    <div class="text-muted small">Yeni ürün için henüz görsel yok.</div>
                    {{ end }}
                </div>
            </div>
            <div class="card shadow-sm">
                <div class="card-body">
                    <h6>Bilgi</h6>
                    <p class="small text-muted mb-0">Ürün eklerken Kategori ve Etiket seçimi yapabilirsiniz.
                        Seçeneklerin dolu olması için ilgili menülerden kategori ve etiket verisi girmeyi unutmayın.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const fileInput = document.querySelector('input[name="image"]');
        const preview = document.getElementById('imagePreview');
        // show existing image if provided by controller but not rendered inline above
        const firstImage = '{{ .FirstImage }}';
        if (firstImage && firstImage !== '') {
            preview.src = firstImage;
            preview.style.display = 'block';
        }
        if (fileInput) {
            fileInput.addEventListener('change', function (e) {
                const f = this.files && this.files[0];
                if (!f) return;
                const reader = new FileReader();
                reader.onload = function (ev) {
                    preview.src = ev.target.result;
                    preview.style.display = 'block';
                }
                reader.readAsDataURL(f);
            });
        }
    });
</script>

<!-- Quill: load local CSS and JS; initialize editor and sync to textarea on submit -->
<link href="/assets/quill/dist/quill.snow.css" rel="stylesheet">
<script src="/assets/quill/dist/quill.js"></script>
<script>
    (function initQuill() {
        try {
            var textarea = document.getElementById('contentInput');
            var editorContainer = document.getElementById('quillEditor');
            if (!editorContainer) return;
            if (editorContainer.__quillInitialized) return;
            var quill = new Quill(editorContainer, {
                theme: 'snow',
                modules: {
                    toolbar: {
                        container: [['bold', 'italic', 'underline'], [{ 'list': 'ordered' }, { 'list': 'bullet' }], ['link', 'image'], ['code-block'], ['clean']],
                        handlers: {
                            image: function () {
                                try { window.showImageModal(quill); } catch (e) { console.error('open image modal failed', e); }
                            }
                        }
                    }
                }
            });
            editorContainer.__quillInitialized = true;
            if (textarea && textarea.value && textarea.value.trim() !== '') {
                quill.clipboard.dangerouslyPasteHTML(textarea.value);
            }
            var form = textarea && textarea.form;
            if (form) {
                form.addEventListener('submit', function (e) {
                    textarea.value = quill.root.innerHTML;
                });
            }
        } catch (err) {
            console.error('Quill init error:', err);
        }
    })();
</script>