{% extends "dashboard/layouts/base.html" %}
{% block title %}Admin Dashboard - SavvyGT{% endblock %}

{% load static %}

{% block content %}


<style>
    .horizontal-scroll::-webkit-scrollbar {
        height: 8px;
    }

    .horizontal-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .horizontal-scroll::-webkit-scrollbar-thumb {
        background: #999;
        border-radius: 4px;
    }

    .horizontal-scroll::-webkit-scrollbar-thumb:hover {
        background: #666;
    }

    /* Hide scrollbar nicely */
    #feedbackScroller::-webkit-scrollbar {
        display: none;
    }

    #feedbackScroller {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Make cards responsive */
    .feedback-card {
        width: 300px;
        /* default width */
    }

    @media (max-width: 992px) {
        .feedback-card {
            width: 250px;
        }
    }

    @media (max-width: 768px) {
        .feedback-card {
            width: 220px;
        }
    }

    @media (max-width: 576px) {
        .feedback-card {
            width: 180px;
        }
    }

    /* Ensure long text doesn't break layout */
    .feedback-card p {
        white-space: normal;
        word-break: break-word;
    }

    .feedback-card>.d-flex {
        height: 220px;
        /* default height */
    }

    /* Adjust height on smaller screens if needed */
    @media (max-width: 992px) {
        .feedback-card>.d-flex {
            height: 200px;
        }
    }

    @media (max-width: 768px) {
        .feedback-card>.d-flex {
            height: 180px;
        }
    }

    @media (max-width: 576px) {
        .feedback-card>.d-flex {
            height: 160px;
        }
    }
</style>


<!-- Start Container Fluid -->
<div class="container-fluid">

    <!-- ========== Page Title Start ========== -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h4 class="mb-0 fw-semibold">Dashboard</h4>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Dashboard</a></li>
                    <!-- <li class="breadcrumb-item active">Analytics</li> -->
                </ol>
            </div>
        </div>
    </div>
    <!-- ========== Page Title End ========== -->
    <!-- Start here.... -->
    <div class="row">
        <!-- Active Users -->
        <div class="col-md-6 col-xl-3">
            <div class="card shadow rounded-4 border-light-subtle">
                <div class="card-body">
                    <div class="row align-items-center justify-content-between">
                        <div class="col-6">
                            <div class="avatar-md bg-light bg-opacity-50 rounded">
                                <iconify-icon icon="solar:user-id-broken"
                                    class="fs-32 text-primary avatar-title"></iconify-icon>
                            </div>
                            <p class="text-muted mb-2 mt-3">Active Customer</p>
                            <h3 class="text-dark fw-bold d-flex align-items-center gap-2 mb-0">
                                {{ active_user_count }}
                                <span class="badge text-success bg-success-subtle fs-12">
                                    <i class="ri-arrow-up-line"></i>{{ active_user_percent }}%
                                </span>
                            </h3>
                        </div>
                        <div class="col-6">
                            <div id="total_customers" class="apex-charts" style="min-height: 95px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Active Agents -->
        <div class="col-md-6 col-xl-3">
            <div class="card shadow rounded-4 border-light-subtle">
                <div class="card-body">
                    <div class="row align-items-center justify-content-between">
                        <div class="col-6">
                            <div class="avatar-md bg-light bg-opacity-50 rounded">
                                <iconify-icon icon="solar:users-group-two-rounded-broken"
                                    class="fs-32 text-primary avatar-title"></iconify-icon>
                            </div>
                            <p class="text-muted mb-2 mt-3">Active Agents</p>
                            <h3 class="text-dark fw-bold d-flex align-items-center gap-2 mb-0">
                                100
                                <span class="badge text-success bg-success-subtle fs-12">
                                    <i class="ri-arrow-up-line"></i>{{ admin_user_percent }}%
                                </span>
                            </h3>
                        </div>
                        <div class="col-6 text-end">
                            <div id="invoiced_customers" class="apex-charts" style="min-height: 95px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Total Users -->
        <div class="col-md-6 col-xl-3">
            <div class="card shadow rounded-4 border-light-subtle">
                <div class="card-body">
                    <div class="row align-items-center justify-content-between">
                        <div class="col-5">
                            <div class="avatar-md bg-light bg-opacity-50 rounded">
                                <iconify-icon icon="solar:shield-user-broken"
                                    class="fs-32 text-primary avatar-title"></iconify-icon>
                            </div>
                            <p class="text-muted mb-2 mt-3">All Customer</p>
                            <h3 class="text-dark fw-bold d-flex align-items-center gap-2 mb-0">
                                {{ total_user_count }}
                                <span class="badge text-success bg-success-subtle fs-12">
                                    <i class="ri-arrow-up-line"></i>{{ total_user_percent }}%
                                </span>
                            </h3>
                        </div>
                        <div class="col-6 text-end">
                            <div id="new_sale" class="apex-charts" style="min-height: 95px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<!-- ✅ Revenue Toggle Card -->
