@extends('layouts.master')
@section('title') @lang('translation.dashboard') @endsection

@section('breadcrumb')
@component('components.breadcrumb')
@slot('title')
@lang('translation.dashboard')
@endslot
@endcomponent
@endsection

@section('content')

<div class="row project-wrapper">
    <div class="col-xl-4">
        <div class="row">
            <div class="col-12">
                <!-- First card -->
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title fs-1 bg-success rounded-circle">
                                    <i data-feather="briefcase" style="color: #fff;"></i>
                                </span>
                            </div>
                            <div class="flex-grow-1 overflow-hidden ms-3">
                                <h5 class="text-uppercase fw-medium text-muted text-truncate mb-3">Total Investment <i class="ri-information-line text-warning" id="tooltip-icon" data-bs-toggle="tooltip" data-bs-placement="top" title="Sum of all approved investments from all investors, includes any capital withdraws as well."></i></h5>
                                <div class="d-flex align-items-center mb-3">
                                    <h4 class="fs-4 flex-grow-1 mb-0">

                                        USD <span>{{ $totalInvestment }}</span>
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 mb-3">
                <!-- First card -->
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title fs-1 bg-success rounded-circle">
                                <i class="las la-hand-holding-usd"></i>
                                </span>
                            </div>
                            <div class="flex-grow-1 overflow-hidden ms-3">
                                <h5 class="text-uppercase fw-medium text-muted text-truncate mb-3">CURRENT INVESTMENT <i class="ri-information-line text-warning" id="tooltip-icon" data-bs-toggle="tooltip" data-bs-placement="top" title="Sum of all approved investments, except capital withdrawals, except pending capital withdraw requests."></i></h5>
                                <div class="d-flex align-items-center mb-3">

                                    <h4 class="fs-4 flex-grow-1 mb-0">
                                        USD <span>{{ $currentInvestment }}</span>
                                    </h4>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 mb-3">
                <div class="card card-animate h-100">
                    <div class="card-body p-3">
                        <div class="row h-100">
                            <!-- Left Column -->
                            <div class="col-md-8 d-flex align-items-center">
                                <div class="flex-grow-1 overflow-hidden ms-3">
                                    <p class="text-uppercase fw-medium text-muted text-truncate" style="margin-bottom: 100px;">
                                    TOTAL PROFIT <i class="ri-information-line text-warning" id="tooltip-icon" data-bs-toggle="tooltip" data-bs-placement="Total profit earned ever, includes profit withdraws as well."></i>
                                    </p>
                                    <div class="d-flex justify-content-end">
                                        <h4 class="fs-4 flex-grow-1 mb-0">
                                            USD <span>{{ $calculatedProfit }}</span>
                                        </h4>
                                    </div>
                                </div>
                            </div>

                            <!-- Right Column: Full Height SVG -->
                            <div class="col-md-4 d-flex p-0 align-items-end">
                                <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none"
                                    xmlns="http://www.w3.org/2000/svg" style="flex: 1;">
                                    <!-- Tall bars -->
                                    <rect x="10" y="10" width="6" height="90" fill="#6B6F3A" />
                                    <rect x="18" y="15" width="6" height="85" fill="#E4E7C7" />

                                    <!-- Medium bars -->
                                    <rect x="34" y="35" width="6" height="65" fill="#6B6F3A" />
                                    <rect x="42" y="25" width="6" height="75" fill="#E4E7C7" />

                                    <!-- Short bars -->
                                    <rect x="58" y="75" width="6" height="25" fill="#6B6F3A" />
                                    <rect x="66" y="80" width="6" height="20" fill="#E4E7C7" />
                                </svg>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- end col -->

    <div class="col-xl-8">
        <div class="row">
            <div class="col-md-6">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <p class="fw-medium text-muted" style="margin-bottom: 147px;">CAPITAL WITHDRAWAL APPROVED <i class="ri-information-line text-warning" id="tooltip-icon" data-bs-toggle="tooltip" data-bs-placement="top" title="Sum of all capital withdrawal approved."></i></p>
                                <h2 class="mt-4 ff-secondary cfs-22 fw-semibold text-primary">
                                    USD <span>{{ $capitalWithdrawal }}</span>
                                </h2>
                            </div>
                            <div>
                                <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title fs-2 bg-success rounded-circle">
                                        <i class="lab la la-receipt"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <p class="fw-medium text-muted" style="margin-bottom: 147px;">CAPITAL WITHDRAWAL PENDING <i class="ri-information-line text-warning" id="tooltip-icon" data-bs-toggle="tooltip" data-bs-placement="top" title="Sum of all capital withdrawal pending."></i></p>
                                <h2 class="mt-4 ff-secondary cfs-22 fw-semibold text-success">
                                    USD <span>{{ $pendingCapitalWithdrawal }}</span>
                                </h2>
                            </div>
                            <div>
                                <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title fs-2 bg-warning rounded-circle">
                                    <i class="lab la la-receipt"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-md-6">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <p class="fw-medium text-muted" style="margin-bottom: 108px;">PROFIT WITHDRAWAL APPROVED <i class="ri-information-line text-warning" id="tooltip-icon" data-bs-toggle="tooltip" data-bs-placement="top" title="Sum of all profit withdrawal approved."></i></p>
                                <h2 class="mt-4 ff-secondary cfs-22 fw-semibold text-primary">
                                    USD <span>{{ $profitWithdrawal }}</span>
                                </h2>
                            </div>
                            <div>
                                <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title fs-2 bg-success rounded-circle">
                                    <i class="lab la la-receipt"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="col-md-6">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <p class="fw-medium text-muted" style="margin-bottom: 108px;">PROFIT WITHDRAWAL PENDING <i class="ri-information-line text-warning" id="tooltip-icon" data-bs-toggle="tooltip" data-bs-placement="top" title="Sum of all pending profit withdrawal."></i></p>
                                <h2 class="mt-4 ff-secondary cfs-22 fw-semibold text-success">
                                    USD <span>{{ $profitWithdrawalPending }}</span>
                                </h2>
                            </div>
                            <div>
                                <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title fs-2 bg-warning rounded-circle">
                                    <i class="lab la la-receipt"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- end col -->

    <div class="col-xxl-12 mb-4">
        <div class="card card-height-100">
            <div class="card-header align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">DAILY EARNINGS <i class="ri-information-line text-warning" id="tooltip-icon" data-bs-toggle="tooltip" data-bs-placement="top" title="Daily Profits from sheet and Daily Referral Bonus from sheet."></i></h4>
                <div class="flex-shrink-0">
                    <h6 class="fw-semibold text-uppercase" style="border: none; border-bottom: 2px solid darkgreen; color: darkgreen; background: transparent; cursor: default;">
                        Weekly
                    </h6>
                </div>
                <div class="flex-shrink-0 d-none">
                    <div class="dropdown card-header-dropdown">
                        <a class="text-reset dropdown-btn" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="fw-semibold text-uppercase fs-12">Sort by: </span>
                            <span class="text-muted selected-range">Current Month</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <a class="dropdown-item" href="#" data-filter="Last Week">Last Week</a>
                            <a class="dropdown-item" href="#" data-filter="Last Month">Last Month</a>
                            <a class="dropdown-item" href="#" data-filter="Current Month">Current Month</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-body px-2">
                <div id="revenue-expenses-charts"
                    class="apex-charts"
                    style="white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;"
                    data-profits='@json($dailyProfit)'
                    data-bonuses='@json($dailyReferralBonus)'>
                </div>
            </div>

        </div>
    </div>

