{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Generate Backup" %} - Eenos{% endblock %}
{% block content %}
<div class="eenos-page-header flex-wrap gap-3">
  <div>
    <h1 class="eenos-page-title">{% translate "Generate Backup" %}</h1>
    <div class="eenos-page-subtitle">{% translate "Create an on-demand backup of your hosting account and save it locally or send it to a remote server." %}</div>
  </div>
  <div class="col-12 col-sm-auto">
    <a href="{% url 'workspace-filestudio' %}?path=Downloads"
       target="_blank"
       rel="noopener noreferrer"
       class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100">
      <i data-lucide="folder-down"></i>
      <span>{% translate "View Generated Backup" %}</span>
    </a>
  </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 "Generate Backup" %}</span></nav>
{% include "includes/form_alerts.html" %}
{% if isrunning == "no" %}
<div class="eenos-card">
  <div class="d-flex align-items-start justify-content-between gap-3 mb-4">
    <div>
      <div class="eenos-panel-title">{% translate "Create an On-Demand Backup" %}</div>
      <div class="eenos-panel-subtitle">{% translate "Choose where the completed account backup should be delivered." %}</div>
    </div>
    <div class="eenos-card-action-icon"><i data-lucide="archive"></i></div>
  </div>

  <fieldset class="mb-4">
    <legend class="form-label mb-3">{% translate "Backup destination" %}</legend>
    <div class="row g-3">
      <div class="col-md-6">
        <label class="border rounded-3 p-3 d-flex gap-3 h-100 backup-destination-option" for="backupDestinationLocal">
          <input class="form-check-input mt-1 backup-destination" type="radio" name="backup_destination_ui" id="backupDestinationLocal" value="local" checked>
          <span class="d-flex gap-3">
            <span class="eenos-modal-info-icon flex-shrink-0"><i data-lucide="download"></i></span>
            <span>
              <span class="d-block fw-semibold">{% translate "Local Downloads" %}</span>
              <span class="d-block small text-muted mt-1">{% translate "Save the completed backup in the Downloads folder under your account home directory." %}</span>
            </span>
          </span>
        </label>
      </div>
      <div class="col-md-6">
        <label class="border rounded-3 p-3 d-flex gap-3 h-100 backup-destination-option" for="backupDestinationRemote">
          <input class="form-check-input mt-1 backup-destination" type="radio" name="backup_destination_ui" id="backupDestinationRemote" value="remote">
          <span class="d-flex gap-3">
            <span class="eenos-modal-info-icon flex-shrink-0"><i data-lucide="cloud-upload"></i></span>
            <span>
              <span class="d-block fw-semibold">{% translate "Remote Server" %}</span>
              <span class="d-block small text-muted mt-1">{% translate "Upload the completed backup to an FTP or secure SFTP destination." %}</span>
            </span>
          </span>
        </label>
      </div>
    </div>
  </fieldset>

  <div id="localBackupPane">
    <form method="post" id="localBackupForm" class="eenos-form" data-parsley-validate>
      {% csrf_token %}
      <div class="border-top pt-4">
        <div class="d-flex align-items-center gap-3 mb-4">
          <span class="eenos-modal-info-icon flex-shrink-0"><i data-lucide="folder-down"></i></span>
          <div>
            <div class="fw-semibold">{% translate "Save backup to Downloads" %}</div>
            <div class="small text-muted">{% translate "The completed backup will be available from your account Downloads folder." %}</div>
          </div>
        </div>
        <div class="row g-4 align-items-end">
          <div class="col-lg-5">
            <label class="form-label" for="localBackupDestination">{% translate "Destination" %}</label>
            <div class="input-group">
              <span class="input-group-text"><i data-lucide="house"></i></span>
              <input class="form-control font-monospace" id="localBackupDestination" value="~/Downloads" readonly aria-label="{% translate 'Local backup destination' %}">
            </div>
          </div>
          <div class="w-100"></div>
          <div class="col-lg-5">
            <label for="localBackupEmail" class="form-label">{% translate "Backup notification email" %}</label>
            <input class="form-control" type="email" required autocomplete="email" name="email" id="localBackupEmail" value="{{ request.session.plan.contactemail }}" placeholder="user@example.com" data-parsley-required-message="{% translate 'Enter an email address for the completion notification.' %}" data-parsley-type-message="{% translate 'Enter a valid email address.' %}">
            <div class="form-text">{% translate "A notification will be sent to this address after the backup is generated successfully." %}</div>
          </div>
        </div>
        <input type="hidden" name="pool" value="disk">
        <input type="hidden" name="savehome" id="savehome" value="yes">
        <button type="button" class="btn btn-primary mt-4" id="openLocalBackupConfirm"><i data-lucide="archive"></i>{% translate "Create Backup in Downloads" %}</button>
      </div>
    </form>
  </div>

  <div id="remoteBackupPane" class="d-none">
    <form method="post" id="remoteBackupForm" class="eenos-form" data-parsley-validate>
      {% csrf_token %}
      <div class="border-top pt-4">
        <div class="d-flex align-items-center gap-3 mb-4">
          <span class="eenos-modal-info-icon flex-shrink-0"><i data-lucide="server"></i></span>
          <div>
            <div class="fw-semibold">{% translate "Upload backup to a remote server" %}</div>
            <div class="small text-muted">{% translate "Enter the connection details for the server that will receive the completed backup." %}</div>
          </div>
        </div>
        <div class="row g-4">
          <div class="col-12">
            <div class="form-label">{% translate "Transfer protocol" %}</div>
            <div class="row g-3">
              <div class="col-sm-6 col-lg-4">
                <label class="border rounded-3 p-3 d-flex gap-3 h-100" for="backupFtp">
                  <input class="form-check-input mt-1 remote-protocol" type="radio" name="pool" id="backupFtp" value="ftp" checked>
                  <span><span class="d-block fw-semibold">FTP</span><span class="small text-muted">{% translate "Standard, unencrypted transfer" %}</span></span>
                </label>
              </div>
              <div class="col-sm-6 col-lg-4">
                <label class="border rounded-3 p-3 d-flex gap-3 h-100" for="backupSftp">
                  <input class="form-check-input mt-1 remote-protocol" type="radio" name="pool" id="backupSftp" value="sftp">
                  <span><span class="d-block fw-semibold">SFTP <span class="badge eenos-badge-success ms-1">{% translate "Recommended" %}</span></span><span class="small text-muted">{% translate "Encrypted transfer over SSH" %}</span></span>
                </label>
              </div>
            </div>
          </div>
          <div class="col-lg-8">
            <label for="host" class="form-label">{% translate "Remote host" %}</label>
            <input class="form-control" id="host" name="host" required minlength="6" maxlength="500" pattern="^(?![.:-])[\w.:-]*$(?&lt;![.:-])" autocomplete="off" placeholder="backup.example.com" data-parsley-required-message="{% translate 'Enter the remote hostname or IP address.' %}">
          </div>
          <div class="col-lg-4">
            <label for="port" class="form-label">{% translate "Port" %}</label>
            <input class="form-control" type="number" id="port" name="port" value="21" min="1" max="65535" required data-parsley-required-message="{% translate 'Enter the remote server port.' %}">
          </div>
          <div class="col-lg-6">
            <label for="user" class="form-label">{% translate "Remote username" %}</label>
            <input class="form-control" id="user" name="user" required minlength="1" maxlength="100" autocomplete="off" data-parsley-required-message="{% translate 'Enter the remote username.' %}">
          </div>
          <div class="col-lg-6">
            <label for="password" class="form-label">{% translate "Remote password" %}</label>
            <div class="eenos-password-generator">
              <div class="input-group">
                <div class="eenos-password-control">
                  <input class="form-control eenos-password-input" type="password" id="password" name="password" required minlength="6" maxlength="300" pattern="^\S+$" autocomplete="new-password" data-parsley-required-message="{% translate 'Enter the remote account password.' %}" data-parsley-minlength-message="{% translate 'The password must contain at least 6 characters.' %}">
                </div>
                <button type="button" class="btn btn-outline-secondary eenos-password-toggle" title="{% translate 'Show password' %}" aria-label="{% translate 'Show password' %}"><i data-lucide="eye"></i></button>
                <button type="button" class="btn btn-outline-primary eenos-password-generate" title="{% translate 'Generate secure password' %}" aria-label="{% translate 'Generate secure password' %}"><i data-lucide="wand-sparkles"></i></button>
              </div>
            </div>
          </div>
          <div class="col-lg-6">
            <label for="path" class="form-label">{% translate "Remote storage path" %}</label>
            <div class="input-group">
              <span class="input-group-text"><i data-lucide="folder"></i></span>
              <input class="form-control font-monospace" id="path" name="path" required minlength="2" maxlength="200" pattern="^/[\w./-]{1,253}(?&lt;![./])$" placeholder="/backups" data-parsley-required-message="{% translate 'Enter the remote storage path.' %}" data-parsley-errors-container="#remotePathErrors">
            </div>
            <div id="remotePathErrors"></div>
          </div>
          <div class="w-100"></div>
          <div class="col-lg-6">
            <label for="remoteBackupEmail" class="form-label">{% translate "Backup notification email" %}</label>
            <input class="form-control" type="email" required autocomplete="email" name="email" id="remoteBackupEmail" value="{{ request.session.plan.contactemail }}" placeholder="user@example.com" data-parsley-required-message="{% translate 'Enter an email address for the completion notification.' %}" data-parsley-type-message="{% translate 'Enter a valid email address.' %}">
            <div class="form-text">{% translate "A notification will be sent to this address after the backup is generated and uploaded successfully." %}</div>
          </div>
        </div>
        <input type="hidden" name="saveremote" id="saveremote" value="yes">
        <button type="button" class="btn btn-primary mt-4" id="openRemoteBackupConfirm"><i data-lucide="cloud-upload"></i>{% translate "Create and Upload Backup" %}</button>
      </div>
    </form>
  </div>
