{% extends "layout.html" %}
{% block title %}{{ _('Backups') }}{% endblock %}
{% block content %}

<div class="card mb-4">
    <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
        <h5 class="mb-0">Backup Jobs</h5>
        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#createBackupModal">
            <i class="fas fa-plus"></i> New Backup Job
        </button>
    </div>
    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            <thead class="table-light">
                <tr>
                    <th class="ps-4">Job Name</th>
                    <th>Source</th>
                    <th>Destination</th>
                    <th>Frequency</th>
                    <th>Last Run</th>
                    <th class="text-end pe-4">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for job in jobs %}
                <tr>
                    <td class="ps-4 fw-bold">{{ job.name }}</td>
                    <td>{{ job.source_path }}</td>
                    <td><span class="badge bg-secondary">{{ job.dest_type }}</span></td>
                    <td>{{ job.frequency }}</td>
                    <td>{% if job.last_run %}{{ job.last_run|format_time }}{% else %}Never{% endif %}</td>
                    <td class="text-end pe-4">
                        <form method="post" action="{{ url_for('run_backup', job_id=job.id) }}" class="d-inline">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button type="submit" class="btn btn-sm btn-outline-primary" title="Run Now"><i class="fas fa-play"></i> Run Now</button>
                        </form>
                        <button type="button" class="btn btn-sm btn-outline-secondary" title="Edit"
                            data-bs-toggle="modal" data-bs-target="#editBackupModal{{ job.id }}">
                            <i class="fas fa-edit"></i> Edit
                        </button>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="6" class="text-center py-4 text-muted">No backup jobs defined.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="createBackupModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold">Create Backup Job</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form method="post" action="{{ url_for('create_backup') }}" id="backupForm">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted small fw-bold">Job Name</label>
                            <input type="text" name="name" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted small fw-bold">Source Path</label>
                            <input type="text" name="source_path" class="form-control" placeholder="/home/user/www" required>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-muted small fw-bold">Frequency</label>
                            <select name="frequency" class="form-select">
                                <option value="daily">Daily</option>
                                <option value="weekly">Weekly</option>
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-muted small fw-bold">Retention (Days)</label>
                            <input type="number" name="retention_days" class="form-control" value="30">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-muted small fw-bold">Retention (Count)</label>
                            <input type="number" name="retention_count" class="form-control" value="10">
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label text-muted small fw-bold">Destination Type</label>
                        <select name="dest_type" class="form-select" onchange="toggleDestFields(this.value)">
                            <option value="local">Local Directory</option>
                            <option value="sftp">Remote SFTP</option>
                            <option value="s3">S3 / Object Storage</option>
                        </select>
                    </div>

                    <!-- Local Config -->
                    <div id="local-fields" class="dest-fields">
                        <div class="mb-3">
                            <label class="form-label">Target Directory</label>
                            <input type="text" name="local_path" class="form-control" placeholder="/backup/archive">
                        </div>
                    </div>

                    <!-- SFTP Config -->
                    <div id="sftp-fields" class="dest-fields" style="display:none;">
                        <div class="row">
                            <div class="col-md-8 mb-3">
                                <label class="form-label">Hostname</label>
                                <input type="text" name="sftp_host" class="form-control" placeholder="sftp.example.com">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Port</label>
                                <input type="number" name="sftp_port" class="form-control" value="22">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Username</label>
                                <input type="text" name="sftp_user" class="form-control">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Password</label>
                                <input type="password" name="sftp_pass" class="form-control">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Private Key Path (Optional)</label>
                            <input type="text" name="sftp_key" class="form-control" placeholder="/root/.ssh/id_rsa">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Remote Path</label>
                            <input type="text" name="sftp_path" class="form-control" placeholder="/backups">
                        </div>
                    </div>

                    <!-- S3 Config -->
                    <div id="s3-fields" class="dest-fields" style="display:none;">
                        <div class="mb-3">
                            <label class="form-label">Endpoint URL</label>
                            <input type="text" name="s3_endpoint" class="form-control" placeholder="https://s3.fr-par.scw.cloud">
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Bucket Name</label>
                                <input type="text" name="s3_bucket" class="form-control">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Region</label>
                                <input type="text" name="s3_region" class="form-control" placeholder="us-east-1">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Access Key</label>
                                <input type="text" name="s3_access_key" class="form-control">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Secret Key</label>
                                <input type="password" name="s3_secret_key" class="form-control">
                            </div>
                        </div>
                    </div>

                    <!-- MySQL Backup Config -->
                    <hr>
                    <div class="mb-3 form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="mysql_enabled" value="1" id="mysql_enabled_create" onchange="toggleMysqlFields('create')">
                        <label class="form-check-label fw-bold" for="mysql_enabled_create">Enable MySQL Backup</label>
                    </div>
                    <div id="mysql-fields-create" style="display:none;">
                        <div class="mb-3">
                            <label class="form-label text-muted small fw-bold">Database Selection Mode</label>
                            <select name="mysql_db_mode" class="form-select" onchange="toggleMysqlDbFields(this.value, 'create')">
                                <option value="all">All Databases</option>
                                <option value="single">Single Database</option>
                                <option value="list">List of Databases</option>
                            </select>
                        </div>
                        <div id="mysql-single-create" style="display:none;">
                            <div class="mb-3">
                                <label class="form-label text-muted small fw-bold">Database Name</label>
                                <input type="text" name="mysql_db_name" class="form-control" placeholder="my_database">
                            </div>
                        </div>
                        <div id="mysql-list-create" style="display:none;">
                            <div class="mb-3">
                                <label class="form-label text-muted small fw-bold">Databases (comma-separated)</label>
                                <input type="text" name="mysql_db_list" class="form-control" placeholder="db1,db2,db3">
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end mt-4">
                        <button type="button" class="btn btn-light me-2" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Create Job</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function toggleDestFields(val) {
    document.querySelectorAll('.dest-fields').forEach(el => el.style.display = 'none');
    if (val === 'local') document.getElementById('local-fields').style.display = 'block';
    if (val === 'sftp') document.getElementById('sftp-fields').style.display = 'block';
    if (val === 's3') document.getElementById('s3-fields').style.display = 'block';
}
function toggleEditDestFields(val, suffix) {
    document.querySelectorAll('.edit-dest-fields-' + suffix).forEach(el => el.style.display = 'none');
    var el = document.getElementById('edit-' + val + '-fields-' + suffix);
    if (el) el.style.display = 'block';
}
function toggleMysqlFields(suffix) {
    var cb = document.getElementById('mysql_enabled_' + suffix);
    var el = document.getElementById('mysql-fields-' + suffix);
    if (el) el.style.display = cb && cb.checked ? 'block' : 'none';
}
function toggleMysqlDbFields(val, suffix) {
    var single = document.getElementById('mysql-single-' + suffix);
    var list = document.getElementById('mysql-list-' + suffix);
    if (single) single.style.display = val === 'single' ? 'block' : 'none';
    if (list) list.style.display = val === 'list' ? 'block' : 'none';
}
</script>

