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

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

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

{% block content %}
    <!-- Kontener na obowiązujące okresy -->
    <div id="currentPeriodsContainer" class="card mb-3" style="display: none;">
        <div class="card-header bg-info text-white">
            <h5 class="mb-0"><i class="bi bi-clock"></i> {{ translations.current_availability_periods }}</h5>
        </div>
        <div class="card-body pt-2" id="currentPeriodsList">
            <!-- Tutaj będą wyświetlane aktualne okresy -->
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-header">
            <div class="row g-2">
                <div class="col-md-4">
                    <label for="searchInput"
                           class="form-label visually-hidden">{{ translations.search_periods }}</label>
                    <input type="text" id="searchInput" class="form-control"
                           placeholder="{{ translations.search_periods }}">
                </div>
                <div class="col-md-3">
                    <label for="statusFilter" class="form-label visually-hidden">{{ translations.status }}</label>
                    <select id="statusFilter" class="form-select" aria-label="{{ translations.status }}">
                        <option value="">{{ translations.all_statuses }}</option>
                        <option value="1">{{ translations.active }}</option>
                        <option value="0">{{ translations.inactive }}</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="recurringFilter" class="form-label visually-hidden">{{ translations.recurring }}</label>
                    <select id="recurringFilter" class="form-select" aria-label="{{ translations.recurring }}">
                        <option value="">{{ translations.all_recurrence }}</option>
                        <option value="1">{{ translations.recurring }}</option>
                        <option value="0">{{ translations.one_time }}</option>
                    </select>
                </div>
                <div class="col-md-2 text-end">
                    <a href="{{ root }}/product-availability-periods/new" class="btn btn-primary">
                        <i class="bi bi-plus-lg"></i> {{ translations.add }}
                    </a>
                </div>
            </div>
            <div class="row mt-5">
                <div class="col-12">
                    <button class="btn btn-outline-dark float-end" type="button"
                            onclick="getBulkPeriodsWithProducts()">{{ translations.get_grouped_data }}</button>
                </div>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0 text-sm" id="periodsTable">
                    <thead class="table-light">
                    <tr>
                        <th style="width: 2%"><input type="checkbox" id="selectAll" class="checkbox"></th>
                        <th style="width: 23%">{{ translations.name }}</th>
                        <th style="width: 15%">{{ translations.description }}</th>
                        <th style="width: 10%">{{ translations.start_date }}</th>
                        <th style="width: 10%">{{ translations.end_date }}</th>
                        <th style="width: 4%">{{ translations.recurring }}</th>
                        <th style="width: 5%">{{ translations.status }}</th>
                        <th style="width: 10%">{{ translations.actions }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for period in periods %}
                        <tr data-recurring="{{ period.isRecurring ? '1' : '0' }}"
                            data-active="{{ period.isActive ? '1' : '0' }}"
                            class="{{ period.isRecurring ? 'table-info' : '' }}">
                            <td><input type="checkbox" class="checkbox" value="{{ period.id }}"></td>
                            <td>
                                {{ period.name }}
                            </td>
                            <td style="max-width:200px;">
                                <div class="text-truncate" title="{{ period.description }}">
                                    {{ period.description|length > 50 ? period.description|slice(0,50) ~ '...' : period.description }}
                                </div>
                            </td>
                            <td>
                                {% if period.isRecurring %}
                                    <span title="{{ period.startDate|date('Y-m-d') }}">{{ period.startDate|date('d.m') }}</span>
                                {% else %}
                                    {{ period.startDate|date('Y-m-d') }}
                                {% endif %}
                            </td>
                            <td>
                                {% if period.isRecurring %}
                                    <span title="{{ period.endDate|date('Y-m-d') }}">{{ period.endDate|date('d.m') }}</span>
                                {% else %}
                                    {{ period.endDate|date('Y-m-d') }}
                                {% endif %}
                            </td>
                            <td><span class="badge bg-{{ period.isRecurring ? 'info' : 'secondary' }}">
                                    {{ period.isRecurring ? translations.yes : translations.no }}
                                </span></td>
                            <td><span class="badge bg-{{ period.isActive ? 'success' : 'dark' }}">
                                    {{ period.isActive ? translations.active : translations.inactive }}
                                </span></td>
                            <td>
                                <div class="btn-group" role="group">
                                    <a href="{{ root }}/product-availability-periods/{{ period.id }}/products"
                                       class="btn btn-sm btn-info" title="{{ translations.available_products }}">
                                        <i class="bi bi-list"></i>
                                    </a>
                                    <a href="{{ root }}/product-availability-periods/{{ period.id }}/edit"
                                       class="btn btn-sm btn-warning" title="{{ translations.edit }}">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <button type="button" class="btn btn-sm btn-danger btn-delete"
                                            data-id="{{ period.id }}" title="{{ translations.delete }}">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-secondary"
                                            onclick="getPeriodWithProducts({{ period.id }})"
                                            data-id="{{ period.id }}" title="{{ translations.delete }}">
                                        {{ translations.pdf }}
                                    </button>
                                </div>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="7" class="text-center text-muted py-4">
                                {{ translations.no_periods_found }}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script>

        document.addEventListener('DOMContentLoaded', function () {
            const searchInput = document.getElementById('searchInput');
            const statusFilter = document.getElementById('statusFilter');
            const recurringFilter = document.getElementById('recurringFilter');
            const table = document.getElementById('periodsTable');
            const rows = table.querySelectorAll('tbody tr');
            const selectAllCheckbox = document.getElementById('selectAll');
            const rowCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]');

            // Funkcjonalność "Select All"
            selectAllCheckbox.addEventListener('change', function () {
                const isChecked = this.checked;
                rowCheckboxes.forEach(checkbox => {
                    const row = checkbox.closest('tr');
                    // Zaznacz tylko widoczne wiersze
                    if (row.style.display !== 'none') {
                        checkbox.checked = isChecked;
                    }
                });
            });

            // Sprawdź czy wszystkie checkboxy są zaznaczone przy zmianie pojedynczego
            table.addEventListener('change', function (e) {
                if (e.target.type === 'checkbox' && e.target !== selectAllCheckbox) {
                    const visibleCheckboxes = Array.from(rowCheckboxes).filter(cb =>
                        cb.closest('tr').style.display !== 'none'
                    );
                    const checkedVisibleCheckboxes = visibleCheckboxes.filter(cb => cb.checked);

                    selectAllCheckbox.checked = visibleCheckboxes.length > 0 &&
                        checkedVisibleCheckboxes.length === visibleCheckboxes.length;
                    selectAllCheckbox.indeterminate = checkedVisibleCheckboxes.length > 0 &&
                        checkedVisibleCheckboxes.length < visibleCheckboxes.length;
                }
            });

            function filterTable() {
                const search = searchInput.value.toLowerCase();
                const status = statusFilter.value;
                const recurring = recurringFilter.value;

                rows.forEach(row => {
                    const name = row.cells[1].textContent.toLowerCase(); // Poprawiony indeks po dodaniu checkbox
                    const desc = row.cells[2].textContent.toLowerCase(); // Poprawiony indeks po dodaniu checkbox
                    const rowActive = row.getAttribute('data-active');
                    const rowRecurring = row.getAttribute('data-recurring');

                    const matchesSearch = name.includes(search) || desc.includes(search);
                    const matchesStatus = !status || status === rowActive;
                    const matchesRecurring = !recurring || recurring === rowRecurring;

                    row.style.display = (matchesSearch && matchesStatus && matchesRecurring) ? '' : 'none';
                });

                // Aktualizuj stan "select all" po filtrowaniu
                const visibleCheckboxes = Array.from(rowCheckboxes).filter(cb =>
                    cb.closest('tr').style.display !== 'none'
                );
                const checkedVisibleCheckboxes = visibleCheckboxes.filter(cb => cb.checked);

                selectAllCheckbox.checked = visibleCheckboxes.length > 0 &&
                    checkedVisibleCheckboxes.length === visibleCheckboxes.length;
                selectAllCheckbox.indeterminate = checkedVisibleCheckboxes.length > 0 &&
                    checkedVisibleCheckboxes.length < visibleCheckboxes.length;
            }

            [searchInput, statusFilter, recurringFilter].forEach(el => el.addEventListener('input', filterTable));

            table.addEventListener('click', function (e) {
                const btn = e.target.closest('.btn-delete');
                if (btn) {
                    const id = btn.getAttribute('data-id');
                    if (confirm('{{ translations.confirm_delete_period }}')) {
                        api(`/ajax/product-availability-periods/${id}`, {
                            method: 'DELETE'
                        })
                            .then(response => {
                                if (response.success) {
                                    showSnack(true, '{{ translations.successfully_deleted }}');

                                    const row = btn.closest('tr');
                                    row.parentNode.removeChild(row);
                                } else {
                                    showSnack(false, response.message || '{{ translations.error_deleting_period }}');
                                }
                            })
                            .catch(() => {
                                showSnack(false, '{{ translations.error_deleting_period }}');
                            });
                    }
                }
            });
        });

        function getPeriodWithProducts(idPeriod) {
            try {
                downloadPdf(`/ajax/product-availability-periods/${idPeriod}/products/document`, {}, `availability_periods_with_products.pdf`);
            } catch (error) {
                console.error('Error calling downloadPdf:', error);
                alert('Error: ' + error.message);
            }
        }

        function getBulkPeriodsWithProducts() {
            // Pobierz wszystkie zaznaczone checkboxy
            const checkedCheckboxes = document.querySelectorAll('#periodsTable tbody input[type="checkbox"]:checked');
            const periodIds = Array.from(checkedCheckboxes).map(cb => cb.value);

            if (periodIds.length === 0) {
                alert('{{ translations.no_periods_selected }}');
                return;
            }

            try {
                // Wyślij dane jako POST z period_ids
                downloadPdf(`/ajax/product-availability-periods/products/document`, {ids: periodIds}, `availability_periods_with_products_bulk.pdf`, "POST");
            } catch (error) {
                console.error('Error calling downloadPdf:', error);
                alert('Error: ' + error.message);
            }
        }

        // Funkcja pobierająca okresy z tabeli
        function getPeriodsFromTable() {
            const table = document.getElementById('periodsTable');
            const rows = table.querySelectorAll('tbody tr');
            const periods = [];

            rows.forEach((row, index) => {
                const cells = row.querySelectorAll('td');
                if (cells.length < 6) return; // pomiń niepełne wiersze

                const isActive = row.getAttribute('data-active') === '1';
                if (!isActive) return; // pomiń nieaktywne okresy

                const period = {
                    name: cells[1].innerText.trim(),
                    description: cells[2].innerText.trim(),
                    start_date: cells[3].innerText.trim(),
                    end_date: cells[4].innerText.trim(),
                    is_recurring: row.getAttribute('data-recurring') === '1'
                };

                periods.push(period);
            });

            return periods;
        }

        // Funkcja sprawdzająca czy okres jest aktualnie obowiązujący
        function isPeriodCurrent(period) {
            const today = new Date();
            const currentMonth = today.getMonth() + 1; // miesiące 1-12
            const currentDay = today.getDate();

            if (period.is_recurring) {
                // Dla okresów cyklicznych sprawdzamy tylko dzień-miesiąc
                const startParts = period.start_date.split('.');
                const endParts = period.end_date.split('.');

                const startDay = parseInt(startParts[0]);
                const startMonth = parseInt(startParts[1]);
                const endDay = parseInt(endParts[0]);
                const endMonth = parseInt(endParts[1]);

                // Sprawdź czy obecna data mieści się w zakresie dzień-miesiąc
                if (startMonth === endMonth) {
                    // Ten sam miesiąc
                    return currentMonth === startMonth && currentDay >= startDay && currentDay <= endDay;
                } else if (startMonth < endMonth) {
                    // Okres w tym samym roku kalendarzowym
                    return (currentMonth === startMonth && currentDay >= startDay) ||
                           (currentMonth > startMonth && currentMonth < endMonth) ||
                           (currentMonth === endMonth && currentDay <= endDay);
                } else {
                    // Okres przechodzący przez nowy rok (np. grudzień-styczeń)
                    return (currentMonth === startMonth && currentDay >= startDay) ||
                           (currentMonth > startMonth || currentMonth < endMonth) ||
                           (currentMonth === endMonth && currentDay <= endDay);
                }
            } else {
                // Dla okresów jednorazowych sprawdzamy pełną datę
                const startDate = new Date(period.start_date);
                const endDate = new Date(period.end_date);
                return today >= startDate && today <= endDate;
            }
        }

        // Funkcja wyświetlająca aktualne okresy
        function displayCurrentPeriods() {
            const periods = getPeriodsFromTable();
            const currentPeriods = periods.filter(isPeriodCurrent);

            const container = document.getElementById('currentPeriodsContainer');
            const list = document.getElementById('currentPeriodsList');

            if (currentPeriods.length === 0) {
                container.style.display = 'none';
                return;
            }

            let html = '<div class="row">';
            currentPeriods.forEach((period, index) => {
                if (index > 0 && index % 2 === 0) {
                    html += '</div><div class="row mt-2">';
                }
                html += `
                    <div class="col-md-6">
                        <div class="border rounded p-3 bg-light">
                            <h6 class="mb-1"><i class="bi bi-calendar-check"></i> ${period.name}</h6>
                            <p class="text-muted small mb-1">${period.description}</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="badge bg-${period.is_recurring ? 'info' : 'primary'}">
                                    ${period.start_date} - ${period.end_date}
                                </span>
                                ${period.is_recurring ? '<span class="badge bg-secondary">{{ translations.recurring }}</span>' : ''}
                            </div>
                        </div>
                    </div>
                `;
            });
            html += '</div>';

            list.innerHTML = html;
            container.style.display = 'block';
        }

        // Wywołaj funkcję po załadowaniu strony
        document.addEventListener('DOMContentLoaded', function() {
            // Wyświetl aktualne okresy po załadowaniu strony
            setTimeout(() => {
                displayCurrentPeriods();
            }, 100); // małe opóźnienie aby upewnić się że tabela jest gotowa
        });
    </script>
{% endblock %}