{% extends "base.html" %}
{% load static %}
{% load custom_tags_and_filters %}
{% block extrahead %}
    <link rel="stylesheet" type="text/css" href="{% static 'NEMO_bulk_upload/bulk_upload.css' %}" />
{% endblock %}
{% block title %}Bulk upload — {{ upload_type.title }}{% endblock %}
{% block content %}
    <ol class="breadcrumb">
        <li><a href="{% url 'bulk_upload' %}">Bulk upload</a></li>
        <li class="active">{{ upload_type.title }}</li>
    </ol>

    <h1>{{ upload_type.title }}</h1>
    <p>{{ upload_type.description }}</p>

    {% if success_message %}
        <div class="alert alert-success">{{ success_message }}</div>
    {% endif %}
    {% if form_error %}
        <div class="alert alert-danger">{{ form_error }}</div>
    {% endif %}

    <div class="panel panel-default">
        <div class="panel-heading"><strong>Upload and check</strong></div>
        <div class="panel-body">
            <form method="post" enctype="multipart/form-data" id="bulk-upload-form">
                {% csrf_token %}
                <input type="hidden" name="action" id="bulk-upload-action" value="check" />
                <div class="bulk-upload-drop" id="bulk-upload-drop">
                    <p>Drop an .xlsx or .csv file here, or choose a file.</p>
                    <input type="file" name="file" id="bulk-upload-file" accept=".xlsx,.xlsm,.csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv" />
                    {% if filename %}
                        <p class="text-muted" style="margin-top:10px">Last checked: {{ filename }}</p>
                    {% endif %}
                </div>
                <button type="submit" class="btn btn-info" id="btn-check">Check for errors</button>
                <button type="button"
                        class="btn btn-success"
                        id="btn-create"
                        {% if not can_create %}disabled{% endif %}
                        {% if can_create %}data-confirm="{{ confirm_message }}"{% endif %}>
                    Create records
                </button>
                {% if check_result %}
                    <a class="btn btn-default" href="{% url 'bulk_upload_errors' upload_type.slug %}">Download errors file</a>
                {% endif %}
                {% if not has_add_perm %}
                    <p class="text-warning" style="margin-top:10px">You do not have permission to create {{ upload_type.title|lower }} records.</p>
                {% endif %}
            </form>
        </div>
    </div>

    {% if check_result %}
        <div class="panel panel-default">
            <div class="panel-heading">
                <strong>Results</strong>
                — {{ check_result.rows|length }} row{{ check_result.rows|length|pluralize }},
                {{ check_result.error_count }} error{{ check_result.error_count|pluralize }},
                {{ check_result.warning_count }} warning{{ check_result.warning_count|pluralize }}
            </div>
            <div class="panel-body">
                {% if check_result.ok %}
                    <div class="alert alert-success">No errors. You can create these records.</div>
                {% else %}
                    <div class="alert alert-danger">Fix the errors below, then upload the file and try again.</div>
                {% endif %}

                {% if check_result.summary_warnings %}
                    <h4>Warnings</h4>
                    <ul class="bulk-upload-summary text-warning">
                        {% for w in check_result.summary_warnings %}
                            <li>{{ w }}</li>
                        {% endfor %}
                    </ul>
                {% endif %}

                {% if check_result.summary_errors %}
                    <h4>Errors</h4>
                    <ul class="bulk-upload-summary text-danger">
                        {% for e in check_result.summary_errors %}
                            <li>{{ e }}</li>
                        {% endfor %}
                    </ul>
                {% endif %}

                {% if preview_rows %}
                    <div class="table-responsive">
                        <table class="table table-bordered table-condensed bulk-upload-preview">
                            <thead>
                                <tr>
                                    <th>Row</th>
                                    {% for h in preview_headers %}
                                        <th class="{{ h.css }}" {% if h.title %}title="{{ h.title }}"{% endif %}>{{ h.name }}</th>
                                    {% endfor %}
                                    {% if show_pta_column %}
                                        <th class="{{ pta_header_css }}">Resolved PTA</th>
                                    {% endif %}
                                </tr>
                            </thead>
                            <tbody>
                                {% for prow in preview_rows %}
                                    <tr>
                                        <td>{{ prow.row_number }}</td>
                                        {% for cell in prow.cells %}
                                            <td class="{{ cell.css }}" {% if cell.title %}title="{{ cell.title }}"{% endif %}>{{ cell.value }}</td>
                                        {% endfor %}
                                        {% if show_pta_column %}
                                            <td class="{{ prow.pta_css }}" {% if prow.pta_title %}title="{{ prow.pta_title }}"{% endif %}>{{ prow.pta }}</td>
                                        {% endif %}
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% endif %}
            </div>
        </div>
    {% endif %}

    <div class="panel panel-default">
        <div class="panel-heading"><strong>How to fill the sheet</strong></div>
        <div class="panel-body">
            <p class="text-muted">Use names, not ID numbers. Dates without a timezone use <strong>{{ timezone_name }}</strong>.</p>
            <table class="table table-condensed bulk-upload-columns">
                <thead>
                    <tr>
                        <th>Column</th>
                        <th>Required?</th>
                        <th>What to type</th>
                        <th>Example</th>
                    </tr>
                </thead>
                <tbody>
                    {% for col in upload_type.columns %}
                        <tr>
                            <td>{{ col.title }}</td>
                            <td>{% if col.required %}Yes{% else %}Optional{% endif %}</td>
                            <td>{{ col.help_text }}</td>
                            <td><code>{{ col.example }}</code></td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            <p>
                <a class="btn btn-primary" href="{% url 'bulk_upload_template_xlsx' upload_type.slug %}">Download Excel template</a>
                <a class="btn btn-link" href="{% url 'bulk_upload_template_csv' upload_type.slug %}">CSV template</a>
            </p>
        </div>
    </div>

    <script type="text/javascript">
        (function () {
            var drop = document.getElementById("bulk-upload-drop");
            var fileInput = document.getElementById("bulk-upload-file");
            var form = document.getElementById("bulk-upload-form");
            var action = document.getElementById("bulk-upload-action");
            var btnCreate = document.getElementById("btn-create");

            if (drop && fileInput) {
                ["dragenter", "dragover"].forEach(function (evt) {
                    drop.addEventListener(evt, function (e) {
                        e.preventDefault();
                        drop.classList.add("dragover");
                    });
                });
                ["dragleave", "drop"].forEach(function (evt) {
                    drop.addEventListener(evt, function (e) {
                        e.preventDefault();
                        drop.classList.remove("dragover");
                    });
                });
                drop.addEventListener("drop", function (e) {
                    if (e.dataTransfer.files.length) {
                        fileInput.files = e.dataTransfer.files;
                    }
                });
            }

            if (btnCreate && form && action) {
                btnCreate.addEventListener("click", function () {
                    if (btnCreate.disabled) return;
                    var msg = btnCreate.getAttribute("data-confirm") || "Create these records?";
                    if (window.confirm(msg)) {
                        action.value = "create";
                        form.submit();
                    }
                });
            }
        })();
    </script>
{% endblock %}