@extends('layouts.main')

@section('content')
<main id="main" class="main">

<div class="pagetitle">
  <h1>Dashboard</h1>
  <nav>
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="/">Home</a></li>
      <li class="breadcrumb-item active">Dashboard</li>
    </ol>
  </nav>
</div><!-- End Page Title -->

<section class="section dashboard">
  <div class="row">
    <!-- Left side columns -->
    <div class="col-lg-8">
      <div class="row">
        <!-- Revenue Card -->
        <div class="col-xxl-4 col-md-6">
          <div class="card info-card revenue-card">
            <div class="card-body">
              <h5 class="card-title">Income <span>| This Month</span></h5>
              <div class="d-flex align-items-center">
                <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                  <i class="bi bi-currency-dollar"></i>
                </div>
                <div class="ps-3">
                  <h6 id="monthly-income">Tsh 0</h6>
                  <span class="text-success small pt-1 fw-bold" id="income-change">0%</span>
                  <span class="text-muted small pt-2 ps-1">from last month</span>
                </div>
              </div>
            </div>
          </div>
        </div><!-- End Revenue Card -->

        <!-- Expenses Card -->
        <div class="col-xxl-4 col-md-6">
          <div class="card info-card expenses-card">
            <div class="card-body">
              <h5 class="card-title">Expenses <span>| This Month</span></h5>
              <div class="d-flex align-items-center">
                <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                  <i class="bi bi-currency-dollar"></i>
                </div>
                <div class="ps-3">
                  <h6 id="monthly-expenses">Tsh 0</h6>
                  <span class="text-danger small pt-1 fw-bold" id="expenses-change">0%</span>
                  <span class="text-muted small pt-2 ps-1">from last month</span>
                </div>
              </div>
            </div>
          </div>
        </div><!-- End Expenses Card -->

        <!-- Profit Card -->
        <div class="col-xxl-4 col-md-6">
          <div class="card info-card profit-card">
            <div class="card-body">
              <h5 class="card-title">Profit <span>| This Month</span></h5>
              <div class="d-flex align-items-center">
                <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                  <i class="bi bi-graph-up"></i>
                </div>
                <div class="ps-3">
                  <h6 id="monthly-profit">Tsh 0</h6>
                  <span class="text-success small pt-1 fw-bold" id="profit-change">0%</span>
                  <span class="text-muted small pt-2 ps-1">from last month</span>
                </div>
              </div>
            </div>
          </div>
        </div><!-- End Profit Card -->

        <!-- Financial Trends Chart -->
        <div class="col-12">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Financial Trends</h5>
              <div id="financial-trends-chart" style="min-height: 400px;"></div>
            </div>
          </div>
        </div><!-- End Financial Trends Chart -->

        <!-- Expense Breakdown Chart -->
        <div class="col-12 col-lg-6">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Expense Breakdown</h5>
              <div id="expense-breakdown-chart" style="min-height: 350px;"></div>
            </div>
          </div>
        </div><!-- End Expense Breakdown Chart -->

        <!-- Asset Distribution Chart -->
        <div class="col-12 col-lg-6">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Asset Distribution</h5>
              <div id="asset-distribution-chart" style="min-height: 350px;"></div>
            </div>
          </div>
        </div><!-- End Asset Distribution Chart -->
      </div>
    </div><!-- End Left side columns -->

    <!-- Right side columns -->
    <div class="col-lg-4">
      <!-- Recent Transactions -->
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Recent Transactions</h5>
          <div class="activity" id="recent-transactions">
            <div class="text-center py-4">
              <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
            </div>
          </div>
        </div>
      </div><!-- End Recent Transactions -->

      <!-- Top Performing Assets -->
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Top Performing Assets</h5>
          <div id="top-assets">
            <div class="text-center py-4">
              <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
            </div>
          </div>
        </div>
      </div><!-- End Top Performing Assets -->
    </div><!-- End Right side columns -->
  </div>
</section>

</main><!-- End #main -->

