{% extends "base.html" %}
{% load i18n static %}
{% block title %}{% translate "Add Cron Job" %} - Eenos{% endblock %}
{% block content %}
<div class="eenos-page-header flex-wrap gap-3">
    <div>
        <h1 class="eenos-page-title">{% translate "Add Cron Job" %}</h1>
        <div class="eenos-page-subtitle">{% translate "Schedule a command or script to run automatically." %}</div>
    </div>
    <div class="col-12 col-sm-auto">
        <a href="{% url 'cron_jobs' %}"
           class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100"><i data-lucide="list-clock"></i><span>{% translate "Cron Jobs" %}</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>{% translate "Cron Jobs" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current">{% translate "Add Cron Job" %}</span>
</nav>
{% include "includes/form_alerts.html" %}
<div class="eenos-amber-notice eenos-amber-notice-warning mb-4" role="alert">
    <div class="eenos-amber-notice-icon"><i data-lucide="triangle-alert"></i></div>
    <div class="eenos-amber-notice-content">
        <div class="eenos-amber-notice-title">{% translate "Commands run with your account permissions" %}</div>
        <div class="eenos-amber-notice-text">{% translate "Only schedule commands you understand and trust. An incorrect command or schedule can affect your website files and account resources." %}</div>
    </div>
</div>
<form method="post" id="cronAddForm" class="eenos-form" data-parsley-validate>
    {% csrf_token %}
    <input type="hidden" name="add_cron" value="yes">
    <input type="hidden"
           name="schedule"
           id="schedule"
           value="{{ form.schedule.value|default:'* * * * *' }}"
           required>
    <div class="eenos-card">
        <div class="eenos-card-header">
            <div>
                <h2 class="eenos-card-title">{% translate "Create Cron Job" %}</h2>
                <p class="eenos-card-subtitle">{% translate "Choose when the task runs, then enter the command to execute." %}</p>
            </div>
            <div class="eenos-card-action-icon"><i data-lucide="clock-3"></i></div>
        </div>
        <div class="row g-4">
            <div class="col-12">
                <div id="cronBuilder"></div>
            </div>
            <div class="col-12 col-xl-9">
                <label class="form-label" for="command">{% translate "Command" %}</label>
                <div class="input-group">
                    <span class="input-group-text"><i data-lucide="terminal"></i></span>
                    <input type="text"
                           class="form-control font-monospace"
                           name="command"
                           id="command"
                           value="{{ form.command.value|default:'' }}"
                           autocomplete="off"
                           placeholder="/usr/bin/php /home/user/script.php"
                           required
                           data-parsley-required-message="{% translate 'Please enter the command to run.' %}">
                </div>
                <div class="form-text">{% translate "Use an absolute path when possible and include any required command arguments." %}</div>
            </div>
        </div>
    </div>
    <div class="d-flex flex-column flex-sm-row justify-content-start gap-2 mt-3">
        <div class="col-12 col-sm-auto">
            <button type="button"
                    id="reviewCronJob"
                    class="btn btn-primary d-flex align-items-center justify-content-center gap-2 w-100"><i data-lucide="calendar-plus"></i><span>{% translate "Create Cron Job" %}</span></button>
        </div>
        <div class="col-12 col-sm-auto">
            <a href="{% url 'cron_jobs' %}"
               class="btn btn-outline-secondary d-flex align-items-center justify-content-center gap-2 w-100"><i data-lucide="arrow-left"></i><span>{% translate "Go Back" %}</span></a>
        </div>
    </div>
</form>
<div class="modal fade"
     id="createCronModal"
     tabindex="-1"
     aria-labelledby="createCronModalTitle"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h2 class="modal-title fs-5 d-flex align-items-center gap-2"
                        id="createCronModalTitle"><i data-lucide="calendar-plus"></i>{% translate "Create Cron Job" %}</h2>
                    <div class="small text-muted mt-1">{% translate "Review the schedule and command before creating this 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="eenos-modal-info mb-4">
                    <div class="eenos-modal-info-icon"><i data-lucide="clock-3"></i></div>
                    <div class="eenos-modal-info-content">
                        <div class="eenos-modal-info-label">{% translate "Schedule" %}</div>
                        <div class="eenos-modal-info-value" id="reviewCronDescription"></div>
                    </div>
                </div>
                <div class="row g-3 mb-4">
                    <div class="col-12 col-md-5">
                        <div class="small fw-semibold text-muted text-uppercase mb-2">{% translate "Cron Expression" %}</div>
                        <pre class="eenos-code-view eenos-code-view-wrap p-3 mb-0 h-100" id="reviewCronExpression"></pre>
                    </div>
                    <div class="col-12 col-md-7">
                        <div class="small fw-semibold text-muted text-uppercase mb-2">{% translate "Command" %}</div>
                        <pre class="eenos-code-view eenos-code-view-wrap p-3 mb-0 h-100" id="reviewCronCommand"></pre>
                    </div>
                </div>
                <div class="mt-5">
                    <div class="d-flex align-items-center justify-content-between gap-3 mb-2">
                        <div class="small fw-semibold text-muted text-uppercase">{% translate "Complete Cron Job" %}</div>
                        <button type="button"
                                class="btn btn-sm btn-outline-secondary"
                                id="copyCronJob"
                                title="{% translate 'Copy complete cron job' %}"
                                aria-label="{% translate 'Copy complete cron job' %}"><i data-lucide="copy"></i></button>
                    </div>
                    <pre class="eenos-code-view eenos-code-view-wrap p-3 mb-0" id="reviewCompleteCron"></pre>
                    <div class="form-text mt-2">{% translate "This is the exact line that will be added to your crontab." %}</div>
                </div>
                <div class="eenos-amber-notice eenos-amber-notice-warning mt-4 mb-0">
                    <div class="eenos-amber-notice-icon"><i data-lucide="triangle-alert"></i></div>
                    <div class="eenos-amber-notice-content">
                        <div class="eenos-amber-notice-title">{% translate "Verify the command before continuing" %}</div>
                        <div class="eenos-amber-notice-text">{% translate "The command will run automatically with your account permissions according to this schedule." %}</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" id="confirmCreateCron" class="btn btn-primary"><i data-lucide="check"></i>{% translate "Create Cron Job" %}</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block extra_js %}
<script src="{% get_static_prefix %}{{ theme }}/js/eenos-cron.js"></script>
<script>
(function($){"use strict";$(function(){
const form=$("#cronAddForm"),modal=bootstrap.Modal.getOrCreateInstance(document.getElementById("createCronModal")),cronBuilder=new EenosCronBuilder({container:"#cronBuilder",scheduleInput:"#schedule",commandInput:"#command"});
$("#reviewCronJob").on("click",function(){const validation=form.parsley();validation.validate();if(!validation.isValid()||!cronBuilder.isValid())return;const expression=$("#schedule").val(),command=$("#command").val().trim();$("#reviewCronDescription").text(cronBuilder.describe());$("#reviewCronExpression").text(expression);$("#reviewCronCommand").text(command);$("#reviewCompleteCron").text(expression+" "+command);modal.show()});
$("#copyCronJob").on("click",async function(){const button=$(this),copied=await window.EenosUapp.copyToClipboard($("#reviewCompleteCron").text());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)});
$("#confirmCreateCron").on("click",function(){document.getElementById("cronAddForm").submit()});
})})(jQuery);
</script>
{% endblock %}