{% extends "base_page.html" %}

{% block title %}Late Arrival System{% endblock %}
{% block page_title %}Late Arrival System Management{% endblock %}

{% block content %}
<div class="row">
    <!-- System Status Card -->
    <div class="col-md-6 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">
                    <i class="fas fa-cog me-2"></i>System Status
                </h5>
            </div>
            <div class="card-body">
                <div id="system-status">
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-2">Checking system status...</p>
                    </div>
                </div>
                <div class="mt-3">
                    <button class="btn btn-primary" onclick="checkSystemStatus()">
                        <i class="fas fa-sync me-2"></i>Refresh Status
                    </button>
                    <button class="btn btn-warning" onclick="restartScheduler()">
                        <i class="fas fa-redo me-2"></i>Restart Scheduler
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Manual Controls Card -->
    <div class="col-md-6 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">
                    <i class="fas fa-play me-2"></i>Manual Controls
                </h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <button class="btn btn-primary" onclick="sendTestEmail()">
                        <i class="fas fa-paper-plane me-2"></i>Send Test Email
                    </button>
                    <button class="btn btn-success" onclick="runManualCheck()">
                        <i class="fas fa-search me-2"></i>Run Manual Late Check (Background)
                    </button>
                    <button class="btn btn-warning" onclick="runQuickTest()">
                        <i class="fas fa-bolt me-2"></i>Quick Test (5 employees)
                    </button>
                    <button class="btn btn-info" onclick="checkTodaysEmails()">
                        <i class="fas fa-envelope me-2"></i>Check Today's Emails
                    </button>
                    <button class="btn btn-secondary" onclick="updateStatistics()">
                        <i class="fas fa-chart-bar me-2"></i>Update Statistics
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Results Card -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">
                    <i class="fas fa-terminal me-2"></i>Results
                </h5>
            </div>
            <div class="card-body">
                <div id="results-area">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        Click any button above to see results here.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Today's Late Arrivals -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">
                    <i class="fas fa-clock me-2"></i>Today's Late Arrivals
                </h5>
            </div>
            <div class="card-body">
                <div id="late-arrivals-table">
                    <button class="btn btn-outline-primary" onclick="loadTodaysLateArrivals()">
                        <i class="fas fa-refresh me-2"></i>Load Today's Data
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Global functions
function showResult(title, data, type = 'info') {
    const alertClass = type === 'success' ? 'alert-success' : 
                      type === 'error' ? 'alert-danger' : 
                      type === 'warning' ? 'alert-warning' : 'alert-info';
    
    const icon = type === 'success' ? 'check-circle' : 
                type === 'error' ? 'exclamation-triangle' : 
                type === 'warning' ? 'exclamation-circle' : 'info-circle';
    
    document.getElementById('results-area').innerHTML = `
        <div class="alert ${alertClass}">
            <h6><i class="fas fa-${icon} me-2"></i>${title}</h6>
            <pre class="mb-0" style="white-space: pre-wrap; font-size: 12px;">${JSON.stringify(data, null, 2)}</pre>
        </div>
    `;
}

// Test Email Function
function sendTestEmail() {
    showLoading('Sending test email to miryusifbabayev42@gmail.com...');
    
    fetch('/api/send_test_email', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showResult('✅ Test Email Sent!', {
                message: data.message,
                recipient: 'miryusifbabayev42@gmail.com',
                status: 'SUCCESS'
            }, 'success');
        } else {
            showResult('❌ Test Email Failed', {
                error: data.error,
                recipient: 'miryusifbabayev42@gmail.com',
                status: 'FAILED'
            }, 'error');
        }
    })
    .catch(error => {
        showResult('❌ Test Email Error', {
            error: error.toString(),
            recipient: 'miryusifbabayev42@gmail.com',
            status: 'ERROR'
        }, 'error');
    });
}

function showLoading(message) {
    document.getElementById('results-area').innerHTML = `
        <div class="alert alert-info">
            <div class="d-flex align-items-center">
                <div class="spinner-border spinner-border-sm me-3" role="status"></div>
                <span>${message}</span>
            </div>
        </div>
    `;
}

// System Status Functions
function checkSystemStatus() {
    showLoading('Checking system status...');
    
    fetch('/api/scheduler_status')
        .then(response => response.json())
        .then(data => {
            showResult('📊 System Status', data, 'info');
            updateStatusDisplay(data);
        })
        .catch(error => {
            showResult('❌ Status Check Error', error.toString(), 'error');
        });
}

