{% extends "base.html" %}

{% block title %}Import / Export - IT Asset Tracker{% endblock %}

{% block content %}
<div class="page-header page-header-centered">
    <h1>Import / Export</h1>
</div>

<div class="content-narrow">
    <div class="section-header">Export Backup</div>
    <div class="import-section">
        <p class="subhead mb-2">
            Download a complete backup of all devices, people, and transactions (including signatures) as a JSON file.
        </p>
        <a href="{{ url_for('export_data') }}" class="btn btn-primary">Download JSON Backup</a>
    </div>

    <div class="section-header">Restore from Backup</div>
    <div class="import-section">
        <p class="subhead mb-2">
            Restore the database from a previously exported JSON backup file.
        </p>
        <div class="import-warning-box mb-2">
            <p class="warning-text mb-0">
                <strong>Warning:</strong> This will replace ALL existing data in the database.
            </p>
        </div>
        <form method="POST" action="{{ url_for('import_json') }}" enctype="multipart/form-data">
            <div class="form-group">
                <label for="json-file">Select JSON Backup File</label>
                <input type="file" id="json-file" name="file" accept=".json" required>
            </div>
            <div class="action-buttons">
                <button type="submit" class="btn btn-primary" onclick="return confirm('This will replace ALL existing data. Are you sure?');">Restore Backup</button>
            </div>
        </form>
    </div>

    <div class="section-header">Import from Excel</div>
    <div class="import-section">
        <p class="subhead mb-2">
            Import device and checkout data from an Excel file (.xlsx or .xls).
        </p>

        <div class="import-info-box mb-2">
            <h3 class="headline mb-1">Expected Column Headers</h3>
            <p class="footnote text-muted mb-2">
                The import will attempt to match these columns (case-insensitive):
            </p>
            <ul class="column-guide">
                <li><strong>Name</strong> - Person's name (required)</li>
                <li><strong>Department</strong> - Maps to location</li>
                <li><strong>Phone</strong> - Person's phone</li>
                <li><strong>Checkout Date</strong> - Date device was checked out</li>
                <li><strong>Return Date</strong> - Date device was returned (if applicable)</li>
                <li><strong>Brand</strong> - Device make (required)</li>
                <li><strong>Model</strong> - Device model (required)</li>
                <li><strong>Serial #</strong> - Serial number (required)</li>
                <li><strong>Asset #</strong> - Asset tag (required)</li>
            </ul>
        </div>

        <form method="POST" enctype="multipart/form-data">
            <div class="form-group">
                <label for="file">Select Excel File</label>
                <input type="file" id="file" name="file" accept=".xlsx,.xls" required>
            </div>

            <div class="action-buttons">
                <button type="submit" class="btn btn-primary btn-lg">Upload & Preview</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}