
<!--<!DOCTYPE html>
<html>
<head>
  <title>Excel Import</title>
</head>-->
<!--<body>-->
<!--  <h2>Upload Excel File</h2>
  <form action="/api/import" method="post" enctype="multipart/form-data">
    <input type="file" name="excel" required />
    <button type="submit">Upload</button>
  </form>
  {% if message %}
    <p>{{ message }}</p>
  {% endif %}-->
<!--</body>
</html>-->

{% include './admin_header.html' %} 

<link href="../new_css.css" rel="stylesheet">

<style>
    .upload-box {
        background-color: #e9f7ef; /* soft green */
        border: 2px dashed #28a745;
        color: #155724;
        transition: all 0.3s ease-in-out;
    }
    .upload-box:hover {
        background-color: #d4edda;
        border-color: #218838;
    }
</style>


<div class="app-main__outer">
    <div class="app-main__inner" id="product_info">
        <div class="tab-content">
            <div class="tab-pane tabs-animation fade show active" id="tab-content-0" role="tabpanel">
                <div class="row">
                    <div class="col-md-12">
                        <div class="main-card mb-3 card">
                            <div class="card-body" id="product_data">
                                {% if User_language=="ENGLISH" %}                                
                                <h5 class="card-title">Import Excel File</h5>
                                {% endif %}
                                {% if User_language=="GUJARATI" %}                                
                                <h5 class="card-title">Import એક્સેલ ફાઇલ</h5>
                                {% endif %}

                                <div class="row" style="margin-left: 0px">

                                    <div class="upload-box position-relative col-md-6">
                                        {% if User_language=="ENGLISH" %}                                
                                        <label for="exampleSelect" class="">Upload Excel File </label>
                                        {% endif %}
                                        {% if User_language=="GUJARATI" %}                                
                                        <label for="exampleSelect" class="">Excel ફાઇલ અપલોડ કરો </label>
                                        {% endif %}
                                        <!--<h2>Upload Excel File</h2>-->
                                        <!--                                        <form  class="form-group" enctype="multipart/form-data">
                                                                                    <input class="form-group" type="file" name="excel" required />
                                                                                    <button class="form-group" type="submit">Upload</button>
                                                                                </form>
                                                                                <div id="uploadStatus" class="mt-3"></div>-->

                                        <form id="excelForm" class="form-group" enctype="multipart/form-data">
                                            <input class="form-control mb-2" type="file" name="excel" required />
                                            <button class="btn btn-primary" type="submit">Upload</button>
                                        </form>

                                        <div id="uploadStatus" class="mt-3"></div>

                                        <!--                                        {% if message %}
                                                                                <p>{{ message }}</p>
                                                                                {% endif %}-->
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ✅ Place at bottom of body -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('excelForm');

            form.addEventListener('submit', async function (e) {
                e.preventDefault();

                const formData = new FormData(form);
                const statusDiv = document.getElementById('uploadStatus');
                statusDiv.innerHTML = '<div class="text-info">⏳ Uploading...</div>';

                try {
                    const response = await fetch('/api/import', {
                        method: 'POST',
                        body: formData
                    });

                    const result = await response.json();

                    if (response.ok) {
                        statusDiv.innerHTML = `<div class="alert alert-success">${result.message}</div>`;
                    } else {
                        statusDiv.innerHTML = `<div class="alert alert-danger">${result.message}</div>`;
                    }
                } catch (error) {
                    statusDiv.innerHTML = `<div class="alert alert-danger">❌ Error: ${error.message}</div>`;
                }
            });
        });
    </script>




    {% include './admin_footer.html' %}