{% extends "markettracker/base.html" %}
{% load i18n %}

{% block page_title %}
    {% trans "Bulk Move Tracked Items" %}
{% endblock %}

{% block details %}

<div class="card mb-3">
    <div class="card-header">
        <strong>{% trans "Bulk Move Tracked Items" %}</strong>
    </div>

    <div class="card-body">
        <p class="text-muted">
            {% blocktrans %}
                Move multiple tracked market items from one tracking
                location to another.
            {% endblocktrans %}
        </p>

        <form method="get">
            <div class="row g-3 align-items-end">

                <div class="col-md-5">
                    <label
                        for="source-location"
                        class="form-label"
                    >
                        {% trans "Source location" %}
                    </label>

                    <select
                        id="source-location"
                        name="source"
                        class="form-select"
                        onchange="this.form.submit()"
                    >
                        <option value="">
                            {% trans "Select source location" %}
                        </option>

                        {% for location in locations %}
                            <option
                                value="{{ location.pk }}"
                                {% if source_location and source_location.pk == location.pk %}
                                    selected
                                {% endif %}
                            >
                                {{ location.display_name }}
                            </option>
                        {% endfor %}
                    </select>
                </div>

                {% if source_location %}
                    <div class="col-md-5">
                        <label
                            for="move-search"
                            class="form-label"
                        >
                            {% trans "Search" %}
                        </label>

                        <input
                            id="move-search"
                            type="text"
                            name="q"
                            value="{{ q }}"
                            class="form-control"
                            placeholder="{% trans 'Item, group, cat:Ship or fit:Name' %}"
                        >
                    </div>

                    <div class="col-md-2">
                        <button
                            type="submit"
                            class="btn btn-primary w-100"
                        >
                            {% trans "Search" %}
                        </button>
                    </div>
                {% endif %}

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


{% if source_location %}

<form method="post" id="move-items-form">
    {% csrf_token %}

    <input
        type="hidden"
        name="source"
        value="{{ source_location.pk }}"
    >

    <input
        type="hidden"
        name="q"
        value="{{ q }}"
    >


    <div class="card mb-3">

        <div class="card-header">
            <div
                class="d-flex justify-content-between align-items-center"
            >

                <div>
                    <strong>
                        {% trans "Tracked Items" %}
                    </strong>

                    <span class="badge bg-secondary ms-1">
                        {{ tracked_items|length }}
                    </span>

                    <span
                        class="badge bg-primary ms-1"
                        id="selected-count"
                    >
                        0 {% trans "selected" %}
                    </span>
                </div>

                <div>
                    <button
                        type="button"
                        class="btn btn-sm btn-outline-primary"
                        id="select-all"
                    >
                        {% trans "Select all" %}
                    </button>

                    <button
                        type="button"
                        class="btn btn-sm btn-outline-secondary"
                        id="select-none"
                    >
                        {% trans "Select none" %}
                    </button>
                </div>

            </div>
        </div>


        <div
            class="table-responsive"
            style="max-height: 600px; overflow-y: auto;"
        >

            <table
                class="table table-striped table-hover align-middle mb-0"
            >

                <thead
                    class="table-dark"
                    style="position: sticky; top: 0; z-index: 2;"
                >
                    <tr>
                        <th style="width: 45px;">
                            <input
                                type="checkbox"
                                class="form-check-input"
                                id="master-checkbox"
                            >
                        </th>

                        <th>
                            {% trans "Item" %}
                        </th>

                        <th>
                            {% trans "Group" %}
                        </th>

                        <th>
                            {% trans "Category" %}
                        </th>

                        <th>
                            {% trans "Desired" %}
                        </th>

                        <th>
                            {% trans "Status" %}
                        </th>
                    </tr>
                </thead>

                <tbody>

                    {% for tracked in tracked_items %}

                        <tr>

                            <td>
                                <input
                                    type="checkbox"
                                    class="form-check-input tracked-checkbox"
                                    name="selected_items"
                                    value="{{ tracked.pk }}"
                                >
                            </td>

                            <td>
                                {{ tracked.item.name }}
                            </td>

                            <td>
                                {{ tracked.item.eve_group.name|default:"—" }}
                            </td>

                            <td>
                                {{ tracked.item.eve_group.eve_category.name|default:"—" }}
                            </td>

                            <td>
                                {{ tracked.desired_quantity }}
                            </td>

                            <td>
                                {% if tracked.last_status == "RED" %}
                                    <span class="badge bg-danger">
                                        {{ tracked.last_status }}
                                    </span>

                                {% elif tracked.last_status == "YELLOW" %}
                                    <span
                                        class="badge bg-warning text-dark"
                                    >
                                        {{ tracked.last_status }}
                                    </span>

                                {% else %}
                                    <span class="badge bg-success">
                                        {{ tracked.last_status }}
                                    </span>
                                {% endif %}
                            </td>

                        </tr>

                    {% empty %}

                        <tr>
                            <td
                                colspan="6"
                                class="text-center text-muted py-4"
                            >
                                {% trans "No tracked items found." %}
                            </td>
                        </tr>

                    {% endfor %}

                </tbody>
            </table>
        </div>
    </div>


    <div class="card">

        <div class="card-header">
            <strong>
                {% trans "Move items" %}
            </strong>
        </div>

        <div class="card-body">

            <div class="row g-3 align-items-end">

                <div class="col-lg-5">
                    <label
                        for="target-location"
                        class="form-label"
                    >
                        {% trans "Destination location" %}
                    </label>

                    <select
                        id="target-location"
                        name="target"
                        class="form-select"
                    >
                        <option value="">
                            {% trans "Select destination location" %}
                        </option>

                        {% for location in destination_locations %}
                            <option value="{{ location.pk }}">
                                {{ location.display_name }}
                            </option>
                        {% endfor %}
                    </select>
                </div>


                <div class="col-lg-2">
                    <button
                        type="submit"
                        name="move_selected"
                        value="1"
                        class="btn btn-warning w-100"
                        id="move-selected-button"
                    >
                        {% trans "Move selected" %}
                    </button>
                </div>


                <div class="col-lg-2">
                    <button
                        type="submit"
                        name="move_all"
                        value="1"
                        class="btn btn-primary w-100"
                        id="move-all-button"
                    >
                        {% if q %}
                            {% trans "Move all filtered" %}
                        {% else %}
                            {% trans "Move all items" %}
                        {% endif %}
                    </button>
                </div>


                <div class="col-lg-3">
                    <button
                        type="submit"
                        name="delete_selected"
                        value="1"
                        class="btn btn-danger w-100"
                        id="delete-selected-button"
                    >
                        {% trans "Delete selected" %}
                    </button>
                </div>

            </div>


            <div class="alert alert-warning mt-3 mb-0">

                <strong>
                    {% trans "Important:" %}
                </strong>

                {% blocktrans %}
                    If an item is already tracked at the destination,
                    that item will be skipped. Existing destination
                    settings will not be overwritten.
                {% endblocktrans %}

            </div>

        </div>
    </div>

