{% extends "layout.html" %}
{% block title %}{{ _('Cron Jobs') }}{% endblock %}
{% block content %}
<div class="card shadow-sm">
    <div class="card-header bg-white">
        <h5 class="mb-0"><i class="fas fa-clock text-primary me-2"></i> Scheduled Cron Jobs</h5>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th class="ps-4">Job Name</th>
                        <th>Next Run</th>
                        <th>Frequency</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for job in jobs %}
                    <tr>
                        <td class="ps-4 fw-bold text-dark">{{ job.name }}</td>
                        <td>
                            {% if job.next_run_time %}
                            <span class="badge bg-info text-dark">{{ job.next_run_time|format_time('%Y-%m-%d %H:%M:%S') }}</span>
                            {% else %}
                            <span class="badge bg-secondary">Paused</span>
                            {% endif %}
                        </td>
                        <td>{{ job.trigger }}</td>
                        <td class="d-flex gap-2">
                            <form method="POST" action="{{ url_for('trigger_cron_job') }}">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <input type="hidden" name="job_id" value="{{ job.id }}">
                                <button type="submit" class="btn btn-sm btn-outline-primary fw-bold">
                                    <i class="fas fa-play me-1"></i> Run Now
                                </button>
                            </form>
                            <button type="button" class="btn btn-sm btn-outline-secondary fw-bold"
                                data-bs-toggle="modal" data-bs-target="#editCronModal"
                                onclick="fillEditModal('{{ job.id }}', '{{ job.name | e }}', '{{ job.interval_value }}', '{{ job.interval_unit }}')">
                                <i class="fas fa-edit me-1"></i> Edit
                            </button>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="4" class="text-center py-4 text-muted">No cron jobs found.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Edit Cron Job Modal -->
<div class="modal fade" id="editCronModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold">Edit Cron Job</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ url_for('edit_cron_job') }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="job_id" id="editJobId">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Job Name</label>
                        <input type="text" name="job_name" id="editJobName" class="form-control" required>
                    </div>
                    <div class="row g-3 mb-3">
                        <div class="col-6">
                            <label class="form-label fw-bold">Interval Value</label>
                            <input type="number" name="interval_value" id="editIntervalValue" class="form-control" min="1" required>
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-bold">Interval Unit</label>
                            <select name="interval_unit" id="editIntervalUnit" class="form-select">
                                <option value="seconds">Seconds</option>
                                <option value="minutes">Minutes</option>
                                <option value="hours">Hours</option>
                                <option value="days">Days</option>
                                <option value="weeks">Weeks</option>
                            </select>
                        </div>
                    </div>
                    <div class="d-flex justify-content-end">
                        <button type="button" class="btn btn-light me-2" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function fillEditModal(jobId, jobName, intervalValue, intervalUnit) {
    document.getElementById('editJobId').value = jobId;
    document.getElementById('editJobName').value = jobName;
    document.getElementById('editIntervalValue').value = intervalValue || 5;
    var sel = document.getElementById('editIntervalUnit');
    for (var i = 0; i < sel.options.length; i++) {
        if (sel.options[i].value === intervalUnit) {
            sel.selectedIndex = i;
            break;
        }
    }
}
</script>
{% endblock %}