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

{% block title %}Upload Attendance{% endblock %}

{% block content %}
<div class="forms">
    <div class="section-header">
        <h2 class="page-title">Upload Attendance File</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">Upload Attendance</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, {'attr': {'enctype': 'multipart/form-data'}}) }}
            
            <div class="row">
                <div class="col-md-6">
                    <div class="form-field">
                        <label class="form-section-header">
                            <i class="fa fa-upload" aria-hidden="true"></i> Upload CSV File
                        </label>
                        <div class="form-field">
                            {{ form_label(form.attendanceFile, 'Attendance File (CSV)') }}
                            {{ form_widget(form.attendanceFile, {'attr': {'class': 'input-control-file', 'accept': '.csv'}}) }}
                            {{ form_errors(form.attendanceFile) }}
                            <small class="text-small tone-muted">
                                Upload a CSV file with attendance data. 
                                <a href="{{ path('app_time_tracking_sample_download') }}">Download sample format</a>
                            </small>
                        </div>
                    </div>

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

                    <hr>
                    <button type="submit" class="btn btn-primary btn-lg">
                        <i class="fa fa-upload" aria-hidden="true"></i> Upload & Process
                    </button>
                </div>

                <div class="col-md-6">
                    <div class="alert alert--info">
                        <h4><i class="fa fa-info-circle" aria-hidden="true"></i> CSV Format Instructions</h4>
                        <p>Your CSV file should contain the following columns:</p>
                        <ul>
                            <li><strong>employee_id:</strong> Employee registration number</li>
                            <li><strong>check_in:</strong> Check-in time (HH:MM format)</li>
                            <li><strong>check_out:</strong> Check-out time (HH:MM format, optional)</li>
                            <li><strong>break_start:</strong> Break start time (HH:MM format, optional)</li>
                            <li><strong>break_end:</strong> Break end time (HH:MM format, optional)</li>
                        </ul>
                        
                        <h5>Example:</h5>
                        <pre>employee_id,check_in,check_out,break_start,break_end
001,08:00,17:00,12:00,13:00
002,08:15,17:30,12:30,13:30</pre>
                    </div>

                    {% if upload_history is defined and upload_history|length > 0 %}
                        <div class="card">
                            <div class="card__header">
                                <h4>Recent Uploads</h4>
                            </div>
                            <div class="card__body">
                                <table class="data-table">
                                    <thead>
                                        <tr>
                                            <th>Date</th>
                                            <th>Records</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for upload in upload_history %}
                                            <tr>
                                                <td>{{ upload.date|date('Y-m-d') }}</td>
                                                <td>{{ upload.records_count }}</td>
                                                <td>
                                                    <span class="status-pill" data-status="{{ upload.status == 'success' ? 'success' : 'danger' }}">
                                                        {{ upload.status|title }}
                                                    </span>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>

            {{ form_end(form) }}

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

{% block javascripts %}
    {{ parent() }}
    <script>
        document.getElementById('{{ form.attendanceFile.vars.id }}').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                if (file.type !== 'text/csv' && !file.name.endsWith('.csv')) {
                    alert('Please select a CSV file.');
                    e.target.value = '';
                    return;
                }
                
                if (file.size > 5 * 1024 * 1024) { // 5MB limit
                    alert('File size should not exceed 5MB.');
                    e.target.value = '';
                    return;
                }
            }
        });
    </script>
{% endblock %}