{% block content %}
{% include 'uretim/uretim_nawbar_bst.html' %}
<div class="container mt-4">
    <h2 class="mb-3">📌 Bugünün Formulleri</h2>

    {% if kategori_gruplari %}
        <div class="accordion" id="kategoriAccordion">
            {% for kategori, urunler in kategori_gruplari.items %}
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingKategori{{ forloop.counter }}">
                        <button class="accordion-button collapsed bg-dark text-white" type="button"
                                data-bs-toggle="collapse" data-bs-target="#collapseKategori{{ forloop.counter }}"
                                aria-expanded="false" aria-controls="collapseKategori{{ forloop.counter }}">
                            📂 {{ kategori|title }} Kategorisi
                        </button>
                    </h2>
                    <div id="collapseKategori{{ forloop.counter }}" class="accordion-collapse collapse"
                         aria-labelledby="headingKategori{{ forloop.counter }}" data-bs-parent="#kategoriAccordion">
                        <div class="accordion-body">
                            
                            <div class="accordion" id="urunAccordion{{ forloop.counter }}">
                                {% for resept, detay in urunler.items %}
                                    <div class="accordion-item resept" data-resept-id="{{ resept|slugify }}">
                                        <h2 class="accordion-header d-flex justify-content-between align-items-center" id="headingUrun{{ forloop.parentloop.counter }}-{{ forloop.counter }}">
                                            <button class="accordion-button collapsed bg-primary text-white" type="button"
                                                    data-bs-toggle="collapse" data-bs-target="#collapseUrun{{ forloop.parentloop.counter }}-{{ forloop.counter }}"
                                                    aria-expanded="false" aria-controls="collapseUrun{{ forloop.parentloop.counter }}-{{ forloop.counter }}">
                                                🍽️ {{ resept }} - 
                                                <span class="badge bg-light text-dark">{{ detay.miktar }} adet</span>
                                            </button>
                                            <button class="btn btn-warning btn-sm resept-toggle ms-2">✔</button>
                                        </h2>
                                        <div id="collapseUrun{{ forloop.parentloop.counter }}-{{ forloop.counter }}" 
                                             class="accordion-collapse collapse" 
                                             aria-labelledby="headingUrun{{ forloop.parentloop.counter }}-{{ forloop.counter }}" 
                                             data-bs-parent="#urunAccordion{{ forloop.parentloop.counter }}">
                                            <div class="accordion-body">
                                                <h5 class="text-secondary">İçerikler:</h5>
                                                {% if detay.icerikler %}
                                                    <ul class="list-group">
                                                        {% for icerik, bilgi in detay.icerikler.items %}
                                                            {% if bilgi.kategori not in blacklist_kategoriler and bilgi.gurup != 0 %}
                                                                <li class="list-group-item d-flex justify-content-between align-items-center hammadde
                                                                    {% if bilgi.gurup == 1 %}bg-info text-white
                                                                    {% elif bilgi.gurup == 2 %}text-dark
                                                                    {% elif bilgi.gurup == 3 %}text-dark
                                                                    {% elif bilgi.gurup == 4 %}text-dark
                                                                    {% elif bilgi.gurup == 5 %}text-dark
                                                                    {% else %}text-dark
                                                                    {% endif %}
                                                                " data-hammadde-id="{{ icerik|slugify }}">
                                                                    <div>
                                                                        <strong>{{ icerik }}</strong>: {{ bilgi.miktar|floatformat:2 }} gr
                                                                        <br>
                                                                        <small class="text-muted">
                                                                            🏷️ Kategori: {{ bilgi.kategori }} |
                                                                            🔧 Safha: {{ bilgi.uretim_safhasi|default:"Belirtilmemiş" }} |
                                                                            🔢 Grup: {{ bilgi.gurup }}
                                                                        </small>
                                                                    </div>
                                                                    <button class="btn btn-success btn-sm hammadde-toggle">✔</button>
                                                                </li>
                                                            {% endif %}
                                                        {% endfor %}

                                                        <!-- Grup Toplamları -->
                                                        {% for gurup_no, toplam_miktar in detay.gurup_toplamlari.items %}
                                                            {% if gurup_no != 0 %}
                                                                <li class="list-group-item text-end fw-bold 
                                                                    {% if gurup_no == 1 %}bg-info text-white
                                                                    {% elif gurup_no == 2 %}text-dark
                                                                    {% elif gurup_no == 3 %}text-dark
                                                                    {% elif gurup_no == 4 %}text-dark
                                                                    {% elif gurup_no == 5 %}text-dark
                                                                    {% else %}bg-light text-dark
                                                                    {% endif %}
                                                                ">
                                                                    ➕ Grup {{ gurup_no }} Toplam: {{ toplam_miktar|floatformat:2 }} gr
                                                                </li>
                                                            {% endif %}
                                                        {% endfor %}
                                                    </ul>
                                                {% else %}
                                                    <p class="text-muted">🚫 İçerik bilgisi bulunmamaktadır.</p>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>

                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="alert alert-warning text-center">
            ⚠️ Bugün için üretim formulu bulunamadı!.
        </div>
    {% endif %}
