{% import "_modules/bsmacros.html.twig" as bs %}
{% import "bundles/TinyMCE/tinymce.html.twig" as tinymce %}
{% extends "baseadmin.html.twig" %}

{% block title %}Edit Product
{% endblock %}

{% block breadcrumb %}
{{ parent() }}
<li class="breadcrumb-item"><a href="{{ path("admin.catalog") }}" class="text-decoration-none">Catalog</a></li>
<li class="breadcrumb-item active">Modify Product</li>
{% endblock %}

{% block content %}
  <div class="d-sm-flex align-items-center justify-content-between mb-4">
      <h1 class="h3 mb-0 text-gray-800">Modify Product</h1>
  </div>


  {% include "admin/catalog/product/_editor.html.twig" with {'confirm': 'Edit'} %}
{% endblock %}

{% block scripts %}
	{{ parent() }}

  <script>
    function extractOperations() {
        const operations = {};
        
        document.querySelectorAll(".card-body[data-operations]").forEach(card => {
            const operationType = card.getAttribute("data-operations");
            if (!operations[operationType]) {
                operations[operationType] = [];
            }
            
            card.querySelectorAll("[data-operation-group]").forEach(group => {
                const operation = {};
                
                group.querySelectorAll("[data-operation-field]").forEach(field => {
                    if (field.tagName === "SELECT" || field.tagName === "INPUT") {
                        operation[field.getAttribute("data-operation-field")] = field.value;
                    }
                });
                
                operations[operationType].push(operation);
            });
        });
        
        return operations;
    }

    function addOperation(operationListName) {
        let card = document.querySelector(`.card-body[data-operations="${operationListName}"]`);
        if (!card) return;

        let group = document.createElement("div");
        group.classList.add("input-group");
        group.setAttribute("data-operation-group", "");
        
        let when = document.createElement("select");
        when.classList.add("form-select");
        when.setAttribute("data-operation-field", "when");
        when.innerHTML = `<option value="immediate">Immediately</option><option value="login">Player Logs In</option>`;
        
        let method = document.createElement("select");
        method.classList.add("form-select");
        method.setAttribute("data-operation-field", "method");
        method.innerHTML = `<option value="lua">Lua</option><option value="command">Command</option>`;
        
        let command = document.createElement("input");
        command.type = "text";
        command.classList.add("form-control");
        command.setAttribute("data-operation-field", "command");
        
        let deleteButton = document.createElement("button");
        deleteButton.type = "button";
        deleteButton.classList.add("btn", "btn-danger");
        deleteButton.setAttribute("data-operation-destruction", "");
        deleteButton.innerHTML = `<i class="fas fa-xmark px-1"></i>`;
        deleteButton.addEventListener("click", () => {
            group.remove()
        });
        
        group.appendChild(when);
        group.appendChild(method);
        group.appendChild(command);
        group.appendChild(deleteButton);
        
        card.appendChild(group);
    }

    var addOperationButtons = document.querySelectorAll("[data-operation-add]");
    addOperationButtons.forEach(button => {
        button.addEventListener("click", () => addOperation(button.getAttribute("data-operation-add")));
    });

    function populateOperations(data) {
        Object.keys(data).forEach(operationType => {
            const card = document.querySelector(`.card-body[data-operations="${operationType}"]`);
            if (!card) return;
            
            data[operationType].forEach(operation => {
                const group = document.createElement("div");
                group.classList.add("input-group");
                group.setAttribute("data-operation-group", "");
                
                Object.keys(operation).forEach(field => {
                    let inputElement;
                    if (field === "method" || field === "when") {
                        inputElement = document.createElement("select");
                        inputElement.classList.add("form-select");
                        inputElement.setAttribute("data-operation-field", field);
                        if (field === "method") {
                            inputElement.innerHTML = `<option value="lua">Lua</option><option value="command">Command</option>`;
                        } else {
                            inputElement.innerHTML = `<option value="immediate">Immediately</option><option value="login">Player Logs In</option>`;
                        }
                    } else {
                        inputElement = document.createElement("input");
                        inputElement.type = "text";
                        inputElement.classList.add("form-control");
                        inputElement.setAttribute("data-operation-field", field);
                    }
                    inputElement.value = operation[field];
                    group.appendChild(inputElement);
                });
                
                const deleteButton = document.createElement("button");
                deleteButton.type = "button";
                deleteButton.classList.add("btn", "btn-danger");
                deleteButton.setAttribute("data-operation-destruction", "");
                deleteButton.innerHTML = `<i class="fas fa-xmark"></i>`;
                deleteButton.addEventListener("click", () => {
                    group.remove()
                })
                
                group.appendChild(deleteButton);
                
                card.appendChild(group);
            });
        });
    }

    populateOperations({{ product.operations | json_encode()|raw }});

    const convertForm = form => Object.fromEntries(new FormData(form).entries());

    var form = document.querySelector("form#productForm");

    var productimage = document.querySelector("input#productimage");
    productimage.addEventListener("change", () => {
        var formData = new FormData(form);
        fetch("{{ path('admin_action.services.uploader.product_image') }}", {
            method: "POST",
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.querySelector("input#image").value = data.url;
            }
        });
    });

    form.addEventListener("submit", (ev) => {
        ev.preventDefault();
        
        const data = convertForm(form);
        data.operations = extractOperations();
        data.price = parseFloat(data.price) * 100;
        data.description = tinymce.get("description").getContent();

        fetch("{{ path('admin_action.catalog.product.edit', {"id": product.id}) }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(data)
        })

        .then(response => response.json())
        .then(data => {
            if (data.success) {
                window.location.href = "{{ path('admin.catalog') }}";
            } else {
                window.location.reload()
            }
        });
    });
  </script>

	{{ tinymce.init() }}
{% endblock %}