</form>


<script>
document.addEventListener("DOMContentLoaded", function () {

    const checkboxes = document.querySelectorAll(
        ".tracked-checkbox"
    );

    const masterCheckbox = document.getElementById(
        "master-checkbox"
    );

    const selectedCount = document.getElementById(
        "selected-count"
    );

    const selectAll = document.getElementById(
        "select-all"
    );

    const selectNone = document.getElementById(
        "select-none"
    );

    const targetLocation = document.getElementById(
        "target-location"
    );

    const moveSelected = document.getElementById(
        "move-selected-button"
    );

    const moveAll = document.getElementById(
        "move-all-button"
    );
    const deleteSelected = document.getElementById(
        "delete-selected-button"
    );




    function updateSelectedCount() {
        const count = Array.from(checkboxes).filter(
            checkbox => checkbox.checked
        ).length;

        selectedCount.textContent =
            count + " {% trans 'selected' %}";

        masterCheckbox.checked =
            checkboxes.length > 0
            && count === checkboxes.length;

        masterCheckbox.indeterminate =
            count > 0
            && count < checkboxes.length;
    }


    function setAll(value) {
        checkboxes.forEach(function (checkbox) {
            checkbox.checked = value;
        });

        updateSelectedCount();
    }


    selectAll.addEventListener(
        "click",
        function () {
            setAll(true);
        }
    );


    selectNone.addEventListener(
        "click",
        function () {
            setAll(false);
        }
    );


    masterCheckbox.addEventListener(
        "change",
        function () {
            setAll(masterCheckbox.checked);
        }
    );


    checkboxes.forEach(function (checkbox) {
        checkbox.addEventListener(
            "change",
            updateSelectedCount
        );
    });


    moveSelected.addEventListener(
        "click",
        function (event) {

            const count = Array.from(checkboxes).filter(
                checkbox => checkbox.checked
            ).length;

            if (!count) {
                event.preventDefault();

                alert(
                    "{% trans 'Select at least one tracked item.' %}"
                );

                return;
            }

            if (!targetLocation.value) {
                event.preventDefault();

                alert(
                    "{% trans 'Select a destination location.' %}"
                );

                return;
            }

            if (!confirm(
                "{% trans 'Move selected tracked items to the destination location?' %}"
            )) {
                event.preventDefault();
            }
        }
    );


    moveAll.addEventListener(
        "click",
        function (event) {

            if (!targetLocation.value) {
                event.preventDefault();

                alert(
                    "{% trans 'Select a destination location.' %}"
                );

                return;
            }

            if (!confirm(
                "{% if q %}{% trans 'Move ALL items matching the current filter?' %}{% else %}{% trans 'Move ALL tracked items from this location?' %}{% endif %}"
            )) {
                event.preventDefault();
            }
        }
    );

    deleteSelected.addEventListener(
        "click",
        function (event) {

            const count = Array.from(checkboxes).filter(
                checkbox => checkbox.checked
            ).length;

            if (!count) {
                event.preventDefault();

                alert(
                    "{% trans 'Select at least one tracked item.' %}"
                );

                return;
            }

            if (!confirm(
                "{% trans 'Delete selected tracked items from this location? This cannot be undone.' %}"
            )) {
                event.preventDefault();
            }
        }
    );

    updateSelectedCount();
});
</script>

{% endif %}

{% endblock %}