{% extends 'base.html.twig' %}

{% block title %}
    {{ 'lang.myUploads'|trans }}
{% endblock %}

{% block footer %} {% endblock %}

{% block body %}
    <div class="table-container upload-index-table upload-container h-100">
        <div class="table-section transparent pt-0">
            <div class="row align-items-center transfer-tabs-row">
                <div class="col mb-2">
                    <div class="transfer-tabs-bar">
                        <ul class="nav nav-tabs display-flex-center mb-0 mt-5 gap-4" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="home-tab" data-bs-toggle="tab"
                                        data-bs-target="#home-tab-pane" type="button" role="tab"
                                        aria-controls="home-tab-pane"
                                        aria-selected="true">{{ 'lang.myUploads'|trans }}</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="profile-tab" data-bs-toggle="tab"
                                        data-bs-target="#profile-tab-pane" type="button" role="tab"
                                        aria-controls="profile-tab-pane"
                                        aria-selected="false">{{ 'lang.downloads'|trans }}</button>
                            </li>
                            {% if license == 'business' %}
                                {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_GLOBAL_ADMIN') or is_granted('ROLE_STANDARD_USER') %}
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="profile-tab-2" data-bs-toggle="tab"
                                                data-bs-target="#profile-tab-2-pane" type="button" role="tab"
                                                aria-controls="profile-tab-2-pane"
                                                aria-selected="false">{{ 'lang.guestUploads'|trans }}</button>
                                    </li>
                                {% endif %}
                            {% endif %}
                        </ul>
                        <div class="transfer-sort-wrap mt-5 mb-0">
                            {% include 'upload/_sort_control.html.twig' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-content h-100" id="myTabContent">
                <div class="tab-pane fade show active h-100" id="home-tab-pane" role="tabpanel"
                     aria-labelledby="home-tab"
                     tabindex="0">
                    <div class="row h-100">
                        <div class="col h-100">
                            <div class="table-responsive h-100 overflow-visible overflow-visible">
                                <table class="table table-striped table-bordered h-100 transfer-data-table" id="uploadTable"
                                       data-default-sort-col="1" data-default-sort-dir="desc">
                                    <thead class="d-none">
                                    <tr>
                                        <th>card</th>
                                        <th class="transfer-sort-col">{{ 'lang.date'|trans }}</th>
                                        <th class="transfer-sort-col">{{ 'lang.size'|trans }}</th>
                                        <th class="transfer-sort-col">{{ 'lang.title'|trans }}</th>
                                        <th class="transfer-sort-col">{{ 'lang.validUntil'|trans }}</th>
                                    </tr>
                                    </thead>

                                    <tbody>

                                    {% for shared_file in shared_files %}
                                        {% set files = shared_file.files|unserializeData %}
                                        {% set file_count = files | length %}
                                        {% set size_bytes = files|getFilesTotalBytes %}
                                        {% set sort_title = shared_file.title ?: (shared_file.message ? shared_file.message|slice(0, 80) : ('Transfer ' ~ shared_file.id)) %}
                                        {% set accordion_id = 'transfer-details-' ~ shared_file.id %}

                                        <tr>
                                            <td class="transfer-row custom-collapse-container">
                                                {# Кликабельный заголовок - триггер аккордеона #}
                                                {# Удаляем тег <a> вокруг, чтобы клик только открывал/закрывал #}
                                                <div class="upload-edit-action upload-section display-flex-between accordion-trigger"
                                                        {# Атрибуты для JavaScript, указывающие на ID блока с деталями #}
                                                     data-bs-toggle="collapse" {# Используем классы Bootstrap Collapse для простоты #}
                                                     data-bs-target="#{{ accordion_id }}"
                                                     aria-expanded="false"
                                                     aria-controls="{{ accordion_id }}"
                                                     style="cursor: pointer;"> {# Добавляем курсор-указатель #}

                                                    {# Левая часть заголовка #}
                                                    <div class="d-flex flex-column flex-md-row align-items-md-center"> {# Адаптивность для мобильных #}
                                                        <h3 class="mb-1 mb-md-0 me-md-3"> {# Отступы #}
                                                            {% if shared_file.title %}
                                                                {{ shared_file.title }}
                                                            {% elseif shared_file.message %}
                                                                {{ shared_file.message | slice(0, 50) }}{% if shared_file.message | length > 50 %}...{% endif %} {# Обрезка длинного сообщения #}
                                                            {% else %}
                                                                Transfer {{ shared_file.id }}
                                                            {% endif %}
                                                        </h3>
                                                        <div class="p-small text-muted"> {# Используем text-muted для менее важной информации #}
                                                            {% if shared_file.email %}{{ shared_file.email }} | {% endif %}
                                                            {{ file_count }}
                                                            {% if file_count == 1 %}
                                                                {{ 'lang.file' | trans }}
                                                            {% else %}
                                                                {{ 'lang.files' | trans }}
                                                            {% endif %}
                                                            {% if shared_file.regDataTime %}
                                                                | {{ shared_file.regDataTime|date('Y-m-d H:i') }}
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                    <img src="{{ asset('/images/next.svg') }}" class="accordion-icon"
                                                         alt="Toggle details" width="35" height="35"/>
                                                </div>

                                                {# Скрытый блок с деталями (используем Bootstrap Collapse) #}
                                                <div class="collapse transfer-details-content" id="{{ accordion_id }}">
                                                    <div class="menu pt-2">
                                                        <div class="row">
                                                            <div class="col-12 upload-info-container">
                                                                <div class="upload-info-section">
                                                                    <div class="display-flex-start">
                                                                        <span class="section-title">{{ 'lang.sentFrom' | trans }}:</span>
                                                                        <span class="underline">{{ shared_file.user.email ?: 'N/A' }}</span>
                                                                    </div>
                                                                    <div class="display-flex-start">
                                                                        <span class="section-title">{{ 'lang.sentTo' | trans }}:</span>
                                                                        <span class="underline">{{ shared_file.email ?: 'N/A' }}</span>
                                                                    </div>
                                                                    <div class="display-flex-start">
                                                                        <span class="section-title">{{ 'lang.date' | trans }}:</span>
                                                                        <span>{{ shared_file.regDataTime ? shared_file.regDataTime|date('Y-m-d H:i') : 'N/A' }}</span>
                                                                    </div>
                                                                </div>

                                                                <div class="upload-info-section">
                                                                    <div class="display-flex-start">
                                                                        <span class="section-title">{{ 'lang.title' | trans }}:</span>
                                                                        <span>{{ shared_file.title ?: 'N/A' }}</span>
                                                                    </div>
                                                                    <div class="display-flex-start">
                                                                        <span class="section-title">{{ 'lang.message' | trans }}:</span>
                                                                        <span>{{ shared_file.message ?: 'N/A' }}</span>
                                                                    </div>
                                                                </div>

                                                                <div class="upload-info-section">
                                                                    <div class="display-flex-start">
                                                                        <span class="section-title">{{ 'lang.validUntil' | trans }}:</span>
                                                                        <span>{{ shared_file.validUntil ? shared_file.validUntil|date('Y-m-d') : 'N/A' }}</span>
                                                                    </div>
                                                                    <div class="display-flex-start">
                                                                        <span class="section-title">{{ 'lang.code' | trans }}:</span>
                                                                        <span>{{ shared_file.accessPwd ? shared_file.accessPwd|decode : '' }}</span>
                                                                    </div>

                                                                    <div class="">
                                                                        <span class="section-title">{% if files | length == 1 %}
                                                                                {{ 'lang.file' | trans }}
                                                                            {% else %}
                                                                                {{ 'lang.files' | trans }}
                                                                            {% endif %}:
                                                                        </span>
                                                                        <ul class="list-style-none">
                                                                            {% for file in files %}
                                                                                <li>{{ file|getFileName | split('_') | last }}
                                                                                    | {{ file|getFileSize }}</li>
                                                                            {% endfor %}
                                                                        </ul>
                                                                    </div>

                                                                </div>
                                                            </div>


                                                            <div class="text-color f-14 mt-1 mb-4">
                                                                <div class="display-flex-between download-wrap gap-5">
                                                                    <div class="d-flex">
                                                                        <span class="section-title">{{ 'lang.downloadLink' | trans }}:</span>
                                                                        <span>{{ download_Link_part }}{{ shared_file.uploadId }}</span>
                                                                    </div>

                                                                    <form action="{{ path('app_upload_resend', { id: shared_file.id }) }}"
                                                                          method="post">
                                                                        <button type="submit"
                                                                                class=" button button-blue f-14">{{ 'lang.resend' | trans }}</button>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="transfer-sort-col">{{ shared_file.regDataTime ? shared_file.regDataTime|date('U') : 0 }}</td>
                                            <td class="transfer-sort-col">{{ size_bytes }}</td>
                                            <td class="transfer-sort-col">{{ sort_title }}</td>
                                            <td class="transfer-sort-col">{{ shared_file.validUntil ? shared_file.validUntil|date('U') : 0 }}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade h-100" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab"
                     tabindex="0">
                    <div class="row h-100">
                        <div class="col h-100">
                            <div class="table-responsive h-100 overflow-visible">
                                <table class="table table-striped table-bordered h-100 transfer-data-table" id="downloadTable"
                                       data-default-sort-col="1" data-default-sort-dir="desc">
                                    <thead class="d-none">
                                    <tr>
                                        <th>card</th>
                                        <th class="transfer-sort-col">{{ 'lang.date'|trans }}</th>
                                        <th class="transfer-sort-col">{{ 'lang.size'|trans }}</th>
                                        <th class="transfer-sort-col">{{ 'lang.title'|trans }}</th>
                                        <th class="transfer-sort-col">{{ 'lang.validUntil'|trans }}</th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                    {% for download_file in downloaded_files %}
                                        {% set accordion_id = 'download-details-' ~ download_file.id %}
                                        <tr>
                                            <td class="transfer-row custom-collapse-container">
                                                <div class="upload-download-action upload-section display-flex-between accordion-trigger border p-4"
                                                     data-bs-toggle="collapse"
                                                     data-bs-target="#{{ accordion_id }}"
                                                     aria-expanded="false"
                                                     aria-controls="{{ accordion_id }}"
                                                     style="cursor: pointer;">

                                                    <div class="d-flex flex-column flex-md-row align-items-md-center">
                                                        <h3 class="mb-1 mb-md-0">{{ download_file.title }}</h3>
                                                        <div class="d-flex">
                                                            <div class="p-small">
                                                                {{ download_file.originalName }}
                                                                |
                                                                {{ download_file.regDataTime|date('d.m.Y H:i') }}
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <img src="{{ asset('/images/next.svg') }}" class="accordion-icon"
                                                         alt="Toggle details" width="35" height="35"/>
                                                </div>

                                                {# Раскомментируй, если нужно #}
                                                {# <div class="p-small">👤 Гость: {{ download_file.contactGuest.email|replace({'#guest': ''}) }}</div> #}
                                                <div class="collapse transfer-details-content" id="{{ accordion_id }}">
                                                    <div class="menu pt-2">
                                                        <div class="row">
                                                            <div class="col-12 upload-info-container">
                                                                <div class="upload-info-section">
                                                                    <div class="display-flex-start">
                                                                        <span class="section-title">{{ 'lang.sentFrom' | trans }}:</span>
                                                                        <span class="underline">{{ download_file.user.email ?: 'N/A' }}</span>
                                                                    </div>
                                                                    <div class="display-flex-start">
                                                                        <span class="section-title">{{ 'lang.sentTo' | trans }}:</span>
                                                                        <span class="underline">{{ download_file.sentTo }}</span>
                                                                    </div>
                                                                </div>
                                                                <div class="upload-info-section">
                                                                    <div class="display-flex-start">
                                                                        <span class="section-title">{{ 'lang.sendTime' | trans }}:</span>
                                                                        <span>{{ download_file.regDataTime|date('d.m.Y H:i') }}</span>
                                                                    </div>
                                                                    <div class="display-flex-start">
                                                                        <span class="section-title">{{ 'lang.downloadTime' | trans }}:</span>
                                                                        <span>{{ download_file.actionDatetime|date('d.m.Y H:i') }}</span>
                                                                    </div>
                                                                    {% if download_file.validUntil %}
                                                                        <div class="display-flex-start">
                                                                            <span class="section-title">{{ 'lang.validUntil' | trans }}:</span>
                                                                            <span>{{ download_file.validUntil|date('d.m.Y') }}</span>
                                                                        </div>
                                                                    {% endif %}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="transfer-sort-col">{{ download_file.dateTimestamp|default(0) }}</td>
                                            <td class="transfer-sort-col">{{ download_file.sizeBytes|default(0) }}</td>
                                            <td class="transfer-sort-col">{{ download_file.title|default('') }}</td>
                                            <td class="transfer-sort-col">{{ download_file.expiryTimestamp|default(0) }}</td>
                                        </tr>
                                    {% endfor %}


                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade h-100" id="profile-tab-2-pane" role="tabpanel" aria-labelledby="profile-tab"
                     tabindex="0">
                    <div class="table-responsive h-100 overflow-visible">
                        <table class="table table-striped table-bordered h-100 transfer-data-table" id="uploadGuestTable"
                               data-default-sort-col="1" data-default-sort-dir="desc">
                            <thead class="d-none">
                            <tr>
                                <th>card</th>
                                <th class="transfer-sort-col">{{ 'lang.date'|trans }}</th>
                                <th class="transfer-sort-col">{{ 'lang.size'|trans }}</th>
                                <th class="transfer-sort-col">{{ 'lang.title'|trans }}</th>
                                <th class="transfer-sort-col">{{ 'lang.validUntil'|trans }}</th>
                            </tr>
                            </thead>

                            <tbody>

                            {% for shared_file in shared_files_guest %}
                                {% set files = shared_file.files|unserializeData %}
                                {% set size_bytes = files|getFilesTotalBytes %}
                                {% set sort_title = shared_file.title ?: (shared_file.message ? shared_file.message|slice(0, 80) : ('Transfer ' ~ shared_file.id)) %}
                                {% set accordion_id = 'transfer-guest-details-' ~ shared_file.id %}

                                {% set hasAllFiles = files|downloadHasAllFiles %}
                                <tr>

                                    <td class="transfer-row custom-collapse-container">
                                        {# Кликабельный заголовок - триггер аккордеона #}
                                        {# Удаляем тег <a> вокруг, чтобы клик только открывал/закрывал #}
                                        <div class="upload-edit-action upload-section display-flex-between accordion-trigger"
                                                {# Атрибуты для JavaScript, указывающие на ID блока с деталями #}
                                             data-bs-toggle="collapse" {# Используем классы Bootstrap Collapse для простоты #}
                                             data-bs-target="#{{ accordion_id }}"
                                             aria-expanded="false"
                                             aria-controls="{{ accordion_id }}"
                                             style="cursor: pointer;"> {# Добавляем курсор-указатель #}

                                            {# Левая часть заголовка #}
                                            <div class="d-flex flex-column flex-md-row align-items-md-center"> {# Адаптивность для мобильных #}
                                                <h3 class="mb-1 mb-md-0 me-md-3"> {# Отступы #}
                                                    {% if shared_file.title %}
                                                        {{ shared_file.title }}
                                                    {% elseif shared_file.message %}
                                                        {{ shared_file.message | slice(0, 50) }}{% if shared_file.message | length > 50 %}...{% endif %} {# Обрезка длинного сообщения #}
                                                    {% else %}
                                                        Transfer {{ shared_file.id }}
                                                    {% endif %}
                                                </h3>
                                                <div class="p-small text-muted"> {# Используем text-muted для менее важной информации #}
                                                    {{ shared_file.user.email|replace({'#guest': ''}) }}
                                                    {{ files | length }}
                                                    {% if files | length == 1 %}
                                                        {{ 'lang.file' | trans }}
                                                    {% else %}
                                                        {{ 'lang.files' | trans }}
                                                    {% endif %}
                                                    {% if shared_file.regDataTime %}
                                                        | {{ shared_file.regDataTime|date('Y-m-d H:i') }}
                                                    {% endif %}
                                                </div>
                                            </div>
                                            <img src="{{ asset('/images/next.svg') }}" class="accordion-icon"
                                                 alt="Toggle details" width="35" height="35"/>
                                        </div>

                                        {# Скрытый блок с деталями (используем Bootstrap Collapse) #}
                                        <div class="collapse transfer-details-content" id="{{ accordion_id }}">
                                            <div class="menu pt-2">
                                                <div class="row">
                                                    <div class="col-12 upload-info-container">
                                                        <div class="upload-info-section">
                                                            <div class="display-flex-start">
                                                                <span class="section-title">{{ 'lang.sentFrom' | trans }}:</span>
                                                                <span class="underline">{{ shared_file.user.email|replace({'#guest': ''}) }}</span>
                                                            </div>
                                                            <div class="display-flex-start">
                                                                <span class="section-title">{{ 'lang.sentTo' | trans }}:</span>
                                                                <span class="underline">{{ shared_file.contactGuest.email }}</span>
                                                            </div>
                                                            <div class="display-flex-start">
                                                                <span class="section-title">{{ 'lang.date' | trans }}:</span>
                                                                <span>{{ shared_file.regDataTime ? shared_file.regDataTime|date('Y-m-d H:i') : 'N/A' }}</span>
                                                            </div>
                                                        </div>

                                                        <div class="upload-info-section">
                                                            <div class="display-flex-start">
                                                                <span class="section-title">{{ 'lang.title' | trans }}:</span>
                                                                <span>{{ shared_file.title ?: 'N/A' }}</span>
                                                            </div>
                                                            <div class="display-flex-start">
                                                                <span class="section-title">{{ 'lang.message' | trans }}:</span>
                                                                <span>{{ shared_file.message ?: 'N/A' }}</span>
                                                            </div>
                                                        </div>

                                                        <div class="upload-info-section">
                                                            <div class="display-flex-start">
                                                                <span class="section-title">{{ 'lang.validUntil' | trans }}:</span>
                                                                <span>{{ shared_file.validUntil ? shared_file.validUntil|date('Y-m-d') : 'N/A' }}</span>
                                                            </div>
                                                            <div class="display-flex-start">
                                                                <span class="section-title">{{ 'lang.code' | trans }}:</span>
                                                                <span>{{ shared_file.accessPwd ? shared_file.accessPwd|decode : '' }}</span>
                                                            </div>

                                                            <div class="">
                                                                        <span class="section-title">{% if files | length == 1 %}
                                                                                {{ 'lang.file' | trans }}
                                                                            {% else %}
                                                                                {{ 'lang.files' | trans }}
                                                                            {% endif %}:
                                                                        </span>
                                                                <ul class="list-style-none">
                                                                    {% for file in files %}
                                                                        <li>{{ file|getFileName | split('_') | last }}
                                                                            | {{ file|getFileSize }}</li>
                                                                    {% endfor %}
                                                                </ul>
                                                            </div>

                                                        </div>
                                                    </div>


                                                    <div class="text-color f-14 mt-1 mb-4">
                                                        <div class="display-flex-between gap-5">
                                                            <div class="d-flex ">
                                                                <span class="section-title">{{ 'lang.downloadLink' | trans }}:</span>
                                                                <span><a href="{{ download_Link_part }}{{ shared_file.uploadId }}">{{ download_Link_part }}{{ shared_file.uploadId }}</a></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="transfer-sort-col">{{ shared_file.regDataTime ? shared_file.regDataTime|date('U') : 0 }}</td>
                                    <td class="transfer-sort-col">{{ size_bytes }}</td>
                                    <td class="transfer-sort-col">{{ sort_title }}</td>
                                    <td class="transfer-sort-col">{{ shared_file.validUntil ? shared_file.validUntil|date('U') : 0 }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('log') }}
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            let lastTab = localStorage.getItem('uploadActiveTab');
            if (lastTab) {
                let triggerEl = document.querySelector(`button[data-bs-target="${lastTab}"]`);
                if (triggerEl) {
                    triggerEl.click();
                }
            }

            const tabButtons = document.querySelectorAll('button[data-bs-toggle="tab"]');
            tabButtons.forEach(btn => {
                btn.addEventListener('shown.bs.tab', function (event) {
                    localStorage.setItem('uploadActiveTab', event.target.getAttribute('data-bs-target'));
                });
            });
        });
    </script>
{% endblock %}