{% extends "base.html" %}

{% block title %}{{ _('bank.import_title') }}{% endblock %}

{% block content %}
<div class="container">
    <div class="page-header">
        <h1><i class="fas fa-file-import"></i> {{ _('bank.import_title') }}</h1>
        <p class="text-muted">{{ _('bank.import_subtitle') }}</p>
    </div>

    <div class="card">
        <div class="card-header">
            <h3>{{ _('bank.upload_file') }}</h3>
        </div>
        <div class="card-body">
            <!-- Upload Form -->
            <form method="POST" enctype="multipart/form-data" id="uploadForm">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div class="form-group">
                    <label for="file">{{ _('bank.select_file') }}</label>
                    <div class="custom-file-upload" id="dropZone">
                        <input type="file" 
                               id="file" 
                               name="file" 
                               accept=".pdf,.csv"
                               required>
                        <div class="upload-placeholder">
                            <i class="fas fa-cloud-upload-alt fa-3x"></i>
                            <p>{{ _('bank.drag_drop') }}</p>
                            <p class="text-muted">{{ _('bank.or_click') }}</p>
                            <button type="button" class="btn btn-secondary" onclick="document.getElementById('file').click()">
                                {{ _('bank.browse_files') }}
                            </button>
                        </div>
                        <div class="file-selected" style="display: none;">
                            <i class="fas fa-file fa-2x"></i>
                            <p id="fileName"></p>
                            <button type="button" class="btn btn-sm btn-danger" onclick="clearFile()">
                                <i class="fas fa-times"></i> {{ _('bank.remove') }}
                            </button>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="alert alert-info">
                        <strong><i class="fas fa-info-circle"></i> {{ _('bank.supported_formats') }}:</strong>
                        <ul>
                            <li>{{ _('bank.format_pdf') }}</li>
                            <li>{{ _('bank.format_csv') }}</li>
                        </ul>
                        <p class="mb-0"><small>{{ _('bank.format_hint') }}</small></p>
                    </div>
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle"></i> {{ _('bank.not_all_banks_supported') }}
                    </div>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-primary btn-block">
                        <i class="fas fa-upload"></i> {{ _('bank.upload_parse') }}
                    </button>
                </div>
            </form>

            <!-- Loading State -->
            <div id="loadingState" style="display: none;">
                <div class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="sr-only">{{ _('bank.processing') }}</span>
                    </div>
                    <p class="mt-3">{{ _('bank.processing') }}...</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Help Section -->
    <div class="card mt-4">
        <div class="card-header">
            <h4><i class="fas fa-question-circle"></i> {{ _('bank.how_it_works') }}</h4>
        </div>
        <div class="card-body">
            <ol>
                <li>{{ _('bank.step_1') }}</li>
                <li>{{ _('bank.step_2') }}</li>
                <li>{{ _('bank.step_3') }}</li>
                <li>{{ _('bank.step_4') }}</li>
                <li>{{ _('bank.step_5') }}</li>
            </ol>
        </div>
    </div>


</div>

<style>
.custom-file-upload {
    position: relative;
    border: 2px dashed #007bff;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
}

.custom-file-upload:hover {
    border-color: #0056b3;
    background: #e9ecef;
}

.custom-file-upload.drag-over {
    border-color: #28a745;
    background: #d4edda;
}

.custom-file-upload input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-placeholder i {
    color: #007bff;
    margin-bottom: 15px;
}

.file-selected i {
    color: #28a745;
    margin-bottom: 15px;
}

@media (max-width: 768px) {
    .custom-file-upload {
        padding: 30px 15px;
    }
}
</style>

<script>
// File selection
document.getElementById('file').addEventListener('change', function(e) {
    if (this.files.length > 0) {
        document.querySelector('.upload-placeholder').style.display = 'none';
        document.querySelector('.file-selected').style.display = 'block';
        document.getElementById('fileName').textContent = this.files[0].name;
    }
});

// Clear file
function clearFile() {
    document.getElementById('file').value = '';
    document.querySelector('.upload-placeholder').style.display = 'block';
    document.querySelector('.file-selected').style.display = 'none';
}

// Drag and drop
const dropZone = document.getElementById('dropZone');

['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropZone.addEventListener(eventName, preventDefaults, false);
});

function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
}

['dragenter', 'dragover'].forEach(eventName => {
    dropZone.addEventListener(eventName, () => {
        dropZone.classList.add('drag-over');
    });
});

['dragleave', 'drop'].forEach(eventName => {
    dropZone.addEventListener(eventName, () => {
        dropZone.classList.remove('drag-over');
    });
});

dropZone.addEventListener('drop', function(e) {
    const files = e.dataTransfer.files;
    if (files.length > 0) {
        document.getElementById('file').files = files;
        document.querySelector('.upload-placeholder').style.display = 'none';
        document.querySelector('.file-selected').style.display = 'block';
        document.getElementById('fileName').textContent = files[0].name;
    }
});

// Show loading on submit
document.getElementById('uploadForm').addEventListener('submit', function() {
    document.querySelector('.card-body').style.display = 'none';
    document.getElementById('loadingState').style.display = 'block';
});
</script>
{% endblock %}