{% extends "base.html" %}
{% load static %}

{% block title %}
{% if object %}Edit Time Entry{% else %}Create Time Entry{% endif %}
{% endblock %}

{% block css %}
<!-- DateTimePicker CSS -->
<link href="{% static 'plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css' %}" rel="stylesheet" />
<!-- Select2 CSS -->
<link href="{% static 'plugins/select2/dist/css/select2.min.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/select2-bootstrap-5-theme/dist/select2-bootstrap-5-theme.min.css' %}" rel="stylesheet" />
<style>
    .help-sidebar {
        background-color: #f8f9fa;
        border-radius: 5px;
        padding: 15px;
    }
    .form-floating > .form-control:focus ~ label,
    .form-floating > .form-control:not(:placeholder-shown) ~ label {
        opacity: .65;
        transform: scale(.85) translateY(-.5rem) translateX(.15rem);
    }
    .time-type-selector {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 15px;
    }
    .time-type-option {
        flex: 1;
        min-width: 120px;
        text-align: center;
        padding: 15px 10px;
        border: 2px solid #dee2e6;
        border-radius: 5px;
        cursor: pointer;
    }
    .time-type-option.selected {
        border-color: #2d62ed;
        background-color: rgba(45, 98, 237, 0.1);
    }
    .conflict-warning {
        background-color: #fff3cd;
        border-left: 4px solid #ffc107;
        padding: 15px;
        margin-bottom: 20px;
        display: none;
    }
</style>
{% endblock %}

{% block content %}
<!-- begin breadcrumb -->
<ol class="breadcrumb float-xl-end">
    <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
    <li class="breadcrumb-item"><a href="{% url 'hr:dashboard' %}">HR</a></li>
    <li class="breadcrumb-item"><a href="{% url 'hr:time_entry_list' %}">Time Entries</a></li>
    <li class="breadcrumb-item active">
        {% if object %}Edit Time Entry{% else %}Create Time Entry{% endif %}
    </li>
</ol>
<!-- end breadcrumb -->

<!-- begin page-header -->
<h1 class="page-header">
    {% if object %}Edit Time Entry{% else %}Create Time Entry{% endif %}
</h1>
<!-- end page-header -->