function updateStatusDisplay(status) {
    const isRunning = status.status === 'running';
    const statusColor = isRunning ? 'success' : 'danger';
    const statusIcon = isRunning ? 'check-circle' : 'times-circle';
    const statusText = isRunning ? 'Running' : 'Stopped';
    
    document.getElementById('system-status').innerHTML = `
        <div class="alert alert-${statusColor}">
            <h6><i class="fas fa-${statusIcon} me-2"></i>Scheduler Status: ${statusText}</h6>
            <small>Last Check: ${status.last_check || 'Never'}</small><br>
            <small>Last Stats Update: ${status.last_stats_update || 'Never'}</small>
        </div>
    `;
}

function restartScheduler() {
    showLoading('Restarting scheduler...');
    
    fetch('/api/restart_scheduler', {method: 'POST'})
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showResult('✅ Scheduler Restarted', data, 'success');
                setTimeout(checkSystemStatus, 2000);
            } else {
                showResult('❌ Restart Failed', data, 'error');
            }
        })
        .catch(error => {
            showResult('❌ Restart Error', error.toString(), 'error');
        });
}

function runQuickTest() {
    showLoading('Running quick test (5 employees)...');
    
    fetch('/api/quick_late_test', {method: 'POST'})
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showResult('⚡ Quick Test Results', data, 'success');
            } else {
                showResult('❌ Quick Test Failed', data, 'error');
            }
        })
        .catch(error => {
            showResult('❌ Quick Test Error', error.toString(), 'error');
        });
}

// Manual Control Functions
function runManualCheck() {
    showLoading('Running manual late arrival check...');
    
    fetch('/api/manual_late_check', {method: 'POST'})
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showResult('✅ Manual Check Completed', data, 'success');
            } else {
                showResult('❌ Manual Check Failed', data, 'error');
            }
        })
        .catch(error => {
            showResult('❌ Manual Check Error', error.toString(), 'error');
        });
}

function checkTodaysEmails() {
    showLoading('Checking today\'s emails...');
    
    // Bu endpoint'i oluşturmamız lazım
    fetch('/api/todays_emails')
        .then(response => response.json())
        .then(data => {
            showResult('📧 Today\'s Emails', data, 'info');
        })
        .catch(error => {
            showResult('❌ Email Check Error', error.toString(), 'error');
        });
}

function updateStatistics() {
    showLoading('Updating monthly statistics...');
    
    fetch('/api/update_statistics', {method: 'POST'})
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showResult('✅ Statistics Updated', data, 'success');
            } else {
                showResult('❌ Statistics Update Failed', data, 'error');
            }
        })
        .catch(error => {
            showResult('❌ Statistics Error', error.toString(), 'error');
        });
}

function loadTodaysLateArrivals() {
    document.getElementById('late-arrivals-table').innerHTML = `
        <div class="text-center">
            <div class="spinner-border text-primary" role="status"></div>
            <p class="mt-2">Loading today's late arrivals...</p>
        </div>
    `;
    
    fetch('/api/todays_late_arrivals')
        .then(response => response.json())
        .then(data => {
            if (data.length > 0) {
                let tableHtml = `
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Employee</th>
                                    <th>Email</th>
                                    <th>Expected</th>
                                    <th>Actual</th>
                                    <th>Late Minutes</th>
                                    <th>Email Sent</th>
                                </tr>
                            </thead>
                            <tbody>
                `;
                
                data.forEach(record => {
                    const emailStatus = record.email_sent ? 
                        '<span class="badge bg-success">Sent</span>' : 
                        '<span class="badge bg-danger">Not Sent</span>';
                    
                    tableHtml += `
                        <tr>
                            <td>${record.employee_name}</td>
                            <td>${record.employee_email || 'N/A'}</td>
                            <td>${record.expected_time}</td>
                            <td>${record.actual_time}</td>
                            <td>${record.late_minutes}</td>
                            <td>${emailStatus}</td>
                        </tr>
                    `;
                });
                
                tableHtml += '</tbody></table></div>';
                document.getElementById('late-arrivals-table').innerHTML = tableHtml;
            } else {
                document.getElementById('late-arrivals-table').innerHTML = `
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>No late arrivals found for today.
                    </div>
                `;
            }
        })
        .catch(error => {
            document.getElementById('late-arrivals-table').innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>Error loading data: ${error}
                </div>
            `;
        });
}

// Auto-load system status on page load
document.addEventListener('DOMContentLoaded', function() {
    checkSystemStatus();
});
</script>

{% endblock %}