{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Backup Schedules" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Backup Schedules" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Create and manage automated backup jobs for your reseller account and hosted accounts." %}</div>
        </div>
    </div>
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>{% translate "Backups" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>{% translate "Manage Backups" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "Backup Schedules" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card mb-4">
        <div class="eenos-panel-title">{% translate "Create a Backup Schedule" %}</div>
        <div class="eenos-panel-subtitle mb-3">{% translate "Choose what the schedule will back up. You can set its frequency and storage pools on the next page." %}</div>
        <div class="row g-3">
            <div class="col-md-6">
                <a href="{% url 'backup_schedule_add_reseller' %}"
                   class="eenos-option-card d-flex align-items-start gap-3 h-100 p-3 text-decoration-none">
                    <span class="eenos-modal-info-icon flex-shrink-0"><i data-lucide="archive"></i></span>
                    <span><span class="d-block fw-semibold mb-1">{% translate "My Full Backup" %}</span><span class="d-block small text-muted">{% translate "Back up your reseller account and all directly owned hosting accounts." %}</span></span>
                </a>
            </div>
            <div class="col-md-6">
                <a href="{% url 'backup_schedule_add_user' %}"
                   class="eenos-option-card d-flex align-items-start gap-3 h-100 p-3 text-decoration-none">
                    <span class="eenos-modal-info-icon flex-shrink-0"><i data-lucide="user-round"></i></span>
                    <span><span class="d-block fw-semibold mb-1">{% translate "Single Account" %}</span><span class="d-block small text-muted">{% translate "Back up one selected hosting account." %}</span></span>
                </a>
            </div>
        </div>
    </div>
    <div class="eenos-card">
        <div class="mb-3">
            <div class="eenos-panel-title">{% translate "Configured Schedules" %}</div>
            <div class="eenos-panel-subtitle">{% translate "Control recurring jobs or run an enabled schedule immediately." %}</div>
        </div>
        <table id="backupSchedulesTable"
               class="table table-hover align-middle w-100 mb-0">
            <thead>
                <tr>
                    <th>{% translate "Schedule" %}</th>
                    <th>{% translate "Schedule Type" %}</th>
                    <th>{% translate "Backup Method" %}</th>
                    <th>{% translate "Scope" %}</th>
                    <th>{% translate "Run Time" %}</th>
                    <th>{% translate "Status" %}</th>
                    <th class="text-end">{% translate "Actions" %}</th>
                </tr>
            </thead>
        </table>
    </div>
    <form method="post" id="scheduleActionForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="pool" id="scheduleId"><input type="hidden" name="status" id="scheduleStatus"><input type="hidden" name="change_status" id="scheduleChange" disabled><input type="hidden" name="delete_schedule" id="scheduleDelete" disabled><input type="hidden" name="run_backup" id="scheduleRun" disabled>
    </form>
    <div class="modal fade"
         id="scheduleModal"
         tabindex="-1"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-0 pb-0">
                    <h2 class="modal-title fs-5" id="scheduleTitle"></h2>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="border rounded-3 bg-body-tertiary p-3 mb-4">
                        <div class="d-flex align-items-center gap-3">
                            <span class="eenos-modal-info-icon flex-shrink-0"><i data-lucide="calendar-clock"></i></span>
                            <div class="min-w-0">
                                <div class="small text-muted text-uppercase fw-semibold">{% translate "Backup Schedule" %}</div>
                                <div class="fs-5 fw-bold text-break" id="scheduleName"></div>
                                <div class="small text-muted mt-1">{% translate "Schedule ID" %}: <code class="user-select-all" id="scheduleKey"></code></div>
                            </div>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-warning" id="scheduleNotice">
                        <div class="eenos-notice-icon" id="scheduleNoticeIcon">
                            <i data-lucide="info"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-text" id="scheduleText"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{% translate "Cancel" %}</button><button type="button" class="btn btn-warning" id="confirmSchedule"></button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
$(function(){
const esc=value=>$('<div>').text(value==null?'':value).html();
const modal=bootstrap.Modal.getOrCreateInstance(document.getElementById('scheduleModal'));
let selected=null;
const table=$('#backupSchedulesTable').DataTable({
    responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},
    processing:true,pageLength:25,lengthMenu:[[10,25,50,100,-1],[10,25,50,100,"{% translate 'All' %}"]],
    ajax:{url:"{% url 'backup_schedule_data' %}",dataSrc:'data'},order:[[0,'asc']],
    columns:[
        {data:'name',responsivePriority:1,render:(value,type,row)=>type==='display'?'<div class="fw-semibold">'+esc(value)+'</div><div class="small text-muted font-monospace">'+esc(row.schedule_key)+'</div>':value},
        {data:'type_label',className:'text-nowrap',responsivePriority:3,render:(value,type,row)=>{
            if(type!=='display')return value;
            const styles={full:['eenos-badge-primary','server'],reseller:['bg-success-subtle text-success border border-success-subtle','users'],user:['eenos-badge-neutral','user-round']};
            const style=styles[row.type]||['eenos-badge-neutral','archive'];
            return '<span class="badge '+style[0]+'"><i data-lucide="'+style[1]+'"></i>'+esc(value)+'</span>';
        }},
        {data:'backup_type_label',className:'text-nowrap',responsivePriority:4,render:(value,type,row)=>{
            if(type!=='display')return value;
            const styles={incremental:['eenos-badge-primary','layers-3'],compressed:['bg-success-subtle text-success border border-success-subtle','package-check'],archived:['eenos-badge-neutral','archive']};
            const style=styles[row.backup_type]||['eenos-badge-neutral','archive'];
            return '<span class="badge '+style[0]+'"><i data-lucide="'+style[1]+'"></i>'+esc(value)+'</span>';
        }},
        {data:'scope',responsivePriority:6,render:(value,type)=>type==='display'?esc(value||'—'):value},
        {data:'schedule_time',className:'text-nowrap',responsivePriority:5},
        {data:'enabled',width:'150px',className:'text-nowrap',responsivePriority:2,render:(value,type,row)=>{
            if(type!=='display')return value;
            const key=esc(row.schedule_key),name=esc(row.name),label=row.running?'{% translate "Running" %}':value?'{% translate "Enabled" %}':'{% translate "Disabled" %}';
            return '<div class="d-inline-flex align-items-center gap-2"><div class="form-check form-switch m-0"><input type="checkbox" class="form-check-input schedule-status-switch" role="switch" data-id="'+key+'" data-name="'+name+'" data-enabled="'+value+'" aria-label="{% translate "Change schedule status" %}" '+(value?'checked':'')+' '+(row.running?'disabled':'')+'></div><span class="small '+(row.running?'text-warning':value?'text-success':'text-muted')+'">'+label+'</span></div>';
        }},
        {data:null,orderable:false,searchable:false,className:'text-end',responsivePriority:1,render:(value,type,row)=>{
            if(type!=='display')return '';
            const key=esc(row.schedule_key),name=esc(row.name);
            const edit=row.can_edit?'<a href="'+esc(row.edit_url)+'" class="btn btn-sm btn-outline-secondary" title="{% translate "Edit schedule" %}" aria-label="{% translate "Edit schedule" %}"><i data-lucide="pencil"></i></a>':'';
            const run=row.can_run?'<button type="button" class="btn btn-sm btn-outline-primary schedule-action" data-action="run" data-id="'+key+'" data-name="'+name+'" title="{% translate "Run backup now" %}" aria-label="{% translate "Run backup now" %}"><i data-lucide="play"></i><span>{% translate "Run" %}</span></button>':'';
            const remove='<button type="button" class="btn btn-sm btn-outline-danger schedule-action" data-action="delete" data-id="'+key+'" data-name="'+name+'" title="{% translate "Delete schedule" %}" aria-label="{% translate "Delete schedule" %}"><i data-lucide="trash-2"></i></button>';
            return '<div class="eenos-dt-actions d-flex flex-wrap justify-content-end gap-1">'+run+edit+remove+'</div>';
        }}
    ],
    language:{lengthMenu:"{% translate 'Show' %} _MENU_"},
    drawCallback:()=>{if(typeof lucide!=='undefined')lucide.createIcons()}
});
table.on('responsive-display',()=>{if(typeof lucide!=='undefined')lucide.createIcons()});
$(document).on('change','.schedule-status-switch',function(){
    const enabled=String($(this).data('enabled'))==='true';
    $(this).prop('checked',enabled);
    selected={action:'toggle',id:$(this).data('id'),name:$(this).data('name'),enabled:enabled};
    openScheduleAction();
});
$(document).on('click','.schedule-action',function(){
    selected={action:$(this).data('action'),id:$(this).data('id'),name:$(this).data('name'),enabled:String($(this).data('enabled'))==='true'};
    openScheduleAction();
});
function openScheduleAction(){
    const config=selected.action==='run'?["{% translate 'Run Backup Now' %}","{% translate 'This schedule will start a backup job immediately.' %}","{% translate 'Run Backup' %}",'btn-primary','eenos-notice-info','play']:selected.action==='delete'?["{% translate 'Delete Schedule' %}","{% translate 'This schedule will be permanently removed. Existing backup files will not be deleted.' %}","{% translate 'Delete Schedule' %}",'btn-danger','eenos-notice-danger','triangle-alert']:selected.enabled?["{% translate 'Disable Schedule' %}","{% translate 'Automatic runs for this schedule will stop.' %}","{% translate 'Disable Schedule' %}",'btn-warning','eenos-notice-warning','pause']:["{% translate 'Enable Schedule' %}","{% translate 'Automatic runs for this schedule will resume.' %}","{% translate 'Enable Schedule' %}",'btn-success','eenos-notice-info','power'];
    $('#scheduleTitle').text(config[0]);$('#scheduleName').text(selected.name||"{% translate 'Unnamed schedule' %}");$('#scheduleKey').text(selected.id);$('#scheduleText').text(config[1]);
    $('#scheduleNotice').removeClass('eenos-notice-info eenos-notice-danger eenos-notice-warning').addClass(config[4]);$('#scheduleNoticeIcon').html('<i data-lucide="'+config[5]+'"></i>');
    $('#confirmSchedule').text(config[2]).removeClass('btn-primary btn-danger btn-warning btn-success').addClass(config[3]);
    if(typeof lucide!=='undefined')lucide.createIcons();modal.show();
}
$('#confirmSchedule').on('click',function(){
    if(!selected)return;
    $('#scheduleId').val(selected.id);$('#scheduleChange,#scheduleDelete,#scheduleRun').prop('disabled',true);
    if(selected.action==='run')$('#scheduleRun').prop('disabled',false).val('yes');
    else if(selected.action==='delete')$('#scheduleDelete').prop('disabled',false).val('yes');
    else{$('#scheduleChange').prop('disabled',false).val('yes');$('#scheduleStatus').val(selected.enabled?'off':'on')}
    document.getElementById('scheduleActionForm').submit();
});
});
    </script>
{% endblock %}