{% load static %}
{% include 'includes/header.html' %}
{% include 'includes/customer_sidebar.html' %}
{% include 'includes/navbar.html' %}

<style>
    :root {
        --primary-gradient: linear-gradient(135deg, #7367f0 0%, #9e95f5 100%);
        --success-gradient: linear-gradient(135deg, #28c76f 0%, #48da89 100%);
        --warning-gradient: linear-gradient(135deg, #ff9f43 0%, #ffc085 100%);
        --danger-gradient: linear-gradient(135deg, #ea5455 0%, #f08182 100%);
        --info-gradient: linear-gradient(135deg, #00cfe8 0%, #51e1f3 100%);
        --card-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1);
    }

    .dashboard-container {
        padding: 1.5rem;
        background-color: #f8f7fa;
        min-height: 100vh;
    }

    .welcome-header {
        margin-bottom: 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .welcome-text h4 {
        font-weight: 700;
        color: #5d596c;
        margin-bottom: 0.25rem;
    }

    .welcome-text p {
        color: #a5a3ae;
        margin: 0;
        font-size: 1rem;
    }

    .current-time-box {
        background: white;
        padding: 0.75rem 1.25rem;
        border-radius: 12px;
        box-shadow: var(--card-shadow);
        font-weight: 600;
        color: #7367f0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .stat-card {
        border: none;
        border-radius: 16px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
        position: relative;
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    }

    .stat-card .card-body {
        padding: 1.5rem;
        z-index: 1;
    }

    .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
        font-size: 1.5rem;
        color: white;
    }

    .stat-label {
        color: #a5a3ae;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
    }

    .stat-value {
        font-size: 1.75rem;
        font-weight: 700;
        margin: 0.5rem 0;
        color: #5d596c;
    }

    .stat-subtext {
        font-size: 0.8125rem;
        color: #a5a3ae;
    }

    .bg-gradient-primary {
        background: var(--primary-gradient);
    }

    .bg-gradient-success {
        background: var(--success-gradient);
    }

    .bg-gradient-warning {
        background: var(--warning-gradient);
    }

    .bg-gradient-info {
        background: var(--info-gradient);
    }

    .bg-gradient-danger {
        background: var(--danger-gradient);
    }

    .chart-card {
        border: none;
        border-radius: 16px;
        box-shadow: var(--card-shadow);
        height: 100%;
    }

    .chart-card .card-header {
        background: transparent;
        border-bottom: none;
        padding: 1.5rem;
    }

    .chart-card .card-title {
        font-weight: 700;
        color: #5d596c;
        margin: 0;
    }

    .modern-table thead th {
        background-color: #f8f7fa;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 1px;
        font-weight: 600;
        border-top: none;
    }

    .status-badge {
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.75rem;
    }

    .brand-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 0;
        border-bottom: 1px solid #ebedf0;
    }

    .brand-item:last-child {
        border-bottom: none;
    }

    .brand-info {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .brand-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: #f1f0ff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #7367f0;
        font-weight: 700;
    }
</style>

<div class="dashboard-container">
    <!-- Header Section -->
    <div class="welcome-header">
        <div class="welcome-text animated fadeInDown">
            <h4>Welcome Back, {{ request.session.name }}! 👋</h4>
            <p>Here's what's happening with your wholesale business today.</p>
        </div>
        <div class="current-time-box animated fadeInRight">
            <i class="ti tabler-calendar-time fs-2"></i>
            <span id="live-clock">Loading...</span>
        </div>
    </div>

    <!-- Stats Section -->
    <div class="row g-4 mb-6">
        <!-- Purchases -->
        <div class="col-lg-3 col-md-6">
            <div class="card stat-card shadow-sm">
                <div class="card-body">
                    <div class="stat-icon bg-gradient-primary">
                        <i class="ti tabler-building-store"></i>
                    </div>
                    <div class="stat-label">Stock Inward</div>
                    <div class="stat-value">₹{{ purchase_data.total_purchase_amt|default:0|floatformat:2 }}</div>
                    <div class="stat-subtext">
                        <span class="text-primary fw-bold">{{ purchase_data.total_purchase_qty|default:0 }}</span> total
                        items purchased
                    </div>
                </div>
            </div>
        </div>

        <!-- Sales -->
        <div class="col-lg-3 col-md-6">
            <div class="card stat-card shadow-sm">
                <div class="card-body">
                    <div class="stat-icon bg-gradient-success">
                        <i class="ti tabler-trending-up"></i>
                    </div>
                    <div class="stat-label">Total Outward</div>
                    <div class="stat-value">₹{{ sales_totals.total_amt|default:0|floatformat:2 }}</div>
                    <div class="stat-subtext">
                        <span class="text-success fw-bold">₹{{ sales_today|default:0|floatformat:2 }}</span> sold today
                    </div>
                </div>
            </div>
        </div>

        <!-- Available Stock -->
        <div class="col-lg-3 col-md-6">
            <div class="card stat-card shadow-sm">
                <div class="card-body">
                    <div class="stat-icon bg-gradient-warning">
                        <i class="ti tabler-package"></i>
                    </div>
                    <div class="stat-label">Ready Stock</div>
                    <div class="stat-value">{{ stock_count|default:0 }} <small class="fs-6">Units</small></div>
                    <div class="stat-subtext">
                        Worth <span class="text-warning fw-bold">₹{{ stock_value|default:0|floatformat:2 }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Claims -->
        <div class="col-lg-3 col-md-6">
            <div class="card stat-card shadow-sm">
                <div class="card-body">
                    <div class="stat-icon bg-gradient-info">
                        <i class="ti tabler-discount-check"></i>
                    </div>
                    <div class="stat-label">Claim Rewards</div>
                    <div class="stat-value">₹{{ claims_totals.total_claims|default:0|floatformat:2 }}</div>
                    <div class="stat-subtext">
                        <span class="text-info fw-bold">₹{{ claims_totals.approved_claims|default:0|floatformat:2 }}</span> approved so far
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="row g-4 mb-6">
        <!-- Monthly Sales Trend -->
        <div class="col-lg-8">
            <div class="card chart-card">
                <div class="card-header d-flex justify-content-between">
                    <h5 class="card-title">Sales Performance Trend</h5>
                    <div class="dropdown">
                        <button class="btn p-0" type="button" data-bs-toggle="dropdown" aria-haspopup="true"
                            aria-expanded="false">
                            <i class="ti tabler-dots-vertical"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div id="salesTrendChart" style="min-height: 350px;"></div>
                </div>
            </div>
        </div>

        <!-- Financial Summary -->
        <div class="col-lg-4">
            <div class="card chart-card">
                <div class="card-header">
                    <h5 class="card-title">Collection Analytics</h5>
                </div>
                <div class="card-body d-flex flex-column justify-content-between">
                    <div id="collectionPieChart" style="min-height: 250px;"></div>
                    <div class="mt-4">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="fw-bold text-muted">Total Collections</span>
                            <span class="fw-bold text-success" id="perc-label">0%</span>
                        </div>
                        <div class="progress" style="height: 10px; border-radius: 5px;">
                            <div id="collection-progress"
                                class="progress-bar bg-success progress-bar-striped progress-bar-animated"
                                role="progressbar" style="width: 0%"></div>
                        </div>
                        <div class="d-flex justify-content-between mt-3">
                            <div>
                                <small class="text-muted d-block">Collected</small>
                                <span class="fw-bold text-success">₹{{ sales_totals.total_collected|default:0|floatformat:2 }}</span>
                            </div>
                            <div class="text-end">
                                <small class="text-muted d-block">Balance</small>
                                <span class="fw-bold text-danger" id="balance-amt">₹0.00</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Lower Section -->
    <div class="row g-4">
        <!-- Recent Transactions -->
        <div class="col-lg-8">
            <div class="card chart-card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title text-primary">Recent Sales Orders</h5>
                    <a href="{% url 'wholesale_sales_order' %}" class="btn btn-sm btn-primary">
                        <i class="ti tabler-external-link me-1"></i> View All
                    </a>
                </div>
                <div class="table-responsive text-nowrap">
                    <table class="table modern-table table-hover">
                        <thead>
                            <tr>
                                <th>Invoice</th>
                                <th>Date</th>
                                <th>Customer</th>
                                <th>Amount</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for sale in recent_sales %}
                            <tr>
                                <td><span class="fw-bold text-heading">#{{ sale.inv_no }}</span></td>
                                <td>{{ sale.inv_date|date:"M d, Y" }}</td>
                                <td>
                                    <div class="d-flex flex-column">
                                        <span class="fw-semibold">{{ sale.customer_name }}</span>
                                        <small class="text-muted">{{ sale.customer_phone|default:"" }}</small>
                                    </div>
                                </td>
                                <td><span class="fw-bold">₹{{ sale.total_amount|floatformat:2 }}</span></td>
                                <td>
                                    {% if sale.sales_status == 'pending' %}
                                    <span class="badge bg-label-warning status-badge">Pending</span>
                                    {% elif sale.sales_status == 'approved' %}
                                    <span class="badge bg-label-success status-badge">Approved</span>
                                    {% else %}
                                    <span class="badge bg-label-primary status-badge">{{ sale.sales_status|upper }}</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-center py-5">
                                    <img src="{% static 'img/illustrations/no-data.svg' %}" alt="No data" height="80"
                                        class="mb-3">
                                    <p class="text-muted">No recent sales records found.</p>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Top Brands -->
        <div class="col-lg-4">
            <div class="card chart-card">
                <div class="card-header">
                    <h5 class="card-title">Top Performing Brands</h5>
                </div>
                <div class="card-body">
                    {% for item in brand_perf %}
                    <div class="brand-item">
                        <div class="brand-info">
                            <div class="brand-icon">
                                {{ item.brand_name|slice:":1" }}
                            </div>
                            <div>
                                <h6 class="mb-0">{{ item.brand_name }}</h6>
                                <small class="text-muted">{{ item.qty }} Units Sold</small>
                            </div>
                        </div>
                        <div class="text-end">
                            <span class="fw-bold d-block">₹{{ item.total|floatformat:0 }}</span>
                            <small class="text-success fw-semibold">Value Share</small>
                        </div>
                    </div>
                    {% empty %}
                    <p class="text-center text-muted py-5">No brand data available yet.</p>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Scripts Section -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
{{ sales_trend|json_script:"sales-trend-data" }}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 1. Live Clock
        function updateClock() {
            const now = new Date();
            const options = {
                weekday: 'long',
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: true
            };
            document.getElementById('live-clock').innerText = now.toLocaleDateString('en-US', options);
        }
        setInterval(updateClock, 1000);
        updateClock();

        // 2. Financial Calculations
        const totalAmt = parseFloat("{{ sales_totals.total_amt|default:0 }}");
        const collectedAmt = parseFloat("{{ sales_totals.total_collected|default:0 }}");
        const balanceAmt = totalAmt - collectedAmt;
        const progressPerc = totalAmt > 0 ? ((collectedAmt / totalAmt) * 100).toFixed(1) : 0;

        document.getElementById('balance-amt').innerText = '₹' + balanceAmt.toLocaleString(undefined, { minimumFractionDigits: 2 });
        document.getElementById('perc-label').innerText = progressPerc + '%';
        document.getElementById('collection-progress').style.width = progressPerc + '%';

        // 3. Sales Trend Chart
        const trendDataEl = document.getElementById('sales-trend-data');
        const trendData = JSON.parse((trendDataEl && trendDataEl.textContent) || '[]');
    const trendMonths = trendData.map(item => {
        const date = new Date(item.month);
        return date.toLocaleString('default', { month: 'short', year: '2-digit' });
    });
    const trendValues = trendData.map(item => item.total);

    const salesTrendOptions = {
        series: [{
            name: 'Total Sales',
            data: trendValues
        }],
        chart: {
            height: 350,
            type: 'area',
            toolbar: { show: false },
            zoom: { enabled: false }
        },
        colors: ['#7367f0'],
        dataLabels: { enabled: false },
        stroke: { curve: 'smooth', width: 3 },
        fill: {
            type: 'gradient',
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.7,
                opacityTo: 0.2,
                stops: [0, 90, 100]
            }
        },
        xaxis: {
            categories: trendMonths,
        },
        yaxis: {
            labels: {
                formatter: function (val) { return "₹" + val.toLocaleString(); }
            }
        },
        grid: { borderColor: '#f1f1f1' }
    };
    new ApexCharts(document.querySelector("#salesTrendChart"), salesTrendOptions).render();

    // 4. Collection Chart
    const pieOptions = {
        series: [collectedAmt, balanceAmt],
        chart: {
            type: 'donut',
            height: 250
        },
        labels: ['Collected', 'Pending'],
        colors: ['#28c76f', '#ea5455'],
        legend: { position: 'bottom' },
        dataLabels: { enabled: false },
        plotOptions: {
            pie: {
                donut: {
                    size: '75%',
                    labels: {
                        show: true,
                        total: {
                            show: true,
                            label: 'Outcome',
                            formatter: function (w) {
                                return progressPerc + '%';
                            }
                        }
                    }
                }
            }
        }
    };
    new ApexCharts(document.querySelector("#collectionPieChart"), pieOptions).render();
    });
</script>

{% include 'includes/footer.html' %}