{% extends "base.html" %}
{% load i18n static %}
{% block title %}{% translate "Cron Jobs" %} - Eenos{% endblock %}
{% block content %}
<div class="eenos-page-header flex-wrap gap-3">
    <div>
        <h1 class="eenos-page-title">{% translate "Cron Jobs" %}</h1>
        <div class="eenos-page-subtitle">{% translate "Manage scheduled commands and their notification address." %}</div>
    </div>
    <div class="col-12 col-sm-auto">
        <a href="{% url 'cron_add' %}"
           class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100"><i data-lucide="calendar-plus"></i><span>{% translate "Add Cron Job" %}</span></a>
    </div>
</div>
<nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
    <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "Tools" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current">{% translate "Cron Jobs" %}</span>
</nav>
{% include "includes/form_alerts.html" %}
<form method="post" id="cronMailForm" class="eenos-form mb-4" data-parsley-validate>
    {% csrf_token %}
    <input type="hidden" name="change_email" value="yes">
    <div class="eenos-card">
        <div class="eenos-card-header">
            <div>
                <h2 class="eenos-card-title">{% translate "Cron Notifications" %}</h2>
                <p class="eenos-card-subtitle">{% translate "Cron output and errors are delivered to this email address." %}</p>
            </div>
            <div class="eenos-card-action-icon"><i data-lucide="mail"></i></div>
        </div>
        <div class="row g-3 align-items-end">
            <div class="col-12 col-lg-7 col-xl-6">
                <label class="form-label" for="cronMailto">{% translate "Notification Email" %}</label>
                <div class="input-group">
                    <span class="input-group-text"><i data-lucide="at-sign"></i></span>
                    <input type="email"
                           class="form-control"
                           id="cronMailto"
                           name="mailto"
                           value="{{ mailto }}"
                           autocomplete="email"
                           placeholder="alerts@example.com"
                           required
                           data-parsley-required-message="{% translate 'Please enter an email address.' %}"
                           data-parsley-type-message="{% translate 'Please enter a valid email address.' %}">
                </div>
            </div>
            <div class="col-12 col-sm-auto">
                <button type="button"
                        id="reviewCronEmail"
                        class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100"><i data-lucide="save"></i><span>{% translate "Save Email" %}</span></button>
            </div>
        </div>
    </div>
</form>
<div class="eenos-card">
    <div class="eenos-card-header">
        <div>
            <div class="d-flex align-items-center gap-2 flex-wrap">
                <h2 class="eenos-card-title mb-0">{% translate "Scheduled Jobs" %}</h2>
                <span class="badge eenos-badge-neutral" id="cronJobCount">0</span>
            </div>
            <p class="eenos-card-subtitle">{% translate "Review commands, change their schedules, or remove jobs that are no longer required." %}</p>
        </div>
        <div class="eenos-card-action-icon"><i data-lucide="clock-3"></i></div>
    </div>
    <div class="table-responsive">
        <table id="cronJobsTable" class="table align-middle w-100">
            <thead><tr><th>{% translate "Schedule" %}</th><th>{% translate "Command" %}</th><th class="text-end">{% translate "Actions" %}</th></tr></thead>
        </table>
    </div>
</div>
<div class="modal fade" id="cronEmailModal" tabindex="-1" aria-labelledby="cronEmailModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered"><div class="modal-content">
        <div class="modal-header"><div><h2 class="modal-title fs-5 d-flex align-items-center gap-2" id="cronEmailModalTitle"><i data-lucide="mail-check"></i>{% translate "Change Notification Email" %}</h2><div class="small text-muted mt-1">{% translate "Future cron output will be sent to this address." %}</div></div><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button></div>
        <div class="modal-body">
            <div class="eenos-modal-info mb-3"><div class="eenos-modal-info-icon"><i data-lucide="at-sign"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Notification email" %}</div><div class="eenos-modal-info-value text-break" id="cronEmailLabel"></div></div></div>
            <div class="eenos-notice eenos-notice-info mb-0"><div class="eenos-notice-icon"><i data-lucide="info"></i></div><div class="eenos-notice-content"><div class="eenos-notice-text">{% translate "Output and errors produced by future cron runs will be delivered to this address." %}</div></div></div>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i data-lucide="x"></i>{% translate "Cancel" %}</button><button type="button" class="btn btn-primary" id="confirmCronEmail"><i data-lucide="save"></i>{% translate "Save Email" %}</button></div>
    </div></div>
