@extends('dashboard.layouts.master')
@section('title', 'Dashboard')
@push('after-styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" type="text/css" />
    <link rel="stylesheet" href="{{ asset('assets/dashboard/css/flags.css') }}" type="text/css" />
@endpush
@section('content')
    <style>
        .container {
            width: 100%;
            margin: 15px auto;
        }

        .icon-img img {
            height: 50px;
        }

        #curve_chart {
            position: relative;
        }

        .no-data-overlay {
            position: absolute;
            bottom: 12px;
            /* distance from bottom */
            left: 50%;
            transform: translateX(-50%);
            font-size: 14px;
            color: #999;
            font-weight: 500;
            text-align: center;
            pointer-events: none;
            width: 100%;
        }

        .portfolio-link:hover {
            color: #F59635 !important;
            /* hover color */
        }
    </style>
    <div class="upskild-dashboard">
        <div class="row align-items-center title-row">
            <div class="col-xl-4">
                <h1 class="heading-two m-b-0">{{ __('backend.hi') }}
                    <span class="text-primary">{{ Auth::user()->name }}</span> , {{ __('backend.welcomeBack') }}
                </h1>
            </div>
            <div class="col-xl-8 title-right-col">
                <form action="{{ route('dashboardfilter') }}" method="post" style="padding-left: %;" id="datafilter">
                    @csrf
                    <!-- <select name="action" id="action" class="form-control c-select w-sm inline v-middle">
                                                                                                                                                                                                                                                       </select> -->
                    <div class="filter-date-block">
                        <input type="text" class="form-control filter_message"
                            value="{{ isset($filterdate) ? $filterdate : old('date_filter') }}" placeholder="DD-MM-YYYY"
                            name="date_filter" id="date_filter" />

                        <span class="removeError1"
                            style="color: red; display: none; margin-right: -25px;
                        margin-bottom: 10px;"
                            id="span">Please
                            select start date and end date
                        </span>
                    </div>
                    <div class="filter-button-block">
                        <input type="submit" name="filter_submit" class="solid-button" value="Filter" id="filter_submit" />
                        <a href="{{ route('adminHome') }}">
                            <input type="button" name="clear" class="btn btn-danger" value="Clear" />
                        </a>
                    </div>

                    <input type="hidden" name="startdate" value="{{ isset($startdate) ? $startdate : '' }}"
                        id="export_start_date" class="start_date">
                    <input type="hidden" name="enddate" value="{{ isset($enddate) ? $enddate : '' }}" id="export_end_date"
                        class="end_date">
                    <input type="hidden" name="hidden_date_filter" id="hidden_date_filter" class="hidden_date_filter"
                        value="">


                </form>

            </div>

        </div>

        <div class="row dashboard-charts-row">
            <div class="col-xs-12">
                {{-- SECTION 1: Module Navigation --}}
                <div class="m-b">
                    <h4 class="text-muted _400 m-b">Module Navigation</h4>
                </div>

                <div class="row row-sm">
                    {{-- 1. End User Management --}}
                    <div class="col-xs-6 col-sm-3 d-flex">
                        <div class="box p-a flex-fill">
                            <a href="{{ route('end-user-management.index') }}">
                                <div class="metric-header">
                                    <i class="fa fa-users text-primary" style="font-size:20px;"></i>
                                    <span class="metric-label">User Management</span>
                                </div>
                                <h2 class="metric-value">{{ number_format($total_registered_users ?? 0) }}</h2>
                                <div class="text-xs text-muted">Registered Users</div>
                            </a>
                        </div>
                    </div>

                    {{-- 2. Supplier Management --}}
                    <div class="col-xs-6 col-sm-3 d-flex">
                        <div class="box p-a flex-fill">
                            <a href="#">
                                <div class="metric-header">
                                    <i class="fa fa-truck text-info" style="font-size:20px;"></i>
                                    <span class="metric-label">Suppliers</span>
                                </div>
                                <h2 class="metric-value">{{ number_format($total_suppliers ?? 0) }}</h2>
                                <div class="text-xs text-muted">Active Suppliers</div>
                            </a>
                        </div>
                    </div>

                    {{-- 3. Business Owner Management --}}
                    <div class="col-xs-6 col-sm-3 d-flex">
                        <div class="box p-a flex-fill">
                            <a href="{{ route('business-owner-management.index') }}">
                                <div class="metric-header">
                                    <i class="fa fa-briefcase text-success" style="font-size:20px;"></i>
                                    <span class="metric-label">Businesses</span>
                                </div>
                                <h2 class="metric-value">{{ number_format($total_business_owners ?? 0) }}</h2>
                                <div class="text-xs text-muted">Owner Profiles</div>
                            </a>
                        </div>
                    </div>

                    {{-- 4. Offer Management --}}
                    <div class="col-xs-6 col-sm-3 d-flex">
                        <div class="box p-a flex-fill">
                            <a href="#">
                                <div class="metric-header">
                                    <i class="fa fa-tag text-warning" style="font-size:20px;"></i>
                                    <span class="metric-label">Offers</span>
                                </div>
                                <h2 class="metric-value">{{ number_format($total_offers ?? 0) }}</h2>
                                <div class="text-xs text-muted">Active Promotions</div>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="row row-sm m-t">
                    {{-- 5. Master Management --}}
                    <div class="col-xs-6 col-sm-3 d-flex">
                        <div class="box p-a flex-fill">
                            <a href="{{ route('country') }}">
                                <div class="metric-header">
                                    <i class="fa fa-database text-danger" style="font-size:20px;"></i>
                                    <span class="metric-label">Master Data</span>
                                </div>
                                <h2 class="metric-value">{{ number_format($total_master_data ?? 0) }}</h2>
                                <div class="text-xs text-muted">Core Records</div>
                            </a>
                        </div>
                    </div>

                    {{-- 6. Subscription Plan Module --}}
                    <div class="col-xs-6 col-sm-3 d-flex">
                        <div class="box p-a flex-fill">
                            <a href="{{ route('subscription_plan') }}">
                                <div class="metric-header">
                                    <i class="fa fa-credit-card text-primary" style="font-size:20px;"></i>
                                    <span class="metric-label">Subscriptions</span>
                                </div>
                                <h2 class="metric-value">{{ number_format($total_subscriptions ?? 0) }}</h2>
                                <div class="text-xs text-muted">Active Plans</div>
                            </a>
                        </div>
                    </div>

                    {{-- 7. Sponsor Adds Management --}}
                    <div class="col-xs-6 col-sm-3 d-flex">
                        <div class="box p-a flex-fill">
                            <a href="#">
                                <div class="metric-header">
                                    <i class="fa fa-ad text-info" style="font-size:20px;"></i>
                                    <span class="metric-label">Sponsor Ads</span>
                                </div>
                                <h2 class="metric-value">{{ number_format($total_banners ?? 0) }}</h2>
                                <div class="text-xs text-muted">Banners & Promos</div>
                            </a>
                        </div>
                    </div>

                    {{-- 8. Team Roles & Access Control --}}
                    <div class="col-xs-6 col-sm-3 d-flex">
                        <div class="box p-a flex-fill">
                            <a href="{{ route('roles') }}">
                                <div class="metric-header">
                                    <i class="fa fa-lock text-success" style="font-size:20px;"></i>
                                    <span class="metric-label">Roles</span>
                                </div>
                                <h2 class="metric-value">{{ number_format($total_roles ?? 0) }}</h2>
                                <div class="text-xs text-muted">Access Control</div>
                            </a>
                        </div>
                    </div>
                </div>
                </div>

                <div class="row box-inner-row m-t">
                    {{-- 9. Account --}}
                    <div class="col-sm-3 box-inner-col">
                        <div class="box p-a">
                            <a href="{{ route('usersEdit', Auth::id()) }}">
                                <div>
                                    <i class="fa fa-user text-warning" style="font-size:24px;"></i>
                                    <span class="heading-four m-a-0 text-md _600" style="padding-left:10px;">Profile</span>
                                </div>
                                <div style="margin-top:10px;" class="clear">
                                    <div class="text-muted">Account Settings</div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

                {{-- SECTION 2: Summary Cards --}}
                <div class="m-t-lg">
                    <h4 class="text-muted _400 m-b">Performance Summary</h4>
                </div>
                <style>
                    .dash-card {
                        border-radius: 10px;
                        padding: 22px 20px;
                        color: #fff;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        text-decoration: none;
                        transition: transform .15s ease, box-shadow .15s ease;
                        margin-bottom: 16px;
                        min-height: 110px;
                    }
                    .dash-card:hover {
                        transform: translateY(-3px);
                        box-shadow: 0 6px 20px rgba(0,0,0,.18);
                        color: #fff;
                        text-decoration: none;
                    }
                    .dash-card .card-left  { flex: 1; }
                    .dash-card .card-icon  { font-size: 44px; opacity: .85; margin-left: 16px; }
                    .dash-card .card-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; opacity: .9; }
                    .dash-card .card-count { font-size: 36px; font-weight: 700; line-height: 1.1; margin: 4px 0; }
                    .dash-card .card-sub   { font-size: 12px; opacity: .8; }
                    /* Revenue card split */
                    .dash-card .rev-block  { text-align: center; flex: 1; }
                    .dash-card .rev-block + .rev-block { border-left: 1px solid rgba(255,255,255,.3); }
                    .dash-card .rev-amount { font-size: 22px; font-weight: 700; }
                    .dash-card .rev-label  { font-size: 11px; opacity: .8; margin-top: 2px; }
                    /* Colors */
                    .dash-blue   { background: linear-gradient(135deg, #1a73e8, #0d47a1); }
                    .dash-green  { background: linear-gradient(135deg, #2e7d32, #66bb6a); }
                    .dash-orange { background: linear-gradient(135deg, #e65100, #ff9800); }
                    .dash-teal   { background: linear-gradient(135deg, #00695c, #26a69a); }
                    .dash-red    { background: linear-gradient(135deg, #b71c1c, #ef5350); }
                </style>

                {{-- Row 1: 3 cards --}}
                <div class="row row-sm">
                    {{-- 1. Total Registered Users --}}
                    <div class="col-sm-4">
                        <a href="{{ route('end-user-management.index') }}" class="dash-card dash-blue">
                            <div class="card-left">
                                <div class="card-label">Total Registered Users</div>
                                <div class="card-count">{{ number_format($total_registered_users ?? 0) }}</div>
                                <div class="card-sub">End users · type 1 · active</div>
                            </div>
                            <i class="fa fa-users card-icon"></i>
                        </a>
                    </div>

                    {{-- 2. Total Business Owners --}}
                    <div class="col-sm-4">
                        <a href="{{ route('business-owner-management.index') }}" class="dash-card dash-green">
                            <div class="card-left">
                                <div class="card-label">Total Business Owners</div>
                                <div class="card-count">{{ number_format($total_business_owners ?? 0) }}</div>
                                <div class="card-sub">Approved businesses only</div>
                            </div>
                            <i class="fa fa-briefcase card-icon"></i>
                        </a>
                    </div>

                    {{-- 3. Active Offers --}}
                    <div class="col-sm-4">
                        <a href="{{ route('offer-management.index') }}" class="dash-card dash-orange">
                            <div class="card-left">
                                <div class="card-label">Active Offers</div>
                                <div class="card-count">{{ number_format($active_offers_summary ?? 0) }}</div>
                                <div class="card-sub">Live · within validity window</div>
                            </div>
                            <i class="fa fa-tag card-icon"></i>
                        </a>
                    </div>
                </div>

                {{-- Row 2: Revenue + Pending --}}
                <div class="row row-sm">
                    {{-- 4. Total Revenue --}}
                    <div class="col-sm-8">
                        <a href="{{ route('financial-reports.index') }}" class="dash-card dash-teal">
                            <div class="rev-block">
                                <i class="fa fa-money-bill-wave" style="font-size:28px; margin-bottom:6px;"></i>
                                <div class="rev-amount">KWD {{ number_format($monthly_revenue ?? 0, 2) }}</div>
                                <div class="rev-label">Monthly Revenue</div>
                            </div>
                            <div class="rev-block">
                                <i class="fa fa-chart-line" style="font-size:28px; margin-bottom:6px;"></i>
                                <div class="rev-amount">KWD {{ number_format($yearly_revenue ?? 0, 2) }}</div>
                                <div class="rev-label">Yearly Revenue</div>
                            </div>
                        </a>
                    </div>

                    {{-- 5. Pending Approvals --}}
                    <div class="col-sm-4">
                        <a href="{{ route('business-owner-management.index') }}" class="dash-card dash-red">
                            <div class="card-left">
                                <div class="card-label">Pending Approvals</div>
                                <div class="card-count">{{ number_format($pending_approvals ?? 0) }}</div>
                                <div class="card-sub">
                                    Businesses + Offers + Students
                                </div>
                            </div>
                            <i class="fa fa-clock card-icon"></i>
                        </a>
                    </div>
                </div>

                {{-- SECTION 3: Advanced Analytics Charts --}}
                <div style="margin-top:24px;">
                    <h4 class="text-muted _400 m-b" style="margin-bottom:16px;">Advanced Analytics</h4>
                </div>
                <div class="row row-sm">
                    <div class="col-sm-4">
                        <div class="box p-a">
                            <div class="box-header" style="padding:0; margin-bottom:16px;"><h3>Country Distribution</h3></div>
                            <div class="box-body p-0"><canvas id="countryChart" height="200"></canvas></div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="box p-a">
                            <div class="box-header" style="padding:0; margin-bottom:16px;"><h3>City Distribution</h3></div>
                            <div class="box-body p-0"><canvas id="cityChart" height="200"></canvas></div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="box p-a">
                            <div class="box-header" style="padding:0; margin-bottom:16px;"><h3>Daily Active Users (DAU)</h3></div>
                            <div class="box-body p-0"><canvas id="dauChart" height="200"></canvas></div>
                        </div>
                    </div>
                </div>
                <div class="row row-sm m-t" style="margin-top:16px;">
                    <div class="col-sm-4">
                        <div class="box p-a">
                            <div class="box-header" style="padding:0; margin-bottom:16px;"><h3>Business Growth</h3></div>
                            <div class="box-body p-0"><canvas id="growthChart" height="200"></canvas></div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="box p-a">
                            <div class="box-header" style="padding:0; margin-bottom:16px;"><h3>Redemption Trends</h3></div>
                            <div class="box-body p-0"><canvas id="redemptionChart" height="200"></canvas></div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="box p-a">
                            <div class="box-header" style="padding:0; margin-bottom:16px;"><h3>Loyalty Point Trends</h3></div>
                            <div class="box-body p-0"><canvas id="pointsChart" height="200"></canvas></div>
                        </div>
                    </div>
                </div>

                {{-- SECTION 4: Performance Rankings --}}
                <div style="margin-top:24px;">
                    <h4 class="text-muted _400 m-b" style="margin-bottom:16px;">Performance Rankings</h4>
                </div>
                <div class="row row-sm">
                    <div class="col-sm-6">
                        <div class="box p-a">
                            <div class="box-header" style="padding:0; margin-bottom:16px;"><h3>Top Businesses</h3></div>
                            <div class="box-body p-0">
                                <table class="table table-striped m-b-0">
                                    <thead><tr><th>Business Name</th><th class="text-right">Redemptions</th></tr></thead>
                                    <tbody>
                                        @foreach($top_businesses as $biz)
                                        <tr><td>{{ $biz->business_name }}</td><td class="text-right">{{ $biz->redemptions }}</td></tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="box p-a">
                            <div class="box-header" style="padding:0; margin-bottom:16px;"><h3>Most Redeemed Offers</h3></div>
                            <div class="box-body p-0">
                                <table class="table table-striped m-b-0">
                                    <thead><tr><th>Offer Name</th><th class="text-right">Count</th></tr></thead>
                                    <tbody>
                                        @foreach($top_offers as $off)
                                        <tr><td>{{ $off->reward_name }}</td><td class="text-right">{{ $off->count }}</td></tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- SECTION 5: Live Business Activity Feed --}}
                <div style="margin-top:24px;">
                    <h4 class="text-muted _400 m-b" style="margin-bottom:16px;">Activity Feed</h4>
                </div>
                <div class="row row-sm">
                    <div class="col-sm-12">
                        <div class="box p-a" style="max-height: 500px; overflow-y: auto;">
                            <div class="box-header" style="padding:0; margin-bottom:16px;"><h3>Latest Updates</h3></div>
                            <div class="box-body p-0">
                                <ul class="list-group no-radius m-b-0">
                                    @foreach($latest_offers as $offer)
                                    <li class="list-group-item d-flex align-items-center" style="padding:12px 0;">
                                        <div class="m-r-sm" style="margin-right:12px;">
                                            <span class="label label-warning" style="padding:4px 8px;">Offer</span>
                                        </div>
                                        <div class="flex">
                                            <div class="_500" style="font-weight:600;">{{ $offer->title }}</div>
                                            <small class="text-muted">{{ $offer->description }}</small>
                                            <div class="m-t-xs text-xs text-muted" style="margin-top:4px;">{{ \Carbon\Carbon::parse($offer->created_at)->diffForHumans() }}</div>
                                        </div>
                                    </li>
                                    @endforeach
                                    @foreach($latest_posts as $post)
                                    <li class="list-group-item d-flex align-items-center" style="padding:12px 0;">
                                        <div class="m-r-sm" style="margin-right:12px;">
                                            <img src="{{ $post->business_logo ?? asset('assets/dashboard/img/default-logo.png') }}" class="img-circle w-32" style="width:32px; height:32px;">
                                        </div>
                                        <div class="flex">
                                            <div class="_500" style="font-weight:600;">{{ $post->business_name }} posted a new update</div>
                                            <small class="text-muted">{{ $post->caption }}</small>
                                            <div class="m-t-xs text-xs text-muted" style="margin-top:4px;">{{ \Carbon\Carbon::parse($post->created_at)->diffForHumans() }}</div>
                                        </div>
                                    </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            </div>
        </div>

    </div>
@endsection
@push('after-scripts')
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        // Data from PHP
        const countryData = @json($country_analytics);
        const dauData = @json($dau_data);
        const growthData = @json($growth_data);
        const redemptionData = @json($redemption_stats);
        const pointsData = @json($points_trends);

        // 1. Country Chart (Doughnut)
        new Chart(document.getElementById('countryChart'), {
            type: 'doughnut',
            data: {
                labels: countryData.map(d => d.country),
                datasets: [{
                    data: countryData.map(d => d.count),
                    backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b']
                }]
            },
            options: { maintainAspectRatio: false }
        });

        // 1b. City Chart (Pie)
        const cityData = @json($city_analytics);
        new Chart(document.getElementById('cityChart'), {
            type: 'pie',
            data: {
                labels: cityData.map(d => d.city),
                datasets: [{
                    data: cityData.map(d => d.count),
                    backgroundColor: ['#36b9cc', '#f6c23e', '#e74a3b', '#4e73df', '#1cc88a']
                }]
            },
            options: { maintainAspectRatio: false }
        });

        // 2. DAU Chart (Line)
        new Chart(document.getElementById('dauChart'), {
            type: 'line',
            data: {
                labels: dauData.map(d => d.date),
                datasets: [{
                    label: 'Unique Users',
                    data: dauData.map(d => d.users),
                    borderColor: '#4e73df',
                    fill: true,
                    backgroundColor: 'rgba(78, 115, 223, 0.05)'
                }]
            },
            options: { maintainAspectRatio: false }
        });

        // 3. Growth Chart (Bar)
        new Chart(document.getElementById('growthChart'), {
            type: 'bar',
            data: {
                labels: growthData.map(d => d.date),
                datasets: [{
                    label: 'New Businesses',
                    data: growthData.map(d => d.count),
                    backgroundColor: '#1cc88a'
                }]
            },
            options: { maintainAspectRatio: false }
        });

        // 4. Redemptions Chart (Line)
        new Chart(document.getElementById('redemptionChart'), {
            type: 'line',
            data: {
                labels: redemptionData.map(d => d.date),
                datasets: [{
                    label: 'Redemptions',
                    data: redemptionData.map(d => d.count),
                    borderColor: '#f6c23e',
                    fill: false,
                    tension: 0.1
                }]
            },
            options: { maintainAspectRatio: false }
        });

        // 5. Points Trends Chart (Line)
        new Chart(document.getElementById('pointsChart'), {
            type: 'line',
            data: {
                labels: pointsData.map(d => d.date),
                datasets: [{
                    label: 'Points Issued',
                    data: pointsData.map(d => d.total_points),
                    borderColor: '#e74a3b',
                    fill: true,
                    backgroundColor: 'rgba(231, 74, 59, 0.05)'
                }]
            },
            options: { maintainAspectRatio: false }
        });
    </script>


    <script type="text/javascript">
        $('#datafilter').on('submit', function(e) {
            $('#hidden_date_filter').val($('#date_filter').val());
        });
    </script>

    <script type="text/javascript">
        $(function() {
            let dateInterval = getQueryParameter('date_filter');
            let start = " ";
            let end = " ";

            if (dateInterval) {
                dateInterval = dateInterval.split(' - ');
                start = dateInterval[0];
                end = dateInterval[1];
            }
            $('#date_filter').daterangepicker({
                "showDropdowns": true,
                "showWeekNumbers": true,
                "alwaysShowCalendars": true,
                autoUpdateInput: false,
                startDate: moment().startOf('month'),
                endDate: moment().endOf('month'),
                maxDate: new Date(),
                startDate: start,
                endDate: end,
                locale: {
                    /// format: 'DD/MM/YYYY',
                    firstDay: 1,
                },
            });
            $('#date_filter').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD-MM-YYYY') + ' - ' + picker.endDate.format(
                    'DD-MM-YYYY'));
            });
        });

        function getQueryParameter(name) {
            const url = window.location.href;
            name = name.replace(/[\[\]]/g, "\\$&");
            const regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                results = regex.exec(url);
            if (!results) return null;
            if (!results[2]) return '';
            return decodeURIComponent(results[2].replace(/\+/g, " "));
        }
    </script>


    <script>
        $(document).ready(function() {
            $('#datafilter').on('submit', function(e) {
                var dateFilter = $('#date_filter').val().trim();

                // Check if date_filter is empty
                if (dateFilter === '') {
                    e.preventDefault(); // Prevent form submission
                    $('#span').show(); // Show error message
                    return false;
                } else {
                    $('#span').hide(); // Hide error if filled
                }
            });

            // Optional: hide error when user types
            $('#date_filter').on('input', function() {
                if ($(this).val().trim() !== '') {
                    $('#span').hide();
                }
            });
        });
    </script>
@endpush