<div class="col-md-6 col-xl-3 mb-4">
    <div class="card shadow rounded-4 border-light-subtle">
        <div class="card-body">
            <div class="row align-items-center justify-content-between">
                <div class="col-12">
                    <div class="d-flex justify-content-between align-items-start">
                        <div class="avatar-md bg-light bg-opacity-50 rounded mb-2 text-center">
                           <iconify-icon icon="solar:money-bag-broken" class="fs-32 text-primary avatar-title"></iconify-icon>
                        </div>

                        <div class="form-check form-switch d-flex justify-content-right align-items-center">
                            <input class="form-check-input" type="checkbox" id="toggleRevenue">
                            <label class="form-check-label ms-2" for="toggleRevenue">USD</label>
                        </div>
                    </div>
                    <p class="text-muted mb-1 text-center">Total Revenue</p>

                    <!-- Revenue Display -->
                    <h3 class="text-dark fw-bold d-flex align-items-center justify-content-center gap-2 mb-3">
                        <span id="revenue-inr">₹{{ converted_revenue_inr|default:"0.00" }}</span>
                        <span id="revenue-usd" style="display: none;">${{ total_purchase_amount|default:"0.00" }}</span>
                    </h3>
                </div>
            </div>
        </div>
    </div>
</div>

    <div class="row">
        <div class="col-xl-8">
            <div class="card overflow-hidden">
                <div class="card-header d-flex justify-content-between align-items-center pb-1">
                    <div>
                        <h4 class="card-title">Users Average Sentiment</h4>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row align-items-top text-center">
                        <div class="col-lg-12">
                            <div class="apex-charts mt-2" id="sales_analytic"></div>
                        </div>
                    </div>
                </div>
                <div class="card-footer p-2 bg-light-subtle text-center">
                    <div class="row g-3">
                        <div class="col-md-4 border-end">
                            <p class="text-muted mb-1">Positive 😍</p>
                            <p
                                class="text-dark fs-18 fw-medium d-flex align-items-center justify-content-center gap-2 mb-0">
                                {{ positive_count }} <span class="badge text-success bg-success-subtle fs-12"><i
                                        class="ri-arrow-up-line"></i>{{ positive_percent }}%</span>
                            </p>
                        </div>
                        <div class="col-md-4 border-end">
                            <p class="text-muted mb-1">Neutral 🙂</p>
                            <p
                                class="text-dark fs-18 fw-medium d-flex align-items-center justify-content-center gap-2 mb-0">
                                {{ neutral_count }} <span class="badge text-warning bg-warning-subtle fs-12"><i
                                        class="ri-arrow-right-line"></i>{{ neutral_percent }}%</span>
                            </p>
                        </div>
                        <div class="col-md-4">
                            <p class="text-muted mb-1">Negative 😞</p>
                            <p
                                class="text-dark fs-18 fw-medium d-flex align-items-center justify-content-center gap-2 mb-0">
                                {{ negative_count }} <span class="badge text-danger bg-danger-subtle fs-12"><i
                                        class="ri-arrow-down-line"></i>{{ negative_percent }}%</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center justify-content-between">
                        <div class="col-12">
                            <div>
                                <h4 class="card-title mb-3">Recent Feedbacks</h4>
                            </div>
                            <!-- Auto-scroll Feedback Container -->
                            <div id="feedbackScroller"
                                class="horizontal-scroll bg-light bg-opacity-10 rounded p-3 w-100"
                                style="white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;">
                                {% for f in feedback %}
                                <div class="d-inline-block me-3 h-100 feedback-card">
                                    <div
                                        class="d-flex flex-column border rounded p-3 h-100 justify-content-between">
                                        <div class="d-flex align-items-start mb-2">
                                            <div class="avatar-sm flex-shrink-0 me-2">
                                                <span class="avatar-title rounded-circle bg-primary fw-bold">
                                                    {{ f.user.user_id|slice:":2"|upper }}
                                                </span>
                                            </div>
                                            <div class="flex-grow-1">
                                                <h6 class="mb-1 text-dark text-truncate">{{ f.user.user_id }}</h6>
                                                <span class="badge bg-success">{{ f.rating }} ★</span>
                                            </div>
                                        </div>
                                        <p class="mb-0 small text-truncate">
                                            {% if f.comments|length > 60 %}
                                            {{ f.comments|slice:":60" }}...
                                            <a href="#" class="read-more-link"
                                                data-user="{{ f.user.user_id }}" data-rating="{{ f.rating }}"
                                                data-comment="{{ f.comments|escape }}">
                                                Read more
                                            </a>
                                            {% else %}
                                            {{ f.comments|default:"No comment" }}
                                            {% endif %}
                                        </p>
                                    </div>
                                </div>
                                {% empty %}
                                <p class="text-muted">No feedbacks yet.</p>
                                {% endfor %}
                            </div>

                        </div>
                        <div class="col-xl-5 col-lg-4 col-md-4">
                            <img src="assets/images/money.png" alt="" class="img-fluid">
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body p-0">
                    <div class="row g-3">
                        <div class="col-xl-6 col-md-6">
                            <div class="text-center p-3 border-end">
                                <h5 class="card-title mb-0 text-dark fw-medium"> Total Products</h5>
                                <div class="avatar-md bg-light bg-opacity-50 rounded mx-auto my-3">
                                    <iconify-icon icon="solar:box-bold-duotone"
                                        class="fs-32 text-primary avatar-title"></iconify-icon>
                                </div>
                                <h4 class="text-dark fw-medium">{{ product|length }}</h4>

                                <!-- <p class="text-muted">60% Target</p>

                                <div class="progress mt-3" style="height: 10px;">
                                    <div class="progress-bar progress-bar  progress-bar-striped progress-bar-animated bg-primary"
                                        role="progressbar" style="width: 60%" aria-valuenow="70" aria-valuemin="0"
                                        aria-valuemax="70"> </div>
                                </div> -->
                            </div>
                        </div>

                       <div class="col-xl-6 col-md-6">
    <div class="text-center p-3">
        <h5 class="card-title mb-0 text-dark fw-medium">Revenue Generated</h5>
        <div class="avatar-md bg-light bg-opacity-50 rounded mx-auto my-3">
            <iconify-icon icon="solar:money-bag-bold-duotone" class="fs-32 text-success avatar-title"></iconify-icon>
        </div>
        <!-- Revenue Display -->
        <h4 class="text-dark fw-medium d-flex align-items-center justify-content-center gap-2 mb-3">
            <span id="revenue-generated-inr">₹{{ converted_revenue_inr|default:"0.00" }}</span>
            <span id="revenue-generated-usd" style="display: none;">${{ total_purchase_amount|default:"0.00" }}</span>
        </h4>
    </div>
