@extends('business.layouts.admin')


@push('theme-script')
    <script src="{{ asset('assets/libs/apexcharts/dist/apexcharts.min.js') }}"></script>
@endpush

@section('content')
<div class="container-fluid">
    {{-- Header & Filter Section --}}
    <div class="row align-items-center mb-4">
        <div class="col">
            <h2 class="h4 mb-0 font-weight-bold text-dark">{{ __('Dashboard Overview') }}</h2>
            <p class="text-muted small mb-0">{{ __('Monitoring performance for') }} <span id="current-period-label" class="text-primary font-weight-bold">{{ ucfirst($period) }}</span></p>
        </div>
        <div class="col-auto">
            <div class="bg-white border rounded-pill p-1 d-flex shadow-sm">
                @foreach(['daily', 'weekly', 'monthly'] as $p)
                    <button type="button" data-period="{{ $p }}" 
                       class="btn btn-sm rounded-pill px-3 filter-btn {{ $period == $p ? 'btn-primary shadow-sm' : 'text-muted' }}" 
                       style="border:none; outline:none; transition: all 0.3s ease;">
                       {{ ucfirst($p) }}
                    </button>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Stats Grid --}}
    <div class="row">
        @php
            $cards = [
                ['title' => 'Total Leads', 'key' => 'total_leads', 'icon' => 'ti-target', 'color' => 'primary', 'bg' => 'rgba(94, 114, 228, 0.1)'],
                ['title' => 'Active Leads', 'key' => 'active_leads', 'icon' => 'ti-bolt', 'color' => 'info', 'bg' => 'rgba(17, 205, 239, 0.1)'],
                ['title' => 'Won Leads', 'key' => 'won_leads', 'icon' => 'ti-trophy', 'color' => 'success', 'bg' => 'rgba(45, 206, 137, 0.1)'],
                ['title' => 'Lost Leads', 'key' => 'lost_leads', 'icon' => 'ti-circle-x', 'color' => 'danger', 'bg' => 'rgba(245, 54, 92, 0.1)'],
                ['title' => 'Follow-up Due', 'key' => 'followup_due', 'icon' => 'ti-calendar-event', 'color' => 'warning', 'bg' => 'rgba(251, 99, 64, 0.1)'],
                ['title' => 'Unassigned', 'key' => 'unassigned_leads', 'icon' => 'ti-user-exclamation', 'color' => 'dark', 'bg' => 'rgba(50, 50, 93, 0.1)'],
            ];
        @endphp

        @foreach($cards as $card)
            <div class="col-xl-4 col-md-6 mb-4">
                <div class="card border-0 shadow-sm h-100 overflow-hidden" style="border-radius: 15px;">
                    <div class="card-body p-4">
                        <div class="row align-items-center">
                            <div class="col">
                                <h6 class="text-uppercase text-muted ls-1 mb-1 font-weight-bold" style="font-size: 0.75rem;">
                                    {{ __($card['title']) }}
                                </h6>
                                <span class="h2 font-weight-bold mb-0 text-dark" id="stat-{{ $card['key'] }}">
                                    {{ number_format($stats[$card['key']]['count'] ?? 0) }}
                                </span>
                                
                                <div class="mt-2 mb-0 text-sm" id="growth-container-{{ $card['key'] }}" style="{{ isset($stats[$card['key']]['growth']) ? '' : 'display:none' }}">
                                    <span class="badge rounded-pill" id="growth-badge-{{ $card['key'] }}">
                                        <i class="ti" id="growth-icon-{{ $card['key'] }}"></i>
                                        <span id="growth-value-{{ $card['key'] }}">{{ abs($stats[$card['key']]['growth'] ?? 0) }}%</span>
                                    </span>
                                    <span class="text-nowrap text-muted small ml-1">vs prev</span>
                                </div>
                            </div>
                            <div class="col-auto">
                                <div class="icon icon-shape text-{{ $card['color'] }} rounded-circle shadow-sm d-flex align-items-center justify-content-center" 
                                     style="width: 50px; height: 50px; background: {{ $card['bg'] }}; font-size: 1.5rem;">
                                    <i class="ti {{ $card['icon'] }}"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Main Revenue Chart --}}
    <div class="row mt-2">
        <div class="col-12">
            <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                <div class="card-header bg-transparent border-0 pt-4 px-4 d-flex justify-content-between">
                    <div>
                        <h6 class="text-uppercase text-muted ls-1 mb-1 font-weight-bold">{{ __('Financial Analytics') }}</h6>
                        <h5 class="h3 mb-0">{{ __('Total Revenue Trend') }}</h5>
                    </div>
                    <div id="chart-loader" class="spinner-border spinner-border-sm text-primary" role="status" style="display: none;"></div>
                </div>
                <div class="card-body px-4 pb-4">
                    <div id="chart-revenue" style="min-height: 350px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .bg-light-success { background-color: rgba(45, 206, 137, 0.15) !important; color: #2dce89 !important; }
    .bg-light-danger { background-color: rgba(245, 54, 92, 0.15) !important; color: #f5365c !important; }
    .ls-1 { letter-spacing: 1px; }
    .card { transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid #f1f1f1 !important; }
    .card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important; }
    .filter-btn.btn-primary { box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); }
