{% extends 'base.html' %}

{% load static %}

{% block content %}

<main class="content">
	<div class="container-fluid p-0">

		<div class="mb-3">
			<h1 class="h3 d-inline align-middle">Scale Bulk Upload</h1>
			<br><i>Upload an Excel file to bulk import Scale settings</i>
			{% include 'partials/_messages.html' %}
		</div>

		<div class="row">
            <div class="col-12">
                <div class="card mb-3">
                    <div class="card-body">
                        
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <!-- Step 1: Upload Form -->
                            <form action="{% url 'bulk-upload-process' %}" method="post" enctype="multipart/form-data" class="d-flex align-items-center">
                                {% csrf_token %}
                                <div class="me-2">
                                    <input type="file" class="form-control" name="file" accept=".xlsx, .xls" required>
                                </div>
                                <button type="submit" class="btn btn-primary">1. Upload Excel</button>
                            </form>
                            
                            <div class="d-flex gap-2">
                                <!-- Step 2: Check Languages -->
                                <form action="{% url 'bulk-upload-check-languages' %}" method="post">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-warning">2. Missing Languages</button>
                                </form>
                                
                                <!-- Step 3: Sync Languages -->
                                <form action="{% url 'bulk-upload-sync-languages' %}" method="post">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-info">3. Sync Languages</button>
                                </form>
                                
                                <!-- Step 4: Validate Grains -->
                                <form action="{% url 'bulk-upload-validate-grains' %}" method="post">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-secondary">4. Check Grains</button>
                                </form>
                                
                                <!-- Step 5: Sync Mappings -->
                                <form action="{% url 'bulk-upload-sync-mappings' %}" method="post">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-dark">5. Sync Mappings</button>
                                </form>
                                
                                <!-- Step 6: Sync Translations -->
                                <form action="{% url 'bulk-upload-sync-translations' %}" method="post">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-success">6. Migrate Translations</button>
                                </form>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="card mb-4">
            <div class="card-body">
        
                <h4>Upload History</h4>
        
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Batch Name</th>
                            <th>Total Rows</th>
                            <th>Uploaded At</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
        
                    <tbody>
        
                        {% for batch in batches %}
        
                        <tr>
                            <td>{{ batch.id }}</td>
                            <td>{{ batch.batch_name }}</td>
                            <td>{{ batch.total_rows }}</td>
                            <td>{{ batch.uploaded_at }}</td>
        
                            <td>

                                <a href="{% url 'bulk-upload-summary' batch.id %}"
                                   class="btn btn-success btn-sm">
                            
                                    Summary
                            
                                </a>
                            
                                <!-- Delete Button -->
                                <button type="button"
                                        class="btn btn-danger btn-sm"
                                        data-bs-toggle="modal"
                                        data-bs-target="#deleteBatchModal{{ batch.id }}">
                            
                                    Delete
                            
                                </button>
                            
                                <!-- Modal -->
                                <div class="modal fade"
                                     id="deleteBatchModal{{ batch.id }}"
                                     tabindex="-1"
                                     aria-labelledby="deleteBatchModalLabel{{ batch.id }}"
                                     aria-hidden="true">
                            
                                    <div class="modal-dialog modal-dialog-centered">
                            
                                        <div class="modal-content border-0 shadow">
                            
                                            <div class="modal-header bg-danger text-white">
                            
                                                <h5 class="modal-title"
                                                    id="deleteBatchModalLabel{{ batch.id }}">
                            
                                                    Confirm Delete
                            
                                                </h5>
                            
                                                <button type="button"
                                                        class="btn-close btn-close-white"
                                                        data-bs-dismiss="modal"
                                                        aria-label="Close">
                                                </button>
                            
                                            </div>
                            
                                            <div class="modal-body text-center py-4">
                            
                                                <div class="mb-3">
                            
                                                    <i class="align-middle"
                                                       data-feather="alert-triangle"
                                                       style="width:50px;height:50px;color:#dc3545;">
                                                    </i>
                            
                                                </div>
                            
                                                <h4 class="mb-3">
                                                    Are you sure?
                                                </h4>
                            
                                                <p class="text-muted mb-0">
                                                    This upload batch and all related
                                                    records will be permanently deleted.
                                                </p>
                            
                                            </div>
                            
                                            <div class="modal-footer border-0">
                            
                                                <button type="button"
                                                        class="btn btn-light"
                                                        data-bs-dismiss="modal">
                            
                                                    Cancel
                            
                                                </button>
                            
                                                <form action="{% url 'bulk-upload-delete' batch.id %}"
                                                      method="post">
                            
                                                    {% csrf_token %}
                            
                                                    <button type="submit"
                                                            class="btn btn-danger">
                            
                                                        Yes, Delete
                            
                                                    </button>
                            
                                                </form>
                            
                                            </div>
                            
                                        </div>
                            
                                    </div>
                            
                                </div>
                            
                            </td>
        
                        </tr>
        
                        {% endfor %}
        
                    </tbody>
        
                </table>
        
            </div>
        </div>


		<div class="row mt-4">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-body">
                        <div class="dataTables_wrapper">
                            
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <div class="dataTables_length">
                                        <form action="{% url 'bulk-upload-dashboard' %}" method="GET">
                                            <label>Show 
                                                <select name="per_page_count" class="form-select form-select-sm" onchange="this.form.submit()">
                                                    <option value="10" {% if default_per_page_count == "10" %}selected{% endif %}>10</option>
                                                    <option value="25" {% if default_per_page_count == "25" %}selected{% endif %}>25</option>
                                                    <option value="50" {% if default_per_page_count == "50" %}selected{% endif %}>50</option>
                                                </select> entries
                                            </label>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-striped" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Set ID</th>
                                            <th>Order</th>
                                            <th>Grain ID</th>
                                            <th>Grain Available</th>
                                            <th>Language (EN)</th>
                                            <th>Language ID</th>
                                            <th>Language Status</th>
                                            <th>Mapping Status</th>
                                            <th>Migration Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for item in page %}
                                        <tr>
                                            <td>{{ forloop.counter0|add:page.start_index }}</td>
                                            <td>{{ item.set_id|default:"-" }}</td>
                                            <td>{{ item.order_number|default:"-" }}</td>
                                            <td>{{ item.grain_id|default:"-" }}</td>
                                            <td>
                                                {% if item.grain_available %}<span class="badge bg-success">Yes</span>
                                                {% else %}<span class="badge bg-danger">No</span>{% endif %}
                                            </td>
                                            <td>{{ item.language_en|default:"-" }}</td>
                                            <td>{{ item.language_id|default:"-" }}</td>
                                            <td>
                                                {% if item.language_check_status %}<span class="badge bg-success">True</span>
                                                {% else %}<span class="badge bg-danger">False</span>{% endif %}
                                            </td>
                                            <td>
                                                {% if item.mapping_status %}<span class="badge bg-success">True</span>
                                                {% else %}<span class="badge bg-danger">False</span>{% endif %}
                                            </td>
                                            <td>
                                                {% if item.migration_status %}<span class="badge bg-success">True</span>
                                                {% else %}<span class="badge bg-danger">False</span>{% endif %}
                                            </td>
                                        </tr>
                                        {% empty %}
                                        <tr>
                                            <td colspan="10" class="text-center text-muted">No data available. Please upload an Excel file.</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>

                            <div class="row">
                                <div class="col-sm-12 col-md-5">
                                    {% if has_entries %}
                                        <div class="dataTables_info">Showing {{ page.start_index }} to {{ page.end_index }} of {{ page.paginator.count }} entries</div>
                                    {% endif %}
                                </div>
                                <div class="col-sm-12 col-md-7">
                                    <div class="dataTables_paginate paging_simple_numbers">
                                        {% if has_entries %}
                                        <ul class="pagination justify-content-end">
                                            {% if page.has_previous %}
                                            <li class="paginate_button page-item previous">
                                                <a href="?page_number={{page.previous_page_number}}&per_page_count={{default_per_page_count}}" class="page-link">Previous</a>
                                            </li>
                                            {% else %}
                                            <li class="paginate_button page-item previous disabled">
                                                <a href="#" class="page-link">Previous</a>
                                            </li>
                                            {% endif %}

                                            {% for page_number in page_list %}
                                            {% if page_number == page.paginator.ELLIPSIS %}
                                                <li class="paginate_button page-item disabled"><a href="#" class="page-link">{{page_number}}</a></li>
                                            {% else %}
                                                <li class="paginate_button page-item {% if page_number == page.number %}active{% endif %}">
                                                    <a href="?page_number={{page_number}}&per_page_count={{default_per_page_count}}" class="page-link">{{page_number}}</a>
                                                </li>
                                            {% endif %}
                                            {% endfor %}

                                            {% if page.has_next %}
                                            <li class="paginate_button page-item next">
                                                <a href="?page_number={{page.next_page_number}}&per_page_count={{default_per_page_count}}" class="page-link">Next</a>
                                            </li>
                                            {% else %}
                                            <li class="paginate_button page-item next disabled">
                                                <a href="#" class="page-link">Next</a>
                                            </li>
                                            {% endif %}
                                        </ul>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

	</div>
</main>

{% endblock %}