</div>
                    </div>
                </div>
                <!-- <div class="card-footer border-top mt-1">
                    <a href="{% url 'admin_products' %}" class="link-dark fw-medium">View More <i class="ri-arrow-right-line"></i></a>
                </div> -->
            </div>

        </div>
    </div>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
    <div class="row">
        <div class="col-xl-3 col-lg-6">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center pb-1">
                    <div>
                        <h4 class="card-title mb-1">Customer Satisfaction</h4>
                        <!-- <p class="fs-13 mb-0">Avergae customer satisfaction rate</p> -->
                    </div>
                    <!-- <div class="dropdown">
                        <a href="#" class="dropdown-toggle btn btn-sm btn-outline-light rounded"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            This Month
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <a href="#!" class="dropdown-item">Week</a>
                            <a href="#!" class="dropdown-item">Months</a>        
                            <a href="#!" class="dropdown-item">Years</a>
                        </div>
                    </div> -->
                </div>
                <div class="card-body">
                    {% if happy_percent or average_percent or unhappy_percent %}
                    <div id="own-property" class="apex-charts" data-happy="{{ happy_percent|default:0 }}"
                        data-average="{{ average_percent|default:0 }}" data-unhappy="{{ unhappy_percent|default:0 }}"
                        data-satisfaction="{{ satisfaction_percent|default:0 }}"></div>
                    {% else %}
                    <p>No feedback available to display satisfaction chart.</p>
                    {% endif %}
                    <p class="mb-0 mt-2 fs-6 fw-medium text-dark text-center">
                        <i class="ri-group-fill"></i> Satisfaction:
                        <span class="fw-bold">{{ satisfaction_label }} ({{ satisfaction_percent }}%)</span>
                    </p>
                </div>

                <div class="card-footer border-top d-flex align-items-center justify-content-between">
                    <h5 class="mb-0">View All Feedbacks</h5>
                    <div>
                        <a href="{% url 'admin_feedback' %}" class="btn btn-soft-primary btn-sm"><iconify-icon
                                icon="solar:eye-broken" class="align-middle fs-18"></iconify-icon></a>
                    </div>
                </div>
            </div>

        </div>

        <div class="col-xl-6 col-lg-6">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center pb-1">
                    <div>
                        <h4 class="card-title">Most Sales Location</h4>
                    </div>
                    <!-- <div class="dropdown">
                        <a href="#" class="dropdown-toggle btn btn-sm btn-outline-light rounded"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            Asia
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                           
                            <a href="javascript:void(0);" class="dropdown-item">U.S.A</a>
                           
                            <a href="javascript:void(0);" class="dropdown-item">Russia</a>
                           
                            <a href="javascript:void(0);" class="dropdown-item">China</a>
                           
                            <a href="javascript:void(0);" class="dropdown-item">Canada</a>
                        </div>
                    </div> -->
                </div>
                <div class="card-body pt-0">
                    <div class="row">
                        <div class="col-xl-12">
                            <div id="most-sales-location" class="mt-3" style="height: 280px">
                            </div>
                        </div>
                    </div>
                    <div id="progress-bars-container" class="progress mt-5 overflow-visible" style="height: 15px;">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6">
            <div class="card">
                <div class="card-header pb-2">
                    <h4 class="card-title">Top Products Sold By Week</h4>
                </div>
                <div class="card-body pt-0">
                    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            {% if top_products %}
                            {% for product in top_products %}
                            <div class="carousel-item {% if forloop.first %}active{% endif %}"
                                data-product-id="{{ product.product__id }}">
                                <img src="{% static 'assets/images/common/' %}{{ product.product__image }}"
                                    class="d-block w-100 rounded" alt="{{ product.product__name }}"
                                    style="height:180px;object-fit:contain;">
                                <div class="text-center ">
                                    <h5 class="text-dark bg-white bg-opacity-75 rounded px-2 d-inline-block">{{product.product__name}}</h5>
                                </div>
                            </div>
                            {% endfor %}
                            {% else %}
                            <div class="carousel-item active mt-5 mb-5">
                                <div class="d-flex align-items-center justify-content-center" style="height:180px;">
                                    <span class="text-muted text-center">No top products of week is available.</span>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
                            data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
                            data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>

                    {% if top_products %}
                    <div id="sales_funnel" class="apex-charts "></div>
                    {%endif %}
                </div>
                <div class="card-footer border-top d-flex align-items-center justify-content-between">
                    <p class="text-muted fw-medium fs-15 mb-0"><span class="text-dark me-1">View All Products
                            <!-- </span>5,746</p> -->
                            <div>
                                <a href="{% url 'admin_products' %}"
                                    class="btn btn-soft-primary btn-sm text-nowrap"><iconify-icon
                                        icon="solar:eye-broken" class="align-middle fs-18"></iconify-icon></a>
                            </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row mt-4">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title">Purchase History</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="purchaseHistoryTable" class="table table-striped table-bordered nowrap w-100 pt-2">
                            <thead class="bg-light-subtle">
                                <tr>
                                    <th>S.No</th>
                                    <th>Order ID</th>
                                    <th>Product Name</th>
                                    <th>Ordered By</th>
                                    <th>Quantity</th>
                                    <th>Price</th>
                                    <th>Order Placed on</th>
                                    <th>Delivery Address</th>
                                    <th>Delivery Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for p in purchaseHistory %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{ p.order_id }}</td>
                                    <td>{{ p.product.name }}</td>
                                    <td>{{ p.user.first_name }} {{ p.user.last_name }}</td>
                                    <td>{{ p.quantity }}</td>
                                    <td>${{ p.total_price|floatformat:2 }}</td>
                                    <td>{{ p.purchase_date|date:"M d, Y H:i" }}</td>
                                    <td>{{ p.order_location }}</td>
                                    {% if p.order_status == "Delivered" %}
                                    <td><span class="badge bg-success">{{ p.order_status }}</span></td>
                                    {% elif p.order_status == "Shipped" %}
                                    <td><span class="badge bg-warning">{{ p.order_status }}</span></td>
                                    {% elif p.order_status == "Processing" %}
                                    <td><span class="badge bg-info">{{ p.order_status }}</span></td>
                                    {% else %}
                                    <td><span class="badge bg-danger">{{ p.order_status }}</span></td>
                                    {% endif %}
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="9" class="text-center text-muted">No purchase history available.</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            console.log("Initializing purchaseHistoryTable...");
            const table = $('#purchaseHistoryTable');

            if (!table.length) {
                console.error("Table #purchaseHistoryTable not found");
                return;
            }

            if (typeof $.fn.DataTable === 'undefined') {
                console.error("DataTables is not loaded");
                return;
            }

            // Destroy existing DataTable instance if it exists
            if ($.fn.DataTable.isDataTable(table)) {
                console.log("Destroying existing DataTable instance");
                table.DataTable().destroy();
            }

            // Initialize DataTable
            table.DataTable({
                dom: 'Bfrtip',  // simplest way to test buttons
                buttons: ['copy', 'excel', 'csv', 'pdf', 'print'],
                pageLength: 10,
                lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                responsive: true,
                autoWidth: false,
                scrollX: true,
                order: [[6, 'desc']], // Sort by Order Placed on
                columnDefs: [
                    { targets: 0, width: '5%' },  // S.No
                    { targets: 1, width: '10%' }, // Order ID
                    { targets: 2, width: '20%' }, // Product Name
                    { targets: 3, width: '15%' }, // Ordered By
                    { targets: 4, width: '10%' }, // Quantity
                    { targets: 5, width: '10%' }, // Price
                    { targets: 6, width: '15%' }, // Order Placed on
                    { targets: 7, width: '20%' }, // Delivery Address
                    { targets: 8, width: '10%' }  // Delivery Status
                ],
                language: {
                    emptyTable: "No purchase history available.",
                    paginate: {
                        first: "First",
                        last: "Last",
                        next: "Next",
                        previous: "Previous"
                    },
                    info: "Showing _START_ to _END_ of _TOTAL_ entries",
                    infoEmpty: "No entries to show",
                    lengthMenu: "Show _MENU_ entries"
                },
                drawCallback: function () {
                    console.log("DataTable redrawn, pagination controls should be visible");
                    // Ensure pagination controls are visible
                    const paginateDiv = $('#purchaseHistoryTable_paginate');
                    if (paginateDiv.length) {
                        console.log("Pagination controls found:", paginateDiv);
                    } else {
                        console.warn("Pagination controls not found");
                    }
                }
            });

            console.log("DataTable initialization complete");
        });
    </script>
    {% endblock %}