{% extends '_include/base.html.twig' %}

{% block title %}Manual Clocking{% endblock %}

{% block content %}
<div class="forms">
    <div class="section-header">
        <h2 class="page-title">Manual Employee Clocking</h2>
    </div>
    <div class="card">
        <div class="card__header">
            <div class="section-header">
                <ul class="breadcrumb breadcrumb__list">
                    <li><a href="{{ path('dashboard') }}">Home</a></li>
                    <li><a href="{{ path('app_time_tracking_index') }}">Time Tracking</a></li>
                    <li class="active">Manual Clocking</li>
                </ul>
                <div class="action-inline">
                    <a href="{{ path('app_time_tracking_index') }}" class="btn btn-primary">
                        <i class="fa fa-reply" aria-hidden="true"></i> Back to Time Tracking
                    </a>
                </div>
            </div>
        </div>
        <div class="card__body">
            
            {{ form_start(form) }}
            
            <div class="row">
                <div class="col-md-6">
                    <div class="form-section-header">
                        <i class="fa fa-user" aria-hidden="true"></i> Employee Information
                    </div>
                    
                    <div class="form-field">
                        {{ form_label(form.employee, 'Employee') }}
                        {{ form_widget(form.employee, {'attr': {'class': 'input-control-lg'}}) }}
                        {{ form_errors(form.employee) }}
                    </div>

                    <div class="form-field">
                        {{ form_label(form.workDate, 'Date') }}
                        {{ form_widget(form.workDate, {'attr': {'class': 'input-control-lg'}}) }}
                        {{ form_errors(form.workDate) }}
                    </div>

                    <div class="form-section-header">
                        <i class="fa fa-clock-o" aria-hidden="true"></i> Time Information
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-field">
                                {{ form_label(form.clockInTime, 'Check In Time') }}
                                {{ form_widget(form.clockInTime, {'attr': {'class': 'input-control-lg'}}) }}
                                {{ form_errors(form.clockInTime) }}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-field">
                                {{ form_label(form.clockOutTime, 'Check Out Time') }}
                                {{ form_widget(form.clockOutTime, {'attr': {'class': 'input-control-lg'}}) }}
                                {{ form_errors(form.clockOutTime) }}
                                <small class="text-small tone-muted">Leave empty if still working</small>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-field">
                                {{ form_label(form.breakStart, 'Break Start') }}
                                {{ form_widget(form.breakStart, {'attr': {'class': 'input-control-lg'}}) }}
                                {{ form_errors(form.breakStart) }}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-field">
                                {{ form_label(form.breakEnd, 'Break End') }}
                                {{ form_widget(form.breakEnd, {'attr': {'class': 'input-control-lg'}}) }}
                                {{ form_errors(form.breakEnd) }}
                            </div>
                        </div>
                    </div>

                    <div class="form-field">
                        {{ form_label(form.notes, 'Notes') }}
                        {{ form_widget(form.notes, {'attr': {'class': 'input-control', 'rows': 3}}) }}
                        {{ form_errors(form.notes) }}
                    </div>

                    <hr>
                    <button type="submit" class="btn btn-primary btn-lg">
                        <i class="fa fa-save" aria-hidden="true"></i> Save Clocking Record
                    </button>
                </div>

                <div class="col-md-6">
                    <div class="alert alert--info">
                        <h4><i class="fa fa-info-circle" aria-hidden="true"></i> Quick Actions</h4>
                        <div class="stacked-actions">
                            <button type="button" class="btn btn-secondary" onclick="setCurrentTime('checkIn')">
                                <i class="fa fa-clock-o" aria-hidden="true"></i> Set Current Time as Check In
                            </button>
                            <button type="button" class="btn btn-secondary" onclick="setCurrentTime('checkOut')">
                                <i class="fa fa-clock-o" aria-hidden="true"></i> Set Current Time as Check Out
                            </button>
                            <button type="button" class="btn btn-secondary" onclick="setCurrentTime('breakStart')">
                                <i class="fa fa-coffee" aria-hidden="true"></i> Set Current Time as Break Start
                            </button>
                            <button type="button" class="btn btn-secondary" onclick="setCurrentTime('breakEnd')">
                                <i class="fa fa-coffee" aria-hidden="true"></i> Set Current Time as Break End
                            </button>
                        </div>
                    </div>

                    <!-- Employee Schedule Info -->
                    <div class="card is-hidden" id="employee-schedule">
                        <div class="card__header">
                            <h4>Employee Schedule</h4>
                        </div>
                        <div class="card__body">
                            <div id="schedule-info">
                                <!-- Schedule information will be loaded here -->
                            </div>
                        </div>
                    </div>

                    <!-- Current Time Display -->
                    <div class="alert alert--success">
                        <h4><i class="fa fa-clock-o" aria-hidden="true"></i> Current Time</h4>
                        <h3 id="current-time">--:--:--</h3>
                        <small id="current-date" class="text-small tone-muted">----/--/--</small>
                    </div>
                </div>
            </div>

            {{ form_end(form) }}

        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        // Update current time
        function updateCurrentTime() {
            const now = new Date();
            document.getElementById('current-time').textContent = now.toLocaleTimeString();
            document.getElementById('current-date').textContent = now.toLocaleDateString();
        }
        
        // Update time every second
        setInterval(updateCurrentTime, 1000);
        updateCurrentTime();

        // Set current time functions
        function setCurrentTime(field) {
            const now = new Date();
            const timeString = now.toTimeString().substr(0, 5); // HH:MM format
            
            let fieldId;
            switch(field) {
                case 'checkIn':
                    fieldId = '{{ form.clockInTime.vars.id }}';
                    break;
                case 'checkOut':
                    fieldId = '{{ form.clockOutTime.vars.id }}';
                    break;
                case 'breakStart':
                    fieldId = '{{ form.breakStart.vars.id }}';
                    break;
                case 'breakEnd':
                    fieldId = '{{ form.breakEnd.vars.id }}';
                    break;
            }
            
            if (fieldId) {
                document.getElementById(fieldId).value = timeString;
            }
        }

        // Load employee schedule when employee is selected
        document.getElementById('{{ form.employee.vars.id }}').addEventListener('change', function() {
            const employeeId = this.value;
            const dateField = document.getElementById('{{ form.workDate.vars.id }}');
            const date = dateField.value || new Date().toISOString().split('T')[0];
            
            if (employeeId) {
                fetch(`{{ path('app_api_employee_schedule', {'employeeId': 'EMPLOYEE_ID'}) }}`.replace('EMPLOYEE_ID', employeeId) + '?date=' + date)
                    .then(response => response.json())
                    .then(data => {
                        const schedulePanel = document.getElementById('employee-schedule');
                        const scheduleInfo = document.getElementById('schedule-info');
                        
                        if (data.schedule) {
                            scheduleInfo.innerHTML = `
                                <p><strong>Schedule:</strong> ${data.schedule.name}</p>
                                <p><strong>Work Hours:</strong> ${data.schedule.start_time} - ${data.schedule.end_time}</p>
                                ${data.schedule.break_start ? `<p><strong>Break:</strong> ${data.schedule.break_start} - ${data.schedule.break_end}</p>` : ''}
                                <p><strong>Total Hours:</strong> ${data.schedule.total_hours}h</p>
                            `;
                            schedulePanel.classList.remove('is-hidden');
                        } else {
                            scheduleInfo.innerHTML = '<p class="tone-muted">No schedule assigned for this date</p>';
                            schedulePanel.classList.remove('is-hidden');
                        }
                    })
                    .catch(error => {
                        console.error('Error loading schedule:', error);
                        document.getElementById('employee-schedule').classList.add('is-hidden');
                    });
            } else {
                document.getElementById('employee-schedule').classList.add('is-hidden');
            }
        });

        // Set today's date by default
        document.getElementById('{{ form.workDate.vars.id }}').value = new Date().toISOString().split('T')[0];
    </script>
{% endblock %}