@extends('layouts.app')

@section('content')
    
    {{-- Filters row --}}
    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
                <div class="x_content">
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <div class="form-group row">
                                <label class="col-sm-4 col-form-label">From Date</label>
                                <div class="col-sm-8">
                                    <input type="date" name="frmDate" id="frmDate" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group row">
                                <label class="col-sm-4 col-form-label">To Date</label>
                                <div class="col-sm-8">
                                    <input type="date" name="toDate" id="toDate" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <div class="d-flex gap-2">
                                    <button type="button" class="btn btn-primary" id="dashboard-btn-reset">Reset</button>
                                    <button type="button" class="btn btn-success" id="dashboard-btn-filter">Apply</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="btn-group" id="filterbutton">
                                <a href="javascript:void(0);" class="btn btn-primary filterBtn" data-filter="7">Last 7
                                    days</a>
                                <a href="javascript:void(0);" class="btn btn-default filterBtn" data-filter="30">Last 30
                                    days</a>
                                <a href="javascript:void(0);" class="btn btn-default filterBtn" data-filter="90">Last 90
                                    days</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Overall Summary --}}
    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>Overall Summary</h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="row">
                         <div class="col-md-2 col-sm-4 col-6 mb-3">
                            <div class="border rounded p-3 shadow-sm bg-light h-100">
                                <div class="d-flex align-items-center mb-2">
                                    <i class="fa fa-check-square-o fa-lg fa-fw"></i>
                                    <span class="text-dark fw-bold">Signups</span>
                                </div>
                                <h3 id="SignUpUsers" class="mb-0 fw-bold text-dark display-6">0</h3>
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-4 col-6 mb-3">
                            <div class="border rounded p-3 shadow-sm bg-light h-100">
                                <div class="d-flex align-items-center mb-2">
                                    <i class="fa fa-download fa-lg fa-fw"></i>
                                    <span class="text-dark fw-bold">App Downloaded</span>
                                </div>
                                <h3 id="AppDownloadUsers" class="mb-0 fw-bold text-dark display-6">0</h3>
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-4 col-6 mb-3">
                            <div class="border rounded p-3 shadow-sm bg-light h-100">
                                <div class="d-flex align-items-center mb-2">
                                    <i class="fa fa-money fa-lg fa-fw"></i>
                                    <span class="text-dark fw-bold">Subscribed</span>
                                </div>
                                <h3 id="SubscribedUsers" class="mb-0 fw-bold text-dark display-6">0</h3>
                            </div>
                        </div>

                        <div class="col-md-2 col-sm-4 col-6 mb-3">
                            <div class="border rounded p-3 shadow-sm bg-light h-100">
                                <div class="d-flex align-items-center mb-2">
                                    <i class="fa fa-rocket fa-lg fa-fw"></i>
                                    <span class="text-dark fw-bold">Started Program</span>
                                </div>
                                <h3 id="ProgramStartedUsers" class="mb-0 fw-bold text-dark display-6">0</h3>
                            </div>
                        </div>

                        <div class="col-md-2 col-sm-4 col-6 mb-3">
                            <div class="border rounded p-3 shadow-sm bg-light h-100">
                                <div class="d-flex align-items-center gap-2">
                                    <i class="fa fa-dashboard fa-lg fa-fw"></i>
                                    <span class="text-dark fw-bold">Crossed Day 3</span>
                                </div>
                                <h3 id="CrossedDay3Users" class="mb-0 fw-bold text-dark display-6">0</h3>
                            </div>
                        </div>

                        <div class="col-md-2 col-sm-4 col-6 mb-3">
                            <div class="border rounded p-3 shadow-sm bg-light h-100">
                                <div class="d-flex align-items-center mb-2">
                                    <i class="fa fa-trophy fa-lg fa-fw"></i>
                                    <span class="text-dark fw-bold">Program Completed</span>
                                </div>
                                <h3 id="ProgramCompletedUsers" class="mb-0 fw-bold text-dark display-6">0</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Program Sections --}}
    <div class="row" id="ProgramSection"></div>

    {{-- Chart --}}
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>User Trends <small></small></h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content" id="ChartDiv">
                    <div style="position: relative; height: 75vh; width: 100%;">
                        <canvas id="UserChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Update the program-card-template --}}
    <template id="program-card-template">
        <div class="col-md-6 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2 data-program-name></h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="row">
                        <div class="col-md-4 col-sm-4 col-6 mb-3">
                            <div class="border rounded p-3 shadow-sm bg-light h-100">
                                <div class="d-flex align-items-center mb-2">
                                    <i class="fa fa-money fa-lg fa-fw"></i>
                                    <span class="text-dark fw-bold">Subscribed</span>
                                </div>
                                <h3 data-count-subscribed class="mb-0 fw-bold text-dark display-6">0</h3>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-4 col-6 mb-3">
                            <div class="border rounded p-3 shadow-sm bg-light h-100">
                                <div class="d-flex align-items-center mb-2">
                                    <i class="fa fa-dashboard fa-lg fa-fw"></i>
                                    <span class="text-dark fw-bold">Crossed Day 3</span>
                                </div>
                                <h3 data-count-day3 class="mb-0 fw-bold text-dark display-6">0</h3>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-4 col-6 mb-3">
                            <div class="border rounded p-3 shadow-sm bg-light h-100">
                                <div class="d-flex align-items-center mb-2">
                                    <i class="fa fa-trophy fa-lg fa-fw"></i>
                                    <span class="text-dark fw-bold">Program Completed</span>
                                </div>
                                <h3 data-count-completed class="mb-0 fw-bold text-dark display-6">0</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            if (!window.jQuery) {
                console.error('jQuery not loaded');
                return;
            }
            if (!window.Chart) {
                console.error('Chart.js not loaded');
                return;
            }

            // CSRF for jQuery POST
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                        'content')
                }
            });

            const ENDPOINT = @json(route('dashboard.getData', ['partner' => $partnerId]));
            
            const nf = new Intl.NumberFormat();

            let currentChart = null;

            // Initial load
            getDashboardData();

            // Quick filter buttons
            $('#filterbutton').on('click', '.filterBtn', function() {
                const days = $(this).data('filter');
                $('#frmDate, #toDate').val(''); // clear manual dates

                // Remove btn-primary from all buttons and add btn-default
                $('.filterBtn').removeClass('btn-primary').addClass('btn-default');
                // Add btn-primary to clicked button and remove btn-default
                $(this).addClass('btn-primary').removeClass('btn-default');

                getDashboardData(days, null, null);
            });

            // Reset to defaults without full page reload
            $('#dashboard-btn-reset').on('click', function() {
                $('#frmDate, #toDate').val('');
                $('#filterbutton .filterBtn').removeClass('btn-primary');
                $('#filterbutton .filterBtn[data-filter="7"]').addClass('btn-primary'); // default 7 days
                getDashboardData(7, null, null);
            });

            // Apply custom date range
            $('#dashboard-btn-filter').on('click', function() {
                const FrmDate = $('#frmDate').val();
                const ToDate = $('#toDate').val();
                if (!FrmDate || !ToDate) {
                    alert('Please input valid From and To dates');
                    return;
                }
                if (FrmDate > ToDate) {
                    alert('From date cannot be greater than the To date');
                    return;
                }
                $('#filterbutton .filterBtn').removeClass('btn-primary'); // deselect quick filters
                // prevent double clicks during load
                const $btn = $(this).prop('disabled', true).text('Loading...');
                getDashboardData(null, FrmDate, ToDate).always(() => {
                    $btn.prop('disabled', false).text('Apply');
                });
            });

            function getDashboardData(days = null, fromDate = null, toDate = null) {
                return $.ajax({
                    url: ENDPOINT,
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        days,
                        fromDate,
                        toDate
                    },
                    success: function(response) {
                        renderCounters(response);
                        renderPrograms(response.ProgramSection || []);
                        renderChart(response.LineChart || {
                            Label: [],
                            UserCount: [],
                            SubscribedUser: []
                        });
                    },
                    error: function(xhr) {
                        console.error('Dashboard load failed', xhr?.responseText || xhr);
                        alert('Failed to load dashboard data.');
                    }
                });
            }

            function renderCounters(resp) {
                $('#SignUpUsers').text(nf.format(resp.SignUpUsers ?? 0));
                $('#AppDownloadUsers').text(nf.format(resp.AppDownloadUsers ?? 0)); 
                $('#SubscribedUsers').text(nf.format(resp.SubscribedUsers ?? 0));
                $('#CrossedDay3Users').text(nf.format(resp.CrossedDay3Users ?? 0));
                $('#ProgramCompletedUsers').text(nf.format(resp.ProgramCompletedUsers ?? 0));
                $('#ProgramStartedUsers').text(nf.format(resp.ProgramStartedUsers ?? 0));
            }

            function renderPrograms(sections) {
                const host = document.getElementById('ProgramSection');
                const tpl = document.getElementById('program-card-template');
                host.replaceChildren();
                if (!Array.isArray(sections) || !sections.length) return;

                const frag = document.createDocumentFragment();
                for (const s of sections) {
                    const node = tpl.content.cloneNode(true);

                    node.querySelector('[data-program-name]').textContent = s.ProgramName ?? '';

                    node.querySelector('[data-count-subscribed]').textContent = nf.format(s.PartnerSubscribedUser ??
                        0);
                    node.querySelector('[data-count-day3]').textContent = nf.format(s.PartnerUserCrossedDay3 ?? 0);
                    node.querySelector('[data-count-completed]').textContent = nf.format(s
                        .PartnerUserProgramComplete ?? 0);

                    frag.appendChild(node);
                }
                host.appendChild(frag);
            }

            function renderChart(data) {
                const labels = data.Label ?? [];
                const users = data.UserCount ?? [];
                const subs = data.SubscribedUser ?? [];

                const ctx = document.getElementById('UserChart').getContext('2d');
                if (currentChart) {
                    currentChart.destroy();
                }

                currentChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                                label: 'User Count',
                                backgroundColor: 'rgba(38, 185, 154, 0.31)',
                                borderColor: 'rgba(38, 185, 154, 0.7)',
                                pointBorderColor: 'rgba(38, 185, 154, 0.7)',
                                pointBackgroundColor: 'rgba(38, 185, 154, 0.7)',
                                data: users,
                                tension: 0.25,
                                fill: true
                            },
                            {
                                label: 'Subscribed',
                                backgroundColor: 'rgba(255, 165, 0, 0.30)',
                                borderColor: 'rgba(255, 165, 0, 0.70)',
                                pointBorderColor: 'rgba(255, 165, 0, 0.70)',
                                pointBackgroundColor: 'rgba(255, 165, 0, 0.70)',
                                data: subs,
                                tension: 0.25,
                                fill: true
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        interaction: {
                            mode: 'index',
                            intersect: false
                        },
                        plugins: {
                            legend: {
                                display: true,
                                position: 'top',
                            },
                            tooltip: {
                                enabled: true,
                                mode: 'index',
                                intersect: false
                            },
                        },
                        scales: {
                            x: {
                                grid: {
                                    display: true,
                                },
                                ticks: {
                                    autoSkip: true,
                                    maxRotation: 90,
                                    minRotation: 45,
                                    font: {
                                        size: 10
                                    }
                                }
                            },
                            y: {
                                beginAtZero: true,
                                grid: {
                                    display: true,
                                },
                                ticks: {
                                    precision: 0,
                                }
                            }
                        },
                        resizeDelay: 100 
                    }
                });
            }

            // simple HTML escape for program names
            function escapeHtml(str) {
                return String(str)
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }
        });
    </script>
@endpush