{% extends "base.html" %}
{% block title %}Create Warehouse Locations{% endblock %}
{% block content %}
<div class="scan-container">
    <!-- Add Warehouse Location Card -->
    <div class="card scan-form-card">
        <h3>Add Warehouse Location</h3>
        {% if message %}
        <div class="form-message">{{ message }}</div>
        {% endif %}
        <form method="POST" class="form-centered">
            <label>Location Code:</label>
            <input type="text" name="location_code" maxlength="12" required><br>
            <label>Size:</label>
            <input type="number" name="size"><br>
            <label>Description:</label>
            <input type="text" name="description" maxlength="250"><br>
            <button type="submit" class="btn">Add Location</button>
        </form>
        <!-- Import from CSV content moved here -->
        <div style="margin-top: 24px;">
            <h3 style="font-size: 1.1em;">Import Locations from CSV</h3>
            <div style="display: flex; flex-direction: row; gap: 16px; align-items: center;">
                <span style="font-size: 0.95em;">Bulk import warehouse locations using a CSV file.</span>
                <a href="{{ url_for('warehouse.import_locations_csv') }}" class="btn" style="padding: 4px 12px; font-size: 0.95em;">Go to Import Page</a>
            </div>
        </div>
        <!-- Delete Location Area -->
        {% if session['role'] in ['administrator', 'management'] %}
        <div style="margin-top: 32px; padding: 12px; border-top: 1px solid #eee;">
            <label style="font-weight:bold;">Delete location from table</label>
            <div style="font-size:0.95em; margin-bottom:8px;">To delete a location, enter the ID of the location and press delete.<br>To delete 2 or multiple locations, enter the IDs separated by "," and then press delete.</div>
            <form method="POST" style="display:flex; gap:8px; align-items:center;" onsubmit="return confirmDeleteLocations();">
                <input type="text" name="delete_ids" placeholder="e.g. 5,7,12" style="width:160px;">
                <button type="submit" name="delete_locations" value="1" class="btn" style="padding:4px 16px;">Delete Locations</button>
            </form>
            <script>
            function confirmDeleteLocations() {
                return confirm('Do you really want to delete the selected locations?');
            }
            </script>
        </div>
        {% endif %}
    </div>
    <!-- Locations Table Card -->
    <div class="card scan-table-card">
        <h3>Warehouse Locations</h3>
        <table class="scan-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Location Code</th>
                    <th>Size</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                {% for loc in locations %}
                <tr>
                    <td>{{ loc[0] }}</td>
                    <td>{{ loc[1] }}</td>
                    <td>{{ loc[2] }}</td>
                    <td>{{ loc[3] }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}