<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<?php init_head(); ?>
<script src="<?php echo module_dir_url(PROPERTYBASE_MODULE_NAME, 'assets/js/chart.js'); ?>"></script>
<link rel="stylesheet" href="<?php echo module_dir_url(PROPERTYBASE_MODULE_NAME, 'assets/css/leaflet.css'); ?>"/>
<script src="<?php echo module_dir_url(PROPERTYBASE_MODULE_NAME, 'assets/js/leaflet.js'); ?>"></script>
<div id="wrapper">
    <?php hooks()->do_action('propertybase_reports_enter_section', $data ?? []); ?>
    <div class="content">
        <div class="row">
            <div class="col-md-12 mtop20 mbot20">
                <div class="widget relative" id="widget-top_stats" data-name="Quick Statistics">
                    <div class="widget-dragger ui-sortable-handle"></div>
                    <div class="row">

                        <div class="col-xs-12 col-md-6 col-sm-6 col-lg-4">
                            <div class="top_stats_wrapper">
                                <div class="tw-text-neutral-800 mtop5 tw-flex tw-items-center tw-justify-between">
                                    <div class="tw-font-medium tw-inline-flex text-neutral-600 tw-items-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                             stroke-width="1.5" stroke="currentColor"
                                             class="tw-w-6 tw-h-6 tw-mr-3 rtl:tw-ml-3 tw-text-neutral-600">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                  d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"></path>
                                        </svg>
                                        <?php echo _l('propertybase_total_invoices_paid_for_properties'); ?>
                                    </div>
                                </div>
                                <div class="tw-text-2xl tw-font-bold tw-text-gray-800 tw-mt-4 propertybase-seagreen-reports">
                                    <?php echo $property_summary_data['total_invoices_paid']; ?>
                                </div>
                                <div class="progress tw-mb-0 tw-mt-4 progress-bar-mini">
                                    <div class="progress-bar progress-bar-success no-percent-text not-dynamic propertybase-bar-total-percentage"
                                         role="progressbar" aria-valuenow="96.88" aria-valuemin="0" aria-valuemax="100"
                                         data-percent="96.88">

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

                        <div class="col-xs-12 col-md-6 col-sm-6 col-lg-4">
                            <div class="top_stats_wrapper">
                                <div class="tw-text-neutral-800 mtop5 tw-flex tw-items-center tw-justify-between">
                                    <div class="tw-font-medium tw-inline-flex text-neutral-600 tw-items-center">
                                        <svg fill="#475569" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
                                             xmlns:xlink="http://www.w3.org/1999/xlink"
                                             class="tw-w-6 tw-h-6 tw-mr-3 rtl:tw-ml-3 tw-text-neutral-600"
                                             viewBox="0 0 973.8 973.8" xml:space="preserve" stroke="#475569"><g
                                                    id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round"
                                               stroke-linejoin="round"></g>
                                            <g id="SVGRepo_iconCarrier">
                                                <g>
                                                    <path d="M923.9,758.25H50c-27.6,0-50,22.4-50,50c0,27.602,22.4,50,50,50h873.8c27.601,0,50-22.398,50-50 C973.8,780.65,951.5,758.25,923.9,758.25z"></path>
                                                    <path d="M911.101,726.25H712.7c-31.8,0-57.5-25.699-57.5-57.5c0-31.799,25.7-57.5,57.5-57.5h72.4L634.8,484.45 c-2.3-2-5.3-3.1-8.399-3.1h-239.8c-26.9,0-53-9.601-73.4-27.2L20.7,203.55c-21-18-23.4-49.5-5.4-70.5c9.9-11.5,23.9-17.5,38-17.5 c11.5,0,23.1,4,32.5,12l292.4,250.7c2.3,2,5.3,3.1,8.4,3.1h239.8c26.899,0,53,9.6,73.399,27.2l153.7,129.6v-68.799 c0-31.801,25.7-57.5,57.5-57.5s57.5,25.699,57.5,57.5V668.65C968.601,700.55,942.8,726.25,911.101,726.25z"></path>
                                                </g>
                                            </g></svg>
                                        <?php echo _l('propertybase_total_properties_expenses'); ?>
                                    </div>
                                </div>
                                <div class="tw-text-2xl tw-font-bold tw-text-gray-800 tw-mt-4 propertybase-indianred-reports">
                                    <?php echo $property_summary_data['total_expenses']; ?>
                                </div>
                                <div class="progress tw-mb-0 tw-mt-4 progress-bar-mini">
                                    <div class="progress-bar progress-bar-danger no-percent-text not-dynamic propertybase-bar-total-percentage"
                                         role="progressbar" aria-valuenow="96.88" aria-valuemin="0" aria-valuemax="100"
                                         data-percent="96.88">

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

                        <div class="col-xs-12 col-md-6 col-sm-6 col-lg-4 mbot30">
                            <div class="top_stats_wrapper">
                                <div class="tw-text-neutral-800 mtop5 tw-flex tw-items-center tw-justify-between">
                                    <div class="tw-font-medium tw-inline-flex text-neutral-600 tw-items-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                             stroke-width="1.5" stroke="currentColor"
                                             class="tw-w-6 tw-h-6 tw-mr-3 rtl:tw-ml-3 tw-text-neutral-600">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                  d="M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 019 9v.375M10.125 2.25A3.375 3.375 0 0113.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 013.375 3.375M9 15l2.25 2.25L15 12"></path>
                                        </svg>
                                        <?php echo _l('propertybase_final_balance'); ?>
                                    </div>
                                </div>
                                <div
                                        class="tw-text-2xl tw-font-bold tw-text-gray-800 tw-mt-4 propertybase-cornflowerblue-reports">
                                    <?php echo $property_summary_data['final_balance']; ?>
                                </div>
                                <div class="progress tw-mb-0 tw-mt-4 progress-bar-mini">
                                    <div class="progress-bar no-percent-text not-dynamic propertybase-bar-total-percentage"
                                         role="progressbar" aria-valuenow="96.88" aria-valuemin="0" aria-valuemax="100"
                                         data-percent="96.88">

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

                        <div class="col-xs-12 col-md-6 col-sm-6 col-lg-3 tw-mb-2 sm:tw-mb-0">
                            <div class="top_stats_wrapper">
                                <div class="tw-text-neutral-800 mtop5 tw-flex tw-items-center tw-justify-between">
                                    <div class="tw-font-medium tw-inline-flex text-neutral-600 tw-items-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                             stroke-width="1.5" stroke="currentColor"
                                             class="tw-w-6 tw-h-6 tw-mr-3 rtl:tw-ml-3 tw-text-neutral-600">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                  d="M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 019 9v.375M10.125 2.25A3.375 3.375 0 0113.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 013.375 3.375M9 15l2.25 2.25L15 12"></path>
                                        </svg>
                                        <?php echo _l('propertybase_total_properties_for_sale'); ?>
                                    </div>
                                </div>
                                <div
                                        class="tw-text-2xl tw-font-bold tw-text-gray-800 tw-mt-4">
                                    <?php echo $property_summary_data['total_for_sale']; ?>
                                </div>
                                <div class="progress tw-mb-0 tw-mt-5 progress-bar-mini">
                                    <div class="progress-bar progress-bar-default no-percent-text not-dynamic propertybase-full-width"
                                         role="progressbar"
                                         aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100"
                                         data-percent="100.00">

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

                        <div class="col-xs-12 col-md-6 col-sm-6 col-lg-3 tw-mb-2 sm:tw-mb-0">
                            <div class="top_stats_wrapper">
                                <div class="tw-text-neutral-800 mtop5 tw-flex tw-items-center tw-justify-between">
                                    <div class="tw-font-medium tw-inline-flex text-neutral-600 tw-items-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                             stroke-width="1.5" stroke="currentColor"
                                             class="tw-w-6 tw-h-6 tw-mr-3 rtl:tw-ml-3 tw-text-neutral-600">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                  d="M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 019 9v.375M10.125 2.25A3.375 3.375 0 0113.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 013.375 3.375M9 15l2.25 2.25L15 12"></path>
                                        </svg>
                                        <?php echo _l('propertybase_total_properties_for_rent'); ?>
                                    </div>
                                </div>
                                <div class="tw-text-2xl tw-font-bold tw-text-gray-800 tw-mt-4">
                                    <?php echo $property_summary_data['total_for_rent']; ?>
                                </div>
                                <div class="progress tw-mb-0 tw-mt-4 progress-bar-mini">
                                    <div class="progress-bar progress-bar-default no-percent-text not-dynamic propertybase-full-width"
                                         role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"
                                         data-percent="100">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xs-12 col-md-6 col-sm-6 col-lg-3 tw-mb-2 sm:tw-mb-0">
                            <div class="top_stats_wrapper">
                                <div class="tw-text-neutral-800 mtop5 tw-flex tw-items-center tw-justify-between">
                                    <div class="tw-font-medium tw-inline-flex tw-items-center text-neutral-500">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                             stroke-width="1.5" stroke="currentColor"
                                             class="tw-w-6 tw-h-6 tw-mr-3 rtl:tw-ml-3 tw-text-neutral-600">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                  d="M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 019 9v.375M10.125 2.25A3.375 3.375 0 0113.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 013.375 3.375M9 15l2.25 2.25L15 12"></path>
                                        </svg>
                                        <?php echo _l('propertybase_total_properties_for_rent_sale'); ?>
                                    </div>
                                </div>
                                <div class="tw-text-2xl tw-font-bold tw-text-gray-800 tw-mt-4">
                                    <?php echo $property_summary_data['total_for_sale_and_rent']; ?>
                                </div>
                                <div class="progress tw-mb-0 tw-mt-4 progress-bar-mini">
                                    <div class="progress-bar progress-bar-default no-percent-text not-dynamic propertybase-full-width"
                                         role="progressbar" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100"
                                         data-percent="100.00">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xs-12 col-md-6 col-sm-6 col-lg-3">
                            <div class="top_stats_wrapper">
                                <div class="tw-text-neutral-800 mtop5 tw-flex tw-items-center tw-justify-between">
                                    <div class="tw-font-medium tw-inline-flex text-neutral-600 tw-items-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                             stroke-width="1.5" stroke="currentColor"
                                             class="tw-w-6 tw-h-6 tw-mr-3 rtl:tw-ml-3 tw-text-neutral-600">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                  d="M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 019 9v.375M10.125 2.25A3.375 3.375 0 0113.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 013.375 3.375M9 15l2.25 2.25L15 12"></path>
                                        </svg>
                                        <?php echo _l('propertybase_total_properties'); ?>
                                    </div>
                                </div>
                                <div class="tw-text-2xl tw-font-bold tw-text-gray-800 tw-mt-4">
                                    <?php echo $property_summary_data['total_properties']; ?>
                                </div>
                                <div class="progress tw-mb-0 tw-mt-4 progress-bar-mini">
                                    <div class="progress-bar progress-bar-default no-percent-text not-dynamic propertybase-bar-total-percentage"
                                         role="progressbar" aria-valuenow="96.88" aria-valuemin="0" aria-valuemax="100"
                                         data-percent="96.88">

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

                        <?php hooks()->do_action('propertybase_reports_first_section', $data ?? []); ?>
                    </div>
                </div>
            </div>

            <div class="col-md-8">
                <div class="panel_s">
                    <div class="panel-body">
                        <div class="col-md-12 mbot10">
                            <p class="tw-font-medium tw-flex tw-items-center tw-mb-0 tw-space-x-1.5 rtl:tw-space-x-reverse tw-p-1.5">
                                <span class="tw-text-neutral-700">
                                    <?php echo _l('propertybase_properties_locations_chart'); ?>
                                </span>
                            </p>
                            <hr class="-tw-mx-3 tw-mt-3 tw-mb-6">
                            <div class="propertybase-reports-location-map" id="loadPropertyLocationByMapChart"></div>
                        </div>
                    </div>
                </div>
                <?php hooks()->do_action('propertybase_reports_second_section', $data ?? []); ?>
            </div>

            <div class="col-md-4">
                <div class="panel_s">
                    <div class="panel-body">
                        <div class="col-md-12 mbot10">
                            <canvas id="propertyCategoryPieChart" width="350" height="350"></canvas>
                        </div>
                    </div>
                </div>
                <?php hooks()->do_action('propertybase_reports_third_section', $data ?? []); ?>
            </div>

            <div class="col-md-8">
                <div class="panel_s">
                    <div class="panel-body">
                        <div class="col-md-12 mbot10">
                            <canvas id="propertyLeadsByMonthLineChart" width="350" height="350"></canvas>
                        </div>
                    </div>
                </div>
                <?php hooks()->do_action('propertybase_reports_fourth_section', $data ?? []); ?>
            </div>

            <div class="col-md-4">
                <div class="panel_s">
                    <div class="panel-body">
                        <div class="col-md-12 mbot10">
                            <canvas id="propertyOwnershipPieChart" width="350" height="350"></canvas>
                        </div>
                    </div>
                </div>
                <?php hooks()->do_action('propertybase_reports_first_fifth_section', $data ?? []); ?>
            </div>

            <div class="col-md-8">
                <div class="panel_s">
                    <div class="panel-body">
                        <div class="col-md-12 mbot10">
                            <canvas id="leadsByMonthLineChart" width="350" height="350"></canvas>
                        </div>
                    </div>
                </div>
                <?php hooks()->do_action('propertybase_reports_sixth_section', $data ?? []); ?>
            </div>

            <div class="col-md-4">
                <div class="panel_s">
                    <div class="panel-body">
                        <div class="col-md-12 mbot10">
                            <canvas id="maintenanceRequestsBarChart" width="350" height="350"></canvas>
                        </div>
                    </div>
                </div>
                <?php hooks()->do_action('propertybase_reports_seven_section', $data ?? []); ?>
            </div>

            <?php hooks()->do_action('propertybase_reports_end_section', $data ?? []); ?>
        </div>
    </div>
