{% extends 'base.html' %}
{% block title %}Home Page Content — Admin{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 800px;">
        <div class="admin-header-row">
            <div>
                <span class="section-kicker">Admin Portal</span>
                <h1>Home Page Content</h1>
            </div>
            <a href="{% url 'accounts:admin_portal' %}" class="btn-small">&larr; Back to portal</a>
        </div>

        <div class="contact-form-wrap" style="max-width: 600px; margin-bottom: 30px;">
            <h3 style="margin-bottom: 6px;">Homepage Hero Banner</h3>
            <p style="color: var(--muted); font-size: 0.85rem; margin-bottom: 10px;">
                The large background image at the very top of the homepage. Leave unset to keep the default image.
            </p>
            <form method="post" enctype="multipart/form-data" class="contact-form">
                {% csrf_token %}
                <input type="hidden" name="hero_image_save" value="1">

                <label for="hero_image">Hero image</label>
                {% if hero_image_url %}<p style="font-size: 0.82rem; color: var(--muted);">Current: <a href="{{ hero_image_url }}" target="_blank">view image</a></p>{% endif %}
                <input type="file" id="hero_image" name="hero_image" accept="image/*">

                <button type="submit" class="btn-cta">Save</button>
            </form>
        </div>

        <div class="contact-form-wrap" style="max-width: 600px; margin-bottom: 30px;">
            <h3 style="margin-bottom: 6px;">Homepage Headline & Labels</h3>
            <p style="color: var(--muted); font-size: 0.85rem; margin-bottom: 10px;">
                Every static text on the homepage — leave any field blank to keep the built-in default wording.
            </p>
            <form method="post" class="contact-form">
                {% csrf_token %}
                <input type="hidden" name="home_text_save" value="1">

                <label for="hero_title_line1">Hero headline — line 1</label>
                <input type="text" id="hero_title_line1" name="hero_title_line1" value="{{ home_text.hero_title_line1|default:'' }}">

                <label for="hero_title_line2">Hero headline — line 2</label>
                <input type="text" id="hero_title_line2" name="hero_title_line2" value="{{ home_text.hero_title_line2|default:'' }}">

                <label for="hero_title_line3">Hero headline — line 3 (shown in accent green)</label>
                <input type="text" id="hero_title_line3" name="hero_title_line3" value="{{ home_text.hero_title_line3|default:'' }}">

                <label for="home_plan_label">"Plan" tile label</label>
                <input type="text" id="home_plan_label" name="home_plan_label" value="{{ home_text.home_plan_label|default:'' }}">

                <label for="home_order_label">"Order" tile label</label>
                <input type="text" id="home_order_label" name="home_order_label" value="{{ home_text.home_order_label|default:'' }}">

                <label for="home_market_pill">Market tile pill text</label>
                <input type="text" id="home_market_pill" name="home_market_pill" value="{{ home_text.home_market_pill|default:'' }}">

                <label for="home_news_heading">News section heading</label>
                <input type="text" id="home_news_heading" name="home_news_heading" value="{{ home_text.home_news_heading|default:'' }}">

                <button type="submit" class="btn-cta">Save</button>
            </form>
        </div>

        <div class="contact-form-wrap" style="max-width: 600px; margin-bottom: 30px;">
            <h3 style="margin-bottom: 6px;">"How It Works" Section</h3>
            <p style="color: var(--muted); font-size: 0.85rem; margin-bottom: 10px;">
                Shown on the homepage. A video takes priority if set; otherwise the image is used. Leave both
                blank to hide the media entirely — title/description alone will still show if set.
            </p>
            <form method="post" enctype="multipart/form-data" class="contact-form">
                {% csrf_token %}
                <input type="hidden" name="how_to_save" value="1">

                <label for="how_to_title">Title</label>
                <input type="text" id="how_to_title" name="how_to_title" value="{{ how_to.how_to_title|default:'' }}" placeholder="e.g. How PickkerMarket works">

                <label for="how_to_description">Description</label>
                <textarea id="how_to_description" name="how_to_description" rows="3" placeholder="A short explanation for customers…">{{ how_to.how_to_description|default:'' }}</textarea>

                <label for="video_url">Video URL (optional)</label>
                <input type="url" id="video_url" name="video_url" value="{{ how_to.how_to_video_url|default:'' }}" placeholder="https://www.youtube.com/watch?v=...">

                <label for="image">Image (optional — used only if no video URL is set)</label>
                {% if how_to.how_to_image_url %}<p style="font-size: 0.82rem; color: var(--muted);">Current: <a href="{{ how_to.how_to_image_url }}" target="_blank">view image</a></p>{% endif %}
                <input type="file" id="image" name="image" accept="image/*">

                <label for="thumbnail">Thumbnail / poster (optional — shown before a video plays)</label>
                {% if how_to.how_to_thumbnail_url %}<p style="font-size: 0.82rem; color: var(--muted);">Current: <a href="{{ how_to.how_to_thumbnail_url }}" target="_blank">view thumbnail</a></p>{% endif %}
                <input type="file" id="thumbnail" name="thumbnail" accept="image/*">

                <button type="submit" class="btn-cta">Save</button>
            </form>
        </div>

        <div class="contact-form-wrap" style="max-width: 600px; margin-bottom: 30px;">
            <h3 style="margin-bottom: 6px;">Partners & Clients Section</h3>
            <p style="color: var(--muted); font-size: 0.85rem; margin-bottom: 10px;">
                Heading shown above the partner/client logo strip on the homepage. The section itself is hidden
                automatically whenever there are no active partners below.
            </p>
            <form method="post" class="contact-form">
                {% csrf_token %}
                <input type="hidden" name="partners_heading_save" value="1">

                <label for="partners_heading">Heading</label>
                <input type="text" id="partners_heading" name="partners_heading" value="{{ partners_heading.partners_heading|default:'' }}" placeholder="e.g. Our Partners & Clients">

                <label for="partners_subheading">Subheading (optional)</label>
                <input type="text" id="partners_subheading" name="partners_subheading" value="{{ partners_heading.partners_subheading|default:'' }}" placeholder="A short line under the heading…">

                <button type="submit" class="btn-cta">Save Heading</button>
            </form>
        </div>

        <div class="contact-form-wrap" style="max-width: 600px; margin-bottom: 30px;">
            <h3 style="margin-bottom: 6px;">Add Partner / Client Logo</h3>
            <form method="post" enctype="multipart/form-data" class="contact-form">
                {% csrf_token %}
                <label for="partner_name">Name</label>
                <input type="text" id="partner_name" name="partner_name" placeholder="e.g. Clanert Sustain" required>

                <label for="partner_logo">Logo image</label>
                <input type="file" id="partner_logo" name="partner_logo" accept="image/*" required>

                <label for="partner_website">Website URL (optional — makes the logo clickable)</label>
                <input type="url" id="partner_website" name="partner_website" placeholder="https://...">

                <button type="submit" class="btn-cta">Add Partner</button>
            </form>
        </div>

        <h3 style="margin-bottom: 12px;">Partners & Clients</h3>
        {% for partner in partners %}
        <div class="order-card">
            <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;">
                <div style="display: flex; align-items: center; gap: 12px;">
                    <img src="{{ partner.logo_url }}" alt="{{ partner.name }}" style="max-height: 40px; max-width: 120px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px;">
                    <div>
                        {% if not partner.is_active %}<span class="surface-badge warn">Hidden</span>{% endif %}
                        <h4 style="margin: 4px 0 2px;">{{ partner.name }}</h4>
                        {% if partner.website_url %}<p style="font-size: 0.8rem; color: var(--muted);">{{ partner.website_url }}</p>{% endif %}
                    </div>
                </div>
                <div style="display: flex; gap: 8px; flex-shrink: 0;">
                    <button type="button" class="btn-small news-edit-toggle" data-target="edit-partner-{{ partner.id }}">Edit</button>
                    <form method="post" action="{% url 'accounts:admin_toggle_partner' partner.id %}">
                        {% csrf_token %}
                        <button type="submit" class="btn-small" style="background: var(--muted);">{% if partner.is_active %}Hide{% else %}Show{% endif %}</button>
                    </form>
                    <form method="post" action="{% url 'accounts:admin_delete_partner' partner.id %}" onsubmit="return confirm('Delete this partner? This cannot be undone.');">
                        {% csrf_token %}
                        <button type="submit" class="btn-small" style="background: var(--muted);">Delete</button>
                    </form>
                </div>
            </div>

            <form method="post" action="{% url 'accounts:admin_edit_partner' partner.id %}" enctype="multipart/form-data" id="edit-partner-{{ partner.id }}" class="contact-form" style="display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);">
                {% csrf_token %}
                <label for="partner_name-{{ partner.id }}">Name</label>
                <input type="text" id="partner_name-{{ partner.id }}" name="partner_name" value="{{ partner.name }}" required>

                <label for="partner_website-{{ partner.id }}">Website URL</label>
                <input type="url" id="partner_website-{{ partner.id }}" name="partner_website" value="{{ partner.website_url }}">

                <label for="partner_logo-{{ partner.id }}">Replace logo (optional)</label>
                <input type="file" id="partner_logo-{{ partner.id }}" name="partner_logo" accept="image/*">

                <button type="submit" class="btn-cta">Save Changes</button>
            </form>
        </div>
        {% empty %}
        <p style="color: var(--muted);">No partners yet — add your first one above.</p>
        {% endfor %}

        <div class="contact-form-wrap" style="max-width: 600px; margin-bottom: 30px;">
            <h3 style="margin-bottom: 6px;">Add News / Announcement</h3>
            <form method="post" enctype="multipart/form-data" class="contact-form">
                {% csrf_token %}
                <label for="news_title">Title</label>
                <input type="text" id="news_title" name="news_title" placeholder="e.g. Now delivering in Kigamboni!" required>

                <label for="news_body">Details (optional)</label>
                <textarea id="news_body" name="news_body" rows="3" placeholder="More details for customers…"></textarea>

                <label for="news_image">Image (optional)</label>
                <input type="file" id="news_image" name="news_image" accept="image/*">

                <button type="submit" class="btn-cta">Add News Item</button>
            </form>
        </div>

        <h3 style="margin-bottom: 12px;">News Items</h3>
        {% for item in news_items %}
        <div class="order-card">
            <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 14px;">
                <div style="display: flex; gap: 12px; align-items: flex-start;">
                    {% if item.image_url %}
                    <img src="{{ item.image_url }}" alt="{{ item.title }}" style="width: 80px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0;">
                    {% endif %}
                    <div>
                        {% if not item.is_active %}<span class="surface-badge warn">Hidden</span>{% endif %}
                        <h4 style="margin: 8px 0 2px;">{{ item.title }}</h4>
                        {% if item.body %}<p style="font-size: 0.9rem; color: var(--muted);">{{ item.body|linebreaksbr }}</p>{% endif %}
                        <p style="font-size: 0.8rem; color: var(--muted); margin-top: 4px;">{{ item.created_at|slice:":10" }}</p>
                    </div>
                </div>
                <div style="display: flex; gap: 8px; flex-shrink: 0;">
                    <button type="button" class="btn-small news-edit-toggle" data-target="edit-news-{{ item.id }}">Edit</button>
                    <form method="post" action="{% url 'accounts:admin_toggle_news' item.id %}">
                        {% csrf_token %}
                        <button type="submit" class="btn-small" style="background: var(--muted);">{% if item.is_active %}Hide{% else %}Show{% endif %}</button>
                    </form>
                    <form method="post" action="{% url 'accounts:admin_delete_news' item.id %}" onsubmit="return confirm('Delete this news item? This cannot be undone.');">
                        {% csrf_token %}
                        <button type="submit" class="btn-small" style="background: var(--muted);">Delete</button>
                    </form>
                </div>
            </div>

            <form method="post" action="{% url 'accounts:admin_edit_news' item.id %}" enctype="multipart/form-data" id="edit-news-{{ item.id }}" class="contact-form" style="display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);">
                {% csrf_token %}
                <label for="news_title-{{ item.id }}">Title</label>
                <input type="text" id="news_title-{{ item.id }}" name="news_title" value="{{ item.title }}" required>

                <label for="news_body-{{ item.id }}">Details</label>
                <textarea id="news_body-{{ item.id }}" name="news_body" rows="3">{{ item.body }}</textarea>

                <label for="news_image-{{ item.id }}">Replace image (optional)</label>
                <input type="file" id="news_image-{{ item.id }}" name="news_image" accept="image/*">

                <button type="submit" class="btn-cta">Save Changes</button>
            </form>
        </div>
        {% empty %}
        <p style="color: var(--muted);">No news items yet — add your first one above.</p>
        {% endfor %}
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.news-edit-toggle').forEach(function (btn) {
            btn.addEventListener('click', function () {
                var form = document.getElementById(btn.getAttribute('data-target'));
                if (!form) return;
                var isOpen = form.style.display !== 'none';
                form.style.display = isOpen ? 'none' : 'flex';
                btn.textContent = isOpen ? 'Edit' : 'Cancel';
            });
        });
    });
</script>
{% endblock %}