</div><!-- end row -->



@endsection
@section('script')
<!-- apexcharts -->
<script src="{{ URL::asset('build/libs/apexcharts/apexcharts.min.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/dashboard-crm.init.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/dashboard-projects.init.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const container = document.querySelector('#revenue-expenses-charts');
        if (!container) return;
        let chart = null;

        // Turn “YYYY-MM-DD” into valid ms-timestamp or category label
        function normalizeToUTC(dateStr) {
            // No longer used as datetime axis; kept in case you revert
            const [y, m, d] = dateStr.split('-').map(Number);
            return Date.UTC(y, m - 1, d);
        }

        // Always pick a “highlight date”:
        // - the latest date with profit or bonus > 0, or
        // - the last date in the list
        function getHighlightDate(dates, profits = [], bonuses = []) {
            for (let i = dates.length - 1; i >= 0; i--) {
                if ((profits[i] ?? 0) > 0 || (bonuses[i] ?? 0) > 0) {
                    return dates[i];
                }
            }
            return dates[dates.length - 1];
        }

        function renderChart(dates, profits = [], bonuses = []) {
            if (!Array.isArray(dates) || dates.length === 0) {
                chart?.destroy?.();
                return;
            }

            // Convert to numeric arrays with default 0 values
            const profitArr = dates.map((_, i) => Number(profits[i] ?? 0));
            const bonusArr = dates.map((_, i) => Number(bonuses[i] ?? 0));

            const highlightDate = getHighlightDate(dates, profitArr, bonusArr);
            const idx = dates.indexOf(highlightDate);
            const profitVal = Number(profitArr[idx] ?? 0);
            const bonusVal = Number(bonusArr[idx] ?? 0);

            const profitSeries = dates.map((d, i) => ({
                x: new Date(d).getTime(),
                y: Number(profits[i] ?? 0)
            }));
            const bonusSeries = dates.map((d, i) => ({
                x: new Date(d).getTime(),
                y: Number(bonuses[i] ?? 0)
            }));
            console.log('Chart dates:', dates.map(d => new Date(d).toISOString()));

            const annotations = {
                xaxis: [{
                    x: highlightDate,
                    borderColor: '#000',
                    strokeDashArray: 4,
                    label: {
                        show: false
                    }
                }],
                points: [{
                        x: highlightDate,
                        y: profitVal,
                        marker: {
                            size: 6,
                            fillColor: '#34c38f',
                            strokeColor: '#fff',
                            radius: 2
                        },
                        label: {
                            borderColor: '#34c38f',
                            offsetY: -10,
                            style: {
                                color: '#fff',
                                background: '#34c38f'
                            },
                            text: profitVal.toFixed(2)
                        }
                    },
                    {
                        x: highlightDate,
                        y: bonusVal,
                        marker: {
                            size: 6,
                            fillColor: '#f46a6a',
                            strokeColor: '#fff',
                            radius: 2
                        },
                        label: {
                            borderColor: '#f46a6a',
                            offsetY: 10,
                            style: {
                                color: '#fff',
                                background: '#f46a6a'
                            },
                            text: bonusVal.toFixed(2)
                        }
                    }
                ]
            };

            const options = {
                chart: {
                    type: 'line',
                    id: 'earningsChart',
                    height: 350,
                    toolbar: {
                        show: false
                    },
                    zoom: {
                        enabled: false
                    },
                    animations: {
                        enabled: true,
                        speed: 300
                    }
                },
                series: [{
                        name: 'Daily Profit',
                        data: profitSeries
                    },
                    {
                        name: 'Daily Bonus',
                        data: bonusSeries
                    }
                ],
                legend: {
                    show: true,
                    position: 'bottom',
                    horizontalAlign: 'center',
                    floating: false,
                    labels: {
                        useSeriesColors: true
                    }
                },
                xaxis: {
                    type: 'datetime',
                    labels: {
                        show: true,
                        format: 'dd-MMM',
                        datetimeUTC: false,
                        rotate: 0,
                        offsetX: 10
                    },
                    min: new Date(dates[0]).getTime(),
                    max: new Date(dates[dates.length - 1]).getTime(),
                    tickPlacement: 'on',
                    // REMOVE tickAmount
                },
                stroke: {
                    curve: 'straight',
                    width: 2
                },
                markers: {
                    size: 4, // Size of the dots
                    colors: ['#006400'], // Optional: color of dots (example: dark green)
                    strokeWidth: 2,
                    strokeColors: '#fff', // Optional: white border around dots
                    hover: {
                        size: 6 // Slightly larger dot on hover
                    }
                },
                colors: ['#34c38f', '#2F376BFF'],
                tooltip: {
                    shared: true,
                    x: {
                        formatter: ts => {
                            const d = new Date(ts);
                            return `${String(d.getDate()).padStart(2, '0')} ${d
                      .toLocaleString('default', { month: 'short' })}`;
                        }
                    }
                },
                yaxis: {
                    show: true,
                    labels: {
                        show: false
                    },
                    axisBorder: {
                        show: true,
                        color: '#e0e0e0'
                    },
                    axisTicks: {
                        show: false
                    }
                },

                noData: {
                    text: 'No earnings for this period',
                    align: 'center',
                    verticalAlign: 'middle',
                    style: {
                        color: '#888',
                        fontSize: '14px'
                    }
                },
                annotations
            };

            chart?.destroy?.();
            chart = new ApexCharts(container, options);
            chart.render().then(() => {
                console.log('Chart rendered with', dates.length, 'points');
            });
        }

        function fetchAndDraw(range = 'Last Week') {
            fetch(`/admin/dashboard/earnings-data?filter=${encodeURIComponent(range)}`)
                .then(r => r.json())
                .then(data => {
                    console.log('Fetched:', data);
                    renderChart(data.dates, data.profits, data.bonuses);
                    document.querySelector('.selected-range').textContent = range;
                })
                .catch(err => {
                    console.error('Fetch error:', err);
                    renderChart([], [], []);
                });
        }

        // Handle visibility edge cases (e.g. hidden tab/container)
        window.addEventListener('resize', () => {
            chart?.render?.();
        });

        // Initial load
        fetchAndDraw();

        document.querySelectorAll('.dropdown-menu .dropdown-item')
            .forEach(item => item.addEventListener('click', e => {
                e.preventDefault();
                fetchAndDraw(item.dataset.filter);
            }));
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const investmentChart = new ApexCharts(document.querySelector("#investment-bar-chart"), {
            chart: {
                type: 'bar',
                height: 100,
                sparkline: {
                    enabled: true
                }
            },
            colors: ['#006400', '#90ee90'],
            series: [{
                name: 'Investment',
                data: [{
                    {
                        $totalInvestment
                    }
                }, {
                    {
                        $totalInvestment * 0.8
                    }
                }]
            }],
            tooltip: {
                enabled: true,
                y: {
                    formatter: function(val) {
                        return "$" + val.toLocaleString();
                    }
                }
            }
        });

        investmentChart.render();
    });
</script>

@endsection