</div>
<div class="modal fade" id="changeCronScheduleModal" tabindex="-1" aria-labelledby="changeCronScheduleTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <form method="post" id="cronChangeScheduleForm" class="modal-content eenos-form">
            {% csrf_token %}
            <input type="hidden" name="cron_change_schedule" id="changeschedule" value="yes">
            <input type="hidden" name="id" id="sid">
            <input type="hidden" name="schedule" id="sschedule" required>
            <div class="modal-header"><div><h2 class="modal-title fs-5 d-flex align-items-center gap-2" id="changeCronScheduleTitle"><i data-lucide="calendar-clock"></i>{% translate "Change Cron Schedule" %}</h2><div class="small text-muted mt-1">{% translate "Choose a new run schedule for this command." %}</div></div><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button></div>
            <div class="modal-body">
                <div class="row g-3 mb-4">
                    <div class="col-12 col-md-4"><div class="small text-muted mb-1">{% translate "Current schedule" %}</div><pre class="eenos-code-view eenos-code-view-wrap p-3 mb-0" id="currentScheduleLabel"></pre></div>
                    <div class="col-12 col-md-8"><div class="small text-muted mb-1">{% translate "Command" %}</div><pre class="eenos-code-view eenos-code-view-wrap p-3 mb-0" id="scheduleCommandLabel"></pre></div>
                </div>
                <h3 class="h6 mb-3">{% translate "Choose New Schedule" %}</h3>
                <div id="scheduleCronBuilder"></div>
                <div id="sameScheduleError" class="text-danger small mt-2 d-none">{% translate "Choose a schedule different from the current schedule." %}</div>
                <div class="mt-4"><div class="small text-muted mb-1">{% translate "Updated cron job" %}</div><pre class="eenos-code-view eenos-code-view-wrap p-3 mb-0" id="updatedCronPreview"></pre></div>
            </div>
            <div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i data-lucide="x"></i>{% translate "Cancel" %}</button><button type="button" class="btn btn-primary" id="confirmCronSchedule"><i data-lucide="save"></i>{% translate "Save Schedule" %}</button></div>
        </form>
    </div>
</div>
<div class="modal fade" id="deleteCronModal" tabindex="-1" aria-labelledby="deleteCronModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form method="post" id="cronDeleteForm" class="modal-content">
            {% csrf_token %}
            <input type="hidden" name="cron_delete" id="crondelete" value="yes">
            <input type="hidden" name="id" id="cid">
            <div class="modal-header"><div><h2 class="modal-title fs-5 d-flex align-items-center gap-2 text-danger" id="deleteCronModalTitle"><i data-lucide="trash-2"></i>{% translate "Delete Cron Job" %}</h2><div class="small text-muted mt-1">{% translate "Permanently remove this scheduled task." %}</div></div><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button></div>
            <div class="modal-body">
                <div class="row g-3 mb-4">
                    <div class="col-12 col-sm-4"><div class="small text-muted mb-1">{% translate "Schedule" %}</div><pre class="eenos-code-view eenos-code-view-wrap p-3 mb-0" id="deleteCronSchedule"></pre></div>
                    <div class="col-12 col-sm-8"><div class="small text-muted mb-1">{% translate "Command" %}</div><pre class="eenos-code-view eenos-code-view-wrap p-3 mb-0" id="deleteCronCommand"></pre></div>
                </div>
                <div class="eenos-notice eenos-notice-danger mb-0"><div class="eenos-notice-icon"><i data-lucide="triangle-alert"></i></div><div class="eenos-notice-content"><div class="eenos-notice-title">{% translate "This job will stop running" %}</div><div class="eenos-notice-text">{% translate "The cron job will be removed immediately. This operation cannot be undone." %}</div></div></div>
            </div>
            <div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i data-lucide="x"></i>{% translate "Keep Job" %}</button><button type="submit" class="btn btn-danger"><i data-lucide="trash-2"></i>{% translate "Delete Cron Job" %}</button></div>
        </form>
    </div>
