@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="Your deposit amount that has been approved and added your account."></i></h5>
                                <div class="d-flex align-items-center mb-3">
                                    <h4 class="fs-4 flex-grow-1 mb-0">
                                        <!-- USD <span class="counter-value" data-target="{{ $capital }}">0</span> -->
                                        USD <span>{{ $capital }}</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="lab las la-balance-scale"></i>
                                </span>
                            </div>
                            <div class="flex-grow-1 overflow-hidden ms-3">
                                <h5 class="text-uppercase fw-medium text-muted text-truncate mb-3">Balance <i class="ri-information-line text-warning" id="tooltip-icon" data-bs-toggle="tooltip" data-bs-placement="top" title="Your investment remaining after deducting any losses from your total investment."></i></h5>
                                <div class="d-flex align-items-center mb-3">

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

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 mb-3">
                <!-- Second card -->
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <!-- Left Column -->
                            <div class="col-md-8">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1 overflow-hidden ms-3">
                                        <p class="text-uppercase fw-medium text-muted text-truncate mb-5">
                                            Total Investment Ever <i class="ri-information-line text-warning" id="tooltip-icon" data-bs-toggle="tooltip" data-bs-placement="top" title="Capital deposited ever (including amount that is currently invested and that has been withdraw)"></i>
                                        </p>
                                        <div class="d-flex justify-content-end">
                                            <h4 class="fs-4 flex-grow-1 mb-0">
                                                USD <span>{{ $totalInvestment }}</span>
                                            </h4>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Right Column: ApexChart -->
                            <div class="col-md-4">
                                <!-- <div id="investment-bar-chart" style="height: 100px;"></div> -->
                                <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                                    <!-- Bar 1 -->
                                    <rect x="10" y="10" width="6" height="80" fill="#6B6F3A" />
                                    <!-- Bar 2 -->
                                    <rect x="18" y="10" width="6" height="80" fill="#E4E7C7" />
                                    <!-- Bar 3 -->
                                    <rect x="34" y="30" width="6" height="60" fill="#6B6F3A" />
                                    <!-- Bar 4 -->
                                    <rect x="42" y="20" width="6" height="70" fill="#E4E7C7" />
                                    <!-- Bar 5 -->
                                    <rect x="58" y="70" width="6" height="20" fill="#6B6F3A" />
                                    <!-- Bar 6 -->
                                    <rect x="66" y="75" width="6" height="15" fill="#E4E7C7" />
                                </svg>

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

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

    <div class="col-xl-8">
        <div class="card card-animate">
            <div class="card-body d-flex flex-column justify-content-between p-0">
                <div class="p-4 pb-3">
                    <!-- Header row -->
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h4 class="text-uppercase fw-medium text-muted mb-0">Earning <i class="ri-information-line text-warning" id="tooltip-icon" data-bs-toggle="tooltip" data-bs-placement="top" title="Your profit is calculated daily based on your investment, after deducting any losses incurred. You earn the profit and referral bonus."></i></h4>
                        <h4 class="mb-0">USD {{ $wallet}}</h4>
                    </div>

                    <!-- Horizontal divider -->
                    <hr class="my-3 text-muted" style="opacity: 0.2;" />

                    <!-- Profit and Bonus section -->
                    <div class="row text-start align-items-center mt-3 mb-3">
                        <div class="col-md-6 border-end" style="border-color: rgba(0,0,0,0.1);">
                            <div class="d-flex justify-content-center align-items-center">
                                <div class="me-3">
                                    <i class="ri-line-chart-line fs-1 text-success bg-success-subtle p-2 rounded-circle"></i>
                                </div>
                                <div>
                                    <h5 class="text-uppercase fw-medium text-muted text-truncate mb-3">Profit</h5>
                                    @php
                                    $todayValue = $capital_after_loss_today ?? 0;
                                    $yesterdayValue = $capital_after_loss_yesterday ?? 0;

                                    $percentageChange = $yesterdayValue > 0
                                    ? round((($todayValue - $yesterdayValue) / $yesterdayValue) * 100, 2)
                                    : 0;

                                    $isOverLimit = abs($percentageChange) > 100;
                                    $displayPercentage = $isOverLimit ? '>100' : abs($percentageChange);
                                    @endphp


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

                                    <span class="badge {{ $percentageChange >= 0 ? 'bg-success-subtle text-success' : 'bg-danger-subtle text-danger' }} fs-12">
                                        <i class="ri-arrow-{{ $percentageChange >= 0 ? 'up' : 'down' }}-s-line fs-13 align-middle me-1"></i>
                                        {{ $displayPercentage }}%
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="d-flex justify-content-center align-items-center">
                                <div class="me-3">
                                    <i class="ri-money-dollar-circle-line fs-1 text-success bg-success-subtle p-2 rounded-circle"></i>
                                </div>
                                <div>
                                    <h5 class="text-uppercase fw-medium text-muted text-truncate mb-3">Bonus</h5>
                                    <h4 class="fs-4 flex-grow-1 mb-2">
                                        USD <span>{{ $total_referral_bonus }}</span>
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Bottom alert without white space -->
                <div class="bg-warning-subtle text-muted small w-100 p-3 m-0 rounded-0 border-top" role="alert">
                    This is the sum of your daily profit and bonus. Want to earn bonus?
                    <a href="#" class="fw-medium text-decoration-underline text-primary">Join our referral program</a>
                </div>
            </div>
        </div>


        <div class="card card-animate">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <p class="fw-medium text-muted mb-5">TOTAL EARNING EVER <i class="ri-information-line text-warning" id="tooltip-icon" data-bs-toggle="tooltip" data-bs-placement="top" title="Total profit and bonus you have earned since joining, including the amount earned that you have withdraw"></i></p>
                        @php
                        $totalAmount = ($referral_bonus ?? 0) + ($total_profit_before_withdrawal ?? 0);
                        @endphp

                        <h2 class="mt-4 ff-secondary cfs-22 fw-semibold text-success">
                            USD <span>{{ $totalAmount }}</span>
                        </h2>
                    </div>
                    <div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title fs-2 bg-success rounded-circle">
                            <i class="las la-coins"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div><!-- end card body -->
        </div> <!-- end card-->
    </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</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-dates='@json($graph_dates)'
                    data-profits='@json($graph_profits)'
                    data-bonuses='@json($graph_referrals)'>
                </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(`/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