<?php /*Template Name: Charts */ ?>
<?php get_header();?>



    <section class="py-5 bg-light">
        <div class="container">
            <div class="row text-center mb-5">
                <div class="col-lg-8 mx-auto">
                    <h2 class="display-4 font-weight-bold mb-4" data-aos="fade-up">
                        رحلة النمو والتطور
                    </h2>
                    <p class="lead text-muted" data-aos="fade-up" data-aos-delay="100">
                        تحليلات وإحصائيات تُظهر مسيرة إفادة المتميزة عبر السنوات
                    </p>
                </div>
            </div>

            <div class="row">
                <?php if (get_field('main-grow', 'option')): ?>
                    <div class="col-lg-6 mb-4" data-aos="fade-right">
                        <div class="chart-card">
                            <div class="chart-header">
                                <h5 class="font-weight-bold">
                                    <i class="fas fa-chart-area mr-2 text-primary"></i>
                                    <?php the_field('tit-grow', 'option') ?>
                                </h5>
                                <p class="text-muted"><?php the_field('side-grow', 'option') ?></p>
                            </div>
                            <canvas id="growthChart" height="300"></canvas>
                        </div>
                    </div>
                <?php endif; ?>
                <?php if (get_field('main-sector', 'option')): ?>
                    <div class="col-lg-6 mb-4" data-aos="fade-left">
                        <div class="chart-card">
                            <div class="chart-header">
                                <h5 class="font-weight-bold">
                                    <i class="fas fa-chart-pie mr-2 text-success"></i>
                                    <?php the_field('tit-sector', 'option') ?>
                                </h5>
                                <p class="text-muted"><?php the_field('side-sector', 'option') ?></p>
                            </div>
                            <canvas id="sectorChart" height="300"></canvas>
                        </div>
                    </div>
                <?php endif; ?>
            </div>

            <div class="row">
                <?php if (get_field('main-performance', 'option')): ?>
                    <div class="col-lg-6 mb-4" data-aos="fade-right" data-aos-delay="200">
                        <div class="chart-card">
                            <div class="chart-header">
                                <h5 class="font-weight-bold">
                                    <i class="fas fa-chart-bar mr-2 text-warning"></i>
                                    <?php the_field('tit-performance', 'option') ?>
                                </h5>
                                <p class="text-muted"><?php the_field('side-performance', 'option') ?></p>
                            </div>
                            <canvas id="performanceChart" height="300"></canvas>
                        </div>
                    </div>
                <?php endif; ?>
                <?php if (get_field('main-monthly', 'option')): ?>
                    <div class="col-lg-6 mb-4" data-aos="fade-left" data-aos-delay="200">
                        <div class="chart-card">
                            <div class="chart-header">
                                <h5 class="font-weight-bold">
                                    <i class="fas fa-chart-line mr-2 text-info"></i>
                                    <?php the_field('tit-monthly', 'option') ?>
                                </h5>
                                <p class="text-muted"><?php the_field('side-monthly', 'option') ?></p>
                            </div>
                            <canvas id="monthlyChart" height="300"></canvas>
                        </div>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </section>
    <script>
        // Chart initialization function
        function initializeCharts() {
            // Growth Chart
            const growthCtx = document.getElementById('growthChart');
            if (growthCtx) {
                new Chart(growthCtx, {
                    type: 'line',
                    data: {
                        labels: [
                            <?php
                            $labels = [];
                            while (have_rows('main-grow', 'option')): the_row();
                                $labels[] = '"' . get_sub_field('years-grow') . '"';
                            endwhile;
                            echo implode(',', $labels);
                            ?>
                        ],
                        datasets: [{
                            label: 'عدد العملاء',
                            data: [
                                <?php
                                $data = [];
                                while (have_rows('main-grow', 'option')): the_row();
                                    $data[] = '"' . get_sub_field('num-grow') . '"';
                                endwhile;
                                echo implode(',', $data);
                                ?>
                            ],
                            borderColor: '#3B82F6',
                            backgroundColor: 'rgba(59, 130, 246, 0.1)',
                            borderWidth: 3,
                            fill: true,
                            tension: 0.4,
                            pointBackgroundColor: '#3B82F6',
                            pointBorderColor: '#ffffff',
                            pointBorderWidth: 2,
                            pointRadius: 6
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: {
                                    color: 'rgba(0, 0, 0, 0.1)'
                                },
                                ticks: {
                                    font: {
                                        family: 'Cairo'
                                    }
                                }
                            },
                            x: {
                                grid: {
                                    color: 'rgba(0, 0, 0, 0.1)'
                                },
                                ticks: {
                                    font: {
                                        family: 'Cairo'
                                    }
                                }
                            }
                        },
                        animation: {
                            duration: 2000,
                            easing: 'easeInOutQuart'
                        }
                    }
                });
            }

            // Sector Chart
            const sectorCtx = document.getElementById('sectorChart');
            if (sectorCtx) {
                new Chart(sectorCtx, {
                    type: 'doughnut',
                    data: {
                        labels: [
                            <?php
                            $labels = [];
                            while (have_rows('main-sector', 'option')): the_row();
                                $labels[] = '"' . get_sub_field('tit-sector') . '"';
                            endwhile;
                            echo implode(',', $labels);
                            ?>
                        ],
                        datasets: [{
                            data: [
                                <?php
                                $data = [];
                                while (have_rows('main-sector', 'option')): the_row();
                                    $data[] = '"' . get_sub_field('num-sector') . '"';
                                endwhile;
                                echo implode(',', $data);
                                ?>
                            ],
                            backgroundColor: [
                                <?php
                                $background = [];
                                while (have_rows('main-sector', 'option')): the_row();
                                    $background[] = '"' . get_sub_field('color-sector') . '"';
                                endwhile;
                                echo implode(',', $background);
                                ?>
                            ],
                            borderWidth: 0,
                            hoverBorderWidth: 3,
                            hoverBorderColor: '#ffffff'
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'bottom',
                                labels: {
                                    font: {
                                        family: 'Cairo',
                                        size: 12
                                    },
                                    padding: 20,
                                    usePointStyle: true
                                }
                            }
                        },
                        animation: {
                            duration: 2000,
                            easing: 'easeInOutQuart'
                        }
                    }
                });
            }

            // Performance Chart
            const performanceCtx = document.getElementById('performanceChart');
            if (performanceCtx) {
                new Chart(performanceCtx, {
                    type: 'bar',
                    data: {
                        labels: [
                            <?php
                            $labels = [];
                            while (have_rows('main-performance', 'option')): the_row();
                                $labels[] = '"' . get_sub_field('tit-performance') . '"';
                            endwhile;
                            echo implode(',', $labels);
                            ?>
                        ],
                        datasets: [{
                            label: 'النسبة المئوية',
                            data: [
                                <?php
                                $data = [];
                                while (have_rows('main-performance', 'option')): the_row();
                                    $data[] = '"' . get_sub_field('num-performance') . '"';
                                endwhile;
                                echo implode(',', $data);
                                ?>
                            ],
                            backgroundColor: [
                                <?php
                                $background = [];
                                while (have_rows('main-performance', 'option')): the_row();
                                    $background[] = '"' . get_sub_field('color-performance') . '"';
                                endwhile;
                                echo implode(',', $background);
                                ?>
                            ],
                            borderRadius: 8,
                            borderSkipped: false
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                max: 100,
                                grid: {
                                    color: 'rgba(0, 0, 0, 0.1)'
                                },
                                ticks: {
                                    font: {
                                        family: 'Cairo'
                                    },
                                    callback: function(value) {
                                        return value + '%';
                                    }
                                }
                            },
                            x: {
                                grid: {
                                    display: false
                                },
                                ticks: {
                                    font: {
                                        family: 'Cairo',
                                        size: 10
                                    },
                                    maxRotation: 45
                                }
                            }
                        },
                        animation: {
                            duration: 2000,
                            easing: 'easeInOutQuart'
                        }
                    }
                });
            }

            // Monthly Chart
            const monthlyCtx = document.getElementById('monthlyChart');
            if (monthlyCtx) {
                new Chart(monthlyCtx, {
                    type: 'line',
                    data: {
                        labels: [
                            <?php
                            $labels = [];
                            while (have_rows('main-monthly', 'option')): the_row();
                                $labels[] = '"' . get_sub_field('month-monthly') . '"';
                            endwhile;
                            echo implode(',', $labels);
                            ?>
                        ],
                        datasets: [{
                            label: 'المشاريع المنجزة',
                            data: [
                                <?php
                                $data = [];
                                while (have_rows('main-monthly', 'option')): the_row();
                                    $data[] = '"' . get_sub_field('num-monthly') . '"';
                                endwhile;
                                echo implode(',', $data);
                                ?>
                            ],
                            borderColor: '#F59E0B',
                            backgroundColor: 'rgba(245, 158, 11, 0.1)',
                            borderWidth: 3,
                            fill: false,
                            tension: 0.4,
                            pointBackgroundColor: '#F59E0B',
                            pointBorderColor: '#ffffff',
                            pointBorderWidth: 2,
                            pointRadius: 6,
                            yAxisID: 'y'
                        }, {
                            label: 'رضا العملاء %',
                            data: [
                                <?php
                                $data = [];
                                while (have_rows('main-monthly', 'option')): the_row();
                                    $data[] = '"' . get_sub_field('client-monthly') . '"';
                                endwhile;
                                echo implode(',', $data);
                                ?>
                            ],
                            borderColor: '#06B6D4',
                            backgroundColor: 'rgba(6, 182, 212, 0.1)',
                            borderWidth: 3,
                            fill: false,
                            tension: 0.4,
                            pointBackgroundColor: '#06B6D4',
                            pointBorderColor: '#ffffff',
                            pointBorderWidth: 2,
                            pointRadius: 6,
                            yAxisID: 'y1'
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        interaction: {
                            mode: 'index',
                            intersect: false,
                        },
                        plugins: {
                            legend: {
                                position: 'bottom',
                                labels: {
                                    font: {
                                        family: 'Cairo'
                                    },
                                    padding: 20,
                                    usePointStyle: true
                                }
                            }
                        },
                        scales: {
                            x: {
                                grid: {
                                    color: 'rgba(0, 0, 0, 0.1)'
                                },
                                ticks: {
                                    font: {
                                        family: 'Cairo'
                                    }
                                }
                            },
                            y: {
                                type: 'linear',
                                display: true,
                                position: 'right',
                                beginAtZero: true,
                                grid: {
                                    color: 'rgba(0, 0, 0, 0.1)'
                                },
                                ticks: {
                                    font: {
                                        family: 'Cairo'
                                    }
                                }
                            },
                            y1: {
                                type: 'linear',
                                display: true,
                                position: 'left',
                                min: 90,
                                max: 100,
                                grid: {
                                    drawOnChartArea: false,
                                },
                                ticks: {
                                    font: {
                                        family: 'Cairo'
                                    },
                                    callback: function(value) {
                                        return value + '%';
                                    }
                                }
                            }
                        },
                        animation: {
                            duration: 2000,
                            easing: 'easeInOutQuart'
                        }
                    }
                });
            }
        }
    </script>


<?php get_footer();?>