<!-- begin row -->
<div class="row">
    <!-- begin col-8 -->
    <div class="col-xl-8">
        <!-- begin panel -->
        <div class="panel panel-inverse">
            <!-- begin panel-heading -->
            <div class="panel-heading">
                <h4 class="panel-title">
                    {% if object %}Edit Time Entry for {{ object.employee.get_full_name }}{% else %}Create New Time Entry{% endif %}
                </h4>
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
                </div>
            </div>
            <!-- end panel-heading -->
            
            <!-- begin panel-body -->
            <div class="panel-body">
                <!-- Conflict Warning -->
                <div class="conflict-warning" id="conflict-warning">
                    <div class="d-flex">
                        <div class="me-3">
                            <i class="fas fa-exclamation-triangle fa-2x text-warning"></i>
                        </div>
                        <div>
                            <h5 class="mb-1">Potential Time Conflict</h5>
                            <p class="mb-0" id="conflict-message">This employee already has a time entry during this period.</p>
                        </div>
                    </div>
                </div>
                
                <form method="post" id="time-entry-form">
                    {% csrf_token %}
                    
                    <!-- Form Errors -->
                    {% if form.errors %}
                    <div class="alert alert-danger">
                        <h5><i class="fas fa-exclamation-circle"></i> Please correct the errors below:</h5>
                        <ul class="mb-0">
                            {% for field in form %}
                                {% for error in field.errors %}
                                <li>{{ field.label }}: {{ error }}</li>
                                {% endfor %}
                            {% endfor %}
                            {% for error in form.non_field_errors %}
                            <li>{{ error }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}
                    
                    <!-- Basic Information -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Basic Information</h5>
                        </div>
                        <div class="card-body">
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="{{ form.employee.id_for_label }}" class="form-label">Employee <span class="text-danger">*</span></label>
                                    {{ form.employee }}
                                    {% if form.employee.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.employee.errors }}
                                    </div>
                                    {% endif %}
                                </div>
                                <div class="col-md-6">
                                    <label for="{{ form.date.id_for_label }}" class="form-label">Date <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        {{ form.date }}
                                        <span class="input-group-text"><i class="fas fa-calendar"></i></span>
                                    </div>
                                    {% if form.date.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.date.errors }}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="{{ form.schedule_assignment.id_for_label }}" class="form-label">Schedule Assignment</label>
                                    {{ form.schedule_assignment }}
                                    {% if form.schedule_assignment.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.schedule_assignment.errors }}
                                    </div>
                                    {% endif %}
                                    <div class="form-text">Optional: Link this time entry to a schedule assignment</div>
                                </div>
                                <div class="col-md-6">
                                    <label for="{{ form.location.id_for_label }}" class="form-label">Location</label>
                                    {{ form.location }}
                                    {% if form.location.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.location.errors }}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Time Information -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Time Information</h5>
                        </div>
                        <div class="card-body">
                            <!-- Time Type -->
                            <div class="mb-3">
                                <label class="form-label">Time Type</label>
                                <div class="time-type-selector">
                                    <div class="time-type-option selected" data-type="regular">
                                        <i class="fas fa-clock fa-2x mb-2"></i>
                                        <div>Regular Time</div>
                                    </div>
                                    <div class="time-type-option" data-type="overtime">
                                        <i class="fas fa-business-time fa-2x mb-2"></i>
                                        <div>Overtime</div>
                                    </div>
                                </div>
                                <div class="form-check form-switch d-none">
                                    {{ form.is_overtime }}
                                    <label class="form-check-label" for="{{ form.is_overtime.id_for_label }}">
                                        Overtime
                                    </label>
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="{{ form.start_time.id_for_label }}" class="form-label">Start Time <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        {{ form.start_time }}
                                        <span class="input-group-text"><i class="fas fa-clock"></i></span>
                                    </div>
                                    {% if form.start_time.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.start_time.errors }}
                                    </div>
                                    {% endif %}
                                </div>
                                <div class="col-md-6">
                                    <label for="{{ form.end_time.id_for_label }}" class="form-label">End Time <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        {{ form.end_time }}
                                        <span class="input-group-text"><i class="fas fa-clock"></i></span>
                                    </div>
                                    {% if form.end_time.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.end_time.errors }}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="{{ form.hours.id_for_label }}" class="form-label">Hours <span class="text-danger">*</span></label>
                                    {{ form.hours }}
                                    {% if form.hours.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.hours.errors }}
                                    </div>
                                    {% endif %}
                                    <div class="form-text">Automatically calculated from start and end times</div>
                                </div>
                                <div class="col-md-6">
                                    <label for="{{ form.break_duration.id_for_label }}" class="form-label">Break Duration (minutes)</label>
                                    {{ form.break_duration }}
                                    {% if form.break_duration.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.break_duration.errors }}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Additional Information -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Additional Information</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="{{ form.description.id_for_label }}" class="form-label">Description</label>
                                {{ form.description }}
                                {% if form.description.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.description.errors }}
                                </div>
                                {% endif %}
                                <div class="form-text">Provide details about the work performed during this time period</div>
                            </div>
                            
                            {% if perms.hr.approve_time_entry and not object %}
                            <div class="form-check mb-3">
                                {{ form.auto_approve }}
                                <label class="form-check-label" for="{{ form.auto_approve.id_for_label }}">
                                    Auto-approve this time entry
                                </label>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <!-- Form Actions -->
                    <div class="d-flex justify-content-between mt-4">
                        <a href="{% url 'hr:time_entry_list' %}" class="btn btn-secondary">
                            <i class="fas fa-times"></i> Cancel
                        </a>
                        <div>
                            <button type="submit" name="save_and_add" class="btn btn-info me-2">
                                <i class="fas fa-save"></i> Save & Add Another
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Save Time Entry
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <!-- end panel-body -->
        </div>
        <!-- end panel -->
    </div>
    <!-- end col-8 -->
    
    <!-- begin col-4 -->
    <div class="col-xl-4">
        <!-- Help Sidebar -->
        <div class="help-sidebar">
            <h5><i class="fas fa-info-circle"></i> Help & Guidelines</h5>
            
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">Time Entry Tips</h6>
                </div>
                <div class="card-body">
                    <ul class="mb-0">
                        <li>Enter the actual start and end times</li>
                        <li>Hours will be calculated automatically</li>
                        <li>Include break time if applicable</li>
                        <li>Link to a schedule assignment if available</li>
                        <li>Provide a detailed description of work performed</li>
                    </ul>
                </div>
            </div>
            
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">Overtime Guidelines</h6>
                </div>
                <div class="card-body">
                    <ul class="mb-0">
                        <li>Select "Overtime" for hours worked beyond regular schedule</li>
                        <li>Overtime requires manager approval</li>
                        <li>Ensure overtime was pre-approved when possible</li>
                        <li>Provide detailed justification for overtime hours</li>
                    </ul>
                </div>
            </div>
            
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0">Approval Process</h6>
                </div>
                <div class="card-body">
                    <ol class="mb-0">
                        <li>Submit time entry</li>
                        <li>Manager reviews submission</li>
                        <li>Time entry is approved or rejected</li>
                        <li>If rejected, you'll need to update and resubmit</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- end col-4 -->
</div>
<!-- end row -->
{% endblock %}

