{% extends "base.html" %}

{% block content %}
<div class="dashboard">
    <!-- Add Log Entry Form -->
    <div class="card">
        <h2>📝 Add Work Log</h2>
        <form id="logForm">
            <div class="form-group">
                <label for="project">Project Name *</label>
                <input type="text" id="project" name="project" list="projectList" required>
                <datalist id="projectList">
                    {% for proj in projects %}
                    <option value="{{ proj }}">
                    {% endfor %}
                </datalist>
            </div>
            
            <div class="form-group">
                <label for="description">Description *</label>
                <textarea id="description" name="description" rows="3" required></textarea>
            </div>
            
            <div class="form-group">
                <label for="date">Date</label>
                <input type="date" id="date" name="date" value="{{ today }}">
            </div>
            
            <button type="submit" class="btn btn-primary">Add Log Entry</button>
        </form>
        <div id="message" class="message"></div>
    </div>
    
    <!-- Reports Section -->
    <div class="card">
        <h2>📈 Generate Reports</h2>
        <div class="report-buttons">
            <a href="{{ url_for('report', mode='weekly') }}" class="btn btn-secondary">Weekly Report</a>
            <a href="{{ url_for('report', mode='biweekly') }}" class="btn btn-secondary">Bi-weekly Report</a>
            <a href="{{ url_for('report', mode='monthly') }}" class="btn btn-secondary">Monthly Report</a>
        </div>
        
        {% if report %}
        <div class="report-output">
            <h3>{{ report_mode|title }} Report</h3>
            <div class="report-content">
                {{ report|safe }}
            </div>
            {% if report_text %}
            <pre id="report-text" style="display:none;">{{ report_text }}</pre>
            <button onclick="copyReport()" class="btn btn-secondary">Copy to Clipboard</button>
            {% endif %}
        </div>
        {% endif %}
    </div>
    
    <!-- Recent Logs -->
    <div class="card">
        <h2>📋 Recent Logs</h2>
        {% if logs %}
        <div class="table-responsive">
            <table class="logs-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Date</th>
                        <th>Project</th>
                        <th>Description</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for log in logs[:20] %}
                    <tr id="log-{{ log.id }}">
                        <td>{{ log.id }}</td>
                        <td>{{ log.date.strftime('%Y-%m-%d') }}</td>
                        <td><span class="badge">{{ log.project }}</span></td>
                        <td>{{ log.description }}</td>
                        <td>
                            <button onclick="deleteLog({{ log.id }})" class="btn-delete">Delete</button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <p class="info-text">Showing {{ logs[:20]|length }} of {{ logs|length }} total logs</p>
        {% else %}
        <p class="empty-state">No logs found. Add your first log entry above!</p>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Set today's date as default
document.getElementById('date').valueAsDate = new Date();

// Handle form submission
document.getElementById('logForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const formData = new FormData(e.target);
    const messageDiv = document.getElementById('message');
    
    try {
        const response = await fetch('/add_log', {
            method: 'POST',
            body: formData
        });
        
        const result = await response.json();
        
        if (result.success) {
            messageDiv.className = 'message success';
            messageDiv.textContent = '✓ ' + result.message;
            e.target.reset();
            document.getElementById('date').valueAsDate = new Date();
            
            // Reload page after 1 second
            setTimeout(() => location.reload(), 1000);
        } else {
            messageDiv.className = 'message error';
            messageDiv.textContent = '✗ ' + result.error;
        }
    } catch (error) {
        messageDiv.className = 'message error';
        messageDiv.textContent = '✗ Error adding log entry';
    }
});

// Delete log function
async function deleteLog(logId) {
    if (!confirm('Are you sure you want to delete this log entry?')) {
        return;
    }
    
    try {
        const response = await fetch(`/delete_log/${logId}`, {
            method: 'POST'
        });
        
        const result = await response.json();
        
        if (result.success) {
            document.getElementById(`log-${logId}`).remove();
        } else {
            alert('Error deleting log entry');
        }
    } catch (error) {
        alert('Error deleting log entry');
    }
}

// Copy report to clipboard
function copyReport() {
    const reportText = document.getElementById('report-text').textContent;
    
    navigator.clipboard.writeText(reportText).then(() => {
        alert('Report copied to clipboard!');
    }).catch(err => {
        console.error('Failed to copy:', err);
    });
}
</script>
{% endblock %}