</div>

<div class="modal fade" id="localBackupConfirmModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header"><h2 class="modal-title fs-5">{% translate "Create Local Backup" %}</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button></div>
      <div class="modal-body">
        <div class="eenos-notice eenos-notice-warning mb-4"><div class="eenos-notice-icon"><i data-lucide="archive-x"></i></div><div class="eenos-notice-content"><div class="eenos-notice-title">{% translate "Existing backup will be replaced" %}</div><div class="eenos-notice-text">{% translate "After the new backup is generated successfully, any previous on-demand backup in your Downloads folder will be replaced. Backup generation may take some time." %}</div></div></div>
        <div class="small text-muted text-uppercase fw-semibold mb-2">{% translate "Backup summary" %}</div>
        <dl class="row mb-0"><dt class="col-sm-4">{% translate "Destination" %}</dt><dd class="col-sm-8"><code>~/Downloads</code></dd><dt class="col-sm-4">{% translate "Notification" %}</dt><dd class="col-sm-8 text-break" id="localBackupConfirmEmail"></dd></dl>
      </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="confirmLocalBackup"><i data-lucide="archive"></i>{% translate "Create Backup" %}</button></div>
    </div>
  </div>
</div>

<div class="modal fade" id="remoteBackupConfirmModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header"><h2 class="modal-title fs-5">{% translate "Create and Upload Backup" %}</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button></div>
      <div class="modal-body">
        <div class="eenos-notice eenos-notice-warning mb-4"><div class="eenos-notice-icon"><i data-lucide="archive-x"></i></div><div class="eenos-notice-content"><div class="eenos-notice-title">{% translate "Existing remote backup will be replaced" %}</div><div class="eenos-notice-text">{% translate "After generation and upload complete successfully, any previous on-demand backup at the selected remote destination will be replaced. Keep the remote server available until the operation finishes." %}</div></div></div>
        <div class="small text-muted text-uppercase fw-semibold mb-2">{% translate "Backup summary" %}</div>
        <dl class="row mb-0"><dt class="col-sm-4">{% translate "Protocol" %}</dt><dd class="col-sm-8" id="remoteBackupConfirmProtocol"></dd><dt class="col-sm-4">{% translate "Server" %}</dt><dd class="col-sm-8 font-monospace text-break" id="remoteBackupConfirmServer"></dd><dt class="col-sm-4">{% translate "Username" %}</dt><dd class="col-sm-8 text-break" id="remoteBackupConfirmUser"></dd><dt class="col-sm-4">{% translate "Directory" %}</dt><dd class="col-sm-8"><code class="text-break" id="remoteBackupConfirmPath"></code></dd><dt class="col-sm-4">{% translate "Notification" %}</dt><dd class="col-sm-8 text-break" id="remoteBackupConfirmEmail"></dd></dl>
      </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="confirmRemoteBackup"><i data-lucide="cloud-upload"></i>{% translate "Create and Upload" %}</button></div>
    </div>
  </div>
