{% extends "layouts/base.twig" %}

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

{% block head %}
    <style>
        .info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #efefef;
            padding-bottom: 4px;
        }

        .info-link {
            display: flex;
            align-items: center;
        }

        .info-value {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .value-icon {
            display: flex;
            align-items: center;
            line-height: 1;
        }
    </style>
{% endblock %}


{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.shop_information }}</h3>
        <p class="text-subtitle text-muted">{{ translations.shop_information_subtitle }}</p>
    </div>
    {% include "page_components/messages.twig" %}
{% endblock %}

{% block content %}

    <div class="row">

        <!-- SEKCJA 1 — DANE PODSTAWOWE -->
        <div class="col-12 col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h4 class="card-title">{{ translations.basic_information }}</h4>
                </div>
                <div class="card-body">

                    <div class="info-row mb-2">
                        <span class="info-label">{{ translations.name }}:</span>
                        <span class="info-value">{{ shop.name }}</span>
                    </div>

                    <div class="info-row mb-2">
                        <span class="info-label">{{ translations.representative_name }}:</span>
                        <span class="info-value">{{ shop.getRepresentativeName() }}</span>
                    </div>

                    <div class="info-row mb-2">
                        <span class="info-label">{{ translations.address }}:</span>
                        <span class="info-value">{{ shop.getStreet() }} {{ shop.getStreetNum() }}</span>
                    </div>

                    <div class="info-row mb-2">
                        <span class="info-label">{{ translations.zip }}:</span>
                        <span class="info-value">{{ shop.getZip() }}</span>
                    </div>

                    <div class="info-row mb-2">
                        <span class="info-label">{{ translations.city }}:</span>
                        <span class="info-value">{{ shop.getCity() }}</span>
                    </div>

                    <div class="info-row mb-2">
                        <span class="info-label">{{ translations.country }}:</span>
                        <span class="info-value">{{ shop.getCountryCode() }}</span>
                    </div>

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

        <!-- SEKCJA 2 — DANE FINANSOWE -->
        <div class="col-12 col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h4 class="card-title">{{ translations.financial_information }}</h4>
                </div>
                <div class="card-body">

                    <div class="info-row mb-2">
                        <span class="info-label">{{ translations.tax_number }}:</span>
                        <span class="info-value">{{ shop.getTaxNumberPrefixe() }}{{ shop.getTaxNumber() }}</span>
                    </div>

                    <div class="info-row mb-2">
                        <span class="info-label">{{ translations.bank_name }}:</span>
                        <span class="info-value">{{ shop.getBankName() }}</span>
                    </div>

                    <div class="info-row mb-2">
                        <span class="info-label">{{ translations.bank_account_number }}:</span>
                        <span class="info-value">{{ shop.getBankAccountNumber() }}</span>
                    </div>

                    <div class="info-row mb-2">
                        <span class="info-label">{{ translations.bank_swift }}:</span>
                        <span class="info-value">{{ shop.getBankSwift() }}</span>
                    </div>

                    <div class="info-row mb-2">
                        <span class="info-label">{{ translations.bank_iban }}:</span>
                        <span class="info-value">{{ shop.getBankIban() }}</span>
                    </div>

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


    <div class="row">

        <!-- SEKCJA 3 — GODZINY OTWARCIA -->
        <div class="col-12 col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h4 class="card-title">{{ translations.opening_hours }}</h4>
                </div>
                <div class="card-body">

                    <div class="info-row mb-2">
                        <span class="info-label">{{ translations.opening_time }}:</span>
                        <span class="info-value">{{ shop.getOpeningHours() }}</span>
                    </div>

                    <div class="info-row mb-2">
                        <span class="info-label">{{ translations.closing_time }}:</span>
                        <span class="info-value">{{ shop.getClosingHours() }}</span>
                    </div>

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

        <!-- SEKCJA 4 — KONTAKT -->
        <div class="col-12 col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h4 class="card-title">{{ translations.contact_information }}</h4>
                </div>
                <div class="card-body">

                    <div class="info-row mb-2">
                        <span class="info-label">{{ translations.phone }}:</span>
                        <span class="info-value">{{ shop.getPhone() }}</span>
                    </div>

                    <div class="info-row mb-2">
                        <span class="info-label">{{ translations.email }}:</span>
                        <span class="info-value">{{ shop.getEmail() }}</span>
                    </div>

                    <div class="info-row mb-2">
                        <span class="info-label">{{ translations.employees_count }}:</span>
                        <a href="{{ root }}/employees" class="info-link">
                            <span class="info-value">
                                <span class="value-text">{{ shop.employees|length }}</span>
                                <span class="value-icon"><i class="icon dripicons-arrow-thin-right"></i></span>
                            </span>
                        </a>
                    </div>

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

    </div>


    <div class="row">

        <!-- SEKCJA 5 — PEPPOL -->
        <div class="col-12">
            <div class="card mb-4">
                <div class="card-header">
                    <h4 class="card-title">{{ translations.system_information }}</h4>
                </div>
                <div class="card-body">

                    <div class="info-row mb-2">
                        <span class="info-label">{{ translations.peppol_ids }}:</span>
                        <span class="info-value" id="peppol_participants">
                        {% if shop.getPeppolIdentifiers() is not empty %}
                            {% for pid in shop.getPeppolIdentifiers() %}
                                {% if(pid.IsActive()) %}
                                    <span class="badge bg-light-primary me-1">
                                        {{ pid.getIdentifier }}
                                    </span>
                                {% else %}
                                    <span class="badge bg-light-secondary me-1">
                                        {{ pid.getIdentifier }}
                                    </span>
                                {% endif %}
                            {% endfor %}
                        {% else %}
                            <button class="btn btn-primary" onclick="generatePeppolParticipants();">
                                {{ translations.generate_peppol_ids }}
                            </button>
                        {% endif %}
                    </span>
                    </div>
                </div>
            </div>
        </div>

    </div>

