{% extends 'base.html' %}

{% block title %}{{ title }} - Dashboard{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card border-0 rounded-4 shadow-sm p-4 p-md-5">
                <div class="d-flex align-items-center mb-4">
                    <a href="{% url 'dashboard' %}" class="btn btn-light rounded-circle me-3">
                        <i class="fa-solid fa-arrow-left"></i>
                    </a>
                    <h2 class="fw-bold mb-0">{{ title }}</h2>
                </div>

                <form method="POST" enctype="multipart/form-data">
                    {% csrf_token %}
                    
                    <div class="row g-4">
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Pilih Toko</label>
                            <select name="shop" class="form-select rounded-3 shadow-none" required>
                                {% for shop in shops %}
                                <option value="{{ shop.id }}" {% if product.shop.id == shop.id %}selected{% endif %}>{{ shop.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Kategori</label>
                            <select name="category" class="form-select rounded-3 shadow-none" required>
                                {% for cat in categories %}
                                <option value="{{ cat.id }}" {% if product.category.id == cat.id %}selected{% endif %}>{{ cat.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-bold">Nama Produk</label>
                            <input type="text" name="name" value="{{ product.name }}" class="form-control rounded-3 shadow-none" placeholder="Contoh: Kerupuk Jengkol Pedas" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-bold">Deskripsi</label>
                            <textarea name="description" class="form-control rounded-3 shadow-none" rows="4" placeholder="Jelaskan keunggulan produk Anda..." required>{{ product.description }}</textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Harga (Rp)</label>
                            <input type="number" name="price" value="{{ product.price|floatformat:0 }}" class="form-control rounded-3 shadow-none" placeholder="0" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Stok</label>
                            <input type="number" name="stock" value="{{ product.stock|default:0 }}" class="form-control rounded-3 shadow-none" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-bold">Foto Produk</label>
                            {% if product.image %}
                            <div class="mb-2">
                                <img src="{{ product.image.url }}" class="rounded-3" style="height: 100px;">
                            </div>
                            {% endif %}
                            <input type="file" name="image" class="form-control rounded-3 shadow-none">
                            <small class="text-muted">Kosongkan jika tidak ingin mengubah foto.</small>
                        </div>
                        <div class="col-12 pt-3">
                            <button type="submit" class="btn btn-orange btn-lg w-100 rounded-pill py-3">
                                <i class="fa-solid fa-save me-2"></i>Simpan Produk
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
