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

{% block title %}Edit Category{% 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">Edit Category</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">Edit Category</h1>
    </div>

    {# exit button with keystroke of Escape #}
    <div class="d-flex w-100 justify-content-between mb-3">
        <a href="{{ path('admin.catalog') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-1"></i>
            Discard Changes
        </a>
        <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal" id="deleteButton">
          <i class="fas fa-trash me-1"></i>
          Delete
        </button>

    </div>
    <div class="d-flex w-100 justify-content-between mb-3">
        <div class="d-flex flex-column justify-content-center me-3">
            <i class="fas fa-layer-group"></i>
        </div>
        <div class="d-flex flex-column justify-content-center me-auto">
            <small class="text-muted">Category</small>
            <h5 class="mb-0">{{ category.name }}</h5>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            {% for label, messages in app.flashes %}
                {% for message in messages %}
                    <div class="alert alert-{{ label }}">
                        {{ message }}
                    </div>
                {% endfor %}
            {% endfor %}

            <form method="post" class="m-0">
                <div class="form-group mb-3">
                    <label for="name">Name</label>
                    <input type="text" id="name" name="name" class="form-control" required value="{{ category.name }}">
                </div>
                <div class="form-group mb-3">
                    <label for="description">Description</label>
                    <textarea id="description" name="description" class="form-control" required>{{ category.description }}</textarea>
                </div>

                <div class="form-group mb-3">
                    <label for="formation">Formation</label>
                    <select id="formation" name="formation" class="form-control">
                        {% set formations = ["list", "grid"] %}
                        {% for formation in formations %}
                            <option
                                value="{{ formation }}"
                                {% if category.formation == formation %}selected{% endif %}
                            >{{ formation }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="form-group mb-3">
                    <label for="game">Game</label>
                    <select id="game" name="game" class="form-control">
                        {% for game in games %}
                            <option
                                value="{{ game.id }}"
                                {% if category.game.id == game.id %}selected{% endif %}
                            >{{ game.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="form-group mb-3">
                </div>

                <button type="submit" class="btn btn-primary"><i class="fas fa-pencil me-2"></i> Edit</button>
            </form>
        </div>
    </div>

    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Delete Category</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div>
                        Are you sure you want to delete this category? This action cannot be undone.
                    </div>
                    {% if category.products|length == 0 %}
                        <div class="text-warning mt-2">
                            <small>
                                Orphan products will automatically be deleted from the database aswell.
                            </small>
                        </div>
                    {% endif %}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <a id="deleteConfirmation" class="btn btn-danger">Delete</a>
                </div>

                <script>
                    document.querySelector("#deleteConfirmation").addEventListener("click", () => {
                        const url = `{{ path('admin_action.catalog.category.delete', {id: category.id}) }}`;
                        
                        fetch(url, { method: 'DELETE' }).then(response => {
                            if (!response.ok) {
                                throw new Error('Failed to delete category');
                            }
                            return response.json();
                        })
                        .then(() => {
                            window.location.href = `{{ path("admin.catalog") }}`;
                        })
                        .catch(error => {
                            console.error('Error:', error);
                        });
                    });
                </script>
            </div>
        </div>
    </div>

    <script>
    Keystrokes.register(["Enter"], () => {
        document.querySelector("form").submit();
    });

    Keystrokes.register(["Escape"], () => {
        window.location.href = "{{ path('admin.catalog') }}";
    });

    Keystrokes.register(["Control", "Backspace"], () => {
        document.querySelector("#deleteButton").click();
    })

    </script>
{% endblock %}