</style>
@endsection

@push('script-page')
<script>
    (function() {
        let revenueChart;
        const cachePrefix = 'dash_cache_';

        // 1. Initialize Chart
        function initChart() {
            const options = {
                series: [{
                    name: 'Revenue',
                    data: {!! json_encode($revenue['values'] ?? []) !!}
                }],
                chart: {
                    type: 'area',
                    height: 350,
                    toolbar: { show: false },
                    fontFamily: 'inherit',
                    dropShadow: { enabled: true, top: 10, left: 0, blur: 3, color: '#3ec9d6', opacity: 0.1 }
                },
                colors: ['#3ec9d6'],
                fill: {
                    type: 'gradient',
                    gradient: { shadeIntensity: 1, opacityFrom: 0.45, opacityTo: 0.05, stops: [20, 100] }
                },
                dataLabels: { enabled: false },
                stroke: { width: 4, curve: 'smooth' },
                grid: { borderColor: '#f1f1f1', strokeDashArray: 4 },
                xaxis: {
                    categories: {!! json_encode($revenue['labels'] ?? []) !!},
                    labels: { style: { colors: '#adb5bd', fontSize: '12px' } }
                },
                yaxis: {
                    labels: {
                        style: { colors: '#adb5bd', fontSize: '12px' },
                        formatter: function (value) { return "₹" + value.toLocaleString(); }
                    }
                },
                tooltip: { theme: 'light' }
            };

            revenueChart = new ApexCharts(document.querySelector("#chart-revenue"), options);
            revenueChart.render();
        }

        // 2. Update the UI with new data
        function updateDashboardUI(data, period) {
            // Update Period Labels
            document.getElementById('current-period-label').innerText = period.charAt(0).toUpperCase() + period.slice(1);

            // Update Stat Cards
            Object.keys(data.stats).forEach(key => {
                const countEl = document.getElementById(`stat-${key}`);
                if (countEl) {
                    countEl.innerText = Number(data.stats[key].count).toLocaleString();
                }

                // Update Growth Badge
                const growthVal = data.stats[key].growth;
                const container = document.getElementById(`growth-container-${key}`);
                if (container && growthVal !== null) {
                    container.style.display = 'block';
                    const badge = document.getElementById(`growth-badge-${key}`);
                    const icon = document.getElementById(`growth-icon-${key}`);
                    const valText = document.getElementById(`growth-value-${key}`);

                    valText.innerText = Math.abs(growthVal) + '%';
                    if (growthVal >= 0) {
                        badge.className = 'badge rounded-pill bg-light-success';
                        icon.className = 'ti ti-arrow-up';
                    } else {
                        badge.className = 'badge rounded-pill bg-light-danger';
                        icon.className = 'ti ti-arrow-down';
                    }
                }
            });

            // Update Chart
            revenueChart.updateOptions({
                xaxis: { categories: data.revenue.labels }
            });
            revenueChart.updateSeries([{
                data: data.revenue.values
            }]);
        }

        // 3. Fetch Data with Session Caching
        async function handlePeriodChange(period) {
            const cacheKey = cachePrefix + period;
            const loader = document.getElementById('chart-loader');
            
            // Try cache first
            const cached = sessionStorage.getItem(cacheKey);
            if (cached) {
                updateDashboardUI(JSON.parse(cached), period);
                return;
            }

            // Fetch from Server
            loader.style.display = 'block';
            try {
                const url = new URL(window.location.href);
                url.searchParams.set('period', period);

                const response = await fetch(url, {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                });
                const data = await response.json();

                // Save to cache & Update UI
                sessionStorage.setItem(cacheKey, JSON.stringify(data));
                updateDashboardUI(data, period);
            } catch (e) {
                console.error("Dashboard Fetch Error:", e);
            } finally {
                loader.style.display = 'none';
            }
        }

        // 4. Event Listeners
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const period = this.getAttribute('data-period');
                
                // Active Button UI Toggle
                document.querySelectorAll('.filter-btn').forEach(b => {
                    b.classList.remove('btn-primary', 'shadow-sm');
                    b.classList.add('text-muted');
                });
                this.classList.remove('text-muted');
                this.classList.add('btn-primary', 'shadow-sm');

                handlePeriodChange(period);
            });
        });

        // Initialize on load
        initChart();
    })();
</script>
@endpush