{% extends 'layouts/app.html.twig' %}

{% block title %}Projekty | Luminous{% endblock %}

{% block app_content %}
    {% include 'partials/_flash_messages.html.twig' %}

    <section class="page-head catalog-page-head">
        <div>
            <p class="page-head__eyebrow">Katalog</p>
            <h1 class="page-head__title">Projekty</h1>
            <p class="page-head__subtitle">Zarządzaj kampaniami i produktami Print On Demand.</p>
        </div>

        <div class="page-head__actions">
            <button type="button" class="button button--primary" data-modal-open="project-create-modal">
                <span class="ui-icon" aria-hidden="true">add</span>
                Nowy projekt
            </button>
        </div>
    </section>

    <section class="panel panel--catalog">
        {% include 'project/_catalog_filters.html.twig' with {
            filters: filters,
            product_types: product_types,
            platforms: platforms,
            statuses: statuses,
            per_page: per_page,
            per_page_options: per_page_options
        } %}

        <div class="project-bulk-toolbar" data-project-bulk-toolbar>
            <form
                id="project-bulk-status-form"
                class="project-bulk-toolbar__form"
                method="post"
                action="{{ path('app_projects_bulk_status_update', query_params) }}"
                data-turbo="false"
                data-project-bulk-form
            >
                <input type="hidden" name="_token" value="{{ csrf_token('projects_bulk_status_update') }}">

                <div class="project-bulk-toolbar__summary">
                    <span class="ui-icon" aria-hidden="true">checklist</span>
                    <strong data-project-selected-count>0</strong>
                    <span>zaznaczonych projektów</span>
                </div>

                <label class="project-bulk-toolbar__status">
                    <span>Zmień status na</span>
                    <select name="status_id" class="form-control form-control--small" required>
                        <option value="">Wybierz status...</option>
                        {% for status in statuses %}
                            <option value="{{ status.id }}">{{ status.name }}</option>
                        {% endfor %}
                    </select>
                </label>

                <button type="submit" class="button button--primary" data-project-bulk-submit>
                    <span class="ui-icon" aria-hidden="true">published_with_changes</span>
                    Zmień status zaznaczonych
                </button>
            </form>
        </div>

        {% include 'project/_catalog_table.html.twig' with {
            projects: projects,
            query_params: query_params
        } %}

        {% include 'partials/_pagination.html.twig' with {
            page: page,
            total_pages: total_pages,
            total_items: total_items,
            per_page: per_page,
            query_params: query_params
        } %}
    </section>

    {% include 'project/_create_modal.html.twig' with {
        project_form: project_form,
        query_params: query_params
    } %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        (function () {
            const openModal = function (modal) {
                if (!modal) {
                    return;
                }

                modal.classList.add('is-open');
                modal.setAttribute('aria-hidden', 'false');
                document.body.classList.add('modal-open');

                const firstInput = modal.querySelector('input:not([type="hidden"]), select, textarea, button');
                if (firstInput) {
                    window.setTimeout(function () { firstInput.focus(); }, 80);
                }
            };

            const closeModal = function (modal) {
                if (!modal) {
                    return;
                }

                modal.classList.remove('is-open');
                modal.setAttribute('aria-hidden', 'true');
                document.body.classList.remove('modal-open');
            };

            document.querySelectorAll('[data-modal-open]').forEach(function (trigger) {
                trigger.addEventListener('click', function () {
                    openModal(document.getElementById(trigger.dataset.modalOpen));
                });
            });

            document.querySelectorAll('[data-modal-close]').forEach(function (trigger) {
                trigger.addEventListener('click', function () {
                    closeModal(trigger.closest('.modal'));
                });
            });

            document.querySelectorAll('.modal').forEach(function (modal) {
                if (modal.dataset.openOnLoad === '1') {
                    openModal(modal);
                }

                modal.addEventListener('click', function (event) {
                    if (event.target === modal) {
                        closeModal(modal);
                    }
                });
            });

            document.addEventListener('keydown', function (event) {
                if (event.key !== 'Escape') {
                    return;
                }

                document.querySelectorAll('.modal.is-open').forEach(closeModal);
            });

            const createForm = document.getElementById('project-create-form');
            const createModal = document.getElementById('project-create-modal');
            if (createForm) {
                if (createModal && createModal.dataset.openOnLoad === '1') {
                    createForm.classList.add('was-submitted');
                }
                createForm.addEventListener('submit', function () {
                    createForm.classList.add('was-submitted');
                });
            }

            const bulkForm = document.querySelector('[data-project-bulk-form]');
            const bulkSubmit = document.querySelector('[data-project-bulk-submit]');
            const selectedCount = document.querySelector('[data-project-selected-count]');
            const selectAll = document.querySelector('[data-project-select-all]');
            const projectCheckboxes = Array.from(document.querySelectorAll('[data-project-select]'));

            const updateBulkState = function () {
                const checked = projectCheckboxes.filter(function (checkbox) { return checkbox.checked; });

                if (selectedCount) {
                    selectedCount.textContent = String(checked.length);
                }

                if (bulkSubmit) {
                    bulkSubmit.disabled = checked.length === 0;
                }

                if (selectAll) {
                    selectAll.checked = checked.length > 0 && checked.length === projectCheckboxes.length;
                    selectAll.indeterminate = checked.length > 0 && checked.length < projectCheckboxes.length;
                }
            };

            if (selectAll) {
                selectAll.addEventListener('change', function () {
                    projectCheckboxes.forEach(function (checkbox) {
                        checkbox.checked = selectAll.checked;
                    });
                    updateBulkState();
                });
            }

            projectCheckboxes.forEach(function (checkbox) {
                checkbox.addEventListener('change', updateBulkState);
            });

            if (bulkForm) {
                bulkForm.addEventListener('submit', function (event) {
                    const checked = projectCheckboxes.filter(function (checkbox) { return checkbox.checked; });
                    if (checked.length === 0) {
                        event.preventDefault();
                        alert('Zaznacz co najmniej jeden projekt.');
                    }
                });
            }

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