</div>

<!-- JavaScript: Tamamlama İşlemleri -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    function loadState() {
        let completedHammaddeler = JSON.parse(localStorage.getItem("completedHammaddeler")) || [];
        let completedReseptler = JSON.parse(localStorage.getItem("completedReseptler")) || [];

        document.querySelectorAll(".hammadde").forEach(item => {
            if (completedHammaddeler.includes(item.dataset.hammaddeId)) {
                item.classList.add("text-muted", "opacity-50");
            }
        });

        document.querySelectorAll(".resept").forEach(item => {
            if (completedReseptler.includes(item.dataset.reseptId)) {
                item.classList.add("text-muted", "opacity-50");
                item.querySelectorAll(".hammadde").forEach(h => h.classList.add("text-muted", "opacity-50"));
            }
        });
    }

    function saveState() {
        let completedHammaddeler = Array.from(document.querySelectorAll(".hammadde.text-muted")).map(item => item.dataset.hammaddeId);
        let completedReseptler = Array.from(document.querySelectorAll(".resept.text-muted")).map(item => item.dataset.reseptId);

        localStorage.setItem("completedHammaddeler", JSON.stringify(completedHammaddeler));
        localStorage.setItem("completedReseptler", JSON.stringify(completedReseptler));
    }

    document.querySelectorAll(".hammadde-toggle").forEach(button => {
        button.addEventListener("click", function() {
            let hammaddeItem = this.closest(".hammadde");
            hammaddeItem.classList.toggle("text-muted");
            hammaddeItem.classList.toggle("opacity-50");

            let parentResept = hammaddeItem.closest(".resept");
            let allHammaddeler = parentResept.querySelectorAll(".hammadde");
            let allCompleted = Array.from(allHammaddeler).every(h => h.classList.contains("text-muted"));

            if (allCompleted) {
                parentResept.classList.add("text-muted", "opacity-50");
            } else {
                parentResept.classList.remove("text-muted", "opacity-50");
            }

            saveState();
        });
    });

    document.querySelectorAll(".resept-toggle").forEach(button => {
        button.addEventListener("click", function() {
            let reseptItem = this.closest(".resept");
            reseptItem.classList.toggle("text-muted");
            reseptItem.classList.toggle("opacity-50");

            let hammaddeler = reseptItem.querySelectorAll(".hammadde");
            hammaddeler.forEach(h => {
                if (reseptItem.classList.contains("text-muted")) {
                    h.classList.add("text-muted", "opacity-50");
                } else {
                    h.classList.remove("text-muted", "opacity-50");
                }
            });

            saveState();
        });
    });

    loadState();
});
</script>
{% endblock %}