@extends('layouts.app')

@section('content')

<?php 
use Modules\Platform\Core\Helper\SettingsHelper;
$SettingsHelper = new SettingsHelper();
?>

<div class="row">
    {!! $filter_area !!}
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="card collapsible">
            <div id="dashboard_leads" class="header card-inside-title">
                <h2 class="pointer">
                    {{ __('Leads Statistics') }} 
                    <span class="expander">
                        <i class="fa fa-angle-up pointer" aria-hidden="true"></i>
                    </span>
                </h2>
            </div>
            <div class="body">
                <div class="leads-stats-container">
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-8">
                            <div class="card">
                                <div class="header">
                                    <h2><i class="fa fa-line-chart"></i> Daily Lead Trend</h2>
                                </div>
                                <div class="body" style="position: relative;">
                                    <div style="height: 400px;">
                                        <canvas id="leadsTimelineChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <div class="header">
                                    <h2><i class="fa fa-pie-chart"></i> Lead Status Distribution</h2>
                                </div>
                                <div class="body" style="position: relative;">
                                    <div style="height: 400px;">
                                        <canvas id="leadStatusChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-4">
                            <div class="card">
                                <div class="header">
                                    <h2><i class="fa fa-pie-chart"></i> Lead Source Distribution</h2>
                                </div>
                                <div class="body" style="position: relative;">
                                    <div style="height: 350px;">
                                        <canvas id="leadSourceChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="card">
                                <div class="header">
                                    <h2><i class="fa fa-bar-chart"></i> Owner Performance</h2>
                                </div>
                                <div class="body" style="position: relative;">
                                    <div style="height: 350px;">
                                        <canvas id="ownerPerformanceChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    // Timeline Line Chart
    const timeline = @json($timeline ?? []);
    const timelineLabels = timeline.map(item => item.date);
    const timelineData = timeline.map(item => item.count);

    if (document.getElementById('leadsTimelineChart')) {
        new Chart(document.getElementById('leadsTimelineChart').getContext('2d'), {
            type: 'line',
            data: {
                labels: timelineLabels,
                datasets: [{
                    label: 'Total Leads',
                    data: timelineData,
                    borderColor: 'rgba(54, 162, 235, 1)',
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderWidth: 2,
                    tension: 0.2,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: { grid: { display: false }, ticks: { autoSkip: false } },
                    y: { beginAtZero: true, title: { display: true, text: 'Leads' } }
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `New Leads: ${context.raw}`;
                            }
                        }
                    },
                    legend: { position: 'top', labels: { boxWidth: 12, padding: 20 } }
                }
            }
        });
    }

    // Status Pie Chart
    const statusCounts = @json($statusCounts ?? []);
    if (document.getElementById('leadStatusChart')) {
        new Chart(document.getElementById('leadStatusChart').getContext('2d'), {
            type: 'pie',
            data: {
                labels: Object.keys(statusCounts),
                datasets: [{
                    data: Object.values(statusCounts),
                    backgroundColor: [
                        'rgba(54, 162, 235, 0.8)',
                        'rgba(255, 99, 132, 0.8)',
                        'rgba(75, 192, 192, 0.8)',
                        'rgba(255, 206, 86, 0.8)',
                        'rgba(153, 102, 255, 0.8)',
                        'rgba(255, 159, 64, 0.8)'
                    ],
                    borderColor: [
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 99, 132, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const total = context.dataset.data.reduce((sum, value) => sum + value, 0);
                                const percentage = ((context.raw / total) * 100).toFixed(2);
                                return `${context.label}: ${context.raw} (${percentage}%)`;
                            }
                        }
                    },
                    legend: { position: 'top', labels: { boxWidth: 12, padding: 20 } }
                }
            }
        });
    }

    // Source Pie Chart
    const sourceCounts = @json($sourceCounts ?? []);
    if (document.getElementById('leadSourceChart')) {
        new Chart(document.getElementById('leadSourceChart').getContext('2d'), {
            type: 'pie',
            data: {
                labels: Object.keys(sourceCounts),
                datasets: [{
                    data: Object.values(sourceCounts),
                    backgroundColor: [
                        'rgba(54, 162, 235, 0.8)',
                        'rgba(255, 99, 132, 0.8)',
                        'rgba(75, 192, 192, 0.8)',
                        'rgba(255, 206, 86, 0.8)',
                        'rgba(153, 102, 255, 0.8)',
                        'rgba(255, 159, 64, 0.8)'
                    ],
                    borderColor: [
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 99, 132, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const total = context.dataset.data.reduce((sum, value) => sum + value, 0);
                                const percentage = ((context.raw / total) * 100).toFixed(2);
                                return `${context.label}: ${context.raw} (${percentage}%)`;
                            }
                        }
                    },
                    legend: { position: 'top', labels: { boxWidth: 12, padding: 20 } }
                }
            }
        });
    }

    // Owner Performance Horizontal Bar Chart
    const ownerCounts = @json($ownerCounts ?? []);
    if (document.getElementById('ownerPerformanceChart')) {
        new Chart(document.getElementById('ownerPerformanceChart').getContext('2d'), {
            type: 'bar',
            data: {
                labels: Object.keys(ownerCounts),
                datasets: [{
                    label: 'Leads Assigned',
                    data: Object.values(ownerCounts),
                    backgroundColor: 'rgba(54, 162, 235, 0.7)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: {
                        beginAtZero: true,
                        title: { display: true, text: 'Number of Leads' }
                    },
                    y: {
                        ticks: { autoSkip: false }
                    }
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `${context.label}: ${context.raw}`;
                            }
                        }
                    },
                    legend: { display: false }
                }
            }
        });
    }
});
</script>
@endpush