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

{% block title %}{{ translations.product_details }}{% 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="row">
        <div class="col-5">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">{{ translations.overview }}
                                <button class="btn btn-secondary float-end"
                                        onclick="getProductCardPDF({{ product_data.getId() }})">
                                    <i class="icon dripicons-download"></i> {{ translations.product_card }}
                                </button>
                            </h4>
                        </div>
                        <div class="card-content">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12">
                                        <table class="table">
                                            <thead>
                                            <th style="width: 60%;"></th>
                                            <th style="width: 40%;"></th>
                                            </thead>
                                            <tbody id="id_product_data">
                                            <tr>
                                                <td class="font-bold">{{ translations.name }}</td>
                                                <td>
                                                    {{ product_data.getName() }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="font-bold">{{ translations.category }}</td>
                                                <td>
                                                    {{ product_data.getCategoryName() }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="font-bold">{{ translations.tax_value_perc }}</td>
                                                <td>
                                                    {{ product_data.getTaxValPerc() }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="font-bold">{{ translations.single_weight }}</td>
                                                <td>
                                                    {{ product_data.getSingleWeight() }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="font-bold">{{ translations.storage_type }}</td>
                                                <td>
                                                    {{ product_data.getStorageName() }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="font-bold">{{ translations.positioning_type }}</td>
                                                <td>
                                                    {{ product_data.getPositioningName() }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="font-bold">{{ translations.available_to_sale }}</td>
                                                <td>
                                                    {% if product_data.getIsActive() == 1 %}
                                                        <i class="icon dripicons-checkmark text-success"></i>
                                                    {% else %}
                                                        <i class="icon dripicons-minus text-danger"></i>
                                                    {% endif %}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="font-bold">{{ translations.is_vegetarian }}</td>
                                                <td>
                                                    {% if product_data.getIsVegetarian() == 1 %}
                                                        <i class="icon dripicons-checkmark text-success"></i>
                                                    {% else %}
                                                        <i class="icon dripicons-minus text-danger"></i>
                                                    {% endif %}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="font-bold">{{ translations.is_divisible }}</td>
                                                <td>
                                                    {% if product_data.getIsDivisible() == 1 %}
                                                        <i class="icon dripicons-checkmark text-success"></i>
                                                    {% else %}
                                                        <i class="icon dripicons-minus text-danger"></i>
                                                    {% endif %}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="font-bold">{{ translations.require_prepare_before_sale }} </td>
                                                <td>
                                                    {% if product_data.getIsPreparedBeforeSales() == 1 %}
                                                        <i class="icon dripicons-checkmark text-success"></i>
                                                    {% else %}
                                                        <i class="icon dripicons-minus text-danger"></i>
                                                    {% endif %}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="font-bold">{{ translations.suggested_sale_price }}</td>
                                                <td>
                                                    {{ product_data.getSuggestedSalePrice() }} {{ currency_symbol }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="font-bold">{{ translations.sale_price }}</td>
                                                <td>
                                                    {{ product_data.getPortionPrice() }} {{ currency_symbol }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="font-bold">{{ translations.quantity_per_label }}</td>
                                                <td>
                                                    {{ product_data.getQuantityPerLabel() }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="font-bold">{{ translations.shelf_life }}</td>
                                                <td>
                                                    {{ product_data.getShelfLifeHours() ~ "h" }}
                                                    {{ "(" ~ product_data.getShelfLifeMinutes() ~ " min)" }}
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">{{ translations.required_competences }}</h4>
                        </div>
                        <div class="card-content">
                            <div class="card-body">
                                {% if product_data.getRequiredCompetences() is empty %}
                                    <div class="row">
                                        <div class="col-12 text-center">
                                            <h5>{{ translations.no_assigned_competences }}</h5>
                                        </div>
                                    </div>
                                {% else %}
                                    <div class="row">
                                        <div class="col-12">
                                            {% for competence in product_data.getRequiredCompetences() %}
                                                <span class="badge bg-primary">{{ competence.getName() }}</span>
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-7">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">{{ translations.recipe_calculation }}</h4>
                        </div>
                        <div class="card-content">
                            <div class="card-body">
                                {% if recipe_calculation is null %}
                                    <div class="row">
                                        <div class="col-12 text-center">
                                            <h3>{{ translations.no_recipe }}</h3>
                                        </div>
                                    </div>
                                {% else %}
                                    <table class="table">
                                        <thead>
                                        <th style="width: 40%">{{ translations.ingredient }}</th>
                                        <th style="width: 20%">{{ translations.quantity }}</th>
                                        <th style="width: 20%">{{ translations.approximate_cost_price_net }}</th>
                                        <th style="width: 20%">{{ translations.allergens }}</th>
                                        </thead>
                                        <tbody>
                                        {% set total_ingredient_cost = 0 %}
                                        {% set total_allergens = [] %}
                                        {% if recipe_calculation is not empty %}
                                            {% for item in recipe_calculation.getElements() %}
                                                {% set class = (item.getType() == "ingredient") ? "bg-light-warning" : "bg-light-info" %}
                                                <tr class="{{ class }}">
                                                    <td>
                                                        {{ item.getName() }}
                                                    </td>
                                                    <td>{{ item.getRecipeQuantity() }} {{ item.getUnitName() }}</td>
                                                    <td>{{ item.getCalculatedReqPriceNet()|number_format(3, '.') }}
                                                        {{ currency_symbol }}
                                                    </td>
                                                    <td>{{ item.getAllergens() ? item.getAllergens()|join(", ") : "" }}</td>
                                                </tr>
                                                {% set allergens = item.getAllergens() %}
                                                {% if allergens is not null and allergens is not empty %}
                                                    {% set total_allergens = total_allergens|merge(allergens) %}
                                                {% endif %}
                                            {% endfor %}
                                        {% endif %}
                                        <tr>
                                            <td></td>
                                            <td><span class="float-end">{{ translations.total }}:</span>
                                            </td>
                                            <td>{{ recipe_calculation.getCostNet() }} {{ currency_symbol }}</td>
                                            <td>{{ total_allergens|array_unique|join(", ") }}</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">{{ translations.package_calculation }}</h4>
                        </div>
                        <div class="card-content">
                            <div class="card-body">

                                {% if pack_calculation is not defined or pack_calculation is null %}
                                    <div class="row">
                                        <div class="col-12 text-center">
                                            <h3>{{ translations.no_package }}</h3>
                                        </div>
                                    </div>
                                {% else %}
                                    <table class="table">
                                        <thead>
                                        <th style="width: 40%">{{ translations.material }}</th>
                                        <th style="width: 20%">{{ translations.quantity }}</th>
                                        <th style="width: 20%">{{ translations.approximate_cost_price_net }}</th>
                                        </thead>
                                        <tbody>
                                        {% if pack_calculation is not empty %}
                                            {% for item in pack_calculation.getMaterials() %}
                                                <tr>
                                                    <td>
                                                        {{ item.getName() }}
                                                    </td>
                                                    <td>{{ item.getQuantity() }} {{ item.getUnitName() }}</td>
                                                    <td>{{ item.getBaseUnitPriceNet() ~ " " ~ currency_symbol }}</td>
                                                </tr>
                                            {% endfor %}
                                        {% endif %}
                                        <tr>
                                            <td></td>
                                            <td><span class="float-end">{{ translations.total }}:</span>
                                            </td>
                                            <td>{{ pack_calculation.getCostNet() ~ " " ~ currency_symbol }}</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-6">
                    <div class="card">
                        <div class="card-body px-3 py-4-5">
                            {% if recipe_calculation is null %}
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <h5>{{ translations.no_recipe }}</h5>
                                    </div>
                                </div>
                            {% else %}
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="stats-icon purple">
                                            <i class="icon dripicons-cart"></i>
                                        </div>
                                    </div>
                                    <div class="col-md-8">
                                        {% set fc_ratio = (product_data.getPortionPrice() == 0) ? 0 : (((recipe_calculation.getCostNet() ?? 0) / product_data.getPortionPrice()) * 100) %}
                                        <h6 class="text-muted font-semibold">{{ translations.fc_ratio }}</h6>
                                        <h6 class="font-extrabold mb-0">{{ fc_ratio|number_format(2, '.') }}
                                            %</h6>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="col-6">
                    <div class="card">
                        <div class="card-body px-3 py-4-5">
                            {% if pack_calculation is not defined or pack_calculation is null %}
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <h5>{{ translations.no_package }}</h5>
                                    </div>
                                </div>
                            {% else %}
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="stats-icon purple">
                                            <i class="icon dripicons-cart"></i>
                                        </div>
                                    </div>
                                    <div class="col-md-8">
                                        {% set pack_ratio = (product_data.getPortionPrice() == 0) ? 0 : ((pack_calculation.getCostNet() / product_data.getPortionPrice()) * 100) %}
                                        <h6 class="text-muted font-semibold">{{ translations.pack_ratio }}</h6>
                                        <h6 class="font-extrabold mb-0">{{ pack_ratio|number_format(2, '.') }}
                                            %</h6>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">{{ translations.main_photo }}</h5>
                </div>
                <div class="card-content">
                    <div class="card-body">

                        {% if recipe_calculation is null %}
                            <div class="row">
                                <div class="col-12 text-center">
                                    <h5>{{ translations.no_recipe }}</h5>
                                </div>
                            </div>
                        {% else %}

                            <div class="row">
                                <div class="col-12">
                                    {% if recipe_data.getMainPhotoPath() != "" %}
                                        <img class="img-fluid w-100" id="main_photo_preview"
                                             src="{{ recipe_data.getMainPhotoPath() }}">
                                    {% else %}
                                        <img class="img-fluid w-100" id="main_photo_preview"
                                             style="display: none;">
                                        <h5 class="text-center">{{ translations.miss }}</h5>
                                    {% endif %}
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">{{ translations.additional_photo }}</h5>
                </div>
                <div class="card-content">
                    <div class="card-body">

                        {% if recipe_calculation is null %}
                            <div class="row">
                                <div class="col-12 text-center">
                                    <h5>{{ translations.no_recipe }}</h5>
                                </div>
                            </div>
                        {% else %}

                            <div class="row">
                                <div class="col-12">
                                    {% if recipe_data.getPhoto1Path() != "" %}
                                        <img class="img-fluid w-100" id="photo_1_preview"
                                             src="{{ recipe_data.getPhoto1Path() }}">
                                    {% else %}
                                        <img class="img-fluid w-100" id="photo_1_preview"
                                             style="display: none;">
                                        <h5 class="text-center">{{ translations.miss }}</h5>
                                    {% endif %}
                                </div>
                            </div>
                        {% endif %}

                    </div>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">{{ translations.additional_photo }}</h5>
                </div>
                <div class="card-content">
                    <div class="card-body">

                        {% if recipe_calculation is null %}
                            <div class="row">
                                <div class="col-12 text-center">
                                    <h5>{{ translations.no_recipe }}</h5>
                                </div>
                            </div>
                        {% else %}

                            <div class="row">
                                <div class="col-12">
                                    {% if recipe_data.getPhoto2Path() != "" %}
                                        <img class="img-fluid w-100" id="photo_2_preview"
                                             src="{{ recipe_data.getPhoto2Path() }}">
                                    {% else %}
                                        <img class="img-fluid w-100" id="photo_2_preview"
                                             style="display: none;">
                                        <h5 class="text-center">{{ translations.miss }}</h5>
                                    {% endif %}
                                </div>
                            </div>

                        {% endif %}

                    </div>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">{{ translations.additional_photo }}</h5>
                </div>
                <div class="card-content">
                    <div class="card-body">

                        {% if recipe_calculation is null %}
                            <div class="row">
                                <div class="col-12 text-center">
                                    <h5>{{ translations.no_recipe }}</h5>
                                </div>
                            </div>
                        {% else %}

                            <div class="row">
                                <div class="col-12">
                                    {% if recipe_data.getPhoto3Path() != "" %}
                                        <img class="img-fluid w-100" id="photo_3_preview"
                                             src="{{ recipe_data.getPhoto3Path() }}">
                                    {% else %}
                                        <img class="img-fluid w-100" id="photo_3_preview"
                                             style="display: none;">
                                        <h5 class="text-center">{{ translations.miss }}</h5>
                                    {% endif %}
                                </div>
                            </div>

                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

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

    <script type="text/javascript">

        function getProductCardPDF(id){
            downloadPdf(`/ajax/products/${id}/document`, {}, "product_card.pdf");
        }

    </script>


{% endblock %}