{% for job in jobs %}
<!-- Edit Backup Modal for {{ job.name }} -->
<div class="modal fade" id="editBackupModal{{ job.id }}" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold">Edit Backup Job</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form method="post" action="{{ url_for('edit_backup', job_id=job.id) }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    {% set dc = job.dest_config | from_json %}
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted small fw-bold">Job Name</label>
                            <input type="text" name="name" class="form-control" value="{{ job.name }}" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted small fw-bold">Source Path</label>
                            <input type="text" name="source_path" class="form-control" value="{{ job.source_path }}" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-muted small fw-bold">Frequency</label>
                            <select name="frequency" class="form-select">
                                <option value="daily" {% if job.frequency == 'daily' %}selected{% endif %}>Daily</option>
                                <option value="weekly" {% if job.frequency == 'weekly' %}selected{% endif %}>Weekly</option>
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-muted small fw-bold">Retention (Days)</label>
                            <input type="number" name="retention_days" class="form-control" value="{{ job.retention_days }}">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-muted small fw-bold">Retention (Count)</label>
                            <input type="number" name="retention_count" class="form-control" value="{{ job.retention_count }}">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted small fw-bold">Destination Type</label>
                        <select name="dest_type" class="form-select" onchange="toggleEditDestFields(this.value, '{{ job.id }}')">
                            <option value="local" {% if job.dest_type == 'local' %}selected{% endif %}>Local Directory</option>
                            <option value="sftp" {% if job.dest_type == 'sftp' %}selected{% endif %}>Remote SFTP</option>
                            <option value="s3" {% if job.dest_type == 's3' %}selected{% endif %}>S3 / Object Storage</option>
                        </select>
                    </div>
                    <!-- Local Config -->
                    <div id="edit-local-fields-{{ job.id }}" class="edit-dest-fields-{{ job.id }}" {% if job.dest_type != 'local' %}style="display:none;"{% endif %}>
                        <div class="mb-3">
                            <label class="form-label">Target Directory</label>
                            <input type="text" name="local_path" class="form-control" value="{{ dc.path if dc else '' }}">
                        </div>
                    </div>
                    <!-- SFTP Config -->
                    <div id="edit-sftp-fields-{{ job.id }}" class="edit-dest-fields-{{ job.id }}" {% if job.dest_type != 'sftp' %}style="display:none;"{% endif %}>
                        <div class="row">
                            <div class="col-md-8 mb-3">
                                <label class="form-label">Hostname</label>
                                <input type="text" name="sftp_host" class="form-control" value="{{ dc.host if dc else '' }}">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Port</label>
                                <input type="number" name="sftp_port" class="form-control" value="{{ dc.port if dc else '22' }}">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Username</label>
                                <input type="text" name="sftp_user" class="form-control" value="{{ dc.user if dc else '' }}">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Password</label>
                                <input type="password" name="sftp_pass" class="form-control">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Private Key Path (Optional)</label>
                            <input type="text" name="sftp_key" class="form-control" value="{{ dc.key if dc else '' }}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Remote Path</label>
                            <input type="text" name="sftp_path" class="form-control" value="{{ dc.remote_path if dc else '' }}">
                        </div>
                    </div>
                    <!-- S3 Config -->
                    <div id="edit-s3-fields-{{ job.id }}" class="edit-dest-fields-{{ job.id }}" {% if job.dest_type != 's3' %}style="display:none;"{% endif %}>
                        <div class="mb-3">
                            <label class="form-label">Endpoint URL</label>
                            <input type="text" name="s3_endpoint" class="form-control" value="{{ dc.endpoint if dc else '' }}">
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Bucket Name</label>
                                <input type="text" name="s3_bucket" class="form-control" value="{{ dc.bucket if dc else '' }}">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Region</label>
                                <input type="text" name="s3_region" class="form-control" value="{{ dc.region if dc else '' }}">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Access Key</label>
                                <input type="text" name="s3_access_key" class="form-control" value="{{ dc.access_key if dc else '' }}">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Secret Key</label>
                                <input type="password" name="s3_secret_key" class="form-control">
                            </div>
                        </div>
                    </div>
                    <!-- MySQL Backup Config -->
                    <hr>
                    <div class="mb-3 form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="mysql_enabled" value="1"
                            id="mysql_enabled_{{ job.id }}"
                            {% if job.mysql_enabled %}checked{% endif %}
                            onchange="toggleMysqlFields('{{ job.id }}')">
                        <label class="form-check-label fw-bold" for="mysql_enabled_{{ job.id }}">Enable MySQL Backup</label>
                    </div>
                    <div id="mysql-fields-{{ job.id }}" {% if not job.mysql_enabled %}style="display:none;"{% endif %}>
                        <div class="mb-3">
                            <label class="form-label text-muted small fw-bold">Database Selection Mode</label>
                            <select name="mysql_db_mode" class="form-select" onchange="toggleMysqlDbFields(this.value, '{{ job.id }}')">
                                <option value="all" {% if job.mysql_db_mode == 'all' %}selected{% endif %}>All Databases</option>
                                <option value="single" {% if job.mysql_db_mode == 'single' %}selected{% endif %}>Single Database</option>
                                <option value="list" {% if job.mysql_db_mode == 'list' %}selected{% endif %}>List of Databases</option>
                            </select>
                        </div>
                        <div id="mysql-single-{{ job.id }}" {% if job.mysql_db_mode != 'single' %}style="display:none;"{% endif %}>
                            <div class="mb-3">
                                <label class="form-label text-muted small fw-bold">Database Name</label>
                                <input type="text" name="mysql_db_name" class="form-control"
                                    value="{{ job.mysql_db_name or '' }}" placeholder="my_database">
                            </div>
                        </div>
                        <div id="mysql-list-{{ job.id }}" {% if job.mysql_db_mode != 'list' %}style="display:none;"{% endif %}>
                            <div class="mb-3">
                                <label class="form-label text-muted small fw-bold">Databases (comma-separated)</label>
                                <input type="text" name="mysql_db_list" class="form-control"
                                    value="{{ job.mysql_db_list or '' }}" placeholder="db1,db2,db3">
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-end mt-4">
                        <button type="button" class="btn btn-light me-2" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endfor %}
{% endblock %}