{% extends "admin/layout.html" %}

{% block title %}{{ 'Edit Produk' if product else 'Tambah Produk' }} | Admin Albab Store{% endblock %}
{% block topbar_title %}{{ 'Edit Produk' if product else 'Tambah Produk' }}{% endblock %}

{% block content %}

<div class="admin-card">
    <div class="admin-card-head">
        <h2>{{ 'Edit: ' + product.name if product else 'Form Tambah Website' }}</h2>
    </div>

    <form method="POST"
          action="{{ url_for('admin_product_edit', product_id=product.id) if product else url_for('admin_product_add') }}"
          enctype="multipart/form-data"
          class="admin-form">

        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

        <div class="form-grid-2">
            <div class="form-group">
                <label for="name">Nama Website <span class="req">*</span></label>
                <input type="text" id="name" name="name" required
                       value="{{ product.name if product else '' }}"
                       placeholder="Contoh: Website Pondok">
            </div>

            <div class="form-group">
                <label for="category_id">Kategori <span class="req">*</span></label>
                <select id="category_id" name="category_id" required>
                    <option value="">— Pilih Kategori —</option>
                    {% for category in categories %}
                        <option value="{{ category.id }}"
                                {% if product and product.category_id == category.id %}selected{% endif %}>
                            {{ category.name }}
                        </option>
                    {% endfor %}
                </select>
            </div>

            <div class="form-group">
                <label for="slug">Slug (URL) <span class="optional">(kosongkan = otomatis)</span></label>
                <input type="text" id="slug" name="slug"
                       value="{{ product.slug if product else '' }}"
                       placeholder="website-pondok">
            </div>

            <div class="form-group">
                <label for="price">Harga (Rp) <span class="req">*</span></label>
                <input type="number" id="price" name="price" min="0" step="1000" required
                       value="{{ product.price if product else '' }}"
                       placeholder="Contoh: 750000">
                <small class="form-hint">Angka tanpa titik, contoh: 750000 = Rp750.000</small>
            </div>

            <div class="form-group">
                <label for="demo_slug">Slug Demo</label>
                <select id="demo_slug" name="demo_slug">
                    <option value="">— Tanpa demo —</option>
                    {% for slug in demo_slugs %}
                        <option value="{{ slug }}"
                                {% if product and product.demo_slug == slug %}selected{% endif %}>
                            /demo/{{ slug }}
                        </option>
                    {% endfor %}
                </select>
            </div>

            <div class="form-group">
                <label for="status">Status</label>
                <select id="status" name="status">
                    <option value="active" {% if product and product.status == 'active' %}selected{% endif %}>Aktif (tampil di katalog)</option>
                    <option value="inactive" {% if product and product.status == 'inactive' %}selected{% endif %}>Nonaktif (disembunyikan)</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label for="description">Deskripsi</label>
            <textarea id="description" name="description" rows="4"
                      placeholder="Jelaskan website ini...">{{ product.description if product else '' }}</textarea>
        </div>

        <div class="form-group">
            <label for="technology">Teknologi <span class="optional">(pisahkan dengan koma)</span></label>
            <input type="text" id="technology" name="technology"
                   value="{{ product.technology if product else '' }}"
                   placeholder="HTML, CSS, JavaScript, Flask">
        </div>

        <div class="form-grid-2">
            <div class="form-group">
                <label for="thumbnail_url">URL Gambar <span class="optional">(opsional)</span></label>
                <input type="text" id="thumbnail_url" name="thumbnail_url"
                       value="{{ product.thumbnail if product and product.thumbnail.startswith('http') else '' }}"
                       placeholder="https://.../gambar.jpg">
                <small class="form-hint">Atau unggah file gambar di samping. JPG/JPEG/PNG/WEBP, maks. 2 MB.</small>
            </div>

            <div class="form-group">
                <label for="thumbnail_file">Upload Gambar <span class="optional">(opsional)</span></label>
                <input type="file" id="thumbnail_file" name="thumbnail_file" accept=".jpg,.jpeg,.png,.webp">
                <img id="thumbPreview" class="thumb-preview" alt="Pratinjau gambar" hidden>
            </div>
        </div>

        <div class="form-group">
            <label for="features">Fitur Website <span class="optional">(satu fitur per baris)</span></label>
            <textarea id="features" name="features" rows="6"
                      placeholder="Halaman profil &amp; sejarah&#10;Galeri foto&#10;Tombol WhatsApp">{{ features|join('\n') if features else '' }}</textarea>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary">💾 {{ 'Simpan Perubahan' if product else 'Tambah Produk' }}</button>
            <a class="btn btn-outline" href="{{ url_for('admin_products') }}">Batal</a>
        </div>
    </form>
</div>

{% endblock %}