{% extends "pos/base.html" %}

{% block title %}Customer Display Order{% endblock %}
{% block heading %}Customer Display Order{% endblock %}

{% block stylesheets %}
<style>
    :root {
        --order-blue: #116dc1;
        --order-text: #14263d;
        --order-muted: #718096;
        --order-border: #dfe8f1;
        --order-soft: #edf7ff;
    }

    .order-page {
        padding-bottom: 1.5rem;
    }

    .order-page form.order-plain-form {
        padding: 0;
        border: 0;
        background: transparent;
    }

    .order-topbar,
    .order-summary,
    .order-toolbar,
    .order-toolbar-group {
        display: flex;
        align-items: center;
    }

    .order-topbar {
        justify-content: space-between;
        gap: .8rem;
        margin-bottom: .75rem;
    }

    .order-subtitle {
        margin: 0;
        color: var(--order-muted);
        font-size: .78rem;
    }

    .order-summary {
        gap: .55rem;
        flex-wrap: wrap;
        margin-bottom: .75rem;
    }

    .order-summary-item {
        min-width: 9rem;
        padding: .62rem .75rem;
        border: 1px solid var(--order-border);
        border-radius: .6rem;
        background: #fff;
        box-shadow: 0 4px 14px rgba(15,48,87,.04);
    }

    .order-summary-number {
        color: var(--order-text);
        font-size: 1rem;
        line-height: 1;
        font-weight: 700;
    }

    .order-summary-label {
        margin-top: .18rem;
        color: var(--order-muted);
        font-size: .61rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .order-panel {
        overflow: hidden;
        border: 1px solid var(--order-border);
        border-radius: .7rem;
        background: #fff;
        box-shadow: 0 5px 18px rgba(15,48,87,.05);
    }

    .order-toolbar {
        justify-content: space-between;
        gap: .7rem;
        padding: .65rem .75rem;
        border-bottom: 1px solid var(--order-border);
        background: #fbfdff;
    }

    .order-toolbar-group {
        flex-wrap: wrap;
        gap: .4rem;
    }

    .order-toolbar .btn {
        font-size: .68rem;
        font-weight: 600;
    }

    .order-save-status {
        min-width: 10rem;
        color: var(--order-muted);
        font-size: .68rem;
        text-align: right;
    }

    .order-warning {
        margin: 0;
        padding: .62rem .75rem;
        border-bottom: 1px solid #f2d59a;
        color: #78520d;
        background: #fff8e8;
        font-size: .7rem;
    }

    .order-table {
        margin: 0;
    }

    .order-table th,
    .order-table td {
        padding: .52rem .58rem !important;
        vertical-align: middle !important;
    }

    .order-table thead th {
        border-bottom: 1px solid var(--order-border) !important;
        background: #f8fafc !important;
        color: #52697f !important;
        font-size: .61rem !important;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .order-table tbody td {
        border-bottom: 1px solid #edf1f5 !important;
        color: #253a50 !important;
        font-size: .71rem !important;
    }

    .order-row {
        background: #fff;
    }

    .order-row:hover {
        background: #f9fcff;
    }

    .order-row.is-dragging {
        opacity: .45;
        background: #eaf5ff;
    }

    .order-row.drag-target {
        box-shadow: inset 0 2px 0 var(--order-blue);
    }

    .drag-handle {
        width: 2.5rem;
        color: #8a9aad;
        text-align: center;
        cursor: grab;
        user-select: none;
    }

    .drag-handle:active {
        cursor: grabbing;
    }

    .position-cell {
        width: 4.5rem;
        color: var(--order-blue);
        font-weight: 700;
        text-align: center;
    }

    .order-business {
        display: flex;
        align-items: center;
        gap: .55rem;
        min-width: 14rem;
    }

    .order-avatar {
        width: 2.1rem;
        height: 2.1rem;
        flex: 0 0 2.1rem;
        display: grid;
        place-items: center;
        border-radius: .52rem;
        color: #fff;
        background: linear-gradient(135deg,#1780db,#0757a7);
        font-weight: 700;
    }

    .order-name {
        color: var(--order-text);
        font-size: .75rem;
        font-weight: 700;
    }

    .order-subline {
        color: var(--order-muted);
        font-size: .63rem;
        overflow-wrap: anywhere;
    }

    .order-badge {
        display: inline-flex;
        padding: .22rem .42rem;
        border-radius: .35rem;
        font-size: .58rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .order-source-online {
        color: #1764a5;
        background: #eef7ff;
    }

    .order-source-web {
        color: #80520b;
        background: #fff3dc;
    }

    .order-source-desktop {
        color: #654ab1;
        background: #f3efff;
    }

    .order-visible {
        color: #167643;
        background: #e9f8ef;
    }

    .order-hidden {
        color: #687386;
        background: #eff2f5;
    }

    /* =====================================================
       LAST LOGIN
    ===================================================== */

    .order-last-login {
        min-width: 8.5rem;

        display: inline-flex;
        align-items: center;
        gap: .3rem;

        padding: .3rem .48rem;
        border-radius: .38rem;

        color: #fff;
        font-size: .63rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .order-last-login-success {
        background: #20a66a;
    }

    .order-last-login-primary {
        background: #5877df;
    }

    .order-last-login-warning {
        background: #f29b38;
    }

    .order-last-login-danger {
        background: #e25248;
    }

    .order-last-login-secondary {
        background: #8a94a2;
    }

    .order-login-age {
        display: block;
        margin-top: .18rem;

        color: var(--order-muted);
        font-size: .58rem;
    }

    .order-context-menu {
        position: fixed;
        z-index: 3000;
        min-width: 13rem;
        display: none;
        overflow: hidden;
        border: 1px solid #d6e0ea;
        border-radius: .55rem;
        background: #fff;
        box-shadow: 0 14px 38px rgba(15,48,87,.18);
    }

    .order-context-title {
        padding: .62rem .7rem;
        border-bottom: 1px solid #edf1f5;
        color: var(--order-text);
        background: #f8fafc;
        font-size: .68rem;
        font-weight: 700;
    }

    .order-context-action {
        width: 100%;
        display: flex;
        align-items: center;
        gap: .55rem;
        padding: .58rem .7rem;
        border: 0;
        border-bottom: 1px solid #f0f3f6;
        color: #405970;
        background: #fff;
        font-size: .69rem;
        text-align: left;
    }

    .order-context-action:last-child {
        border-bottom: 0;
    }

    .order-context-action:hover {
        color: var(--order-blue);
        background: #f4faff;
    }

    .order-empty {
        padding: 3rem 1rem;
        color: var(--order-muted);
        text-align: center;
    }

    @media (max-width: 767.98px) {
        .order-topbar,
        .order-toolbar {
            align-items: flex-start;
            flex-direction: column;
        }

        .order-toolbar-group,
        .order-save-status {
            width: 100%;
        }

        .order-save-status {
            text-align: left;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="order-page">

    <div class="order-topbar">
        <p class="order-subtitle">
            Only visible public customers are shown here.
            Drag rows to reorder them and right-click for exact positioning.
        </p>

        <div class="d-flex flex-wrap" style="gap:.4rem;">
            <a
                href="{% url 'ref:customer_manage' %}"
                class="btn btn-sm btn-light"
            >
                <i class="fas fa-arrow-left mr-1"></i>
                Back to Customers
            </a>

            <a
                href="{% url 'ref:customers_public' %}"
                target="_blank"
                rel="noopener"
                class="btn btn-sm btn-outline-primary"
            >
                <i class="fas fa-external-link-alt mr-1"></i>
                Open Public Page
            </a>
        </div>
    </div>

    <div class="order-summary">
        <div class="order-summary-item">
            <div class="order-summary-number">{{ total_customers }}</div>
            <div class="order-summary-label">Total customers</div>
        </div>

        <div class="order-summary-item">
            <div class="order-summary-number">{{ visible_count }}</div>
            <div class="order-summary-label">Visible on site</div>
        </div>

        <div class="order-summary-item">
            <div class="order-summary-number">{{ hidden_count }}</div>
            <div class="order-summary-label">Hidden from site</div>
        </div>
    </div>

    <div class="order-panel">

        <div class="order-toolbar">
            <div class="order-toolbar-group">
                <button
                    type="button"
                    id="normalize-order"
                    class="btn btn-sm btn-outline-primary"
                >
                    <i class="fas fa-sort-numeric-down mr-1"></i>
                    Normalize Order
                </button>

                <button
                    type="button"
                    id="reload-order"
                    class="btn btn-sm btn-outline-secondary"
                >
                    <i class="fas fa-sync-alt mr-1"></i>
                    Reload
                </button>
            </div>

            <div
                id="order-save-status"
                class="order-save-status"
            >
                Drag a row or right-click for options.
            </div>
        </div>

        {% if needs_normalization %}
            <p class="order-warning">
                <i class="fas fa-exclamation-triangle mr-1"></i>
                Current order contains zero, duplicate or skipped positions.
                Normalize once before managing the final sequence.
            </p>
        {% endif %}

        <form
            class="order-plain-form"
            id="csrf-form"
        >
            {% csrf_token %}
        </form>

        {% if customers %}
            <div class="table-responsive">
                <table class="table order-table">
                    <thead>
                        <tr>
                            <th style="width:2.5rem;"></th>
                            <th style="width:4.5rem;" class="text-center">
                                Position
                            </th>
                            <th>Customer / Business</th>
                            <th>Source</th>
                            <th>Business Type</th>
                            <th>Website Status</th>
                            <th>Last login</th>
                            <th>Current Value</th>
                            <th class="text-right">Edit</th>
                        </tr>
                    </thead>

                    <tbody id="order-table-body">
                        {% for customer in customers %}
                            <tr
                                class="order-row"
                                draggable="true"
                                data-customer-id="{{ customer.pk }}"
                                data-customer-title="{{ customer.display_title }}"
                                data-move-url="{% url 'ref:customer_move_position' customer.pk %}"
                                data-edit-url="{% url 'ref:customer_edit' customer.pk %}"
                            >
                                <td class="drag-handle">
                                    <i class="fas fa-grip-vertical"></i>
                                </td>

                                <td class="position-cell">
                                    {{ forloop.counter }}
                                </td>

                                <td>
                                    <div class="order-business">
                                        <div class="order-avatar">
                                            {{ customer.display_initial }}
                                        </div>

                                        <div>
                                            <div class="order-name">
                                                {{ customer.display_title }}
                                            </div>

                                            {% if customer.address %}
                                                <div class="order-subline">
                                                    {{ customer.address }}
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </td>

                                <td>
                                    {% if customer.source_type == "cloud_online" %}
                                        <span class="order-badge order-source-online">
                                            Online
                                        </span>
                                    {% elif customer.source_type == "web_offline" %}
                                        <span class="order-badge order-source-web">
                                            Web Offline
                                        </span>
                                    {% else %}
                                        <span class="order-badge order-source-desktop">
                                            Desktop Offline
                                        </span>
                                    {% endif %}
                                </td>

                                <td>
                                    {% if customer.last_login_local %}

                                        <span
                                            class="
                                                order-last-login
                                                order-last-login-{{ customer.last_login_badge_class }}
                                            "
                                        >
                                            <i class="fas fa-clock"></i>

                                            {{ customer.last_login_local|date:"d M Y H:i" }}
                                        </span>

                                        <span class="order-login-age">
                                            {{ customer.last_login_age_label }}
                                        </span>

                                    {% else %}

                                        <span
                                            class="
                                                order-last-login
                                                order-last-login-secondary
                                            "
                                        >
                                            <i class="fas fa-minus-circle"></i>

                                            No Login
                                        </span>

                                    {% endif %}
                                </td>

                                <td>
                                    {% if customer.business_type %}
                                        {{ customer.business_type }}
                                    {% else %}
                                        <span class="text-muted">Not set</span>
                                    {% endif %}
                                </td>

                                <td>
                                    {% if customer.show_on_site %}
                                        <span class="order-badge order-visible">
                                            Visible
                                        </span>
                                    {% else %}
                                        <span class="order-badge order-hidden">
                                            Hidden
                                        </span>
                                    {% endif %}
                                </td>

                                <td>
                                    {{ customer.display_order }}
                                </td>

                                <td class="text-right">
                                    <a
                                        href="{% url 'ref:customer_edit' customer.pk %}"
                                        class="btn btn-sm btn-outline-primary"
                                    >
                                        <i class="fas fa-edit"></i>
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="order-empty">
                <i class="fas fa-sort-numeric-down fa-2x mb-3"></i>
                <div>No customers are available for ordering.</div>
            </div>
        {% endif %}

    </div>

</div>

<div
    id="order-context-menu"
    class="order-context-menu"
>
    <div
        id="order-context-title"
        class="order-context-title"
    >
        Customer
    </div>

    <button
        type="button"
        class="order-context-action"
        data-context-action="top"
    >
        <i class="fas fa-angle-double-up"></i>
        Move to Top
    </button>

    <button
        type="button"
        class="order-context-action"
        data-context-action="position"
    >
        <i class="fas fa-list-ol"></i>
        Move to Position...
    </button>

    <button
        type="button"
        class="order-context-action"
        data-context-action="bottom"
    >
        <i class="fas fa-angle-double-down"></i>
        Move to Bottom
    </button>

    <button
        type="button"
        class="order-context-action"
        data-context-action="edit"
    >
        <i class="fas fa-edit"></i>
        Edit Customer
    </button>
</div>
{% endblock %}

{% block javascripts %}
<script>
    $(function () {
        "use strict";

        const tbody = document.getElementById(
            "order-table-body"
        );

        const contextMenu = document.getElementById(
            "order-context-menu"
        );

        const contextTitle = document.getElementById(
            "order-context-title"
        );

        const statusElement = document.getElementById(
            "order-save-status"
        );

        const csrfToken = document.querySelector(
            "#csrf-form input[name='csrfmiddlewaretoken']"
        ).value;

        const reorderUrl = (
            "{% url 'ref:customer_order_reorder' %}"
        );

        const normalizeUrl = (
            "{% url 'ref:customer_order_normalize' %}"
        );

        let draggedRow = null;
        let contextRow = null;
        let isSaving = false;


        function setStatus(message, state) {
            statusElement.textContent = message;

            statusElement.classList.remove(
                "text-success",
                "text-danger",
                "text-muted"
            );

            if (state === "success") {
                statusElement.classList.add(
                    "text-success"
                );
            } else if (state === "error") {
                statusElement.classList.add(
                    "text-danger"
                );
            } else {
                statusElement.classList.add(
                    "text-muted"
                );
            }
        }


        function updatePositionLabels() {
            if (!tbody) {
                return;
            }

            const rows = tbody.querySelectorAll(
                ".order-row"
            );

            rows.forEach(function (row, index) {
                const cell = row.querySelector(
                    ".position-cell"
                );

                if (cell) {
                    cell.textContent = index + 1;
                }
            });
        }


        function orderedIds() {
            if (!tbody) {
                return [];
            }

            return Array.from(
                tbody.querySelectorAll(
                    ".order-row"
                )
            ).map(function (row) {
                return Number(
                    row.dataset.customerId
                );
            });
        }


        function hideContextMenu() {
            contextMenu.style.display = "none";
            contextRow = null;
        }


        function placeContextMenu(event) {
            const menuWidth = 220;
            const menuHeight = 210;

            let left = event.clientX;
            let top = event.clientY;

            if (
                left + menuWidth
                > window.innerWidth
            ) {
                left = window.innerWidth
                    - menuWidth
                    - 8;
            }

            if (
                top + menuHeight
                > window.innerHeight
            ) {
                top = window.innerHeight
                    - menuHeight
                    - 8;
            }

            contextMenu.style.left = (
                Math.max(8, left) + "px"
            );

            contextMenu.style.top = (
                Math.max(8, top) + "px"
            );

            contextMenu.style.display = "block";
        }


        async function saveCompleteOrder() {
            if (isSaving) {
                return;
            }

            isSaving = true;
            setStatus("Saving display order...", "muted");

            try {
                const response = await fetch(
                    reorderUrl,
                    {
                        method: "POST",
                        headers: {
                            "Content-Type": (
                                "application/json"
                            ),
                            "X-CSRFToken": csrfToken
                        },
                        body: JSON.stringify({
                            ordered_ids: orderedIds()
                        })
                    }
                );

                const data = await response.json();

                if (!response.ok || !data.ok) {
                    throw new Error(
                        data.message
                        || "Unable to save display order."
                    );
                }

                updatePositionLabels();

                setStatus(
                    data.message || "Display order saved.",
                    "success"
                );

            } catch (error) {
                setStatus(
                    error.message,
                    "error"
                );

                Swal.fire({
                    icon: "error",
                    title: "Order not saved",
                    text: error.message,
                    confirmButtonColor: "#116dc1"
                }).then(function () {
                    window.location.reload();
                });

            } finally {
                isSaving = false;
            }
        }


        async function moveCustomer(
            row,
            position
        ) {
            if (!row || isSaving) {
                return;
            }

            isSaving = true;
            setStatus("Moving customer...", "muted");

            try {
                const response = await fetch(
                    row.dataset.moveUrl,
                    {
                        method: "POST",
                        headers: {
                            "Content-Type": (
                                "application/json"
                            ),
                            "X-CSRFToken": csrfToken
                        },
                        body: JSON.stringify({
                            position: position
                        })
                    }
                );

                const data = await response.json();

                if (!response.ok || !data.ok) {
                    throw new Error(
                        data.message
                        || "Unable to move customer."
                    );
                }

                setStatus(
                    data.message,
                    "success"
                );

                window.location.reload();

            } catch (error) {
                setStatus(
                    error.message,
                    "error"
                );

                Swal.fire({
                    icon: "error",
                    title: "Customer not moved",
                    text: error.message,
                    confirmButtonColor: "#116dc1"
                });

            } finally {
                isSaving = false;
            }
        }


        if (tbody) {
            tbody.addEventListener(
                "dragstart",
                function (event) {
                    const row = event.target.closest(
                        ".order-row"
                    );

                    if (!row || isSaving) {
                        event.preventDefault();
                        return;
                    }

                    draggedRow = row;
                    row.classList.add(
                        "is-dragging"
                    );

                    event.dataTransfer.effectAllowed = (
                        "move"
                    );

                    event.dataTransfer.setData(
                        "text/plain",
                        row.dataset.customerId
                    );
                }
            );


            tbody.addEventListener(
                "dragover",
                function (event) {
                    event.preventDefault();

                    if (!draggedRow) {
                        return;
                    }

                    const targetRow = event.target.closest(
                        ".order-row"
                    );

                    if (
                        !targetRow
                        || targetRow === draggedRow
                    ) {
                        return;
                    }

                    const rectangle = (
                        targetRow.getBoundingClientRect()
                    );

                    const insertAfter = (
                        event.clientY
                        > rectangle.top
                        + rectangle.height / 2
                    );

                    if (insertAfter) {
                        targetRow.after(
                            draggedRow
                        );
                    } else {
                        targetRow.before(
                            draggedRow
                        );
                    }

                    updatePositionLabels();
                }
            );


            tbody.addEventListener(
                "dragend",
                function () {
                    if (!draggedRow) {
                        return;
                    }

                    draggedRow.classList.remove(
                        "is-dragging"
                    );

                    draggedRow = null;
                    saveCompleteOrder();
                }
            );


            tbody.addEventListener(
                "contextmenu",
                function (event) {
                    const row = event.target.closest(
                        ".order-row"
                    );

                    if (!row) {
                        return;
                    }

                    event.preventDefault();

                    contextRow = row;

                    contextTitle.textContent = (
                        row.dataset.customerTitle
                        || "Customer"
                    );

                    placeContextMenu(event);
                }
            );
        }


        contextMenu.addEventListener(
            "click",
            function (event) {
                const button = event.target.closest(
                    "[data-context-action]"
                );

                if (!button || !contextRow) {
                    return;
                }

                const action = (
                    button.dataset.contextAction
                );

                const selectedRow = contextRow;
                const totalRows = tbody
                    ? tbody.querySelectorAll(
                        ".order-row"
                    ).length
                    : 0;

                hideContextMenu();

                if (action === "top") {
                    moveCustomer(
                        selectedRow,
                        1
                    );

                } else if (action === "bottom") {
                    moveCustomer(
                        selectedRow,
                        totalRows
                    );

                } else if (action === "edit") {
                    window.location.href = (
                        selectedRow.dataset.editUrl
                    );

                } else if (action === "position") {
                    const currentPosition = (
                        Array.from(
                            tbody.querySelectorAll(
                                ".order-row"
                            )
                        ).indexOf(selectedRow)
                        + 1
                    );

                    Swal.fire({
                        title: "Move Customer",
                        text: (
                            selectedRow
                            .dataset
                            .customerTitle
                        ),
                        input: "number",
                        inputValue: currentPosition,
                        inputAttributes: {
                            min: 1,
                            max: totalRows,
                            step: 1
                        },
                        showCancelButton: true,
                        confirmButtonColor: "#116dc1",
                        confirmButtonText: "Move",
                        inputValidator: function (value) {
                            const position = Number(
                                value
                            );

                            if (
                                !Number.isInteger(position)
                                || position < 1
                                || position > totalRows
                            ) {
                                return (
                                    "Enter a whole number "
                                    + "between 1 and "
                                    + totalRows
                                    + "."
                                );
                            }
                        }
                    }).then(function (result) {
                        if (result.isConfirmed) {
                            moveCustomer(
                                selectedRow,
                                Number(result.value)
                            );
                        }
                    });
                }
            }
        );


        document.addEventListener(
            "click",
            function (event) {
                if (
                    !contextMenu.contains(
                        event.target
                    )
                ) {
                    hideContextMenu();
                }
            }
        );


        window.addEventListener(
            "resize",
            hideContextMenu
        );

        window.addEventListener(
            "scroll",
            hideContextMenu,
            true
        );


        $("#normalize-order").on(
            "click",
            function () {
                Swal.fire({
                    icon: "question",
                    title: "Normalize Customer Order?",
                    text: (
                        "Current records will receive "
                        + "continuous positions from 1 to "
                        + "{{ total_customers }}."
                    ),
                    showCancelButton: true,
                    confirmButtonColor: "#116dc1",
                    confirmButtonText: "Normalize"
                }).then(async function (result) {
                    if (!result.isConfirmed) {
                        return;
                    }

                    setStatus(
                        "Normalizing order...",
                        "muted"
                    );

                    try {
                        const response = await fetch(
                            normalizeUrl,
                            {
                                method: "POST",
                                headers: {
                                    "X-CSRFToken": csrfToken
                                }
                            }
                        );

                        const data = (
                            await response.json()
                        );

                        if (!response.ok || !data.ok) {
                            throw new Error(
                                data.message
                                || "Unable to normalize order."
                            );
                        }

                        setStatus(
                            data.message,
                            "success"
                        );

                        window.location.reload();

                    } catch (error) {
                        setStatus(
                            error.message,
                            "error"
                        );

                        Swal.fire({
                            icon: "error",
                            title: "Normalization failed",
                            text: error.message,
                            confirmButtonColor: "#116dc1"
                        });
                    }
                });
            }
        );


        $("#reload-order").on(
            "click",
            function () {
                window.location.reload();
            }
        );
    });
</script>
{% endblock %}