@extends('layout')

@section('content')
    <div class="dashboard_main-content dashboard_index-page">
        <div class="dashboard_main-header">
            <div class="dashboard_main-header_info">
                <h1 class="dashboard_main-title">{{ __('Dashboard') }}</h1>
                <p class="dashboard_main-desc">
                    {{ __('Welcome, again to manage your Events') }}
                </p>
            </div>
            <!-- <div class="dashboard_main-actions">
                <a href="#!" class="dashboard_main-btn">
                    {{ __('Quick Actions') }}
                    <img src="{{ asset('assets/images/icons/angle_' . (app()->getLocale() === 'en' ? 'right' : 'left') . '.svg') }}"
                        alt="icon" class="svg">
                </a>
            </div> -->
        </div>
        <div class="dashboard_main-body">
            <div class="overview-cards">
                <div class="overview-card">
                    <div class="overview-card-title">
                        {{ __('Total Revenue') }}
                    </div>
                    <div class="overview-card-desc">{{ getTotalRevenue() }}</div>
                </div>
                <div class="overview-card">
                    <div class="overview-card-title">
                        {{ __('Total bookings') }}
                    </div>
                    <div class="overview-card-desc">{{ countOrders() ?? __('There are no bookings yet') }}</div>
                </div>
                @if (auth()->user()->type === 'admin')
                <div class="overview-card">
                    <div class="overview-card-title">
                        {{ __('Active Vendors') }}
                    </div>
                    <div class="overview-card-desc">{{ countActiveVendors() ?? __('There are no active vendors') }}</div>
                </div>
                @endif
                <div class="overview-card">
                    <div class="overview-card-title">
                        {{ __('Active Event') }}
                    </div>
                    <div class="overview-card-desc">{{ countActiveEvents() ?? __('There are no active events') }}</div>
                </div>
            </div>
            <div class="dashboard_main-body_charts">
                <div class="dashboard_main-body_chart_performance">
                    <div class="dashboard_main-body_chart_header">
                        <h2 class="dashboard_main-body_chart_header_title">
                            {{ __('Performance') }}
                        </h2>
                        <div class="chart-period-selector">
                            <select id="performance-period-select" class="period-select">
                                <option value="weekly" selected>{{ __('Weekly') }}</option>
                                <option value="monthly">{{ __('Monthly') }}</option>
                                <option value="yearly">{{ __('Yearly') }}</option>
                            </select>
                        </div>
                    </div>

                    <div id="performance-chart" class="dashboard_main-body_chart_performance-chart"></div>
                </div>

                <div class="dashboard_main-body_chart_distribution">
                    <div class="dashboard_main-body_chart_header">
                        <h2 class="dashboard_main-body_chart_header_title">
                            {{ __('Revenue Distribution') }}
                        </h2>
                    </div>
                    <div id="distribution-chart" class="dashboard_main-body_chart_distribution-chart"></div>
                </div>
            </div>
            <div class="dashboard_main-body_tables">
                <div class="dashboard_main-body_table-overview">
                    <div class="dashboard_main-body_table_header">
                        <h2 class="dashboard_main-body_table_header_title">
                            {{ __('Overview') }}
                        </h2>
                    </div>
                    <div class="table_tabs-content" style="padding: 0">
                        <div class="table-tabs">
                            <button class="overview-tab active" data-tab="upcoming-events-content">
                                {{ __('Upcoming Events') }}
                            </button>
                            <button class="overview-tab" data-tab="top-performing-vendors-content">
                                {{ __('Top Performing Vendors') }}
                            </button>
                        </div>
                        <div id="upcoming-events-content" class="dashboard_tab-pane active">
                            <div class="overview-events-content">
                                @foreach (getUpcomingEvents() as $item)
                                    <a href="{{ route('events.show', $item->id) }}" class="overview-event-item">
                                        <div class="overview-event-header">
                                            <div class="overview-event-info">
                                                <h3 class="overview-event-title">
                                                    {{ $item->title }}
                                                </h3>
                                            </div>
                                            <div class="overview-event-action">
                                                <img src="{{ asset('assets/images/icons/angle_' . (app()->getLocale() === 'en' ? 'right' : 'left') . '.svg') }}"
                                                    alt="icon" class="svg">
                                            </div>
                                        </div>
                                        <div class="overview-event-bottom">
                                            <div class="overview-event-details">
                                                <span class="overview-event-date">{{ $item->start_date }}</span>
                                                <div class="overview-event-separator"></div>
                                                <span class="overview-event-location">{{ $item->venue }}</span>
                                            </div>
                                            <div class="overview-event-progress">
                                                <div class="overview-progress-bar">
                                                    @php
                                                        if ($item->total_tickets == 0) {
                                                            $percentage = 0;
                                                        } else {
                                                            $percentage =
                                                                ($item->sold_tickets / $item->total_tickets) * 100;
                                                        }
                                                        $colorClass = match (true) {
                                                            $percentage < 25 => 'red',
                                                            $percentage < 75 => 'purple',
                                                            default => 'green',
                                                        };
                                                    @endphp
                                                    <div class="overview-progress-fill {{ $colorClass }}"
                                                        style="width:{{ $percentage }}%"></div>
                                                </div>
                                                <span class="overview-progress-text">
                                                    {{ $item->sold_tickets }}/{{ $item->total_tickets }} Tickets
                                                    sold</span>
                                            </div>
                                        </div>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                        <div id="top-performing-vendors-content" class="dashboard_tab-pane">
                            <div class="overview-vendors-content">
                                @foreach (topVendors() as $item)
                                    <a href="{{ route('vendors.show', $item->vendor_id) }}" class="overview-vendor-item">
                                        <div class="overview-vendor-info">
                                            <div class="overview-vendor-logo">
                                                <img src="{{ asset('assets/images/logo.svg') }}" alt="logo"
                                                    class="img-contain" />
                                            </div>
                                            <div class="overview-vendor-name">
                                                <h3 class="overview-vendor-title">
                                                    {{ $item->vendor_name }}
                                                </h3>
                                                <span class="overview-vendor-events">
                                                    {{ $item->vendor_events }} Active Events
                                                </span>
                                            </div>
                                        </div>
                                        <div class="overview-vendor-total">
                                            <strong>{{ getSetting('default_currency') }}{{ number_format($item->total_revenue, 0) }}</strong>
                                            {{ __('Revenue') }}
                                        </div>
                                        <div class="overview-vendor-growth">
                                            @if ($item->growth_direction === 'plus')
                                                <span class="icon up">
                                                    <img src="{{ asset('assets/images/icons/chartUp.svg') }}"
                                                        alt="icon" class="svg" />
                                                </span>
                                                <strong>
                                                    +
                                                    {{ $item->growth_percentage }}%
                                                </strong>
                                            @elseif ($item->growth_direction === 'minus')
                                                <span class="icon down">
                                                    <img src="{{ asset('assets/images/icons/chartUp.svg') }}"
                                                        alt="icon" class="svg" />
                                                </span>
                                                <strong>
                                                    -
                                                    {{ $item->growth_percentage }}%
                                                </strong>
                                            @else
                                                <span class="icon">
                                                    -
                                                </span>
                                                <strong>
                                                    {{ $item->growth_percentage }}%
                                                </strong>
                                            @endif
                                            {{ __('Growth') }}
                                        </div>
                                        <div class="overview-vendor-action">
                                            <img src="{{ asset('assets/images/icons/angle_' . (app()->getLocale() === 'en' ? 'right' : 'left') . '.svg') }}"
                                                alt="icon" class="svg">
                                        </div>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dashboard_main-body_table-activity">
                    <div class="dashboard_main-body_table_header">
                        <h2 class="dashboard_main-body_table_header_title">
                            {{ __('Last Activity') }}
                        </h2>
                        <div class="activity-expand-icon">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path d="M3.33333 3.33333L12.6667 12.6667M12.6667 3.33333L3.33333 12.6667" stroke="#666666"
                                    stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </div>
                    </div>
                    <div class="activity-timeline">
                        @forelse (getLastActivity() as $activity)
                            <div class="activity-item">
                                <div class="activity-dot"></div>
                                <div class="activity-content">
                                    <div class="activity-main-text">
                                        {{ __(ucfirst($activity->description)) }}
                                    </div>
                                    <div class="activity-sub-text">
                                        {{ class_basename($activity->subject_type) }}
                                        @if ($activity->subject_id)
                                            #{{ $activity->subject_id }}
                                        @endif
                                        @if ($activity->causer)
                                            by {{ $activity->causer->name }}
                                        @endif
                                    </div>
                                    <div class="activity-time">
                                        {{ $activity->created_at->format('h:i A') }}
                                        <small class="text-muted">{{ $activity->created_at->diffForHumans() }}</small>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="activity-item">
                                <div class="activity-dot"></div>
                                <div class="activity-content">
                                    <div class="activity-main-text">
                                        {{ __('No activity found') }}
                                    </div>
                                </div>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ asset('assets/js/svg.js') }}"></script>
    <script src="{{ asset('assets/js/main.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>


    {{-- performance chart --}}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // initial chart
            var chart = new ApexCharts(document.querySelector("#performance-chart"), {
                colors: ["#69499E", "#F0AA26", "#3790AB"],
                chart: {
                    type: "bar",
                    height: 350,
                    toolbar: {
                        show: false
                    }
                },
                plotOptions: {
                    bar: {
                        columnWidth: "50%",
                        dataLabels: {
                            position: "top"
                        }
                    }
                },
                dataLabels: {
                    enabled: true,
                    style: {
                        fontSize: "12px",
                        colors: ["#333"]
                    },
                    offsetY: -20,
                },
                stroke: {
                    show: true,
                    width: 2,
                    colors: ["transparent"]
                },
                grid: {
                    show: true,
                    borderColor: "rgba(0, 0, 0, 0.04)",
                    strokeDashArray: 2,
                    xaxis: {
                        lines: {
                            show: false
                        }
                    },
                    yaxis: {
                        lines: {
                            show: true
                        }
                    },
                },
                legend: {
                    fontSize: "13px",
                    offsetY: 20,
                    markers: {
                        width: 12,
                        height: 12,
                        radius: 7,
                        shape: "circle"
                    },
                },
                xaxis: {
                    categories: [],
                    title: {
                        text: "{{ __('Weeks') }}",
                        style: {
                            fontSize: "13px"
                        }
                    },
                },
                yaxis: {
                    title: {
                        text: "{{ __('Amount') }}",
                        style: {
                            fontSize: "13px"
                        }
                    },
                },
                series: []
            });

            chart.render();

            // function to load data dynamically
            function loadPerformanceData(period = 'weekly') {
                fetch(`/performance-data/${period}`)
                    .then(res => res.json())
                    .then(data => {
                        chart.updateOptions({
                            xaxis: {
                                categories: data.labels,
                                title: {
                                    text: period.charAt(0).toUpperCase() + period.slice(1)
                                }
                            },
                            series: [{
                                    name: "{{ __('Total Revenue') }}",
                                    data: data.revenue
                                },
                                {
                                    name: "{{ __('Total Booking') }}",
                                    data: data.bookings
                                },
                                {
                                    name: "{{ __('Sold Tickets') }}",
                                    data: data.tickets
                                },
                            ]
                        });
                    })
                    .catch(err => console.error(err));
            }

            // initial load
            loadPerformanceData('weekly');

            // on select change
            document.getElementById("performance-period-select").addEventListener("change", function() {
                const period = this.value;
                loadPerformanceData(period);
            });
        });
    </script>

    {{-- pie chart  --}}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const platform_fee = {{ getSetting('default_commission_rate') }};
            const vendor_revenue = 100 - platform_fee;
            const total_revenue = {{ getTotalRevenue() }};
            let distributionChartOptions = {
                colors: ["#69499E", "#F0AA26"],
                series: [vendor_revenue, platform_fee],
                labels: ["{{ __('Vendor Revenue') }}", "{{ __('Platform Fee') }}"],

                chart: {
                    type: "donut",
                },

                stroke: {
                    width: 0,
                },

                dataLabels: {
                    enabled: true,
                    formatter: function(val) {
                        return val.toFixed(0) + "%";
                    },
                    style: {
                        fontSize: "14px",
                        fontWeight: "700",
                        colors: ["#fff"],
                    },
                },

                plotOptions: {
                    pie: {
                        donut: {
                            size: "70%",
                            labels: {
                                show: true,
                                name: {
                                    show: true,
                                    fontSize: "13px",
                                    fontWeight: 500,
                                    color: "#637381",
                                    offsetY: -8,
                                },
                                value: {
                                    show: true,
                                    fontSize: "22px",
                                    fontWeight: 700,
                                    offsetY: 6,
                                    formatter: function(val) {
                                        return val + "%";
                                    },
                                },
                                total: {
                                    show: true,
                                    label: "{{ __('Total Revenue') }}",
                                    color: "#637381",
                                    formatter: function() {
                                        return total_revenue;
                                    },
                                },
                            },
                        },
                    },
                },

                legend: {
                    position: "bottom",
                },
            };

            var chart = new ApexCharts(
                document.querySelector("#distribution-chart"),
                distributionChartOptions
            );
            chart.render();
        });
    </script>
@endsection