<!DOCTYPE html>
<html lang="{{ current_language }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ _('device_info_title') }} - iAccess Terminal</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #667eea;
            --secondary-color: #764ba2;
            --success-color: #28a745;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
            --info-color: #17a2b8;
            --dark-color: #343a40;
            --light-color: #f8f9fa;
        }

        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .navbar {
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
        }

        .navbar-brand {
            font-weight: 700;
            color: var(--primary-color) !important;
        }

        .nav-link {
            color: var(--dark-color) !important;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .nav-link:hover {
            color: var(--primary-color) !important;
            transform: translateY(-1px);
        }

        .main-container {
            margin-top: 80px;
            padding: 20px;
        }

        .info-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .card-header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 30px;
            border-radius: 20px 20px 0 0;
        }

        .card-header h2 {
            margin: 0;
            font-size: 1.8rem;
            font-weight: 700;
        }

        .card-header p {
            margin: 10px 0 0 0;
            opacity: 0.9;
            font-size: 1rem;
        }

        .filter-section {
            background: rgba(255, 255, 255, 0.5);
            border-radius: 15px;
            padding: 20px;
            margin: 20px 0;
        }

        .form-select, .form-control {
            border-radius: 12px;
            border: 2px solid #e9ecef;
            padding: 12px 20px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.9);
        }

        .form-select:focus, .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
            background: white;
        }

        .btn-modern {
            border-radius: 12px;
            padding: 12px 25px;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .btn-primary-modern {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
        }

        .btn-primary-modern:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
        }

        .table {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            margin-bottom: 0;
        }

        .table th {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            font-weight: 600;
            border: none;
            padding: 15px;
        }

        .table td {
            padding: 15px;
            vertical-align: middle;
            border-color: #e9ecef;
        }

        .status-online {
            color: var(--success-color);
            font-weight: 600;
        }

        .status-offline {
            color: var(--danger-color);
            font-weight: 600;
        }

        .status-unknown {
            color: var(--dark-color);
            font-weight: 600;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
        }

        .empty-state i {
            font-size: 4rem;
            color: rgba(102, 126, 234, 0.3);
            margin-bottom: 20px;
        }

        .empty-state h4 {
            color: var(--dark-color);
            font-weight: 600;
            margin-bottom: 10px;
        }

        .empty-state p {
            color: var(--dark-color);
            opacity: 0.7;
        }

        .modal-content {
            border-radius: 20px;
            border: none;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        }

        .modal-header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            border-radius: 20px 20px 0 0;
            border: none;
            padding: 20px 30px;
        }

        .modal-body {
            padding: 30px;
        }

        .modal-footer {
            border-top: 1px solid #e9ecef;
            padding: 20px 30px;
        }

        @media (max-width: 768px) {
            .main-container {
                margin-top: 60px;
                padding: 10px;
            }
            
            .card-header {
                padding: 20px;
            }
            
            .card-header h2 {
                font-size: 1.5rem;
            }
            
            .filter-section {
                padding: 15px;
            }
            
            .table td, .table th {
            padding: 10px;
            }
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg fixed-top">
        <div class="container">
            <a class="navbar-brand" href="https://monicont.com" target="_blank">
                <img src="{{ url_for('static', filename='img/monicont_logo.png') }}" alt="Logo" style="width: 120px; height: auto;" class="me-3">
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('home') }}">
                            <i class="fas fa-home me-1"></i>{{ _('dashboard') }}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('devices') }}">
                            <i class="fas fa-microchip me-1"></i>{{ _('devices') }}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('users') }}">
                            <i class="fas fa-users me-1"></i>{{ _('users_title') }}
                        </a>
                    </li>
                </ul>
                

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

    <!-- Main Content -->
    <div class="main-container">
        <div class="container">
            <div class="info-card">
                <div class="card-header">
                    <h2><i class="fas fa-info-circle me-2"></i>{{ _('device_info_title') }}</h2>
                    <p>{{ _('device_info_subtitle') }}</p>
            </div>
                
                <div class="card-body p-4">
                    <!-- Refresh Button -->
                    <div class="text-end mb-3">
                        <button class="btn btn-primary-modern btn-modern" onclick="refreshData()">
                            <i class="fas fa-sync-alt me-2"></i>{{ _('device_info_refresh') }}
                </button>
        </div>
        
                    <!-- Table -->
        <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>{{ _('device_info_id') }}</th>
                                    <th>{{ _('device_info_name') }}</th>
                                    <th>{{ _('device_info_device_id') }}</th>
                                    <th>{{ _('device_info_serial') }}</th>
                                    <th>{{ _('device_info_firmware') }}</th>
                                    <th>{{ _('device_info_ip') }}</th>
                                    <th>{{ _('device_info_status') }}</th>
                                    <th>{{ _('device_info_last_update') }}</th>
                                    <th>{{ _('device_info_actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for info in device_infos %}
                    <tr data-device-id="{{ info.device_id }}">
                        <td>{{ info.id }}</td>
                        <td>{{ info.device_name }}</td>
                        <td>{{ info.device_id }}</td>
                                    <td>{{ info.device_id }}</td>
                        <td>{{ info.firmware_version }}</td>
                        <td>{{ info.ip_address }}</td>
                        <td>
                                        {% if info.status == 'online' %}
                                        <span class="status-online">
                                            <i class="fas fa-circle me-1"></i>{{ _('device_info_online') }}
                                        </span>
                                        {% elif info.status == 'offline' %}
                                        <span class="status-offline">
                                            <i class="fas fa-circle me-1"></i>{{ _('device_info_offline') }}
                                        </span>
                                        {% else %}
                                        <span class="status-unknown">
                                            <i class="fas fa-circle me-1"></i>{{ _('device_info_unknown') }}
                            </span>
                                        {% endif %}
                        </td>
                        <td>{{ info.last_update }}</td>
                        <td>
                                        <button class="btn btn-sm btn-primary-modern" onclick="viewDetails('{{ info.device_id }}')">
                                            <i class="fas fa-eye me-1"></i>{{ _('device_info_view') }}
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        {% if not device_infos %}
                    <div class="empty-state">
                        <i class="fas fa-info-circle"></i>
                        <h4>{{ _('device_info_no_data') }}</h4>
                        <p>{{ _('device_info_no_data_desc') }}</p>
        </div>
        {% endif %}
                </div>
            </div>
    </div>
</div>

    <!-- Details Modal -->
<div class="modal fade" id="detailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                    <h5 class="modal-title">{{ _('device_info_details') }}</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="detailContent">
                    <!-- Detail content will be loaded here -->
            </div>
            <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-modern" data-bs-dismiss="modal">
                        {{ _('device_info_close') }}
                    </button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const detailModal = new bootstrap.Modal(document.getElementById('detailModal'));

        // View details
        async function viewDetails(deviceId) {
            try {
                const response = await fetch(`/api/deviceinfo/${deviceId}`);
                const data = await response.json();
                
                if (data.success) {
                    const detailContent = document.getElementById('detailContent');
                    const info = data.info;
                    
                    let html = `
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="text-primary"><i class="fas fa-microchip me-2"></i>Cihaz Bilgileri</h6>
                                <div class="card mb-3">
                                    <div class="card-body">
                                        <p><strong>Device ID:</strong> ${info.device_info.device_id}</p>
                                        <p><strong>IP Adresi:</strong> ${info.device_info.ip_address || 'N/A'}</p>
                                        <p><strong>Firmware:</strong> ${info.device_info.firmware_version || 'N/A'}</p>
                                        <p><strong>Durum:</strong> 
                                            <span class="badge ${info.device_info.is_connected ? 'bg-success' : 'bg-danger'}">
                                                ${info.device_info.is_connected ? 'Çevrimiçi' : 'Çevrimdışı'}
                                            </span>
                                        </p>
                                        <p><strong>Son Güncelleme:</strong> ${info.device_info.last_update}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-primary"><i class="fas fa-network-wired me-2"></i>Bağlantı Bilgileri</h6>
                                <div class="card mb-3">
                                    <div class="card-body">
                                        <p><strong>Client Connections:</strong> 
                                            <span class="badge ${info.connection_info.in_client_connections ? 'bg-success' : 'bg-secondary'}">
                                                ${info.connection_info.in_client_connections ? 'Aktif' : 'Pasif'}
                                            </span>
                                        </p>
                                        <p><strong>Response Status:</strong> 
                                            <span class="badge ${info.connection_info.in_response_status ? 'bg-success' : 'bg-secondary'}">
                                                ${info.connection_info.in_response_status ? 'Aktif' : 'Pasif'}
                                            </span>
                                        </p>
                                        <p><strong>Son Yanıt:</strong> ${info.connection_info.last_response || 'N/A'}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                    
                    // Device data'yı kullan
                    const deviceDataToShow = info.device_data;
                    
                    // Device Data (getdeviceinfo response)
                    if (Object.keys(deviceDataToShow).length > 0) {
                        html += `
                            <div class="mb-4">
                                <h6 class="text-primary"><i class="fas fa-database me-2"></i>Cihaz Detay Bilgileri (getdeviceinfo)</h6>
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-2">
                                                    <strong>Firmware Versiyonu:</strong> 
                                                    <span class="badge bg-primary">${deviceDataToShow.version || 'N/A'}</span>
                                                </div>
                                                <div class="mb-2">
                                                    <strong>Cihaz Tipi:</strong> 
                                                    <span class="badge ${deviceDataToShow.isTerminal ? 'bg-success' : 'bg-info'}">
                                                        ${deviceDataToShow.isTerminal ? 'Terminal' : 'Kontrol Ünitesi'}
                                                    </span>
                                                </div>
                                                <div class="mb-2">
                                                    <strong>Yedek Modu:</strong> 
                                                    <span class="badge ${deviceDataToShow.usingBackup ? 'bg-warning' : 'bg-success'}">
                                                        ${deviceDataToShow.usingBackup ? 'Aktif' : 'Pasif'}
                                                    </span>
                                                </div>
                                                <div class="mb-2">
                                                    <strong>Cihaz Hataları:</strong> 
                                                    <span class="badge ${deviceDataToShow.deviceErrors > 0 ? 'bg-danger' : 'bg-success'}">
                                                        ${deviceDataToShow.deviceErrors || 0}
                                                    </span>
                                                </div>
                                                <div class="mb-2">
                                                    <strong>Reset Sayısı:</strong> 
                                                    <span class="badge bg-secondary">${deviceDataToShow.resetCount || 0}</span>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <h6 class="text-secondary mb-3"><i class="fas fa-memory me-2"></i>Sistem Durumu</h6>
                                                <div class="mb-2">
                                                    <strong>Boş Bellek:</strong> 
                                                    <span class="badge bg-info">${deviceDataToShow.heapfree || 0} bytes</span>
                                                </div>
                                                <div class="mb-2">
                                                    <strong>Log Boyutu:</strong> 
                                                    <span class="badge bg-secondary">${deviceDataToShow.logSize || 0}</span>
                                                </div>
                                                <div class="mb-2">
                                                    <strong>Log Dosya Boyutu:</strong> 
                                                    <span class="badge bg-secondary">${deviceDataToShow.logFileSize || 0} bytes</span>
                                                </div>
                                                <div class="mb-2">
                                                    <strong>LED Parlaklığı:</strong> 
                                                    <span class="badge bg-warning">${deviceDataToShow.ledBrightness || 0}%</span>
                                                </div>
                                                <div class="mb-2">
                                                    <strong>RS485 Baudrate:</strong> 
                                                    <span class="badge bg-dark">${deviceDataToShow.rs485Baudrate || 0}</span>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <hr>
                                        
                                        <div class="row">
                                            <div class="col-md-6">
                                                <h6 class="text-secondary mb-3"><i class="fas fa-network-wired me-2"></i>Ağ Ayarları</h6>
                                                <div class="mb-2">
                                                    <strong>Hedef Sunucu:</strong> 
                                                    <span class="badge bg-primary">${deviceDataToShow.remotetarget || 'N/A'}</span>
                                                </div>
                                                <div class="mb-2">
                                                    <strong>IP Adresi:</strong> 
                                                    <span class="badge bg-info">${deviceDataToShow.ethdhcp ? deviceDataToShow.ethdhcp[0] : 'N/A'}</span>
                                                </div>
                                                <div class="mb-2">
                                                    <strong>Gateway:</strong> 
                                                    <span class="badge bg-secondary">${deviceDataToShow.ethdhcp ? deviceDataToShow.ethdhcp[1] : 'N/A'}</span>
                                                </div>
                                                <div class="mb-2">
                                                    <strong>Subnet Mask:</strong> 
                                                    <span class="badge bg-secondary">${deviceDataToShow.ethdhcp ? deviceDataToShow.ethdhcp[2] : 'N/A'}</span>
                                                </div>
                                                <div class="mb-2">
                                                    <strong>MAC Adresi:</strong> 
                                                    <span class="badge bg-dark">${deviceDataToShow.ethdhcp ? deviceDataToShow.ethdhcp[3] : 'N/A'}</span>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <h6 class="text-secondary mb-3"><i class="fas fa-cogs me-2"></i>Donanım Ayarları</h6>
                                                <div class="mb-2">
                                                    <strong>RFID Bilgisi:</strong> 
                                                    <span class="badge bg-success">${deviceDataToShow.rfidInfo ? deviceDataToShow.rfidInfo.join(', ') : 'N/A'}</span>
                                                </div>
                                                <div class="mb-2">
                                                    <strong>Giriş Sayısı:</strong> 
                                                    <span class="badge bg-info">${deviceDataToShow.inputs || 0}</span>
                                                </div>
                                                <div class="mb-2">
                                                    <strong>Relay 1:</strong> 
                                                    <span class="badge bg-warning">${deviceDataToShow.relay1 ? deviceDataToShow.relay1.join(', ') : 'N/A'}</span>
                                                </div>
                                                <div class="mb-2">
                                                    <strong>Relay 2:</strong> 
                                                    <span class="badge bg-warning">${deviceDataToShow.relay2 ? deviceDataToShow.relay2.join(', ') : 'N/A'}</span>
                                                </div>
                                                <div class="mb-2">
                                                    <strong>Rate Limit:</strong> 
                                                    <span class="badge bg-dark">${deviceDataToShow.ratelimit || 0}</span>
                                                </div>
                                            </div>
                                        </div>
                                        

                                    </div>
                                </div>
                            </div>
                        `;
                    }
                    

                    
                    detailContent.innerHTML = html;
                    detailModal.show();
        } else {
                    alert(data.message || 'Error loading device details');
                }
            } catch (error) {
                console.error('Error:', error);
                alert('Error loading device details');
            }
        }

        // Refresh data
function refreshData() {
    location.reload();
}

        // Auto refresh every 30 seconds
setInterval(refreshData, 30000);
</script>
</body>
</html> 