{% 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-12">
                            <label class="form-label fw-bold">Nama Toko</label>
                            <input type="text" name="name" value="{{ shop.name }}" class="form-control rounded-3 shadow-none" placeholder="Contoh: Dapur Sejahtera" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-bold">Deskripsi Toko</label>
                            <textarea name="description" class="form-control rounded-3 shadow-none" rows="4" placeholder="Ceritakan tentang toko Anda..." required>{{ shop.description }}</textarea>
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-bold">Nomor WhatsApp</label>
                            <input type="text" name="whatsapp_number" value="{{ shop.whatsapp_number }}" class="form-control rounded-3 shadow-none" placeholder="Contoh: 628123456789" required>
                            <small class="text-muted">Gunakan format internasional tanpa tanda plus (+). Contoh: 628123456789</small>
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-bold">Logo Toko (Opsional)</label>
                            {% if shop.logo %}
                            <div class="mb-2">
                                <img src="{{ shop.logo.url }}" class="rounded-3" style="height: 100px;">
                            </div>
                            {% endif %}
                            <input type="file" name="logo" class="form-control rounded-3 shadow-none">
                        </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 Toko
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
