{% extends "base.html" %}
{% block title %}Import Warehouse Locations from CSV{% endblock %}
{% block content %}
<div class="scan-container">
    <!-- Import Locations from CSV Card (first, fixed position) -->
    <div class="card scan-form-card" style="margin-bottom: 24px;">
        <h3>Import Locations from CSV</h3>
        <form method="POST" enctype="multipart/form-data" class="form-centered" id="csv-upload-form">
            <label for="csv_file">Choose CSV file:</label>
            {% if not locations %}
                <input type="file" name="csv_file" accept=".csv" required><br>
                <button type="submit" class="btn">Upload & Preview</button>
            {% else %}
                <label style="font-weight: bold;">Selected file: {{ session['csv_filename'] if session['csv_filename'] else 'Unknown' }}</label><br>
                <button type="button" class="btn" onclick="showPopupAndSubmit()">Create Locations</button>
            {% endif %}
            <!-- CSV File Format Guidance (moved here) -->
            <div style="margin-top: 8px;">
                <h4 style="margin-bottom: 4px;">CSV File Format</h4>
                <label style="margin-bottom: 8px; display: block;">Fisierul CSV trebuie sa aiba urmatorul format:</label>
                <table class="scan-table" style="width: 100%;">
                    <thead>
                        <tr>
                            <th>Location Code</th>
                            <th>Size</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>EX123</td>
                            <td>100</td>
                            <td>Zona depozitare A</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </form>
        <!-- Popup Modal -->
        <div id="popup-modal" class="popup" style="display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:var(--app-overlay-bg, rgba(30,41,59,0.85)); z-index:9999; align-items:center; justify-content:center;">
            <div class="popup-content" style="margin:auto; padding:32px; border-radius:8px; box-shadow:0 2px 8px #333; min-width:320px; max-width:400px; text-align:center;">
                <h3 style="color:var(--app-label-text);">Performing the creation of the warehouse locations</h3>
            </div>
        </div>
        <script>
        function showPopupAndSubmit() {
            document.getElementById('popup-modal').style.display = 'flex';
            // Submit the form after showing popup
            setTimeout(function() {
                var form = document.getElementById('csv-upload-form');
                var input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'create_locations';
                input.value = '1';
                form.appendChild(input);
                form.submit();
            }, 500);
        }
        window.onload = function() {
            if (window.location.hash === '#created') {
                document.getElementById('popup-modal').style.display = 'none';
            }
        }
        </script>
    </div>
    <!-- Preview Table Card (expandable height, scrollable) -->
    <div class="card scan-table-card" style="margin-bottom: 24px; max-height: 480px; overflow-y: auto;">
        <h3>Preview Table</h3>
        <table class="scan-table">
            <thead>
                <tr>
                    <th>Location Code</th>
                    <th>Size</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                {% if locations %}
                    {% for loc in locations %}
                    <tr>
                        <td>{{ loc[0] }}</td>
                        <td>{{ loc[1] }}</td>
                        <td>{{ loc[2] }}</td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr><td colspan="3" style="text-align:center;">No CSV file uploaded yet.</td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>
    {% if report %}
    <div class="card" style="margin-bottom: 24px;">
        <h4>Import Report</h4>
        <p>{{ report }}</p>
    </div>
    {% endif %}
</div>
{% endblock %}