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

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

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.franchise }}</h3>
        <p class="text-subtitle text-muted">{{ translations.franchise_subtitle }}</p>
    </div>
{% endblock %}

{% block content %}

    <div class="card">
        <div class="card-header">
            <h4 class="card-title">{{ translations.shops_in_franchise }}
                <a href="{{ root }}/shops/new" role="button" class="btn btn-primary">{{ translations.add }}</a>
            </h4>
        </div>
        <div class="card-content">
            <div class="card-body px-3 py-4-5">
                <div class="row">
                    <div class="col-12">
                        <table class="table table-hover">
                            <thead>
                            <th style="width: 5%"></th>
                            <th style="width: 75%">{{ translations.name }}</th>
                            <th style="width: 5%"></th>
                            <th style="width: 5%"></th>
                            <th style="width: 10%"></th>
                            </thead>
                            <tbody>
                            {% for shop in shops %}
                                <!-- GŁÓWNY WIERSZ -->
                                <tr>
                                    <td>
                                        <a href="{{ root }}/shops/{{ shop.getId() }}/delete"
                                           class="btn btn-danger"
                                           data-bs-toggle="tooltip"
                                           data-bs-placement="top"
                                           title="{{ translations.delete }}">
                                            <i class="icon dripicons-trash"></i>
                                        </a>
                                    </td>
                                    <td>{{ shop.getRepresentativeName() }}</td>
                                    <td>
                                        <button class="btn btn-info"
                                                type="button"
                                                onclick="showDetailsModal({{ shop.getId() }})"
                                                data-bs-toggle="tooltip"
                                                data-bs-placement="top"
                                                title="{{ translations.details }}">
                                            <i class="icon dripicons-information"></i>
                                        </button>
                                    </td>
                                    <td>
                                        <a href="{{ root }}/shops/{{ shop.getId() }}/edit"
                                           class="btn btn-warning"
                                           data-bs-toggle="tooltip"
                                           data-bs-placement="top"
                                           title="{{ translations.edit }}">
                                            <i class="icon dripicons-document-edit"></i>
                                        </a>
                                    </td>
                                    <td>
                                        <div class="btn-group">
                                            <button type="button"
                                                    class="btn btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1"
                                                    data-bs-toggle="dropdown"
                                                    aria-expanded="false">
                                                <i class="icon dripicons-dots-3"></i> {{ translations.more }}
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a class="dropdown-item"
                                                       href="{{ root }}/shops/{{ shop.getId() }}/employees">
                                                        <i class="icon dripicons-user-group mx-1"></i> {{ translations.employees }}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item"
                                                       href="{{ root }}/shops/{{ shop.getId() }}/devices">
                                                        <i class="bi bi-tablet mx-1"></i> {{ translations.devices ?? 'Urządzenia' }}
                                                    </a>
                                                </li>
                                                 <li>
                                                     <a class="dropdown-item"
                                                        href="{{ root }}/shops/{{ shop.getId() }}/targets">
                                                         <i class="bi bi-bullseye mx-1"></i> {{ translations.targets }}
                                                     </a>
                                                 </li>
                                                 <li>
                                                     <a class="dropdown-item"
                                                        href="{{ root }}/shops/{{ shop.getId() }}/email-templates">
                                                         <i class="icon dripicons-mail mx-1"></i> {{ translations.email_templates }}
                                                     </a>
                                                 </li>
                                                <li>
                                                    <a class="dropdown-item"
                                                       href="#" onclick="showPeppolParticipants({{ shop.getId() }})">
                                                        <i class="icon dripicons-link mx-1"></i> {{ translations.peppol_ids }}
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>

                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

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

    <div class="modal fade" id="shopDetailsModal" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-centered modal-dialog-scrollable"
             role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">{{ translations.details }}</h5>
                    <button type="button" class="close" data-bs-dismiss="modal"
                            aria-label="Close">
                        <i data-feather="x"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <table class="table text-sm">
                                <thead>
                                <th style="width: 33%"></th>
                                <th style="width: 66%"></th>
                                </thead>
                                <tbody id="id_product_details">
                                <tr>
                                    <td>{{ translations.representative_name }}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>{{ translations.name }}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>{{ translations.email }}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>{{ translations.phone }}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>{{ translations.street }}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>{{ translations.city }}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>{{ translations.opening_hours }}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>{{ translations.closing_hours }}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>{{ translations.tax_number }}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>{{ translations.bank_account_number }}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>{{ translations.bank_name }}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>{{ translations.bank_swift }}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>{{ translations.bank_iban }}</td>
                                    <td></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light-secondary"
                            data-bs-dismiss="modal">
                        <i class="bx bx-x d-block d-sm-none"></i>
                        <span class="d-none d-sm-block">{{ translations.close }}</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="peppolIdsModal" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-centered modal-dialog-scrollable"
             role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">{{ translations.peppol_ids }}</h5>
                    <button type="button" class="close" data-bs-dismiss="modal"
                            aria-label="Close">
                        <i data-feather="x"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <table class="table text-sm">
                                <thead>
                                <th style="width: 60%">{{ translations.id }}</th>
                                <th style="width: 30%">{{ translations.is_active }}</th>
                                <th style="width: 10%"></th>
                                </thead>
                                <tbody id="peppol_ids_tbody">
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light-secondary"
                            data-bs-dismiss="modal">
                        <i class="bx bx-x d-block d-sm-none"></i>
                        <span class="d-none d-sm-block">{{ translations.close }}</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block scripts %}
    <script>
        // Inicjalizacja tooltipów Bootstrap
        document.addEventListener('DOMContentLoaded', function () {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        });
    </script>

    <script type="text/javascript">
        const detailsModal = new bootstrap.Modal(document.getElementById("shopDetailsModal"), {});
        const peppolIdsModal = new bootstrap.Modal(document.getElementById("peppolIdsModal"), {});

        function showDetailsModal(id_shop) {

            getJSON('Franchise', 'getShop/' + id_shop, {}, 'GET', {
                'Content-Type': 'application/json'
            })
                .then(function (res) {

                    if (res.length == 0) {
                        showSnack(false);
                        return;
                    }

                    const rows = document.getElementById('id_product_details').rows;
                    rows[0].cells[1].innerText = res.representative_name;
                    rows[1].cells[1].innerText = res.name;
                    rows[2].cells[1].innerText = res.email;
                    rows[3].cells[1].innerText = res.phone;
                    rows[4].cells[1].innerText = `${res.street}, ${res.street_num}`;
                    rows[5].cells[1].innerText = `${res.zip} ${res.city}`;
                    rows[6].cells[1].innerText = `${res.opening_hour}:${res.opening_minute}`;
                    rows[7].cells[1].innerText = `${res.closing_hour}:${res.closing_minute}`;
                    rows[8].cells[1].innerText = `${res.tax_number_prefixe}${res.tax_number}`;
                    rows[9].cells[1].innerText = res.bank_account_number;
                    rows[10].cells[1].innerText = res.bank_name;
                    rows[11].cells[1].innerText = res.bank_swift;
                    rows[12].cells[1].innerText = res.bank_iban;


                    detailsModal.show();
                })
                .catch()

        }

        function showPeppolParticipants(idShop) {

            api(`/ajax/shops/${idShop}/peppol-participants`, {
                method: "GET"
            })
                .then(function (res) {
                    let peppol_ids_tbody = '';

                    if (res.data.length == 0) {

                        Swal.fire({
                            title: '{{ translations.no_peppol_ids_found }}',
                            text: '{{ translations.no_peppol_ids_comment_with_ask }}',
                            icon: 'info',
                            showCancelButton: true,
                            confirmButtonText: '{{ translations.generate }}',
                            cancelButtonText: '{{ translations.cancel }}'
                        }).then((result) => {
                            if (result.isConfirmed) {

                                // 🔵 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/shops/${idShop}/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(idShop);
                                        });

                                    })
                                    .catch(function () {

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

                                    });
                            }
                        });

                        return;
                    }

                    if (res.length === 0) {
                        peppol_ids_tbody = `<tr><td colspan="2">{{ translations.no_peppol_ids_found }}</td></tr>`;
                    } else {
                        res.data.forEach(function (item) {
                            let isActiveMarkIcon = item.is_active
                                ? '<i class="icon dripicons-checkmark text-success"></i>'
                                : '<i class="icon dripicons-cross text-danger"></i>';

                            let deleteBtn = item.is_active
                                ? ''
                                : `<button class="btn btn-danger btn-sm" onclick="deletePeppolId('${item.identifier}', ${idShop}, this)">
                                        <i class="icon dripicons-trash"></i>
                                    </button>`;

                            peppol_ids_tbody += `
                    <tr>
                        <td>${item.identifier}</td>
                        <td>${isActiveMarkIcon}</td>
                        <td>${deleteBtn}</td>
                    </tr>
                `;
                        });
                    }

                    document.getElementById('peppol_ids_tbody').innerHTML = peppol_ids_tbody;
                    peppolIdsModal.show();
                });
        }

        function deletePeppolId(identifier, btn)
        {
            api(`/ajax/peppol-participants/${identifier}`, {
                method: "DELETE"
            })
                .then(function (res) {

                    if (res.success) {
                        Swal.fire(
                            '{{ translations.deleted }}',
                            '{{ translations.peppol_id_deleted_successfully }}',
                            'success'
                        ).then(() => {
                            location.reload();
                        });
                    } else {
                        throw new Error('Deletion failed');
                    }

                })
                .catch(function () {

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

                });
        }

    </script>
{% endblock %}