<!-- SigmaParameter Data Modal -->
<div class="modal fade" id="sigmaParameterModal" tabindex="-1" aria-labelledby="sigmaParameterModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="sigmaParameterModalLabel">
                    <i class="bi bi-graph-up"></i> Данные SigmaParameter
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Закрыть"></button>
            </div>
            <div class="modal-body" id="sigmaParameterModalBody">
                <div class="text-center py-4">
                    <div class="spinner-border text-info" role="status">
                        <span class="visually-hidden">Загрузка...</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
            </div>
        </div>
    </div>
</div>

<script>
function showSigmaParameterModal(parameterId) {
    // Показываем модальное окно
    const modal = new bootstrap.Modal(document.getElementById('sigmaParameterModal'));
    modal.show();
    
    // Показываем индикатор загрузки
    const modalBody = document.getElementById('sigmaParameterModalBody');
    modalBody.innerHTML = `
        <div class="text-center py-4">
            <div class="spinner-border text-info" role="status">
                <span class="visually-hidden">Загрузка...</span>
            </div>
        </div>
    `;
    
    // Загружаем данные
    fetch(`/api/sigma-parameter/${parameterId}/`)
        .then(response => {
            if (!response.ok) {
                throw new Error('Ошибка загрузки данных');
            }
            return response.json();
        })
        .then(data => {
            if (data.sigma_parameters.length === 0) {
                modalBody.innerHTML = `
                    <div class="alert alert-info" role="alert">
                        <i class="bi bi-info-circle"></i> Нет связанных SigmaParameter
                    </div>
                `;
                return;
            }

            // Формируем HTML с данными
            let html = '<div class="container-fluid">';
            
            data.sigma_parameters.forEach((sigma, index) => {
                html += `
                    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <strong><i class="bi bi-broadcast"></i> SigmaParameter #${index + 1}</strong>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <!-- Основная информация -->
                                <div class="col-md-6">
                                    <div class="card h-100">
                                        <div class="card-header bg-light">
                                            <strong><i class="bi bi-info-circle"></i> Основная информация</strong>
                                        </div>
                                        <div class="card-body">
                                            <table class="table table-sm table-borderless mb-0">
                                                <tbody>
                                                    <tr>
                                                        <td class="text-muted" style="width: 40%;">Спутник:</td>
                                                        <td><strong>${sigma.satellite}</strong></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-muted">Частота:</td>
                                                        <td><strong>${sigma.frequency} МГц</strong></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-muted">Частота в Ku:</td>
                                                        <td><strong>${sigma.transfer_frequency} МГц</strong></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-muted">Полоса частот:</td>
                                                        <td><strong>${sigma.freq_range} МГц</strong></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-muted">Поляризация:</td>
                                                        <td><span class="badge bg-info">${sigma.polarization}</span></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Технические параметры -->
                                <div class="col-md-6">
                                    <div class="card h-100">
                                        <div class="card-header bg-light">
                                            <strong><i class="bi bi-gear"></i> Технические параметры</strong>
                                        </div>
                                        <div class="card-body">
                                            <table class="table table-sm table-borderless mb-0">
                                                <tbody>
                                                    <tr>
                                                        <td class="text-muted" style="width: 40%;">Модуляция:</td>
                                                        <td><span class="badge bg-secondary">${sigma.modulation}</span></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-muted">Стандарт:</td>
                                                        <td><span class="badge bg-secondary">${sigma.standard}</span></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-muted">Сим. скорость:</td>
                                                        <td><strong>${sigma.bod_velocity} БОД</strong></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-muted">ОСШ:</td>
                                                        <td><strong>${sigma.snr} дБ</strong></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-muted">Мощность:</td>
                                                        <td><strong>${sigma.power} дБм</strong></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-muted">Статус:</td>
                                                        <td>${sigma.status}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-muted">Пакетность:</td>
                                                        <td>${sigma.packets}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Временные параметры -->
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header bg-light">
                                            <strong><i class="bi bi-clock-history"></i> Временные параметры</strong>
                                        </div>
                                        <div class="card-body">
                                            <table class="table table-sm table-borderless mb-0">
                                                <tbody>
                                                    <tr>
                                                        <td class="text-muted" style="width: 40%;">Начало измерения:</td>
                                                        <td><strong>${sigma.datetime_begin}</strong></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-muted">Окончание измерения:</td>
                                                        <td><strong>${sigma.datetime_end}</strong></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Отметки -->
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header bg-light">
                                            <strong><i class="bi bi-check2-square"></i> Отметки (${sigma.marks.length})</strong>
                                        </div>
                                        <div class="card-body">
                `;
                
                if (sigma.marks.length > 0) {
                    html += `
                        <div class="table-responsive" style="max-height: 200px; overflow-y: auto;">
                            <table class="table table-sm table-striped table-bordered mb-0">
                                <thead class="table-light sticky-top">
                                    <tr>
                                        <th style="width: 20%;">Наличие сигнала</th>
                                        <th>Дата</th>
                                    </tr>
                                </thead>
                                <tbody>
                    `;
                    
                    sigma.marks.forEach(mark => {
                        const markClass = mark.mark === '+' ? 'text-success' : 'text-danger';
                        html += `
                            <tr>
                                <td class="${markClass}"><strong>${mark.mark}</strong></td>
                                <td>${mark.date}</td>
                            </tr>
                        `;
                    });
                    
                    html += `
                                </tbody>
                            </table>
                        </div>
                    `;
                } else {
                    html += `
                        <p class="text-muted mb-0">Нет отметок</p>
                    `;
                }
                
                html += `
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
            });
            
            html += '</div>';
            
            modalBody.innerHTML = html;
        })
        .catch(error => {
            modalBody.innerHTML = `
                <div class="alert alert-danger" role="alert">
                    <i class="bi bi-exclamation-triangle"></i> ${error.message}
                </div>
            `;
        });
}
</script>