</div>
{% endblock %}
{% block extra_js %}
<script src="{% get_static_prefix %}{{ theme }}/js/eenos-cron.js"></script>
<script>
(function($){"use strict";$(function(){
const esc=value=>$("<div>").text(value==null?"":value).html(),emailForm=$("#cronMailForm"),emailModal=bootstrap.Modal.getOrCreateInstance(document.getElementById("cronEmailModal")),scheduleModal=bootstrap.Modal.getOrCreateInstance(document.getElementById("changeCronScheduleModal")),deleteModal=bootstrap.Modal.getOrCreateInstance(document.getElementById("deleteCronModal"));let currentSchedule="",currentCommand="";
const scheduleBuilder=new EenosCronBuilder({container:"#scheduleCronBuilder",scheduleInput:"#sschedule"});
const table=$("#cronJobsTable").DataTable({processing:true,autoWidth:false,ajax:{url:"{% url 'cron_jobs_data' %}",dataSrc:function(json){const rows=json.data||[];$("#cronJobCount").text(rows.length);return rows}},pageLength:25,lengthMenu:[[25,50,100,-1],[25,50,100,"{% translate 'All' %}"]],order:[[0,"asc"]],language:{lengthMenu:"{% translate '_MENU_ Rows per page' %}",loadingRecords:"&nbsp;",processing:"{% translate 'Loading...' %}",emptyTable:"{% translate 'No cron jobs have been created.' %}",zeroRecords:"{% translate 'No matching cron jobs found.' %}"},responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},columns:[
{data:"schedule",responsivePriority:1,className:"text-nowrap",render:(value,type,row)=>type!=="display"?value:'<div class="d-inline-flex align-items-center gap-2"><span class="badge eenos-badge-neutral font-monospace">'+esc(value)+'</span><div class="eenos-dt-actions"><button type="button" class="btn btn-sm btn-outline-secondary change-cron-schedule" data-id="'+encodeURIComponent(row.id)+'" data-schedule="'+encodeURIComponent(value)+'" data-command="'+encodeURIComponent(row.command)+'" title="{% translate 'Change schedule' %}" aria-label="{% translate 'Change schedule' %}"><i data-lucide="calendar-clock"></i></button></div></div>'},
{data:"command",responsivePriority:2,render:(value,type)=>type!=="display"?value:'<div class="d-flex align-items-start gap-2"><i data-lucide="terminal" class="flex-shrink-0 mt-1 text-muted"></i><code class="text-break flex-grow-1">'+esc(value)+'</code><div class="eenos-dt-actions flex-shrink-0"><button type="button" class="btn btn-sm btn-outline-secondary copy-cron-command" data-command="'+encodeURIComponent(value)+'" title="{% translate 'Copy command' %}" aria-label="{% translate 'Copy command' %}"><i data-lucide="copy"></i></button></div></div>'},
{data:null,orderable:false,searchable:false,responsivePriority:1,className:"text-end text-nowrap",render:(data,type,row)=>type!=="display"?"":'<div class="eenos-dt-actions justify-content-end"><button type="button" class="btn btn-sm btn-outline-danger delete-cron" data-id="'+encodeURIComponent(row.id)+'" data-schedule="'+encodeURIComponent(row.schedule)+'" data-command="'+encodeURIComponent(row.command)+'" title="{% translate 'Delete cron job' %}" aria-label="{% translate 'Delete cron job' %}"><i data-lucide="trash-2"></i></button></div>'}
],drawCallback:()=>lucide.createIcons()});
table.on("responsive-display",()=>lucide.createIcons());
$("#reviewCronEmail").on("click",function(){const validation=emailForm.parsley();validation.validate();if(!validation.isValid())return;$("#cronEmailLabel").text($("#cronMailto").val().trim());emailModal.show()});
$("#confirmCronEmail").on("click",function(){document.getElementById("cronMailForm").submit()});
$(document).on("click",".copy-cron-command",async function(){const button=$(this),copied=await window.EenosUapp.copyToClipboard(decodeURIComponent(this.dataset.command));if(!copied)return;button.html('<i data-lucide="check"></i>').addClass("btn-outline-success").removeClass("btn-outline-secondary");lucide.createIcons();setTimeout(function(){button.html('<i data-lucide="copy"></i>').addClass("btn-outline-secondary").removeClass("btn-outline-success");lucide.createIcons()},1600)});
$(document).on("click",".change-cron-schedule",function(){const id=decodeURIComponent(this.dataset.id),schedule=decodeURIComponent(this.dataset.schedule),command=decodeURIComponent(this.dataset.command);currentSchedule=schedule;currentCommand=command;$("#sid").val(id);$("#currentScheduleLabel").text(schedule);$("#scheduleCommandLabel").text(command);$("#sameScheduleError").addClass("d-none");scheduleBuilder.setValue(schedule);$("#updatedCronPreview").text(schedule+" "+command);scheduleModal.show()});
$(document).on("eenos:cron-change","#scheduleCronBuilder",function(){$("#updatedCronPreview").text(scheduleBuilder.getValue()+" "+currentCommand);$("#sameScheduleError").addClass("d-none")});
$("#confirmCronSchedule").on("click",function(){if(!scheduleBuilder.isValid())return;if($("#sschedule").val()===currentSchedule){$("#sameScheduleError").removeClass("d-none");return}document.getElementById("cronChangeScheduleForm").submit()});
$(document).on("click",".delete-cron",function(){$("#cid").val(decodeURIComponent(this.dataset.id));$("#deleteCronSchedule").text(decodeURIComponent(this.dataset.schedule));$("#deleteCronCommand").text(decodeURIComponent(this.dataset.command));deleteModal.show()});
})})(jQuery);
</script>
{% endblock %}