{% extends "base.html" %}

{% block title %}Raccoon Timekeeper - Log Time{% endblock %}

{% block content %}
<div class="content-grid">
    <!-- Time Entry Form -->
    <section class="card">
        <div class="card-header">
            <h2>Log Time</h2>
        </div>
        <div class="card-body">
            <form id="timeEntryForm" class="time-entry-form">
                <div class="form-row">
                    <div class="form-group flex-2">
                        <label for="taskSelect">Task</label>
                        <select id="taskSelect" required>
                            <option value="">Select a task...</option>
                        </select>
                    </div>
                    <div class="form-group flex-1">
                        <label for="dateInput">Date</label>
                        <input type="date" id="dateInput" required>
                    </div>
                    <div class="form-group flex-1">
                        <label for="timeInput">Time</label>
                        <input type="text" id="timeInput" placeholder="1:30, 1.5, 90m" required>
                        <span class="hint">Formats: 1:30, 1.5, 90m, 1h 30m</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="notesInput">Notes (optional)</label>
                    <input type="text" id="notesInput" placeholder="Brief description of work done...">
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">
                        <span>+</span> Add Entry
                    </button>
                </div>
            </form>
        </div>
    </section>

    <!-- Weekly Summary -->
    <section class="card">
        <div class="card-header">
            <h2>Weekly Summary</h2>
            <div class="week-navigator">
                <button class="btn btn-icon" id="prevWeek" title="Previous Week">◀</button>
                <span id="weekLabel">Loading...</span>
                <button class="btn btn-icon" id="nextWeek" title="Next Week">▶</button>
            </div>
        </div>
        <div class="card-body">
            <div id="summaryContent">
                <div class="loading">Loading summary...</div>
            </div>
            <div class="summary-actions">
                <button class="btn btn-secondary" id="printTimesheetBtn">
                    🖨️ Print Timesheet
                </button>
            </div>
        </div>
    </section>

    <!-- Recent Entries -->
    <section class="card">
        <div class="card-header">
            <h2>Recent Entries</h2>
            <span class="badge" id="entryCount">0 entries</span>
        </div>
        <div class="card-body">
            <div id="recentEntries">
                <div class="loading">Loading entries...</div>
            </div>
        </div>
    </section>
</div>

<!-- New Task Modal -->
<div id="newTaskModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Add New Task</h3>
            <button class="modal-close" onclick="closeModal('newTaskModal')">&times;</button>
        </div>
        <div class="modal-body">
            <form id="newTaskForm">
                <div class="form-group">
                    <label for="newTaskName">Task Name</label>
                    <input type="text" id="newTaskName" required placeholder="Enter task name...">
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeModal('newTaskModal')">Cancel</button>
            <button class="btn btn-primary" onclick="submitNewTask()">Add Task</button>
        </div>
    </div>
</div>

<!-- Edit Entry Modal -->
<div id="editEntryModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Edit Entry</h3>
            <button class="modal-close" onclick="closeModal('editEntryModal')">&times;</button>
        </div>
        <div class="modal-body">
            <form id="editEntryForm">
                <input type="hidden" id="editEntryId">
                <div class="form-group">
                    <label for="editTaskSelect">Task</label>
                    <select id="editTaskSelect" required></select>
                </div>
                <div class="form-row">
                    <div class="form-group flex-1">
                        <label for="editDateInput">Date</label>
                        <input type="date" id="editDateInput" required>
                    </div>
                    <div class="form-group flex-1">
                        <label for="editTimeInput">Time</label>
                        <input type="text" id="editTimeInput" required>
                    </div>
                </div>
                <div class="form-group">
                    <label for="editNotesInput">Notes</label>
                    <input type="text" id="editNotesInput">
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-danger" onclick="deleteCurrentEntry()">Delete</button>
            <button class="btn btn-secondary" onclick="closeModal('editEntryModal')">Cancel</button>
            <button class="btn btn-primary" onclick="submitEditEntry()">Save Changes</button>
        </div>
    </div>
</div>

<!-- Print Template -->
<div id="printTemplate" class="print-only">
    <div class="print-header">
        <h1>🦝 Raccoon Timekeeper - Weekly Timesheet</h1>
        <div class="print-period" id="printPeriod"></div>
    </div>
    <div id="printContent"></div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
{% endblock %}