@extends('admin.layouts.app')

<!-- ============================================================== -->
<!-- Start Page Content here -->
<!-- ============================================================== -->
@php
    $appName = \App\Models\Setting::where('key', 'app_name')->value('value');
@endphp
@section('content')
    <!-- Start Content-->
    <div class="container-fluid">
        <div class="py-3 d-flex align-items-sm-center flex-sm-row flex-column">
            <div class="flex-grow-1">
                <h4 class="fs-18 fw-semibold m-0">Dashboard</h4>
            </div>

            <div class="text-end">
                <ol class="breadcrumb m-0 py-0">
                    <li class="breadcrumb-item"> <a href="{{ url('/') }}" class="text-primary">
                            {{ $appName ?? config('app.name') }}
                        </a></li>
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Admin</a></li>
                    <li class="breadcrumb-item active">Dashboard</li>
                </ol>
            </div>

        </div>

        <!-- Start Main Widgets -->
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-5 g-3">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="widget-first">

                            <div class="d-flex align-items-center mb-2">
                                <p class="mb-0 text-dark fs-16 fw-medium">Total Users</p>
                            </div>

                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h3 class="mb-0 fs-24 text-dark me-4">{{ $totalUsers }}</h3>
                                <div id="total_sales" class="apex-charts"></div>
                            </div>

                            <div class="d-flex align-items-center">
                                <span class="text-success fs-14 me-2">16.8%<i class="mdi mdi-menu-up fs-16 ms-1"></i></span>
                                <p class="text-muted fs-13 mb-0">Since last month</p>
                            </div>

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

            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="widget-first">

                            <div class="d-flex align-items-center mb-2">
                                <p class="mb-0 text-dark fs-16 fw-medium">Total Contests</p>
                            </div>

                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h3 class="mb-0 fs-24 text-dark me-4">{{ $totalContests }}</h3>
                                <div id="total_orders" class="apex-charts"></div>
                            </div>

                            <div class="d-flex align-items-center">
                                <span class="text-success fs-14 me-2">3.51%<i class="mdi mdi-menu-up fs-16 ms-1"></i></span>
                                <p class="text-muted fs-13 mb-0">Since last month</p>
                            </div>

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

            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="widget-first">

                            <div class="d-flex align-items-center mb-2">
                                <p class="mb-0 text-dark fs-16 fw-medium">Contest Registrations</p>
                            </div>

                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h3 class="mb-0 fs-24 text-dark me-4">{{ $totalRegistrations }}</h3>

                                <div id="new_customers" class="apex-charts"></div>
                            </div>

                            <div class="d-flex align-items-center">
                                <span class="text-danger fs-14 me-2">6.87%<i
                                        class="mdi mdi-menu-down fs-16 ms-1"></i></span>
                                <p class="text-muted fs-13 mb-0">Since last month</p>
                            </div>

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

            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="widget-first">

                            <div class="d-flex align-items-center mb-2">
                                <p class="mb-0 text-dark fs-16 fw-medium">Pending Withdrawals</p>
                            </div>

                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h3 class="mb-0 fs-24 text-dark me-4">{{ $pendingWithdrawals }}</h3>
                                <div id="total_income" class="apex-charts"></div>
                            </div>

                            <div class="d-flex align-items-center">
                                <span class="text-success fs-14 me-2">9.19%<i class="mdi mdi-menu-up fs-16 ms-1"></i></span>
                                <p class="text-muted fs-13 mb-0">Since last month</p>
                            </div>

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

            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="widget-first">

                            <div class="d-flex align-items-center mb-2">
                                <p class="mb-0 text-dark fs-16 fw-medium">Total Withdrawn</p>
                            </div>

                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h3 class="mb-0 fs-24 text-dark me-4">
                                    ₹{{ number_format($totalWithdrawnAmount, 2) }}
                                </h3>
                                <div id="total_returns" class="apex-charts"></div>
                            </div>

                            <div class="d-flex align-items-center">
                                <span class="text-success fs-14 me-2">16.8%<i
                                        class="mdi mdi-menu-down fs-16 ms-1"></i></span>
                                <p class="text-muted fs-13 mb-0">Since last month</p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Main Widgets -->

        <!-- Start Row -->
        <div class="row">
            <!-- Start Top Selling Categories -->
            <div class="col-md-12 col-xl-4">
                <div class="card overflow-hidden">
                    <div class="card-header">
                        <div class="d-flex align-items-center">
                            <h5 class="card-title text-dark mb-0">Top Registered Categories</h5>
                        </div>
                    </div>

                    <div class="card-body">

                        <div id="categories_chart" class="apex-charts"></div>

                        <div class="device-view text-center">
                            <p class="text-uppercase mb-1 fw-medium text-muted">Total Registrations</p>
                            <h3 class="mb-0 text-dark fw-semibold">{{ $categoryChartTotal }}</h3>
                        </div>

                        <div class="row mt-5">
                            <div class="col">
                                @forelse ($categoryChartLabels as $index => $label)
                                    <div class="d-flex justify-content-between align-items-center p-1">
                                        <div>
                                            <i class="mdi mdi-circle fs-12 align-middle me-1"
                                                style="color: {{ ['#7168EE', '#46B277', '#963b68', '#01D4FF'][$index % 4] }}"></i>
                                            <span class="align-middle fw-semibold text-truncate">{{ $label }}</span>
                                        </div>
                                        <span class="fw-medium text-muted float-end">
                                            {{ $categoryChartSeries[$index] ?? 0 }} registrations
                                        </span>
                                    </div>
                                @empty
                                    <div class="text-muted small">
                                        No category registrations found.
                                    </div>
                                @endforelse
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- Start End Selling Categories -->

            <!-- Start Sales Overtime -->
            <div class="col-md-12 col-xl-8">
                <div class="card">

                    <div class="card-header">
                        <div class="d-flex align-items-center">
                            <h5 class="card-title text-dark mb-0">Sales Overtime</h5>
                        </div>
                    </div>

                    <div class="card-body">
                        <div id="sales-overtime" class="apex-charts"></div>
                    </div>

                </div>
            </div>
            <!-- End Sales Overtime -->

        </div>
        <!-- End Row -->

        <!-- Start Row -->
        <div class="row">

            <!-- Start Latest Withdrawal Requests -->
            <div class="col-md-12 col-xxl-4 col-xl-12">
                <div class="card overflow-hidden">
                    <div class="card-header">
                        <div class="d-flex align-items-center">
                            <h5 class="card-title text-dark mb-0">Latest Withdrawal Requests</h5>
                        </div>
                    </div>

                    <div class="card-body p-0">
                        <ul class="list-group list-group-flush list-group-no-gutters">
                            @forelse ($latestWithdrawals as $withdrawal)
                                <li class="list-group-item">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="mb-1 text-dark fs-15">
                                                {{ $withdrawal->user->name ?? 'Unknown User' }}
                                            </h6>
                                            <span class="fs-14 text-muted">
                                                {{ $withdrawal->payment_method === 'upi' ? ($withdrawal->upi_id ?? '-') : ($withdrawal->account_number ?? '-') }}
                                            </span>
                                        </div>

                                        <div class="text-end">
                                            <div class="fw-semibold text-dark">
                                                ₹{{ number_format($withdrawal->amount, 2) }}
                                            </div>
                                            <span class="badge
                                                @if ($withdrawal->status === 'pending') bg-warning text-dark
                                                @elseif ($withdrawal->status === 'approved') bg-success
                                                @else bg-danger
                                                @endif">
                                                {{ ucfirst($withdrawal->status) }}
                                            </span>
                                        </div>
                                    </div>
                                    <small class="text-muted d-block mt-1">
                                        {{ $withdrawal->created_at->format('d M Y h:i A') }}
                                    </small>
                                </li>
                            @empty
                                <li class="list-group-item text-center text-muted py-4">
                                    No withdrawal requests found.
                                </li>
                            @endforelse
                        </ul>
                    </div>
                </div>
            </div>
            <!-- End Latest Withdrawal Requests -->

            <!-- Start Traffic Analytic -->
            <div class="col-md-6 col-xxl-4 col-xl-6">
                <div class="card overflow-hidden">
                    <div class="card-header">
                        <div class="d-flex align-items-center">
                            <h5 class="card-title text-dark mb-0">Latest Users</h5>

                            <div class="ms-auto">
                                <a href="{{ route('admin.users.index') }}"
                                    class="btn btn-sm bg-primary-subtle border fw-medium text-primary">
                                    View All
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="card-body p-0">
                        <ul class="list-group list-group-flush list-group-no-gutters">
                            @forelse ($latestUsers as $user)
                                <li class="list-group-item">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="avatar-sm bg-primary-subtle rounded-circle d-flex align-items-center justify-content-center">
                                                <span class="fw-semibold text-primary">
                                                    {{ strtoupper(substr($user->name, 0, 1)) }}
                                                </span>
                                            </div>

                                            <div class="flex-grow-1" style="min-width: 0;">
                                                <h6 class="mb-1 text-dark fs-15">{{ $user->name }}</h6>
                                                <span class="fs-14 text-muted d-block text-truncate"
                                                    style="max-width: 170px;">
                                                    {{ $user->email }}
                                                </span>
                                            </div>
                                        </div>

                                        <div class="text-end">
                                            <span class="badge {{ $user->status ? 'bg-success' : 'bg-danger' }}">
                                                {{ $user->status ? 'Active' : 'Inactive' }}
                                            </span>
                                            <small class="text-muted d-block mt-1">
                                                {{ $user->created_at->format('d M Y') }}
                                            </small>
                                        </div>
                                    </div>
                                </li>
                            @empty
                                <li class="list-group-item text-center text-muted py-4">
                                    No users found.
                                </li>
                            @endforelse
                        </ul>
                    </div>
                </div>
            </div>
            <!-- End Traffic Analytic -->

            <!-- Start Wallet Statistics -->
            <div class="col-md-6 col-xxl-4 col-xl-6">
                <div class="card overflow-hidden">
                    <div class="card-header">
                        <div class="d-flex align-items-center">
                            <h5 class="card-title text-dark mb-0">Wallet Statistics</h5>

                            <div class="ms-auto">
                                <button class="btn btn-sm bg-primary-subtle border dropdown-toggle fw-medium text-primary"
                                    type="button" data-bs-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false">View All<i class="mdi mdi-chevron-down ms-1 fs-14"></i></button>
                                <div class="dropdown-menu dropdown-menu-end">
                                    <a class="dropdown-item" href="{{ route('admin.withdrawal.index') }}">Withdrawals</a>
                                    <a class="dropdown-item" href="{{ url()->current() }}">Wallet Stats</a>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="card-body mt-0">
                        <div id="revenueCharts" class="apex-charts"></div>

                        <div class="row border border-dashed border-1 rounded-2">
                            <div class="col col-xl-6">
                                <div class="p-2 border-end border-inline-end-dashed text-center">
                                    <h3 class="mb-0 fs-18 text-dark me-1">₹{{ number_format($walletApprovedAmount, 2) }}</h3>
                                    <div class="d-flex align-items-center justify-content-center mt-2">
                                        <p class="mb-0 fs-14 text-muted me-1">Approved Withdrawals</p>
                                        <i class="ti ti-arrow-up text-success"></i>
                                    </div>
                                </div>
                            </div>

                            <div class="col col-xl-6">
                                <div class="p-2 text-center">
                                    <h3 class="mb-0 fs-18 text-dark me-1">₹{{ number_format($walletPendingAmount, 2) }}</h3>
                                    <div class="d-flex align-items-center justify-content-center mt-2">
                                        <p class="mb-0 fs-14 text-muted me-1">Pending Withdrawals</p>
                                        <i class="ti ti-arrow-down text-danger"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Wallet Statistics -->

        </div>
        <!-- End Row -->

        <!-- Start Row -->
        <div class="row">

            <!-- Start Recent Winners -->
            <div class="col-xl-12">
                <div class="card overflow-hidden">

                    <div class="card-header">
                        <div class="d-flex align-items-center">
                            <h5 class="card-title text-dark mb-0">Recent Winners</h5>
                        </div>
                    </div>

                    <div class="card-body p-0">
                        <div class="table-responsive table-centered mt-0">
                            <table class="table table-centered table-nowrap table-hover table-stock mb-0">
                                <thead>
                                    <tr>
                                        <th scope="col" class="cursor-pointer">User</th>
                                        <th scope="col" class="cursor-pointer">Contest</th>
                                        <th scope="col" class="cursor-pointer">Rank</th>
                                        <th scope="col" class="cursor-pointer">Score</th>
                                        <th scope="col" class="cursor-pointer">Prize</th>
                                        <th scope="col" class="cursor-pointer">Won At</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($recentWinners as $winner)
                                        <tr>
                                            <td class="ps-3">
                                                <div class="d-flex align-items-center">
                                                    <div>
                                                        <h5 class="text-dark fw-normal fs-14 mb-1">
                                                            {{ $winner->user?->name ?? 'Unknown User' }}
                                                        </h5>
                                                        <p class="text-muted fw-normal fs-13 mb-0">
                                                            {{ $winner->user?->email ?? '-' }}
                                                        </p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div>
                                                    <h5 class="text-dark fw-normal fs-14 mb-1">
                                                        {{ $winner->contest?->title ?? 'Contest' }}
                                                    </h5>
                                                    <p class="text-muted fw-normal fs-13 mb-0">
                                                        {{ $winner->contest?->category?->name ?? '-' }}
                                                    </p>
                                                </div>
                                            </td>
                                            <td>
                                                <span class="badge bg-primary-subtle px-3 py-1 text-primary fw-medium fs-13 rounded-4">
                                                    #{{ $winner->rank }}
                                                </span>
                                            </td>
                                            <td class="text-dark">
                                                {{ $winner->score ?? 0 }}
                                            </td>
                                            <td class="text-dark">
                                                {{ $winner->prizeAssignment?->amount ?? '0.00' }}
                                            </td>
                                            <td>
                                                <div>
                                                    <h5 class="text-dark fw-normal fs-14 mb-1">
                                                        {{ $winner->submitted_at ? $winner->submitted_at->format('d M Y') : '-' }}
                                                    </h5>
                                                    <p class="text-muted fw-normal fs-13 mb-0">
                                                        {{ $winner->submitted_at ? $winner->submitted_at->format('h:i A') : '' }}
                                                    </p>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center py-4 text-muted">
                                                No winners found.
                                            </td>
                                        </tr>
                                    @endforelse

                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
            </div>
            <!-- End Recent Winners -->

        </div>
        <!-- End Row -->
    </div>
    <!-- container-fluid -->
    <!-- content -->
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const el = document.querySelector('#categories_chart');
            const labels = @json($categoryChartLabels);
            const series = @json($categoryChartSeries);

            if (!el || !labels.length) {
                return;
            }

            el.innerHTML = '';

            const options = {
                series: series,
                labels: labels,
                chart: {
                    type: 'donut',
                    height: 385
                },
                plotOptions: {
                    pie: {
                        startAngle: -90,
                        endAngle: 90,
                        offsetY: 10,
                        donut: {
                            size: '70%'
                        }
                    }
                },
                stroke: {
                    borderRadius: 15,
                    width: 4,
                    colors: ['#fff']
                },
                dataLabels: {
                    enabled: false
                },
                grid: {
                    padding: {
                        bottom: -190
                    }
                },
                colors: ['#7168EE', '#46B277', '#963b68', '#01D4FF'],
                legend: {
                    show: false
                },
                responsive: [{
                    breakpoint: 480,
                    options: {
                        chart: {
                            height: 250
                        },
                        plotOptions: {
                            pie: {
                                donut: {
                                    size: '65%'
                                }
                            }
                        },
                        grid: {
                            padding: {
                                bottom: -90
                            }
                        }
                    }
                }, {
                    breakpoint: 1440,
                    options: {
                        chart: {
                            height: 350
                        },
                        plotOptions: {
                            pie: {
                                donut: {
                                    size: '65%'
                                }
                            }
                        },
                        grid: {
                            padding: {
                                bottom: -170
                            }
                        }
                    }
                }]
            };

            new ApexCharts(el, options).render();
        });

        document.addEventListener('DOMContentLoaded', function() {
            const el = document.querySelector('#sales-overtime');
            const labels = @json($salesOvertimeLabels);
            const series = @json($salesOvertimeSeries);

            if (!el || !labels.length) {
                return;
            }

            el.innerHTML = '';

            const options = {
                series: [{
                    name: 'Registrations',
                    data: series
                }],
                chart: {
                    type: 'area',
                    height: 290,
                    toolbar: {
                        show: false
                    }
                },
                colors: ['#7168EE'],
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'smooth',
                    width: 2
                },
                fill: {
                    type: 'gradient',
                    gradient: {
                        shadeIntensity: 1,
                        opacityFrom: 0.7,
                        opacityTo: 0.2,
                        stops: [0, 90, 100]
                    }
                },
                xaxis: {
                    categories: labels,
                    axisBorder: {
                        show: false
                    },
                    axisTicks: {
                        show: false
                    },
                    labels: {
                        style: {
                            colors: '#9aa0ac'
                        }
                    }
                },
                yaxis: {
                    labels: {
                        style: {
                            colors: '#9aa0ac'
                        }
                    }
                },
                tooltip: {
                    shared: true,
                    intersect: false,
                    theme: 'light'
                },
                legend: {
                    position: 'top',
                    horizontalAlign: 'right'
                },
                grid: {
                    borderColor: '#f1f1f1',
                    strokeDashArray: 3
                }
            };

            new ApexCharts(el, options).render();
        });
    </script>
@endpush