{% endblock %}

{% block scripts %}

    <script type="text/javascript">

        function generatePeppolParticipants() {
            // 🔵 Spinner + blokada okna
            Swal.fire({
                title: '{{ translations.generating_peppol_ids }}',
                html: `
                            <div class="text-center">
                                <p class="mt-3">{{ translations.please_wait_dont_close_window }}</p>
                            </div>
                        `,
                showConfirmButton: false,
                allowOutsideClick: false,
                allowEscapeKey: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            api(`/ajax/peppol-participants/generate`, {
                method: "POST"
            })
                .then(function (genRes) {

                    if (!genRes.success) {
                        throw new Error('Generation failed');
                    }

                    // Zamiana spinnera na sukces
                    Swal.fire({
                        title: '{{ translations.generated }}',
                        text: '{{ translations.peppol_ids_generated_successfully }}',
                        icon: 'success'
                    }).then(() => {
                        showPeppolParticipants();
                    });

                })
                .catch(function () {

                    Swal.fire(
                        '{{ translations.error }}',
                        '{{ translations.cant_generate_peppol_ids_try_again }}',
                        'error'
                    );

                });
        }

        function showPeppolParticipants() {

            api(`/ajax/peppol-participants`, {
                method: "GET"
            })
                .then(function (res) {
                    let peppol_participants = document.getElementById('peppol_participants');
                    peppol_participants.innerHTML = '';

                    if (res.length === 0) {

                        Swal.fire(
                            '{{ translations.no_peppol_ids_found }}',
                            '',
                            'info'
                        );
                        return;

                    } else {
                        res.data.forEach(function (item) {
                            if (item.is_active) {
                                peppol_participants.innerHTML += `
                                    <span class="badge bg-light-primary me-1">
                                        ${item.identifier}
                                    </span>
                                `;
                            } else {
                                peppol_participants.innerHTML += `
                                    <span class="badge bg-light-secondary me-1">
                                        ${item.identifier}
                                    </span>
                                `;
                            }
                        });
                    }
                });
        }
    </script>

{% endblock %}