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

{% block title %}Our Customers Management{% endblock %}
{% block heading %}Our Customers{% endblock %}

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

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

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

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

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

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

    .oc-source-tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .55rem;
        margin-bottom: .75rem;
    }

    .oc-source-tab {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        padding: .68rem .8rem;
        border: 1px solid var(--oc-border);
        border-radius: .65rem;
        background: #fff;
        color: #536a80;
        font-size: .72rem;
        font-weight: 700;
        box-shadow: 0 4px 14px rgba(15,48,87,.04);
    }

    .oc-source-tab:hover {
        color: var(--oc-blue);
        border-color: #b7d7f0;
    }

    .oc-source-tab.active {
        color: #fff;
        border-color: var(--oc-blue);
        background: var(--oc-blue);
    }

    .oc-source-count {
        min-width: 1.7rem;
        padding: .14rem .35rem;
        border-radius: 999px;
        text-align: center;
        background: #edf2f7;
        color: #5d7185;
    }

    .oc-source-tab.active .oc-source-count {
        color: #fff;
        background: rgba(255,255,255,.18);
    }

    .oc-summary {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .65rem;
        margin-bottom: .75rem;
    }

    .oc-summary-card,
    .oc-panel {
        border: 1px solid var(--oc-border);
        border-radius: .7rem;
        background: #fff;
        box-shadow: 0 5px 18px rgba(15,48,87,.045);
    }

    .oc-summary-card {
        display: flex;
        align-items: center;
        gap: .7rem;
        padding: .72rem .85rem;
    }

    .oc-summary-icon {
        width: 2.2rem;
        height: 2.2rem;
        display: grid;
        place-items: center;
        border-radius: .55rem;
        color: var(--oc-blue);
        background: var(--oc-soft);
    }

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

    .oc-summary-label {
        margin-top: .2rem;
        color: var(--oc-muted);
        font-size: .62rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .oc-actions {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: .4rem;
        margin-bottom: .7rem;
    }

    .oc-filter-panel {
        position: relative;
        z-index: 20;
        padding: .78rem;
        margin-bottom: .75rem;
    }

    .oc-filter-panel label {
        display: block;
        margin-bottom: .25rem;
        color: #405970;
        font-size: .66rem;
        font-weight: 700;
    }

    .oc-filter-panel .form-control {
        height: 2.15rem;
        border-color: #d8e3ed;
        font-size: .73rem;
    }

    .oc-filter-panel .select2-container {
        width: 100% !important;
    }

    .oc-filter-panel
    .select2-container--bootstrap4
    .select2-selection--single {
        height: 2.15rem !important;
        font-size: .73rem;
    }

    .oc-filter-panel
    .select2-container--bootstrap4
    .select2-selection--single
    .select2-selection__rendered {
        line-height: 2.1rem;
    }

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

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

    .oc-toolbar .btn {
        font-size: .67rem;
        font-weight: 600;
    }

    .oc-small {
        color: var(--oc-muted);
        font-size: .68rem;
    }

    .oc-table {
        margin: 0;
    }

    .oc-table th,
    .oc-table td {
        padding: .5rem .55rem !important;
        vertical-align: middle !important;
    }

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

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

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

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

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

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

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

    .oc-blue {
        color: #1764a5;
        background: #eef7ff;
    }

    .oc-orange {
        color: #80520b;
        background: #fff3dc;
    }

    .oc-purple {
        color: #654ab1;
        background: #f3efff;
    }

    .oc-green {
        color: #167643;
        background: #e9f8ef;
    }

    .oc-gray {
        color: #687386;
        background: #eff2f5;
    }

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

    .oc-empty-icon {
        width: 3.4rem;
        height: 3.4rem;
        margin: 0 auto .75rem;
        display: grid;
        place-items: center;
        border-radius: 1rem;
        color: var(--oc-blue);
        background: var(--oc-soft);
        font-size: 1.2rem;
    }

    .oc-empty h4 {
        margin-bottom: .35rem;
        color: var(--oc-text);
        font-size: 1rem;
    }

    .oc-empty p {
        max-width: 35rem;
        margin: 0 auto .9rem;
        font-size: .75rem;
    }

    .oc-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: .65rem .75rem;
    }

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

    .oc-login-filter-panel {
        display: flex;
        align-items: center;
        gap: .65rem;
        flex-wrap: wrap;

        padding: .58rem .75rem;
        margin-bottom: .75rem;
    }

    .oc-login-filter-title {
        color: #6f7f91;
        font-size: .68rem;
        font-weight: 700;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .oc-login-filter-list {
        display: flex;
        align-items: center;
        gap: .42rem;
        flex-wrap: wrap;
    }

    .oc-login-chip {
        min-height: 2rem;

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

        padding: .34rem .65rem;

        border: 1px solid transparent;
        border-radius: .35rem;

        color: #fff;
        font-size: .68rem;
        font-weight: 700;

        cursor: pointer;
        opacity: .82;

        transition:
            opacity .15s ease,
            transform .15s ease,
            box-shadow .15s ease;
    }

    .oc-login-chip:hover {
        opacity: 1;
        transform: translateY(-1px);
    }

    .oc-login-chip.active {
        opacity: 1;

        box-shadow:
            0 0 0 3px rgba(17,109,193,.14);
    }

    .oc-login-chip-count {
        min-width: 1.25rem;
        height: 1.25rem;

        display: inline-grid;
        place-items: center;

        padding: 0 .25rem;
        border-radius: 999px;

        color: inherit;
        background: rgba(255,255,255,.25);

        font-size: .61rem;
    }

    .oc-login-all {
        background: #6c757d;
    }

    .oc-login-lt3 {
        background: #20c997;
    }

    .oc-login-lt7 {
        background: #5b7ce2;
    }

    .oc-login-lt15 {
        background: #ff9f43;
    }

    .oc-login-gt15 {
        background: #e76f61;
    }

    .oc-login-none {
        background: #9099a6;
    }


    /* =====================================================
       LAST LOGIN TABLE BADGES
    ===================================================== */

    .oc-last-login {
        min-width: 8.5rem;
        display: inline-flex;
        align-items: center;
        gap: .3rem;

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

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

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

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

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

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

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

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

        color: var(--oc-muted);
        font-size: .59rem;
    }

    @media (max-width: 991.98px) {
        .oc-source-tabs {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .oc-actions {
            justify-content: flex-start;
        }
    }

    @media (max-width: 767.98px) {
        .oc-summary {
            grid-template-columns: 1fr;
        }

        .oc-toolbar {
            align-items: flex-start;
            flex-direction: column;
        }

        .oc-toolbar-group {
            width: 100%;
        }
    }

    @media (max-width: 480px) {
        .oc-source-tabs {
            grid-template-columns: 1fr;
        }

        .oc-topbar {
            align-items: flex-start;
            flex-direction: column;
        }
    }
</style>
{% endblock %}

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

    <div class="oc-topbar">
        <p class="oc-subtitle">
            Sync source records, manage visibility and prepare public ordering.
        </p>

        <div class="d-flex flex-wrap" style="gap:.4rem;">
            <a
                href="{% url 'ref:customer_order_manage' %}"
                class="btn btn-sm btn-primary"
            >
                <i class="fas fa-sort-numeric-down mr-1"></i>
                Manage Display Order
            </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="oc-source-tabs">
        <a
            href="{% url 'ref:customer_manage' %}?source=all"
            class="oc-source-tab {% if selected_source == 'all' %}active{% endif %}"
        >
            <span><i class="fas fa-layer-group mr-1"></i>All Customers</span>
            <span class="oc-source-count">{{ all_count }}</span>
        </a>

        <a
            href="{% url 'ref:customer_manage' %}?source=cloud_online"
            class="oc-source-tab {% if selected_source == 'cloud_online' %}active{% endif %}"
        >
            <span><i class="fas fa-cloud mr-1"></i>Online</span>
            <span class="oc-source-count">{{ cloud_count }}</span>
        </a>

        <a
            href="{% url 'ref:customer_manage' %}?source=web_offline"
            class="oc-source-tab {% if selected_source == 'web_offline' %}active{% endif %}"
        >
            <span><i class="fas fa-server mr-1"></i>Web Offline</span>
            <span class="oc-source-count">{{ web_offline_count }}</span>
        </a>

        <a
            href="{% url 'ref:customer_manage' %}?source=desktop_offline"
            class="oc-source-tab {% if selected_source == 'desktop_offline' %}active{% endif %}"
        >
            <span><i class="fas fa-desktop mr-1"></i>Desktop Offline</span>
            <span class="oc-source-count">{{ desktop_offline_count }}</span>
        </a>
    </div>

    <div class="oc-summary">
        <div class="oc-summary-card">
            <div class="oc-summary-icon"><i class="fas fa-building"></i></div>
            <div>
                <div class="oc-summary-number">{{ source_total }}</div>
                <div class="oc-summary-label">Selected source total</div>
            </div>
        </div>

        <div class="oc-summary-card">
            <div class="oc-summary-icon"><i class="fas fa-eye"></i></div>
            <div>
                <div class="oc-summary-number">{{ visible_count }}</div>
                <div class="oc-summary-label">Visible on site</div>
            </div>
        </div>

        <div class="oc-summary-card">
            <div class="oc-summary-icon"><i class="fas fa-eye-slash"></i></div>
            <div>
                <div class="oc-summary-number">{{ hidden_count }}</div>
                <div class="oc-summary-label">Hidden from site</div>
            </div>
        </div>
    </div>

    <div class="oc-actions">
        {% if selected_source == "cloud_online" %}
            <form
                method="post"
                action="{% url 'ref:customer_sync_cloud' %}"
                class="oc-plain-form js-sync-form"
                data-title="Sync Online Customers?"
                data-text="Business Profiles will be copied or refreshed in Our Customers."
            >
                {% csrf_token %}
                <button type="submit" class="btn btn-sm btn-primary">
                    <i class="fas fa-sync-alt mr-1"></i>
                    Sync Business Profiles
                </button>
            </form>
        {% elif selected_source == "web_offline" %}
            <form
                method="post"
                action="{% url 'ref:customer_sync_web_offline' %}"
                class="oc-plain-form js-sync-form"
                data-title="Sync Web Offline Customers?"
                data-text="Offline Client Records will be copied or refreshed in Our Customers."
            >
                {% csrf_token %}
                <button type="submit" class="btn btn-sm btn-warning">
                    <i class="fas fa-sync-alt mr-1"></i>
                    Sync Offline Client Records
                </button>
            </form>
        {% elif selected_source == "desktop_offline" %}
            <a
                href="{% url 'ref:desktop_customer_template' %}"
                class="btn btn-sm btn-outline-primary"
            >
                <i class="fas fa-file-excel mr-1"></i>
                Download Excel Template
            </a>

            <a
                href="{% url 'ref:desktop_customer_import' %}"
                class="btn btn-sm btn-outline-success"
            >
                <i class="fas fa-upload mr-1"></i>
                Upload Excel
            </a>

            <a
                href="{% url 'ref:desktop_customer_add' %}"
                class="btn btn-sm btn-primary"
            >
                <i class="fas fa-plus mr-1"></i>
                Add Manual Customer
            </a>
        {% endif %}
    </div>

    <div class="oc-panel oc-filter-panel">
        <form
            method="get"
            action="{% url 'ref:customer_manage' %}"
            id="customer-filter-form"
            class="oc-plain-form"
        >
            <input type="hidden" name="source" value="{{ selected_source }}">
            <input
                type="hidden"
                name="last_login"
                id="last-login-filter-input"
                value="{{ selected_last_login }}"
            >

            <div class="row align-items-end">
                <div class="col-lg-5 mb-2 mb-lg-0">
                    <label for="business-search">Search Business</label>
                    <select
                        id="business-search"
                        name="customer"
                        class="form-control"
                    >
                        {% if selected_customer %}
                            <option value="{{ selected_customer.pk }}" selected>
                                {{ selected_customer_text }}
                            </option>
                        {% endif %}
                    </select>
                </div>

                <div class="col-lg-3 col-md-5 mb-2 mb-lg-0">
                    <label for="business-type-filter">Business Type</label>
                    <select
                        id="business-type-filter"
                        name="business_type"
                        class="form-control"
                    >
                        <option value="">All Business Types</option>
                        {% for business_type in business_types %}
                            <option
                                value="{{ business_type }}"
                                {% if selected_type == business_type %}selected{% endif %}
                            >
                                {{ business_type }}
                            </option>
                        {% endfor %}
                    </select>
                </div>

                <div class="col-lg-2 col-md-4 mb-2 mb-lg-0">
                    <label for="visibility-filter">Website Status</label>
                    <select
                        id="visibility-filter"
                        name="visibility"
                        class="form-control"
                    >
                        <option value="all" {% if selected_visibility == "all" %}selected{% endif %}>All</option>
                        <option value="visible" {% if selected_visibility == "visible" %}selected{% endif %}>Visible</option>
                        <option value="hidden" {% if selected_visibility == "hidden" %}selected{% endif %}>Hidden</option>
                    </select>
                </div>

                <div class="col-lg-2 col-md-3">
                    <div class="d-flex">
                        <button type="submit" class="btn btn-sm btn-primary flex-fill mr-1">
                            <i class="fas fa-filter mr-1"></i>Filter
                        </button>
                        <a
                            href="{% url 'ref:customer_manage' %}?source={{ selected_source }}"
                            class="btn btn-sm btn-light"
                        >
                            <i class="fas fa-undo"></i>
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="oc-panel oc-login-filter-panel">

        <div class="oc-login-filter-title">
            <i class="fas fa-palette mr-1"></i>
            Filter by Last Login:
        </div>

        <div class="oc-login-filter-list">

            <button
                type="button"
                class="
                    oc-login-chip
                    oc-login-all
                    js-login-filter
                    {% if selected_last_login == 'all' %}
                        active
                    {% endif %}
                "
                data-login-filter="all"
            >
                <i class="fas fa-th"></i>

                All

                <span class="oc-login-chip-count">
                    {{ login_counts.all }}
                </span>
            </button>


            <button
                type="button"
                class="
                    oc-login-chip
                    oc-login-lt3
                    js-login-filter
                    {% if selected_last_login == 'lt3' %}
                        active
                    {% endif %}
                "
                data-login-filter="lt3"
            >
                <i class="fas fa-circle"></i>

                &lt; 3 Days

                <span class="oc-login-chip-count">
                    {{ login_counts.lt3 }}
                </span>
            </button>


            <button
                type="button"
                class="
                    oc-login-chip
                    oc-login-lt7
                    js-login-filter
                    {% if selected_last_login == 'lt7' %}
                        active
                    {% endif %}
                "
                data-login-filter="lt7"
            >
                <i class="fas fa-circle"></i>

                &lt; 7 Days

                <span class="oc-login-chip-count">
                    {{ login_counts.lt7 }}
                </span>
            </button>


            <button
                type="button"
                class="
                    oc-login-chip
                    oc-login-lt15
                    js-login-filter
                    {% if selected_last_login == 'lt15' %}
                        active
                    {% endif %}
                "
                data-login-filter="lt15"
            >
                <i class="fas fa-circle"></i>

                &lt; 15 Days

                <span class="oc-login-chip-count">
                    {{ login_counts.lt15 }}
                </span>
            </button>


            <button
                type="button"
                class="
                    oc-login-chip
                    oc-login-gt15
                    js-login-filter
                    {% if selected_last_login == 'gt15' %}
                        active
                    {% endif %}
                "
                data-login-filter="gt15"
            >
                <i class="fas fa-circle"></i>

                &gt; 15 Days

                <span class="oc-login-chip-count">
                    {{ login_counts.gt15 }}
                </span>
            </button>


            <button
                type="button"
                class="
                    oc-login-chip
                    oc-login-none
                    js-login-filter
                    {% if selected_last_login == 'no_login' %}
                        active
                    {% endif %}
                "
                data-login-filter="no_login"
            >
                <i class="fas fa-circle"></i>

                No Login

                <span class="oc-login-chip-count">
                    {{ login_counts.no_login }}
                </span>
            </button>

        </div>

    </div>

    <form
        method="post"
        action="{% url 'ref:customer_bulk_visibility' %}"
        id="customer-bulk-form"
        class="oc-plain-form"
    >
        {% csrf_token %}
        <input type="hidden" name="action" id="bulk-action">
        <input type="hidden" name="next" value="{{ request.get_full_path }}">
    </form>

    <div class="oc-panel">
        <div class="oc-toolbar">
            <div class="oc-toolbar-group">
                <button type="button" id="mark-all" class="btn btn-sm btn-outline-primary">
                    <i class="fas fa-check-square mr-1"></i>Mark All
                </button>
                <button type="button" id="unmark-all" class="btn btn-sm btn-outline-secondary">
                    <i class="far fa-square mr-1"></i>Unmark All
                </button>
                <span id="selected-count" class="oc-small">0 selected</span>
            </div>

            <div class="oc-toolbar-group">
                <button type="button" class="btn btn-sm btn-success js-bulk-action" data-action="show">
                    <i class="fas fa-eye mr-1"></i>Show Selected
                </button>
                <button type="button" class="btn btn-sm btn-secondary js-bulk-action" data-action="hide">
                    <i class="fas fa-eye-slash mr-1"></i>Hide Selected
                </button>
                <span class="oc-small">
                    <strong>{{ filtered_count }}</strong> results
                </span>
            </div>
        </div>

        {% if customers %}
            <div class="table-responsive">
                <table class="table oc-table">
                    <thead>
                        <tr>
                            <th style="width:2.5rem;"><input type="checkbox" id="select-all"></th>
                            <th>Customer / Business</th>
                            <th>Source</th>
                            <th>Business Type</th>
                            <th>Contact</th>
                            <th>Parent</th>
                            <th>Order</th>
                            <th>Last Login</th>
                            <th>Website Status</th>
                            <th class="text-right">Actions</th>
                        </tr>
                    </thead>

                    <tbody>
                        {% for customer in customers %}
                            <tr>
                                <td>
                                    <input
                                        type="checkbox"
                                        name="selected_ids"
                                        value="{{ customer.pk }}"
                                        class="row-select"
                                        form="customer-bulk-form"
                                    >
                                </td>

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

                                            {% if customer.company_name and customer.company_name != customer.display_title %}
                                                <div class="oc-subline">{{ customer.company_name }}</div>
                                            {% endif %}

                                            {% if customer.address %}
                                                <div class="oc-subline">
                                                    <i class="fas fa-map-marker-alt mr-1"></i>
                                                    {{ customer.address }}
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </td>

                                <td>
                                    {% if customer.source_type == "cloud_online" %}
                                        <span class="oc-badge oc-blue">Online</span>
                                    {% elif customer.source_type == "web_offline" %}
                                        <span class="oc-badge oc-orange">Web Offline</span>
                                    {% else %}
                                        <span class="oc-badge oc-purple">Desktop Offline</span>
                                    {% endif %}
                                </td>

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

                                <td>
                                    {% if customer.public_phone %}
                                        <div><i class="fas fa-phone-alt mr-1"></i>{{ customer.public_phone }}</div>
                                    {% endif %}

                                    {% if customer.public_email %}
                                        <div class="oc-subline">
                                            <i class="fas fa-envelope mr-1"></i>{{ customer.public_email }}
                                        </div>
                                    {% endif %}

                                    {% if not customer.public_phone and not customer.public_email %}
                                        <span class="text-muted">No public contact</span>
                                    {% endif %}
                                </td>

                                <td>
                                    {% if customer.parent %}
                                        {{ customer.parent }}
                                    {% else %}
                                        <span class="text-muted">
                                            <i class="fas fa-star mr-1"></i>Main customer
                                        </span>
                                    {% endif %}
                                </td>

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

                                <td>
                                    {% if customer.last_login_local %}

                                        <span
                                            class="
                                                oc-last-login
                                                oc-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="oc-last-login-age">
                                            {{ customer.last_login_age_label }}
                                        </span>

                                    {% else %}

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

                                            No Login
                                        </span>

                                    {% endif %}
                                </td>

                                <td>
                                    {% if customer.show_on_site %}
                                        <span class="oc-badge oc-green">Visible</span>
                                    {% else %}
                                        <span class="oc-badge oc-gray">Hidden</span>
                                    {% endif %}
                                </td>

                                <td class="text-right text-nowrap">
                                    <a
                                        href="{% url 'ref:customer_edit' customer.pk %}"
                                        class="btn btn-sm btn-outline-primary"
                                    >
                                        <i class="fas fa-edit mr-1"></i>Edit
                                    </a>

                                    <form
                                        method="post"
                                        action="{% url 'ref:customer_toggle_visibility' customer.pk %}"
                                        class="d-inline oc-plain-form js-toggle-form"
                                        data-business="{{ customer.display_title }}"
                                        data-action="{% if customer.show_on_site %}hide{% else %}show{% endif %}"
                                    >
                                        {% csrf_token %}
                                        <input type="hidden" name="next" value="{{ request.get_full_path }}">

                                        {% if customer.show_on_site %}
                                            <button type="submit" class="btn btn-sm btn-outline-secondary">
                                                <i class="fas fa-eye-slash mr-1"></i>Hide
                                            </button>
                                        {% else %}
                                            <button type="submit" class="btn btn-sm btn-outline-success">
                                                <i class="fas fa-eye mr-1"></i>Show
                                            </button>
                                        {% endif %}
                                    </form>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="oc-empty">
                <div class="oc-empty-icon">
                    {% if selected_source == "cloud_online" %}
                        <i class="fas fa-cloud"></i>
                    {% elif selected_source == "web_offline" %}
                        <i class="fas fa-server"></i>
                    {% elif selected_source == "desktop_offline" %}
                        <i class="fas fa-file-excel"></i>
                    {% else %}
                        <i class="fas fa-users"></i>
                    {% endif %}
                </div>

                {% if selected_source == "cloud_online" %}
                    <h4>No online customers found</h4>
                    <p>
                        Our Customers table mein online entries nahi hain.
                        Business Profiles se manual sync karein.
                    </p>

                    <form
                        method="post"
                        action="{% url 'ref:customer_sync_cloud' %}"
                        class="oc-plain-form js-sync-form"
                        data-title="Sync Online Customers?"
                        data-text="Business Profiles will be copied to Our Customers."
                    >
                        {% csrf_token %}
                        <button type="submit" class="btn btn-sm btn-primary">
                            <i class="fas fa-sync-alt mr-1"></i>Sync Business Profiles
                        </button>
                    </form>

                {% elif selected_source == "web_offline" %}
                    <h4>No web-offline customers found</h4>
                    <p>
                        Our Customers table mein web-offline entries nahi hain.
                        Offline Client Records se manual sync karein.
                    </p>

                    <form
                        method="post"
                        action="{% url 'ref:customer_sync_web_offline' %}"
                        class="oc-plain-form js-sync-form"
                        data-title="Sync Web Offline Customers?"
                        data-text="Offline Client Records will be copied to Our Customers."
                    >
                        {% csrf_token %}
                        <button type="submit" class="btn btn-sm btn-warning">
                            <i class="fas fa-sync-alt mr-1"></i>Sync Offline Client Records
                        </button>
                    </form>

                {% elif selected_source == "desktop_offline" %}
                    <h4>No desktop-offline customers found</h4>
                    <p>
                        Desktop customer data Excel template se upload hogi.
                        Excel import module next development phase mein connect hoga.
                    </p>

                    <button type="button" class="btn btn-sm btn-outline-primary" >
                        <i class="fas fa-file-excel mr-1"></i>Download Excel Template
                    </button>

                    <button type="button" class="btn btn-sm btn-outline-success" >
                        <i class="fas fa-upload mr-1"></i>Upload Excel
                    </button>

                {% else %}
                    <h4>No customers found</h4>
                    <p>
                        Online ya Web Offline tab open karke source data sync karein,
                        ya Desktop Offline Excel import use karein.
                    </p>
                {% endif %}
            </div>
        {% endif %}

        <div class="oc-footer">
            <small class="text-muted">
                Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
            </small>

            {% if page_obj.paginator.num_pages > 1 %}
                <nav>
                    <ul class="pagination pagination-sm mb-0">
                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a
                                    class="page-link"
                                    href="?source={{ selected_source }}&page={{ page_obj.previous_page_number }}{% if selected_customer_id %}&customer={{ selected_customer_id }}{% endif %}{% if selected_type %}&business_type={{ selected_type|urlencode }}{% endif %}&visibility={{ selected_visibility }}&last_login={{ selected_last_login }}"
                                >
                                    Previous
                                </a>
                            </li>
                        {% endif %}

                        <li class="page-item active">
                            <span class="page-link">{{ page_obj.number }}</span>
                        </li>

                        {% if page_obj.has_next %}
                            <li class="page-item">
                                <a
                                    class="page-link"
                                    href="?source={{ selected_source }}&page={{ page_obj.next_page_number }}{% if selected_customer_id %}&customer={{ selected_customer_id }}{% endif %}{% if selected_type %}&business_type={{ selected_type|urlencode }}{% endif %}&visibility={{ selected_visibility }}&last_login={{ selected_last_login }}"
                                >
                                    Next
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

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

        const $filterForm = $("#customer-filter-form");
        const $businessSearch = $("#business-search");
        const $rowCheckboxes = $(".row-select");
        const $selectAll = $("#select-all");
        const $selectedCount = $("#selected-count");
        const $bulkForm = $("#customer-bulk-form");
        const $bulkAction = $("#bulk-action");

        $businessSearch.select2({
            theme: "bootstrap4",
            width: "100%",
            allowClear: true,
            placeholder: "Search name, phone, email or address...",
            minimumInputLength: 0,
            ajax: {
                url: "{% url 'ref:customer_search_api' %}",
                dataType: "json",
                delay: 300,
                cache: true,
                data: function (params) {
                    return {
                        term: params.term || "",
                        page: params.page || 1,
                        source: "{{ selected_source }}"
                    };
                },
                processResults: function (data) {
                    return {
                        results: data.results || [],
                        pagination: data.pagination || {more: false}
                    };
                }
            }
        });

        $businessSearch.on(
            "select2:select select2:clear",
            function () {
                $filterForm.trigger("submit");
            }
        );

        $("#business-type-filter, #visibility-filter").on(
            "change",
            function () {
                $filterForm.trigger("submit");
            }
        );

        function updateSelectedCount() {
            const total = $rowCheckboxes.length;
            const selected = $rowCheckboxes.filter(":checked").length;

            $selectedCount.text(selected + " selected");

            $selectAll.prop({
                checked: total > 0 && selected === total,
                indeterminate: selected > 0 && selected < total
            });
        }

        function setAll(value) {
            $rowCheckboxes.prop("checked", value);
            updateSelectedCount();
        }

        $selectAll.on("change", function () {
            setAll($(this).is(":checked"));
        });

        $rowCheckboxes.on("change", updateSelectedCount);
        $("#mark-all").on("click", function () { setAll(true); });
        $("#unmark-all").on("click", function () { setAll(false); });

        $(".js-bulk-action").on("click", function () {
            const action = String($(this).data("action") || "");
            const selected = $rowCheckboxes.filter(":checked").length;

            if (!selected) {
                Swal.fire({
                    icon: "warning",
                    title: "No customer selected",
                    text: "Please mark at least one customer first.",
                    confirmButtonColor: "#116dc1"
                });
                return;
            }

            Swal.fire({
                icon: "question",
                title: "Confirm bulk action",
                text: action + " " + selected + " selected customer(s)?",
                showCancelButton: true,
                confirmButtonColor: action === "show" ? "#198754" : "#6c757d",
                confirmButtonText: action === "show" ? "Yes, show" : "Yes, hide"
            }).then(function (result) {
                if (result.isConfirmed) {
                    $bulkAction.val(action);
                    $bulkForm.trigger("submit");
                }
            });
        });

        $(".js-toggle-form").on("submit", function (event) {
            event.preventDefault();

            const form = this;
            const action = String($(form).data("action") || "");
            const business = String($(form).data("business") || "this customer");

            Swal.fire({
                icon: "question",
                title: action === "show" ? "Show customer?" : "Hide customer?",
                text: action + ' "' + business + '" on the public website?',
                showCancelButton: true,
                confirmButtonColor: action === "show" ? "#198754" : "#6c757d",
                confirmButtonText: action === "show" ? "Yes, show" : "Yes, hide"
            }).then(function (result) {
                if (result.isConfirmed) {
                    form.submit();
                }
            });
        });

        $(".js-sync-form").on("submit", function (event) {
            event.preventDefault();

            const form = this;

            Swal.fire({
                icon: "question",
                title: $(form).data("title"),
                text: $(form).data("text"),
                showCancelButton: true,
                confirmButtonColor: "#116dc1",
                confirmButtonText: "Start Sync"
            }).then(function (result) {
                if (result.isConfirmed) {
                    form.submit();
                }
            });
        });

        $(".js-login-filter").on(
            "click",
            function () {
                const selectedLoginFilter = String(
                    $(this).data("login-filter") || "all"
                );

                $("#last-login-filter-input").val(
                    selectedLoginFilter
                );

                $filterForm.trigger("submit");
            }
        );

        updateSelectedCount();
    });
</script>
{% endblock %}