<!-- Include ApexCharts -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const token = localStorage.getItem('token');
    if (!token) {
        window.location.href = "/";
    }

    // Use Laravel's env('APP_URL') for API base
    const API_BASE = "{{ env('APP_URL') }}";

    // Fetch dashboard data
    fetch(API_BASE + 'api/dashboard', {
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        if (!data.success) {
            throw new Error(data.message || 'Failed to load dashboard data');
        }
        
        // Update metrics
        const metrics = data.data.metrics;
        document.getElementById('monthly-income').textContent = 'Tsh ' + metrics.monthly_income.toLocaleString();
        document.getElementById('monthly-expenses').textContent = 'Tsh ' + metrics.monthly_expenses.toLocaleString();
        document.getElementById('monthly-profit').textContent = 'Tsh ' + metrics.monthly_profit.toLocaleString();
        
        // Update percentage changes
        updatePercentageChange('income-change', metrics.income_change);
        updatePercentageChange('expenses-change', metrics.expenses_change);
        updatePercentageChange('profit-change', metrics.profit_change);
        
        // Render charts
        renderFinancialTrendsChart(data.data.charts.monthly_financials);
        renderExpenseBreakdownChart(data.data.charts.expense_breakdown);
        renderAssetDistributionChart(data.data.charts.asset_status, data.data.charts.assets_by_component);
        
        // Render recent transactions
        renderRecentTransactions(data.data.recent_transactions);
        
        // Fetch and render asset performance
        fetchAssetPerformance();
    })
    .catch(error => {
        console.error('Error loading dashboard data:', error);
        Swal.fire({
            icon: 'error',
            title: 'Dashboard Error',
            text: error.message || 'Failed to load dashboard data',
            timer: 3000
        });
    });

    function updatePercentageChange(elementId, change) {
        const element = document.getElementById(elementId);
        if (!element) return;
        
        const absChange = Math.abs(change);
        element.textContent = `${change >= 0 ? '+' : ''}${absChange.toFixed(1)}%`;
        
        if (change > 0) {
            element.classList.add('text-success');
            element.classList.remove('text-danger');
        } else if (change < 0) {
            element.classList.add('text-danger');
            element.classList.remove('text-success');
        } else {
            element.classList.remove('text-success', 'text-danger');
        }
    }

    function fetchAssetPerformance() {
        fetch(API_BASE + 'api/dashboard/asset-performance', {
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            if (!data.success) {
                throw new Error(data.message || 'Failed to load asset performance data');
            }
            renderTopAssets(data.data.top_performing_assets, data.data.high_cost_assets);
        })
        .catch(error => {
            console.error('Error loading asset performance:', error);
            document.getElementById('top-assets').innerHTML = 
                '<div class="alert alert-danger">Failed to load asset performance data</div>';
        });
    }

    function renderFinancialTrendsChart(data) {
        try {
            // Extract data for chart
            const months = data.map(item => item.month);
            const income = data.map(item => item.income);
            const expenses = data.map(item => item.expenses);
            const profit = data.map(item => item.profit);

            // Initialize chart
            const options = {
                series: [
                    { name: 'Income', data: income },
                    { name: 'Expenses', data: expenses },
                    { name: 'Profit', data: profit }
                ],
                chart: {
                    type: 'bar',
                    height: 400,
                    stacked: false,
                    toolbar: { show: true }
                },
                plotOptions: {
                    bar: { horizontal: false, columnWidth: '55%', endingShape: 'rounded' }
                },
                dataLabels: { enabled: false },
                stroke: { show: true, width: 2, colors: ['transparent'] },
                xaxis: { categories: months },
                yaxis: { title: { text: 'Amount (Tsh)' } },
                fill: { opacity: 1 },
                tooltip: {
                    y: {
                        formatter: function(val) {
                            return 'Tsh ' + val.toLocaleString();
                        }
                    }
                },
                colors: ['#4CAF50', '#F44336', '#2196F3']
            };

            new ApexCharts(document.querySelector("#financial-trends-chart"), options).render();
        } catch (error) {
            console.error('Error rendering financial trends chart:', error);
            document.getElementById('financial-trends-chart').innerHTML = 
                '<div class="alert alert-danger">Failed to load financial trends</div>';
        }
    }

    function renderExpenseBreakdownChart(data) {
        try {
            const categories = data.map(item => item.expense_type?.name || 'Unknown');
            const amounts = data.map(item => item.total);

            const options = {
                series: amounts,
                chart: {
                    type: 'donut',
                    height: 350
                },
                labels: categories,
                colors: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'],
                responsive: [{
                    breakpoint: 480,
                    options: { chart: { width: 200 }, legend: { position: 'bottom' } }
                }],
                tooltip: {
                    y: {
                        formatter: function(val) {
                            return 'Tsh ' + val.toLocaleString();
                        }
                    }
                }
            };

            new ApexCharts(document.querySelector("#expense-breakdown-chart"), options).render();
        } catch (error) {
            console.error('Error rendering expense breakdown chart:', error);
            document.getElementById('expense-breakdown-chart').innerHTML = 
                '<div class="alert alert-danger">Failed to load expense breakdown</div>';
        }
    }

    function renderAssetDistributionChart(statusData, componentData) {
        try {
            // Status pie chart
            const statusOptions = {
                series: [statusData.active, statusData.inactive],
                chart: {
                    type: 'pie',
                    height: 350
                },
                labels: ['Active Assets', 'Inactive Assets'],
                colors: ['#4CAF50', '#F44336'],
                responsive: [{
                    breakpoint: 480,
                    options: { chart: { width: 200 }, legend: { position: 'bottom' } }
                }]
            };

            new ApexCharts(document.querySelector("#asset-distribution-chart"), statusOptions).render();
        } catch (error) {
            console.error('Error rendering asset distribution chart:', error);
            document.getElementById('asset-distribution-chart').innerHTML = 
                '<div class="alert alert-danger">Failed to load asset distribution</div>';
        }
    }

    function renderRecentTransactions(transactions) {
        try {
            const container = document.getElementById('recent-transactions');
            container.innerHTML = '';
            
            if (transactions.length === 0) {
                container.innerHTML = '<div class="text-center py-3 text-muted">No recent transactions</div>';
                return;
            }
            
            transactions.forEach(transaction => {
                const icon = transaction.transaction_type === 'income' ? 
                    'bi-arrow-up-circle text-success' : 'bi-arrow-down-circle text-danger';
                const amountClass = transaction.transaction_type === 'income' ? 'text-success' : 'text-danger';
                
                const transactionEl = document.createElement('div');
                transactionEl.className = 'activity-item d-flex';
                transactionEl.innerHTML = `
                    <div class="activite-label">${new Date(transaction.transaction_date).toLocaleDateString()}</div>
                    <i class="bi ${icon} activity-icon"></i>
                    <div class="activity-content">
                        <strong class="${amountClass}">Tsh ${transaction.amount.toLocaleString()}</strong> - 
                        ${transaction.asset?.name || 'Unknown Asset'}<br>
                        <small class="text-muted">${transaction.description || 'No description'}</small>
                    </div>
                `;
                container.appendChild(transactionEl);
            });
        } catch (error) {
            console.error('Error rendering recent transactions:', error);
            document.getElementById('recent-transactions').innerHTML = 
                '<div class="alert alert-danger">Failed to load recent transactions</div>';
        }
    }

    function renderTopAssets(topAssets, costlyAssets) {
        try {
            const container = document.getElementById('top-assets');
            container.innerHTML = '';
            
            // Top performing assets
            const topSection = document.createElement('div');
            topSection.innerHTML = '<h6 class="mt-3">Highest Income Generators</h6>';
            container.appendChild(topSection);
            
            if (topAssets.length === 0) {
                container.appendChild(createNoDataMessage());
            } else {
                topAssets.forEach((asset, index) => {
                    const assetEl = document.createElement('div');
                    assetEl.className = 'd-flex align-items-center mb-3';
                    assetEl.innerHTML = `
                        <div class="card-icon rounded-circle d-flex align-items-center justify-content-center me-3" style="background-color: #e8f5e9;">
                            <i class="bi bi-trophy${index === 0 ? '-fill text-warning' : ''}"></i>
                        </div>
                        <div>
                            <h6 class="mb-0">${asset.name}</h6>
                            <small class="text-muted">Tsh ${(asset.incomes_sum_amount || 0).toLocaleString()}</small>
                        </div>
                    `;
                    container.appendChild(assetEl);
                });
            }
            
            // High cost assets
            const costlySection = document.createElement('div');
            costlySection.innerHTML = '<h6 class="mt-4">Highest Maintenance Costs</h6>';
            container.appendChild(costlySection);
            
            if (costlyAssets.length === 0) {
                container.appendChild(createNoDataMessage());
            } else {
                costlyAssets.forEach((asset, index) => {
                    const assetEl = document.createElement('div');
                    assetEl.className = 'd-flex align-items-center mb-3';
                    assetEl.innerHTML = `
                        <div class="card-icon rounded-circle d-flex align-items-center justify-content-center me-3" style="background-color: #ffebee;">
                            <i class="bi bi-exclamation-triangle${index === 0 ? '-fill text-danger' : ''}"></i>
                        </div>
                        <div>
                            <h6 class="mb-0">${asset.name}</h6>
                            <small class="text-muted">Tsh ${(asset.expenses_sum_amount || 0).toLocaleString()}</small>
                        </div>
                    `;
                    container.appendChild(assetEl);
                });
            }
        } catch (error) {
            console.error('Error rendering top assets:', error);
            container.innerHTML = '<div class="alert alert-danger">Failed to load asset performance</div>';
        }
    }

    function createNoDataMessage() {
        const msg = document.createElement('div');
        msg.className = 'text-center py-2 text-muted';
        msg.textContent = 'No data available';
        return msg;
    }
});
</script>
@endsection