{% extends "layout.html" %}

{% block content %}
<div class="hero">
    <h1>Welcome to TimeTrack</h1>
    <p>Track your work hours easily and efficiently</p>
</div>

{% if not g.user %}

Please <a href="{{ url_for('login') }}">login</a> or <a href="{{ url_for('register') }}">register</a> to access your dashboard.

{% else %}

<div class="timetrack-container">
    <h2>Time Tracking</h2>

    <div class="timer-section">
        {% if active_entry %}
            <div class="active-timer">
                <h3>Currently Working</h3>
                <p>Started at: {{ active_entry.arrival_time.strftime('%Y-%m-%d %H:%M:%S') }}</p>
                {% if active_entry.project %}
                <p class="project-info">Project: <strong>{{ active_entry.project.code }} - {{ active_entry.project.name }}</strong></p>
                {% endif %}
                <div id="timer"
                     data-start="{{ active_entry.arrival_time.timestamp() }}"
                     data-breaks="{{ active_entry.total_break_duration }}"
                     data-paused="{{ 'true' if active_entry.is_paused else 'false' }}">00:00:00</div>

                {% if active_entry.is_paused %}
                <p class="break-info">On break since {{ active_entry.pause_start_time.strftime('%H:%M:%S') }}</p>
                {% endif %}

                {% if active_entry.total_break_duration > 0 %}
                <p class="break-total">Total break time: {{ '%d:%02d:%02d'|format(active_entry.total_break_duration//3600, (active_entry.total_break_duration%3600)//60, active_entry.total_break_duration%60) }}</p>
                {% endif %}

                <div class="button-group">
                    <button id="pause-btn" class="{% if active_entry.is_paused %}resume-btn{% else %}pause-btn{% endif %}" data-id="{{ active_entry.id }}">
                        {% if active_entry.is_paused %}Resume work{% else %}Pause{% endif %}
                    </button>
                    <button id="leave-btn" class="leave-btn" data-id="{{ active_entry.id }}">Leave</button>
                </div>
            </div>
        {% else %}
            <div class="inactive-timer">
                <h3>Not Currently Working</h3>
                <div class="start-work-form">
                    <div class="form-group">
                        <label for="project-select">Select Project (Optional):</label>
                        <select id="project-select" name="project_id">
                            <option value="">No specific project</option>
                            {% for project in available_projects %}
                            <option value="{{ project.id }}">{{ project.code }} - {{ project.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="work-notes">Notes (Optional):</label>
                        <textarea id="work-notes" name="notes" rows="2" placeholder="What are you working on?"></textarea>
                    </div>
                    <button id="arrive-btn" class="arrive-btn">Arrive</button>
                </div>
            </div>
        {% endif %}
    </div>

    <div class="history-section">
        <h3>Time Entry History</h3>
        {% if history %}
            <table class="time-history">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Project</th>
                        <th>Arrival</th>
                        <th>Departure</th>
                        <th>Work Duration</th>
                        <th>Break Duration</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for entry in history %}
                    <tr data-entry-id="{{ entry.id }}">
                        <td>{{ entry.arrival_time.strftime('%Y-%m-%d') }}</td>
                        <td>
                            {% if entry.project %}
                                <span class="project-tag">{{ entry.project.code }}</span>
                                <small>{{ entry.project.name }}</small>
                            {% else %}
                                <em>No project</em>
                            {% endif %}
                        </td>
                        <td>{{ entry.arrival_time.strftime('%H:%M:%S') }}</td>
                        <td>{{ entry.departure_time.strftime('%H:%M:%S') if entry.departure_time else 'Active' }}</td>
                        <td>{{ '%d:%02d:%02d'|format(entry.duration//3600, (entry.duration%3600)//60, entry.duration%60) if entry.duration is not none else 'In progress' }}</td>
                        <td>{{ '%d:%02d:%02d'|format(entry.total_break_duration//3600, (entry.total_break_duration%3600)//60, entry.total_break_duration%60) if entry.total_break_duration is not none else '00:00:00' }}</td>
                        <td>
                            {% if entry.departure_time and not active_entry %}
                            <button class="resume-work-btn" data-id="{{ entry.id }}">Resume Work</button>
                            {% endif %}
                            <button class="edit-entry-btn" data-id="{{ entry.id }}">Edit</button>
                            <button class="delete-entry-btn" data-id="{{ entry.id }}">Delete</button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% else %}
            <p>No time entries recorded yet.</p>
        {% endif %}
    </div>
</div>

{% endif %}

<div class="features">
    <div class="feature">
        <h3>Easy Time Tracking</h3>
        <p>Simply click "Arrive" when you start working and "Leave" when you're done.</p>
    </div>
    <div class="feature">
        <h3>Break Management</h3>
        <p>Use the Pause button when taking breaks. Your break time is tracked separately.</p>
    </div>
    <div class="feature">
        <h3>Detailed History</h3>
        <p>View your complete work history with precise timestamps and durations.</p>
    </div>
    <div class="feature">
        <h3>Simple Interface</h3>
        <p>No complicated setup or configuration needed. Start tracking right away!</p>
    </div>
</div>

<!-- Edit Entry Modal -->
<div id="edit-modal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h3>Edit Time Entry</h3>
        <form id="edit-entry-form">
            <input type="hidden" id="edit-entry-id">
            <div class="form-group">
                <label for="edit-arrival-date">Arrival Date:</label>
                <input type="date" id="edit-arrival-date" required>
                <small>Format: YYYY-MM-DD</small>
            </div>
            <div class="form-group">
                <label for="edit-arrival-time">Arrival Time (24h):</label>
                <input type="time" id="edit-arrival-time" required step="1">
                <small>Format: HH:MM (24-hour)</small>
            </div>
            <div class="form-group">
                <label for="edit-departure-date">Departure Date:</label>
                <input type="date" id="edit-departure-date">
                <small>Format: YYYY-MM-DD</small>
            </div>
            <div class="form-group">
                <label for="edit-departure-time">Departure Time (24h):</label>
                <input type="time" id="edit-departure-time" step="1">
                <small>Format: HH:MM (24-hour)</small>
            </div>
            <button type="submit" class="btn">Save Changes</button>
        </form>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="delete-modal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h3>Confirm Deletion</h3>
        <p>Are you sure you want to delete this time entry? This action cannot be undone.</p>
        <input type="hidden" id="delete-entry-id">
        <div class="modal-actions">
            <button id="confirm-delete" class="btn btn-danger">Delete</button>
            <button id="cancel-delete" class="btn">Cancel</button>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Edit entry functionality
        document.querySelectorAll('.edit-entry-btn').forEach(button => {
            button.addEventListener('click', function() {
                const entryId = this.getAttribute('data-id');
                const row = document.querySelector(`tr[data-entry-id="${entryId}"]`);
                const cells = row.querySelectorAll('td');

                // Get date and time from the row
                const dateStr = cells[0].textContent.trim();
                const arrivalTimeStr = cells[1].textContent.trim();
                const departureTimeStr = cells[2].textContent.trim();

                // Set values in the form
                document.getElementById('edit-entry-id').value = entryId;
                document.getElementById('edit-arrival-date').value = dateStr;

                // Format time for input (HH:MM format)
                document.getElementById('edit-arrival-time').value = arrivalTimeStr.substring(0, 5);

                if (departureTimeStr && departureTimeStr !== 'Active') {
                    document.getElementById('edit-departure-date').value = dateStr;
                    document.getElementById('edit-departure-time').value = departureTimeStr.substring(0, 5);
                } else {
                    document.getElementById('edit-departure-date').value = '';
                    document.getElementById('edit-departure-time').value = '';
                }

                // Show the modal
                document.getElementById('edit-modal').style.display = 'block';
            });
        });

        // Delete entry functionality
        document.querySelectorAll('.delete-entry-btn').forEach(button => {
            button.addEventListener('click', function() {
                const entryId = this.getAttribute('data-id');
                document.getElementById('delete-entry-id').value = entryId;
                document.getElementById('delete-modal').style.display = 'block';
            });
        });

        // Close modals when clicking the X
        document.querySelectorAll('.close').forEach(closeBtn => {
            closeBtn.addEventListener('click', function() {
                this.closest('.modal').style.display = 'none';
            });
        });

        // Close modals when clicking outside
        window.addEventListener('click', function(event) {
            if (event.target.classList.contains('modal')) {
                event.target.style.display = 'none';
            }
        });

        // Cancel delete
        document.getElementById('cancel-delete').addEventListener('click', function() {
            document.getElementById('delete-modal').style.display = 'none';
        });

        // Confirm delete
        document.getElementById('confirm-delete').addEventListener('click', function() {
            const entryId = document.getElementById('delete-entry-id').value;

            fetch(`/api/delete/${entryId}`, {
                method: 'DELETE',
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Remove the row from the table
                    document.querySelector(`tr[data-entry-id="${entryId}"]`).remove();
                    // Close the modal
                    document.getElementById('delete-modal').style.display = 'none';
                    // Show success message
                    alert('Entry deleted successfully');
                } else {
                    alert('Error: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred while deleting the entry');
            });
        });

        // Submit edit form
        document.getElementById('edit-entry-form').addEventListener('submit', function(e) {
            e.preventDefault();

            const entryId = document.getElementById('edit-entry-id').value;
            const arrivalDate = document.getElementById('edit-arrival-date').value;
            const arrivalTime = document.getElementById('edit-arrival-time').value;
            const departureDate = document.getElementById('edit-departure-date').value || '';
            const departureTime = document.getElementById('edit-departure-time').value || '';

            // Ensure we have seconds in the time strings
            const arrivalTimeWithSeconds = arrivalTime.includes(':') ?
                (arrivalTime.split(':').length === 2 ? arrivalTime + ':00' : arrivalTime) :
                arrivalTime + ':00:00';

            // Format datetime strings for the API (YYYY-MM-DD HH:MM:SS)
            const arrivalDateTime = `${arrivalDate} ${arrivalTimeWithSeconds}`;
            let departureDateTime = null;

            if (departureDate && departureTime) {
                const departureTimeWithSeconds = departureTime.includes(':') ?
                    (departureTime.split(':').length === 2 ? departureTime + ':00' : departureTime) :
                    departureTime + ':00:00';
                departureDateTime = `${departureDate} ${departureTimeWithSeconds}`;
            }

            console.log('Sending update:', {
                arrival_time: arrivalDateTime,
                departure_time: departureDateTime
            });

            // Send update request
            fetch(`/api/update/${entryId}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    arrival_time: arrivalDateTime,
                    departure_time: departureDateTime
                }),
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(data => {
                        throw new Error(data.message || 'Server error');
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    // Close the modal
                    document.getElementById('edit-modal').style.display = 'none';
                    // Refresh the page to show updated data
                    location.reload();
                } else {
                    alert('Error: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred while updating the entry: ' + error.message);
            });
        });
    });
</script>

<style>
.start-work-form {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.start-work-form .form-group {
    margin-bottom: 1rem;
}

.start-work-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #333;
}

.start-work-form select,
.start-work-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

.start-work-form select:focus,
.start-work-form textarea:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.project-info {
    color: #4CAF50;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.project-tag {
    background: #4CAF50;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-right: 0.5rem;
}

.project-tag + small {
    color: #666;
    font-size: 0.85rem;
}

.time-history td {
    vertical-align: middle;
}

.time-history .project-tag + small {
    display: block;
    margin-top: 0.25rem;
}
</style>

{% endblock %}