{% extends "base.html" %}

{% block title %}پشتیبانی و بازیابی{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    
    

    <!-- بخش مدیریت فایل‌ها (منتقل شده از index.html سابق) -->
    <div class="section-container card mb-4">
        <!-- <h1><i class="fas fa-file-excel" style="margin-bottom: 70px;"></i> پشتیبانی و بازیابی</h1> -->
        <div class="card-header section-header">
            <h2><i class="fas fa-shield-alt"></i>پشتیبانی و بازیابی</h2>
        </div>
        <div class="card-body actions">
            {% if session.get('user_role') != 'reader' %}
                <div class="excel-upload-zone mb-3" id="excelUploadZone">
                    <div class="upload-content text-center p-3 border rounded">
                        <svg class="excel-icon mb-2" style="width: 50px; height: 50px;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M14 2H6C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8L14 2Z" stroke="#217346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M14 2V8H20" stroke="#217346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M16 13H8" stroke="#217346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M16 17H8" stroke="#217346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M10 9H9H8" stroke="#217346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <p class="upload-text">فایل اکسل را اینجا رها کنید</p>
                        <p class="upload-hint">یا برای انتخاب کلیک کنید</p>
                        <div class="selected-file-display" style="display: flex; align-items: center; justify-content: center; min-height: 1.5em; margin-top: 0.5rem; margin-bottom: 0.5rem;">
                            <span id="clearSelectedFileBtn" style="display: none; cursor: pointer; margin-left: 8px; font-size: 1.5em; line-height: 1; color: var(--primary-color);" title="پاک کردن فایل انتخاب شده">&times;</span>
                            <p id="selectedFileName" class="selected-file-name" style="margin: 0;"></p>
                        </div>
                        <input type="file" id="excelFile" accept=".xlsx, .xls" class="file-input" style="display: none;">
                    </div>
                </div>
            {% endif %}
        </div>
        <div class="card-body actions">
            {% if session.get('user_role') != 'reader' %}
                <!-- The onclick will now call the uploadExcel from static/js/script.js -->
                <button onclick="uploadExcel()" class="btn btn-success mb-2 me-2"><i class="fas fa-upload"></i> آپلود فایل اکسل</button>
            {% endif %}
            <button onclick="window.location.href=`{{ url_for('download_excel') }}`" class="btn btn-info mb-2"><i class="fas fa-download"></i> دانلود فایل اکسل</button>
        </div>
    </div>

    

</div>

<!-- Modal for upload progress or messages -->
<div class="modal fade" id="uploadModal" tabindex="-1" aria-labelledby="uploadModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="uploadModalLabel">وضعیت آپلود</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p id="uploadModalMessage"></p>
        <div class="progress" style="display:none;">
          <div id="uploadProgressBar" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}
{{ super() }}
<script>
// JavaScript for Backup Page specific logic can go here if needed,
// but file upload and selection is now handled by static/js/script.js

// Example: If there was any backup-page-specific logic NOT related to file upload, it would remain.
// For now, we are removing the conflicting parts.

document.addEventListener('DOMContentLoaded', function() {
    // Any backup-page-specific initialization that is NOT related to
    // excelUploadZone, excelFile, selectedFileName, or their event listeners
    // can go here.

    // The modal interactions for upload progress might still be relevant if
    // the global uploadExcel in script.js doesn't fully manage them.
    // However, the global uploadExcel in script.js seems to use showToast,
    // not this modal. Let's review this part after confirming script.js behavior.

    // For now, let's ensure the uploadExcel in this file is fully removed.
    // The `onclick="uploadExcel()"` button will now call the global function from script.js
});
</script>
{% endblock %}

</rewritten_file>