{# views/product/manage.twig #}
{% extends 'layouts/base.twig' %}

{% block title %}{{ translations.product }}{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.product }}</h3>
    </div>

    {% if errors is not empty %}
        <div class="row">
            <div class="col-12 col-md-4 offset-md-4">
                <div class="alert alert-danger text-center" role="alert">{{ errors|join('<br>')|raw }}</div>
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block content %}
    <div class="page-content">
        <div class="section">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{{ translations.pricing }}</h4>
                </div>
                <div class="card-content">
                    <div class="card-body px-3 py-4-5">
                        {% if errors is not empty %}
                            <div class="row">
                                <div class="col-4"></div>
                                <div class="col-4">
                                    <div class="alert alert-danger text-center" role="alert">{{ errors|join('<br>')|raw }}</div>
                                </div>
                            </div>
                        {% endif %}

                        <div class="row">
                            <div class="col-8"></div>
                            <div class="col-4">
                                <button class="btn btn-dark" type="button" onclick="displayProductAllergenSummaryDocument()">
                                    {{ translations.get_allergen_summary }}
                                </button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <table class="table table-hover mt-3" id="table">
                                    <thead>
                                    <th style="width: 25%">{{ translations.name }}</th>
                                    <th style="width: 10%" class="text-center">{{ translations.recipe }}</th>
                                    <th style="width: 30%"></th>
                                    </thead>
                                    <tbody id="tbody_client">
                                    {% if products is not empty %}
                                        {% for product in products %}
                                            <tr>
                                                <td>{{ product.getName() }}</td>
                                                <td class="text-center">
                                                    {% if product.getIdRecipe() is not null %}
                                                        <i class="icon dripicons-checkmark text-success"></i>
                                                    {% else %}
                                                        <i class="icon dripicons-minus text-danger"></i>
                                                    {% endif %}
                                                </td>
                                                <td>
                                                    <a href="{{ root }}/products/{{ product.id }}" class="btn btn-primary btn-sm float-end">
                                                        {{ translations.details }}
                                                    </a>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    {% endif %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script src="{{ root }}/assets/js/bootstrap.bundle.min.js"></script>
    <script src="{{ root }}/assets/vendors/simple-datatables/simple-datatables.js"></script>

    <script type="text/javascript">

        let table = document.querySelector('#table');
        let dataTable = new simpleDatatables.DataTable(table, {
            perPage: 25,
            perPageSelect: false,
            searchable: true,
            sortable: true,
            labels: {
                placeholder: "{{ translations.search_for_name }}",
                noRows: "{{ translations.no_data_found }}",
                info: "{{ translations.showing }} {start} - {end} {{ translations.of }} {rows} {{ translations.entries }}",
            },
        });

        async function displayProductAllergenSummaryDocument(){

            try{
                await downloadPdf(`/ajax/products/allergens/document`, {}, 'allergens.pdf');
            }
            catch (err) {
                console.error(err);
                showSnack(false, err.message || 'Coś poszło nie tak');
            }
        }

    </script>
{% endblock %}