{% extends "base.html" %}
{% load crispy_forms_tags %}
{% block title %}Add lots for {{ tos.name }}{% endblock %}
{% load static %}

{% block content %}
  {% include 'auction_ribbon.html' %}
  <br>
  <p>{% if is_admin %}You are adding/editing lots for <b><span class="text-warning">{{ tos.name }}</b></span>, bidder number <b>{{ tos.bidder_number}}</b>
  {% else %}
    Use this page to quickly add lots to {{ auction }}.  Enter one lot per row.  You can edit these lots, add images, or add lots one at a time from your <a href="/selling">selling dashboard</a>.
  {% endif %}
  </p>

  {{ formset.management_form }}
  <form id="form-container" method="POST" action="{% url 'bulk_add_lots' slug=auction.slug bidder_number=tos.bidder_number%}">
    {% crispy formset helper %}
    <button class='btn btn-info' id="add-form" type="button">Add row</button>

    {% comment %} "Save and print labels" opens a browser print view; the mobile app prints natively over Bluetooth, so hide it there (the plain "Save lots" button remains). {% endcomment %}
    {% if not request.is_mobile_app %}<input type="submit" class='btn bg-info float-right submit-button ms-2 ml-2 d-none d-md-inline' name='save_print' id='save_print' value="Save and print labels">{% endif %}
    <input type="submit" class='btn bg-success float-right submit-button' name='save_submit' id='save_submit' value="Save lots for {% if is_admin%}{{ tos.name }}{% else %}{{ auction }}{% endif %}">
  </form>
{% endblock %}

{% block extra_js %}
<script>
var form_id = '#form-container';
{% include 'leave_page_warning.js' %}
$('#add-form').click(function() {
  cloneMore('.lot-form:last', 'form');
});
function cloneMore(selector, type) {
    var newElement = $(selector).clone(true);
    var total = $('#id_' + type + '-TOTAL_FORMS').val();
    newElement.find(':input').each(function() {
        var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
        var id = 'id_' + name;
        $(this).attr({'name': name, 'id': id}).removeAttr('checked'); // keep last row's values
        //$(this).attr({'name': name, 'id': id}).val('').removeAttr('checked'); // blank rows

        // Check if the ID contains "custom_lot_number" and clear the value if true
        if (id.includes("custom_lot_number")) {
            $(this).val('');
        } else {
            $(this).removeAttr('checked'); // keep last row's values
        }
    });
    newElement.find('label').each(function() {
        var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
        $(this).attr('for', newFor);
    });
    total++;
    $('#id_' + type + '-TOTAL_FORMS').val(total);
    $(selector).after(newElement);
}
$(".submit-button").click(function(event){
    if (this.id == "save_submit") {
        $(form_id).attr("action", "?type=submit");
        $(form_id).submit();
        return true
    } else if (this.id == "save_print") {
        $(form_id).attr("action", "?type=print");
        $(form_id).submit();
        return true
    }
});
{% if auction.auto_add_images %}
$(document).ready(function() {
    $('.auto-image-check').on('blur', function() {
        var $this = $(this);
        var value = $this.val();
        $.ajax({
            url: "{% url 'auto_image_available' slug=auction.slug %}",
            type: 'POST',
            data: {
                'name': value,
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(response) {
                    var iconHtml = `<span class="input-group-text" data-bs-toggle="tooltip"
                    data-bs-placement="bottom" title="An image can automatically be added to this lot">
                      <i class="bi bi-file-image"></i>
                    </span>`;
                    if (!response) {
                        // Remove the icon
                        $this.siblings('.input-group-text').remove();
                    } else {
                        // Ensure the input isn't already wrapped and icon isn't duplicated
                        if (!$this.siblings('.input-group-text').length) {
                            if (!$this.parent().hasClass('input-group')) {
                                $this.wrap('<div class="input-group"></div>');
                            }
                            $this.after(iconHtml);
                        }
                        $('[data-bs-toggle="tooltip"]').tooltip();
                    }
            },
            error: function() {
                console.error('Unable to check for an image for this lot');
            }
        });
    });
});
{% endif %}
</script>
{% endblock %}