@extends('Admin.layout')

@section('title', 'Dashboard')

@section('content')

    <style>
        :root {
            --primary: #00a86b;

        }

        .page-title {
            font-weight: 700;
            font-size: 20px;
            /* color: #1f2937; */
            margin-bottom: 20px;
        }

        .dashboard-card {
            border-radius: 14px;
            border: 1px solid var(--border-soft);
            transition: all .25s ease;
            overflow: hidden;
        }

        .dashboard-card .icon-box {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: var(--primary-soft);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .dashboard-card .icon-box img {
            width: 28px;
        }

        .dashboard-card h6 {
            font-size: 13px;
            /* color: var(--text-muted); */
            font-weight: 600;
            margin-bottom: 4px;
        }

        .dashboard-card h3 {
            font-size: 24px;
            font-weight: 700;
            /* color: #111827; */
        }

        .dashboard-card .sub-info h6 {
            font-size: 13px;
            margin-bottom: 4px;
        }

        .dashboard-card .sub-info span {
            font-weight: 600;
            /* color: #111827; */
        }

        .dashboard-card .view-link {
            color: var(--primary);
            font-weight: 600;
            text-decoration: none;
            font-size: 13px;
        }

        .dashboard-card .view-link:hover {
            text-decoration: underline;
        }

        .report-card {
            border-radius: 14px;
            border: 1px solid var(--border-soft);

        }

        .report-header {
            padding: 15px 20px;
            /* border-bottom: 1px solid var(--border-soft); */
        }

        .report-title {
            font-weight: 700;
            font-size: 16px;
        }

        .range-btn {
            text-decoration: none;
            font-size: 13px;
            padding: 6px 14px;
            border-radius: 20px;
            transition: all .2s ease;
            border: 1px solid transparent;
        }

        .range-btn.active {
            background: var(--primary);
            color: #fff !important;
            border-color: var(--primary);
        }


        .range-btn:not(.active):hover {
            background: var(--primary-soft);
            color: var(--primary);
        }

        #report {
            padding: 20px;
        }

        @media (max-width: 576px) {
            .dashboard-card h3 {
                font-size: 20px;
            }
        }
    </style>

    <div class="page-title">Dashboard Overview</div>

    <div class="row g-4">

        {{-- CUSTOMER --}}
        <div class="col-lg-3 col-sm-6">
            <div class="card dashboard-card h-100 p-5">
                <div class="d-flex justify-content-between align-items-center">
                    <h6>Customer</h6>
                    <a href="{{ route('customer_table') }}" class="view-link">View Details</a>

                </div>
                <div class="d-flex justify-content-between align-items-center mb-0">
                    <div>
                        <h3 class="mb-0">{{ $totalCustomers ?? 0 }}</h3>
                    </div>
                    <div class="icon-box bg-label-success">
                        <i class="ti tabler-users menu-icon text-primary"></i>
                    </div>
                </div>

                <div class="sub-info mt-0">
                    <div class="d-flex justify-content-between">
                        <h6>Active</h6>
                        <span>{{ $activeCustomers ?? 0 }}</span>
                    </div>
                    <div class="d-flex justify-content-between">
                        <h6>Inactive</h6>
                        <span>{{ $inactiveCustomers ?? 0 }}</span>
                    </div>
                </div>



            </div>
        </div>

        {{-- FOLLOW UP --}}
        <div class="col-lg-3 col-sm-6">
            <div class="card dashboard-card h-100 p-5">
                <div class="d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">Follow Up</h6>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h3>{{ $followups ?? 0 }}</h3>
                    </div>
                    <div class="icon-box bg-label-success">
                        <i class="ti tabler-rotate-rectangle menu-icon text-primary"></i>
                    </div>
                </div>

                <div class="text-end mt-2">
                    <a href="{{ route('follow_up_table') }}" class="view-link">View Details</a>
                </div>
            </div>
        </div>

        {{-- PACKAGE --}}
        <div class="col-lg-3 col-sm-6">
            <div class="card dashboard-card h-100 p-5">
                <div class="d-flex justify-content-between align-items-center">
                    <h6>Package</h6>
                    <!-- <a href="{{ route('package_table') }}" class="view-link">View Details</a> -->
                </div>

                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h3>{{ $packages ?? 0 }}</h3>
                    </div>
                    <div class="icon-box bg-label-success">
                        <i class="ti tabler-world menu-icon text-primary"></i>
                    </div>
                </div>
                <div class="text-end mt-2">

                    <a href="{{ route('package_table') }}" class="view-link">View Details</a>

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

        {{-- ROYALTY --}}
        <div class="col-lg-3 col-sm-6">
            <div class="card dashboard-card h-100 p-5">
                <div class="d-flex justify-content-between align-items-center">
                    <h6>Royalty</h6>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h3>{{ $royalties ?? 0 }}</h3>
                    </div>
                    <div class="icon-box bg-label-success">
                        <i class="ti tabler-coin menu-icon text-primary"></i>
                    </div>

                </div>

                <div class="text-end mt-2">
                    <a href="{{ route('royalty_table') }}" class="view-link">View Details</a>

                </div>


            </div>
        </div>

    </div>

    {{-- ================= REPORT SECTION ================= --}}
    <div class="card report-card mt-4">
        <div class="report-header d-flex justify-content-between align-items-center flex-wrap gap-3">
            <div class="report-title">Analytics Report</div>
            <div class="d-flex gap-2">
                <a href="javascript:void(0)" class="range-btn" data-range="day">Day</a>
                <a href="javascript:void(0)" class="range-btn active" data-range="week">Week</a>
                <a href="javascript:void(0)" class="range-btn" data-range="month">Month</a>
                <a href="javascript:void(0)" class="range-btn" data-range="year">Year</a>
            </div>
        </div>
        <div id="report"></div>
    </div>

    {{-- ================= SCRIPTS ================= --}}
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {

            let chart;
            loadDashboard('week');

            function loadDashboard(filter) {
                $.ajax({
                    url: "{{ route('dashboard_data') }}",
                    type: "GET",
                    data: { filter: filter },
                    success: function (res) {
                        if (res.status) {

                            let labels = res.lineData.labels;
                            let users = res.lineData.users;

                            if (!chart) {
                                chart = new ApexCharts(document.querySelector("#report"), {
                                    chart: {
                                        type: 'area',
                                        height: 280,
                                        toolbar: { show: false },
                                        zoom: { enabled: false }
                                    },
                                    series: [{
                                        name: 'Users',
                                        data: users
                                    }],
                                    colors: ['#00a86b'],
                                    dataLabels: { enabled: false },
                                    stroke: {
                                        curve: 'smooth',
                                        width: 3
                                    },
                                    fill: {
                                        type: 'gradient',
                                        gradient: {
                                            shadeIntensity: 1,
                                            opacityFrom: 0.6,
                                            opacityTo: 0.05
                                        }
                                    },
                                    grid: {
                                        borderColor: '#f1f1f1'
                                    },
                                    xaxis: {
                                        categories: labels
                                    }
                                });
                                chart.render();
                            } else {
                                chart.updateOptions({
                                    xaxis: { categories: labels },
                                    series: [{ name: 'Users', data: users }]
                                });
                            }
                        }
                    }
                });
            }

            $('.range-btn').click(function (e) {
                e.preventDefault();
                $('.range-btn').removeClass('active');
                $(this).addClass('active');
                loadDashboard($(this).data('range'));
            });

        });
    </script>

@endsection