@extends('layouts.app')
@section('title', 'Dashboard')
@push('style')
    <link rel="stylesheet" href="{{ asset('assets/css/dashboard.css') }}" />
@endpush
@section('content')
    <div class="page-wrapper">
        <div class="page-content">
            <div class="dashboard-content">
                <!-- Stats Cards -->
                <div class="stats-grid">
                    <div class="stat-card sales-card">
                        <div class="stat-icon">
                            <i class="fas fa-shopping-cart"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="total-sales">$0</h3>
                            <p>Total Sales</p>
                            <span class="stat-change" id="sales-growth">
                                <i class="fas fa-arrow-up"></i> 0%
                            </span>
                        </div>
                    </div>

                    <div class="stat-card products-card">
                        <div class="stat-icon">
                            <i class="fas fa-box"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="total-products">0</h3>
                            <p>Total Products</p>
                            <span class="stat-change" id="products-growth">
                                <i class="fas fa-arrow-up"></i> 0%
                            </span>
                        </div>
                    </div>

                    <div class="stat-card customers-card">
                        <div class="stat-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="total-customers">0</h3>
                            <p>Total Customers</p>
                            <span class="stat-change" id="customers-growth">
                                <i class="fas fa-arrow-up"></i> 0%
                            </span>
                        </div>
                    </div>

                    <div class="stat-card revenue-card">
                        <div class="stat-icon">
                            <i class="fas fa-dollar-sign"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="monthly-revenue">$0</h3>
                            <p>Monthly Revenue</p>
                            <span class="stat-change" id="revenue-growth">
                                <i class="fas fa-arrow-up"></i> 0%
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Charts and Tables Section -->
                <div class="dashboard-grid">
                    <!-- Sales Chart -->
                    <div class="dashboard-card chart-card">
                        <div class="card-header">
                            <h3>Sales Overview</h3>
                            <div class="card-actions">
                                <select class="period-select" id="chart-period">
                                    <option value="last_7_days">Last 7 days</option>
                                    <option value="last_30_days">Last 30 days</option>
                                    <option value="last_3_months">Last 3 months</option>
                                </select>
                            </div>
                        </div>
                        <div class="chart-container">
                            <canvas id="salesChart"></canvas>
                        </div>
                    </div>

                    <!-- Recent Sales Table -->
                    <div class="dashboard-card table-card">
                        <div class="card-header">
                            <h3>Recent Sales</h3>
                            <a href="{{ route('sale') }}" class="view-all">View All</a>
                        </div>
                        <div class="table-container">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>Invoice</th>
                                        <th>Customer</th>
                                        <th>Amount</th>
                                        <th>Status</th>
                                        <th>Date</th>
                                    </tr>
                                </thead>
                                <tbody id="recent-sales-table">
                                    <tr>
                                        <td colspan="5" class="text-center">
                                            <div class="loading"></div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Top Products -->
                    <div class="dashboard-card">
                        <div class="card-header">
                            <h3>Top Products</h3>
                            <a href="{{ route('product') }}" class="view-all">View All</a>
                        </div>
                        <div class="product-list" id="top-products">
                            <div class="text-center">
                                <div class="loading"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Low Stock Alert -->
                    <div class="dashboard-card alert-card">
                        <div class="card-header">
                            <h3>Low Stock Alert</h3>
                            <span class="alert-count" id="low-stock-count">0</span>
                        </div>
                        <div class="alert-list" id="low-stock-products">
                            <div class="text-center">
                                <div class="loading"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Recent Activities -->
                    <div class="dashboard-card activity-card">
                        <div class="card-header">
                            <h3>Recent Activities</h3>
                        </div>
                        <div class="activity-list" id="recent-activities">
                            <div class="text-center">
                                <div class="loading"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Financial Summary -->
                    <div class="dashboard-card financial-card">
                        <div class="card-header">
                            <h3>Financial Summary</h3>
                        </div>
                        <div class="financial-stats" id="financial-summary">
                            <div class="text-center">
                                <div class="loading"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Use the dynamic JavaScript file that fetches real data from API -->
    {{--  <script src="{{ asset('assets/js/dashboard.js') }}"></script> --}}
    <script>
        // Dynamic Dashboard JavaScript - 100% API-driven
        document.addEventListener('DOMContentLoaded', function() {
            // Setup CSRF token for AJAX requests
            setupCSRF();

            // Initialize dashboard
            initializeDashboard();
            // Load dashboard data dynamically
            loadDashboardData();

            // Initialize charts
            initializeCharts();
        });
        // Setup CSRF token for all AJAX requests
        function setupCSRF() {
            const token = document.querySelector('meta[name="csrf-token"]');
            if (token) {
                window.csrfToken = token.getAttribute('content');
            }
        }
        // Dashboard initialization
        function initializeDashboard() {
            console.log('Dynamic Dashboard initialized');
            // Add loading states
            showLoadingStates();
            // Setup responsive behavior
            setupResponsiveBehavior();
        }
        // Load dashboard data dynamically from API
        function loadDashboardData() {
            Promise.all([
                loadStatsData(),
                loadRecentSales(),
                loadTopProducts(),
                loadLowStockAlerts(),
                loadRecentActivities(),
                loadFinancialSummary()
            ]).then(() => {
                console.log('All dynamic dashboard data loaded');
            }).catch(error => {
                console.error('Error loading dashboard data:', error);
                showErrorMessage('Failed to load dashboard data');
            });
        }

        // Load statistics data from API
        async function loadStatsData() {
            try {
                const response = await fetch("{{ route('stats') }}", { // <-- Laravel route here
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}", // csrf token injected by blade
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const result = await response.json();

                if (result.success) {
                    const data = result.data;

                    // Update DOM elements with real data
                    document.getElementById('total-sales').textContent = formatCurrency(data.total_sales);
                    document.getElementById('total-products').textContent = data.total_products.toLocaleString();
                    document.getElementById('total-customers').textContent = data.total_customers.toLocaleString();
                    document.getElementById('monthly-revenue').textContent = formatCurrency(data.monthly_revenue);

                    // Update growth indicators with real data
                    updateGrowthIndicator('sales-growth', data.sales_growth);
                    updateGrowthIndicator('products-growth', data.products_growth);
                    updateGrowthIndicator('customers-growth', data.customers_growth);
                    updateGrowthIndicator('revenue-growth', data.revenue_growth);

                    // Add animation
                    animateNumbers();
                } else {
                    throw new Error(result.message || 'Failed to load stats');
                }
            } catch (error) {
                console.error('Error loading stats:', error);
                showErrorInElement('total-sales', 'Error');
                showErrorInElement('total-products', 'Error');
                showErrorInElement('total-customers', 'Error');
                showErrorInElement('monthly-revenue', 'Error');
            }
        }


        // Load recent sales from API
        async function loadRecentSales() {
            try {
                const response = await fetch("{{ route('recent-sales') }}", {
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}",
                        'Accept': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const result = await response.json();

                if (result.success) {
                    const tableBody = document.getElementById('recent-sales-table');
                    if (!tableBody) {
                        console.warn('Element #recent-sales-table not found');
                        return;
                    }

                    tableBody.innerHTML = '';

                    if (!result.data || result.data.length === 0) {
                        tableBody.innerHTML = '<tr><td colspan="5" class="text-center">No recent sales found</td></tr>';
                        return;
                    }

                    result.data.forEach(sale => {
                        const row = document.createElement('tr');
                        const isOverdue = sale.is_overdue === true;
                        const statusClass = isOverdue ? 'status-overdue' :
                            `status-${sale.status?.toLowerCase() || 'unknown'}`;

                        row.innerHTML = `
                    <td><strong>${sale.invoice || 'N/A'}</strong></td>
                    <td>${sale.customer || 'N/A'}</td>
                    <td>${formatCurrency(sale.amount)}</td>
                    <td><span class="status-badge ${statusClass}">${sale.status || 'Unknown'}</span></td>
                    <td>${formatDate(sale.date)}</td>
                `;
                        tableBody.appendChild(row);
                    });
                } else {
                    throw new Error(result.message || 'Failed to load recent sales');
                }
            } catch (error) {
                console.error('Error loading recent sales:', error);
                const tableBody = document.getElementById('recent-sales-table');
                if (tableBody) {
                    tableBody.innerHTML = '<tr><td colspan="5" class="text-center">Error loading sales data</td></tr>';
                }
            }
        }



        // Load top products from API
        async function loadTopProducts() {
            try {
                const response = await fetch("{{ route('top-products') }}", {
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}",
                        'Accept': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const result = await response.json();

                if (result.success) {
                    const productList = document.getElementById('top-products');
                    if (!productList) {
                        console.warn('Element #top-products not found');
                        return;
                    }

                    productList.innerHTML = '';

                    if (!result.data || result.data.length === 0) {
                        productList.innerHTML = '<div class="text-center">No products found</div>';
                        return;
                    }

                    result.data.forEach(product => {
                        const productItem = document.createElement('div');
                        productItem.className = 'product-item';

                        productItem.innerHTML = `
                    <div class="product-image">
                        ${
                            product.image
                                ? `<img src="${product.image}" alt="${product.name || 'Product'}" style="width: 40px; height: 40px; object-fit: cover; border-radius: 0.5rem;">`
                                : '<i class="fas fa-box"></i>'
                        }
                    </div>
                    <div class="product-info">
                        <div class="product-name">${product.name || 'Unnamed Product'}</div>
                        <div class="product-sales">${product.sales != null ? product.sales : '0'} sales</div>
                    </div>
                    <div class="product-revenue">${formatCurrency(product.revenue)}</div>
                `;

                        productList.appendChild(productItem);
                    });
                } else {
                    throw new Error(result.message || 'Failed to load top products');
                }
            } catch (error) {
                console.error('Error loading top products:', error);
                const productList = document.getElementById('top-products');
                if (productList) {
                    productList.innerHTML = '<div class="text-center">Error loading products data</div>';
                }
            }
        }



        // Load low stock alerts from API
        async function loadLowStockAlerts() {
            try {
                const response = await fetch("{{ route('low-stock-alerts') }}", {
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}",
                        'Accept': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const result = await response.json();

                if (result.success) {
                    const lowStockCountEl = document.getElementById('low-stock-count');
                    if (lowStockCountEl) {
                        lowStockCountEl.textContent = result.count ?? 0;
                    }

                    // Update notification badge
                    const notificationBadge = document.getElementById('notification-count') || document.querySelector(
                        '.notification-badge');
                    if (notificationBadge) {
                        notificationBadge.textContent = result.count ?? 0;
                    }

                    const alertList = document.getElementById('low-stock-products');
                    if (!alertList) {
                        console.warn('Element #low-stock-products not found');
                        return;
                    }
                    alertList.innerHTML = '';

                    if (!result.data || result.data.length === 0) {
                        alertList.innerHTML = '<div class="text-center">No low stock alerts</div>';
                        return;
                    }

                    result.data.forEach(item => {
                        const alertItem = document.createElement('div');
                        alertItem.className = 'alert-item';
                        alertItem.innerHTML = `
                    <span class="alert-product">${item.name ?? 'Unnamed product'}</span>
                    <span class="alert-stock">${item.stock != null ? item.stock : '0'} left</span>
                `;
                        alertList.appendChild(alertItem);
                    });
                } else {
                    throw new Error(result.message || 'Failed to load low stock alerts');
                }
            } catch (error) {
                console.error('Error loading low stock alerts:', error);
                const alertList = document.getElementById('low-stock-products');
                if (alertList) {
                    alertList.innerHTML = '<div class="text-center">Error loading alerts</div>';
                }
            }
        }


        // Load recent activities from API
        async function loadRecentActivities() {
            try {
                const response = await fetch("{{ route('recent-activities') }}", {
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}",
                        'Accept': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const result = await response.json();

                if (result.success) {
                    const activityList = document.getElementById('recent-activities');
                    if (!activityList) {
                        console.warn('Element #recent-activities not found');
                        return;
                    }

                    activityList.innerHTML = '';

                    if (!result.data || result.data.length === 0) {
                        activityList.innerHTML = '<div class="text-center">No recent activities</div>';
                        return;
                    }

                    result.data.forEach(activity => {
                        const activityItem = document.createElement('div');
                        activityItem.className = 'activity-item';
                        activityItem.innerHTML = `
                    <div class="activity-icon">
                        <i class="${activity.icon || 'fas fa-info-circle'}"></i>
                    </div>
                    <div class="activity-content">
                        <div class="activity-text">${activity.text || 'No description'}</div>
                        <div class="activity-time">${activity.time || ''}</div>
                    </div>
                `;
                        activityList.appendChild(activityItem);
                    });
                } else {
                    throw new Error(result.message || 'Failed to load recent activities');
                }
            } catch (error) {
                console.error('Error loading recent activities:', error);
                const activityList = document.getElementById('recent-activities');
                if (activityList) {
                    activityList.innerHTML = '<div class="text-center">Error loading activities</div>';
                }
            }
        }

        // Load financial summary from API
        async function loadFinancialSummary() {
            try {
                const response = await fetch("{{ route('financial-summary') }}", {
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}",
                        'Accept': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const result = await response.json();

                if (result.success) {
                    const data = result.data || {};
                    const financialSummary = document.getElementById('financial-summary');

                    if (financialSummary) {
                        financialSummary.innerHTML = `
                    <div class="financial-item">
                        <span class="label">Total Revenue</span>
                        <span class="value">${formatCurrency(data.total_revenue)}</span>
                    </div>
                    <div class="financial-item">
                        <span class="label">Total Expenses</span>
                        <span class="value">${formatCurrency(data.total_expenses)}</span>
                    </div>
                    <div class="financial-item">
                        <span class="label">Net Profit</span>
                        <span class="value profit">${formatCurrency(data.net_profit)}</span>
                    </div>
                    <div class="financial-item">
                        <span class="label">Outstanding Dues</span>
                        <span class="value due">${formatCurrency(data.outstanding_dues)}</span>
                    </div>
                `;
                    } else {
                        // fallback for individual elements
                        const elements = {
                            'total-revenue': data.total_revenue,
                            'total-expenses': data.total_expenses,
                            'net-profit': data.net_profit,
                            'outstanding-dues': data.outstanding_dues
                        };

                        Object.keys(elements).forEach(id => {
                            const element = document.getElementById(id);
                            if (element) {
                                element.textContent = formatCurrency(elements[id]);
                            }
                        });
                    }
                } else {
                    throw new Error(result.message || 'Failed to load financial summary');
                }
            } catch (error) {
                console.error('Error loading financial summary:', error);
                const financialSummary = document.getElementById('financial-summary');
                if (financialSummary) {
                    financialSummary.innerHTML = '<div class="text-center">Error loading financial data</div>';
                }
            }
        }



        // Initialize charts with dynamic data
        function initializeCharts() {
            updateChartData('last_7_days');
        }

        // Update chart data from API
        async function updateChartData(period) {
            try {
                const response = await fetch("{{ route('sales-chart') }}?period=" + encodeURIComponent(period), {
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': window.csrfToken || '',
                        'Accept': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const result = await response.json();

                if (result.success) {
                    const ctx = document.getElementById('salesChart');
                    if (!ctx) {
                        console.warn('Canvas element with id "salesChart" not found.');
                        return;
                    }

                    // Destroy existing chart if it exists
                    if (window.salesChartInstance) {
                        window.salesChartInstance.destroy();
                    }

                    const labels = result.data.map(item => item.label);
                    const values = result.data.map(item => item.value);

                    window.salesChartInstance = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: labels,
                            datasets: [{
                                label: 'Sales',
                                data: values,
                                borderColor: '#667eea',
                                backgroundColor: 'rgba(102, 126, 234, 0.1)',
                                borderWidth: 3,
                                fill: true,
                                tension: 0.4,
                                pointBackgroundColor: '#667eea',
                                pointBorderColor: '#fff',
                                pointBorderWidth: 2,
                                pointRadius: 6,
                                pointHoverRadius: 8
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    display: false
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    grid: {
                                        color: '#f1f5f9'
                                    },
                                    ticks: {
                                        callback: value => formatCurrency(value)
                                    }
                                },
                                x: {
                                    grid: {
                                        display: false
                                    }
                                }
                            }
                        }
                    });
                } else {
                    throw new Error(result.message || 'Failed to load chart data');
                }
            } catch (error) {
                console.error('Error updating chart:', error);
            }
        }

        // Utility functions
        function formatCurrency(amount) {
            return new Intl.NumberFormat('en-US', {
                style: 'currency',
                currency: 'BDT'
            }).format(amount || 0);
        }

        function formatDate(dateString) {
            return new Date(dateString).toLocaleDateString('en-US', {
                year: 'numeric',
                month: 'short',
                day: 'numeric'
            });
        }

        function updateGrowthIndicator(elementId, growth) {
            const element = document.getElementById(elementId);
            if (element) {
                const isPositive = growth >= 0;
                const icon = isPositive ? 'fas fa-arrow-up' : 'fas fa-arrow-down';
                const className = isPositive ? 'positive' : 'negative';

                element.className = `stat-change ${className}`;
                element.innerHTML = `<i class="${icon}"></i> ${Math.abs(growth)}%`;
            }
        }

        function animateNumbers() {
            const numbers = document.querySelectorAll('.stat-info h3');
            numbers.forEach(number => {
                if (number.textContent !== 'Error') {
                    number.style.opacity = '0';
                    setTimeout(() => {
                        number.style.transition = 'opacity 0.5s ease';
                        number.style.opacity = '1';
                    }, 100);
                }
            });
        }

        function showLoadingStates() {
            const loadingElements = [
                '#total-sales',
                '#total-products',
                '#total-customers',
                '#monthly-revenue'
            ];

            loadingElements.forEach(selector => {
                const element = document.querySelector(selector);
                if (element) {
                    element.innerHTML = '<div class="loading"></div>';
                }
            });
        }

        function showErrorInElement(elementId, message) {
            const element = document.getElementById(elementId);
            if (element) {
                element.textContent = message;
                element.style.color = '#dc2626';
            }
        }

        function showErrorMessage(message) {
            console.error(message);
            // You can implement a toast notification system here
        }

        function setupResponsiveBehavior() {
            // Handle window resize
            window.addEventListener('resize', function() {
                if (window.salesChartInstance) {
                    window.salesChartInstance.resize();
                }
            });

            // Close sidebar on mobile when clicking outside
            document.addEventListener('click', function(e) {
                const sidebar = document.querySelector('.sidebar');
                const sidebarToggle = document.querySelector('.sidebar-toggle');

                if (window.innerWidth <= 768 &&
                    !sidebar.contains(e.target) &&
                    !sidebarToggle.contains(e.target)) {
                    sidebar.classList.remove('active');
                }
            });
        }

        // Export functions for potential use
        window.DashboardAPI = {
            loadStatsData,
            loadRecentSales,
            loadTopProducts,
            loadLowStockAlerts,
            loadRecentActivities,
            loadFinancialSummary,
            formatCurrency,
            formatDate
        };
    </script>
@endpush

@push('styles')
    <style>
        .text-center {
            text-align: center;
        }

        .search-results {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 0.5rem;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            max-height: 300px;
            overflow-y: auto;
            z-index: 1000;
            display: none;
        }

        .search-result-item {
            padding: 0.75rem;
            border-bottom: 1px solid #f1f5f9;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .search-result-item:hover {
            background-color: #f8fafc;
        }

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

        .search-result-type {
            font-size: 0.75rem;
            color: #64748b;
            text-transform: uppercase;
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        .search-result-title {
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 0.25rem;
        }

        .search-result-subtitle {
            font-size: 0.875rem;
            color: #64748b;
        }

        /* Loading animation */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        // Additional configuration if needed
        console.log('Dashboard with 100% dynamic data loaded');
    </script>
@endpush