</div>
<?php init_tail(); ?>
<?php hooks()->do_action('propertybase_reports_script_section', $data ?? []); ?>
<script>
    'use strict';

    $(document).ready(function () {
        loadPropertyLocationByMapChart();
        loadPropertyCategoryPieChart()
        loadPropertyLeadsByMonthLineChart()
        loadLeadsByMonthLineChart()
        loadPropertyOwnershipPieChart()
        loadMaintenanceRequestsBarChart()
    });

    function loadMaintenanceRequestsBarChart() {
        'use strict';

        var ctx = document.getElementById('maintenanceRequestsBarChart').getContext('2d');
        var data = <?php echo json_encode($maintenance_requests_by_property); ?>;

        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        var propertyNames = [];
        var maintenanceCounts = {};

        data.forEach(function (item) {
            if (!maintenanceCounts[item.property_name]) {
                maintenanceCounts[item.property_name] = new Array(12).fill(0);
                propertyNames.push(item.property_name);
            }
            maintenanceCounts[item.property_name][item.month - 1] = item.maintenance_count;
        });

        propertyNames = propertyNames.filter(function (propertyName) {
            return maintenanceCounts[propertyName].some(function (count) {
                return count > 0;
            });
        });

        var filteredMaintenanceCounts = {};
        propertyNames.forEach(function (propertyName) {
            filteredMaintenanceCounts[propertyName] = maintenanceCounts[propertyName];
        });

        var datasets = propertyNames.map(function (propertyName, index) {
            return {
                label: propertyName,
                data: filteredMaintenanceCounts[propertyName],
                borderColor: getRandomColor(),
                backgroundColor: getRandomColor(0.2),
                borderWidth: 1
            };
        });

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: months,
                datasets: datasets
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        stepSize: 1
                    }
                },
                title: {
                    display: true,
                    text: '<?php echo _l("propertybase_maintenance_requests_by_property"); ?>'
                }
            }
        });
    }

    function getRandomColor(alpha = 1) {
        return 'rgba(' + Math.floor(Math.random() * 256) + ',' +
            Math.floor(Math.random() * 256) + ',' +
            Math.floor(Math.random() * 256) + ',' +
            alpha + ')';
    }

    function loadPropertyOwnershipPieChart() {
        'use strict';

        var ctx = document.getElementById('propertyOwnershipPieChart').getContext('2d');
        var data = <?php echo json_encode($property_ownership_distribution); ?>;

        var labels = [];
        var counts = [];
        var colors = [
            'rgba(255, 99, 132, 0.7)',
            'rgba(54, 162, 235, 0.7)',
            'rgba(255, 206, 86, 0.7)',
            'rgba(75, 192, 192, 0.7)',
            'rgba(153, 102, 255, 0.7)',
            'rgba(255, 159, 64, 0.7)'
        ];

        data.forEach(function (item, index) {
            labels.push(item.ownership_type);
            counts.push(item.property_count);
        });

        new Chart(ctx, {
            type: 'pie',
            data: {
                labels: labels,
                datasets: [{
                    data: counts,
                    backgroundColor: colors.slice(0, labels.length),
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                title: {
                    display: true,
                    text: '<?php echo _l("propertybase_property_ownership_distribution"); ?>'
                }
            }
        });
    }

    function loadLeadsByMonthLineChart() {
        'use strict';

        var ctx = document.getElementById('leadsByMonthLineChart').getContext('2d');
        var data = <?php echo json_encode($leads_monthly); ?>;

        var months = [];
        var counts = [];

        for (var i = 1; i <= 12; i++) {
            months.push(getMonthName(i));
            counts.push(0);
        }

        data.forEach(function (item) {
            var monthIndex = item.month - 1;
            counts[monthIndex] = item.lead_count;
        });

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: months,
                datasets: [{
                    label: '<?php echo _l("propertybase_leads_by_month_chart"); ?>',
                    data: counts,
                    borderColor: 'rgb(54, 162, 235)',
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        stepSize: 1
                    }
                },
                title: {
                    display: true,
                    text: '<?php echo _l("propertybase_leads_by_month_chart"); ?>'
                }
            }
        });
    }

    function loadPropertyLeadsByMonthLineChart() {
        'use strict';

        var ctx = document.getElementById('propertyLeadsByMonthLineChart').getContext('2d');
        var data = <?php echo json_encode($leads_by_month); ?>;

        var months = [];
        var counts = [];
        var propertyNames = [];

        for (var i = 1; i <= 12; i++) {
            months.push(getMonthName(i));
            counts.push(0);
            propertyNames.push('');
        }

        data.forEach(function (item) {
            var monthIndex = item.month - 1;
            counts[monthIndex] = item.lead_count;
            propertyNames[monthIndex] = item.name;
        });

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: months,
                datasets: [{
                    label: '<?php echo _l("propertybase_property_leads_by_month"); ?>',
                    data: counts,
                    borderColor: 'rgb(100,75,192)',
                    backgroundColor: 'rgba(104,75,192,0.2)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        stepSize: 1
                    }
                },
                title: {
                    display: true,
                    text: '<?php echo _l("propertybase_property_leads_by_month"); ?>'
                },
                tooltips: {
                    callbacks: {
                        title: function (tooltipItem) {
                            var monthLabel = tooltipItem[0].label;
                            var propertyName = propertyNames[tooltipItem[0].index];
                            return monthLabel + ' - ' + propertyName;
                        },
                        label: function (tooltipItem) {
                            return 'Leads: ' + tooltipItem.yLabel;
                        }
                    }
                }
            }
        });
    }

    function loadPropertyCategoryPieChart() {
        'use strict';

        var ctx = document.getElementById('propertyCategoryPieChart').getContext('2d');

        var labels = <?php echo json_encode(array_column($category_distribution, 'category_name')); ?>;
        var data = <?php echo json_encode(array_column($category_distribution, 'property_count')); ?>;

        new Chart(ctx, {
            type: 'pie',
            data: {
                labels: labels.map(category => `${category}`),
                datasets: [{
                    data: data,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.7)',
                        'rgba(54, 162, 235, 0.7)',
                        'rgba(255, 206, 86, 0.7)',
                        'rgba(75, 192, 192, 0.7)',
                        'rgba(153, 102, 255, 0.7)',
                        'rgba(255, 159, 64, 0.7)'
                    ],
                }]
            },
            options: {
                responsive: false,
                maintainAspectRatio: false,
                title: {
                    display: true,
                    text: '<?php echo _l("propertybase_property_category_distribution_chart"); ?>'
                }
            }
        });
    }

    function loadPropertyLocationByMapChart() {
        'use strict';

        var map = L.map('loadPropertyLocationByMapChart').setView([20.0, 0.0], 2);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        var propertyLocations = <?= json_encode($property_location_map_chart); ?>;

        propertyLocations.forEach(function (location) {
            if (location.lat && location.lng) {
                var popupContent = `
            <strong>${location.property_name}</strong><br>
            ${location.property_address}<br>
        `;

                L.marker([location.lat, location.lng])
                    .addTo(map)
                    .bindPopup(popupContent);
            }
        });

    }

    function getMonthName(month) {
        'use strict';

        var monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
            'July', 'August', 'September', 'October', 'November', 'December'];
        return monthNames[month - 1];
    }
</script>