{% block js %}
<!-- DateTimePicker JS -->
<script src="{% static 'plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js' %}"></script>
<!-- Select2 JS -->
<script src="{% static 'plugins/select2/dist/js/select2.min.js' %}"></script>
<script>
    $(document).ready(function() {
        // Initialize Select2
        $('#{{ form.employee.id_for_label }}, #{{ form.schedule_assignment.id_for_label }}').select2({
            theme: 'bootstrap-5',
            placeholder: "Select an option"
        });
        
        // Initialize DatePicker
        $('#{{ form.date.id_for_label }}').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayHighlight: true
        });
        
        // Initialize TimePicker
        $('#{{ form.start_time.id_for_label }}, #{{ form.end_time.id_for_label }}').timepicker({
            showMeridian: false,
            defaultTime: false
        });
        
        // Calculate hours based on start and end time
        function calculateHours() {
            var startTime = $('#{{ form.start_time.id_for_label }}').val();
            var endTime = $('#{{ form.end_time.id_for_label }}').val();
            var breakDuration = parseInt($('#{{ form.break_duration.id_for_label }}').val()) || 0;
            
            if (startTime && endTime) {
                // Parse times
                var start = parseTime(startTime);
                var end = parseTime(endTime);
                
                // Calculate hours
                var hours;
                if (end < start) {
                    // Overnight shift
                    hours = (24 - start/60) + (end/60);
                } else {
                    hours = (end - start) / 60;
                }
                
                // Subtract break duration
                hours -= breakDuration / 60;
                
                // Ensure hours is not negative
                hours = Math.max(0, hours);
                
                $('#{{ form.hours.id_for_label }}').val(hours.toFixed(2));
            }
        }
        
        // Parse time string to minutes
        function parseTime(timeStr) {
            var parts = timeStr.split(':');
            return parseInt(parts[0]) * 60 + parseInt(parts[1]);
        }
        
        // Update hours when times or break duration change
        $('#{{ form.start_time.id_for_label }}, #{{ form.end_time.id_for_label }}, #{{ form.break_duration.id_for_label }}').change(function() {
            calculateHours();
        });
        
        // Time type selector
        $('.time-type-option').click(function() {
            $('.time-type-option').removeClass('selected');
            $(this).addClass('selected');
            
            var type = $(this).data('type');
            if (type === 'overtime') {
                $('#{{ form.is_overtime.id_for_label }}').prop('checked', true);
            } else {
                $('#{{ form.is_overtime.id_for_label }}').prop('checked', false);
            }
        });
        
        // Initialize time type selector based on form value
        {% if form.is_overtime.value %}
        $('.time-type-option[data-type="overtime"]').click();
        {% endif %}
        
        // Check for conflicts when employee, date, start time, or end time changes
        $('#{{ form.employee.id_for_label }}, #{{ form.date.id_for_label }}, #{{ form.start_time.id_for_label }}, #{{ form.end_time.id_for_label }}').change(function() {
            checkForConflicts();
        });
        
        function checkForConflicts() {
            var employeeId = $('#{{ form.employee.id_for_label }}').val();
            var date = $('#{{ form.date.id_for_label }}').val();
            var startTime = $('#{{ form.start_time.id_for_label }}').val();
            var endTime = $('#{{ form.end_time.id_for_label }}').val();
            
            if (employeeId && date && startTime && endTime) {
                $.ajax({
                    url: '{% url "hr:check_time_entry_conflicts" %}',
                    data: {
                        employee_id: employeeId,
                        date: date,
                        start_time: startTime,
                        end_time: endTime,
                        {% if object %}
                        exclude_id: '{{ object.id }}',
                        {% endif %}
                    },
                    success: function(data) {
                        if (data.conflicts) {
                            $('#conflict-message').text(data.message);
                            $('#conflict-warning').show();
                        } else {
                            $('#conflict-warning').hide();
                        }
                    }
                });
            }
        }
        
        // Load schedule assignments when employee changes
        $('#{{ form.employee.id_for_label }}').change(function() {
            var employeeId = $(this).val();
            var date = $('#{{ form.date.id_for_label }}').val();
            
            if (employeeId && date) {
                $.ajax({
                    url: '{% url "hr:get_employee_schedule_assignments" %}',
                    data: {
                        employee_id: employeeId,
                        date: date
                    },
                    success: function(data) {
                        var select = $('#{{ form.schedule_assignment.id_for_label }}');
                        select.empty();
                        select.append('<option value="">Select an assignment</option>');
                        
                        $.each(data.assignments, function(index, assignment) {
                            select.append('<option value="' + assignment.id + '">' + assignment.shift_type + ' (' + assignment.start_time + ' - ' + assignment.end_time + ')</option>');
                        });
                    }
                });
            }
        });
        
        // Populate times when schedule assignment is selected
        $('#{{ form.schedule_assignment.id_for_label }}').change(function() {
            var assignmentId = $(this).val();
            
            if (assignmentId) {
                $.ajax({
                    url: '{% url "hr:get_schedule_assignment_details" %}',
                    data: {
                        assignment_id: assignmentId
                    },
                    success: function(data) {
                        $('#{{ form.start_time.id_for_label }}').val(data.start_time);
                        $('#{{ form.end_time.id_for_label }}').val(data.end_time);
                        calculateHours();
                    }
                });
            }
        });
    });
</script>
{% endblock %}