</div>
{% else %}
<div class="eenos-card"><div class="eenos-notice eenos-notice-warning mb-0" role="status"><div class="eenos-notice-icon"><i data-lucide="loader-circle"></i></div><div class="eenos-notice-content"><div class="eenos-notice-title">{% translate "Backup generation is in progress" %}</div><div class="eenos-notice-text">{% translate "Please wait until the current backup finishes before sending another backup request. A notification will be sent to the selected email address after successful completion." %}</div></div></div></div>
{% endif %}
{% endblock %}
{% block extra_js %}
<script>
$(function(){
  const localPane=$('#localBackupPane');
  const remotePane=$('#remoteBackupPane');
  const localModal=bootstrap.Modal.getOrCreateInstance(document.getElementById('localBackupConfirmModal'));
  const remoteModal=bootstrap.Modal.getOrCreateInstance(document.getElementById('remoteBackupConfirmModal'));

  function selectDestination(destination){
    const local=destination==='local';
    localPane.toggleClass('d-none',!local);
    remotePane.toggleClass('d-none',local);
    $('.backup-destination-option').removeClass('eenos-selection-active');
    $('.backup-destination:checked').closest('.backup-destination-option').addClass('eenos-selection-active');
    const hiddenForm=local?$('#remoteBackupForm'):$('#localBackupForm');
    if(hiddenForm.length)hiddenForm.parsley().reset();
  }

  $('.backup-destination').on('change',function(){selectDestination(this.value)});
  selectDestination($('.backup-destination:checked').val());

  $('.remote-protocol').on('change',function(){
    $('#port').val(this.value==='sftp'?'22':'21');
  });

  $('#openLocalBackupConfirm').on('click',function(){
    const form=$('#localBackupForm').parsley();
    form.validate();
    if(!form.isValid())return;
    $('#localBackupConfirmEmail').text($('#localBackupEmail').val());
    localModal.show();
  });

  $('#openRemoteBackupConfirm').on('click',function(){
    const form=$('#remoteBackupForm').parsley();
    form.validate();
    if(!form.isValid())return;
    const protocol=$('.remote-protocol:checked').val().toUpperCase();
    $('#remoteBackupConfirmProtocol').text(protocol);
    $('#remoteBackupConfirmServer').text($('#host').val()+':'+$('#port').val());
    $('#remoteBackupConfirmUser').text($('#user').val());
    $('#remoteBackupConfirmPath').text($('#path').val());
    $('#remoteBackupConfirmEmail').text($('#remoteBackupEmail').val());
    remoteModal.show();
  });

  $('#confirmLocalBackup').on('click',function(){
    $('#savehome').val('yes');
    document.getElementById('localBackupForm').submit();
  });

  $('#confirmRemoteBackup').on('click',function(){
    $('#saveremote').val('yes');
    document.getElementById('remoteBackupForm').submit();
  });
});
</script>
{% endblock %}