@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_tickets" class="header card-inside-title">
                <h2 class="pointer">
                    {{ __('Tickets Statistics') }} 
                    <span class="expander">
                        <i class="fa fa-angle-up pointer" aria-hidden="true"></i>
                    </span>
                </h1>
            </div>
            <div class="body">
            <div class="tickets-stats-container">
                <div class="first-row">
                    <div class="ticket-stat-box bg-total">
                        <div class="stat-icon-bg">
                            <i class="fa fa-ticket"></i>
                        </div>
                        <div class="stat-content">
                            <span class="stat-text">Total Tickets</span>
                            <span class="stat-number">{{ $total_tickets }}</span>
                        </div>
                    </div>
                    <div class="ticket-stat-box bg-new">
                        <div class="stat-icon-bg">
                            <i class="fa fa-plus"></i>
                        </div>
                        <div class="stat-content">
                            <span class="stat-text">New Tickets</span>
                            <span class="stat-number">{{ $total_new_tickets }}</span>
                        </div>
                    </div>
                    <div class="ticket-stat-box bg-progress">
                        <div class="stat-icon-bg">
                            <i class="fa fa-spinner"></i>
                        </div>
                        <div class="stat-content">
                            <span class="stat-text">In Progress</span>
                            <span class="stat-number">{{ $total_progress_tickets }}</span>
                        </div>
                    </div>
                    <div class="ticket-stat-box bg-wait">
                        <div class="stat-icon-bg">
                            <i class="fa fa-hourglass-half"></i>
                        </div>
                        <div class="stat-content">
                            <span class="stat-text">Waiting</span>
                            <span class="stat-number">{{ $total_wait_tickets }}</span>
                        </div>
                    </div>
                    <div class="ticket-stat-box bg-closed">
                        <div class="stat-icon-bg">
                            <i class="fa fa-check"></i>
                        </div>
                        <div class="stat-content">
                            <span class="stat-text">Closed Tickets</span>
                            <span class="stat-number">{{ $total_closed_tickets }}</span>
                        </div>
                    </div>
                </div>

                <div class="second-row">
                    <div class="ticket-stat-box bg-closed">
                        <div class="stat-icon-bg">
                            <i class="fa fa-check"></i>
                        </div>
                        <div class="stat-content">
                            <span class="stat-text">Closed Ticket Percentage</span>
                            <span class="stat-number">{{ number_format($closed_ticket_percentage, 2) }}%</span>
                        </div>
                    </div>
                    <div class="ticket-stat-box bg-average">
                        <div class="stat-icon-bg">
                            <i class="fa fa-hourglass-start"></i>
                        </div>
                        <div class="stat-content">
                            <span class="stat-text">Average Resolution Time</span>
                            <span class="stat-number">{{ $average_resolution_time }}</span>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
</div>

@endsection

<style>
    .tickets-stats-container {
    display: flex;
    flex-direction: column;
    gap: 15px; /* المسافة بين الصفوف */
}

.first-row, .second-row {
    display: flex;
    gap: 15px; /* المسافة بين البوكسز في نفس الصف */
    flex-wrap: wrap; /* يسمح للبوكسز بالانتقال إلى سطر جديد إذا لم يكن هناك مساحة كافية */


    .ticket-stat-box {
        flex: 1;
        min-width: 150px; 
        padding: 10px;
        border-radius: 10px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        position: relative;
        overflow: hidden;
    }

    .stat-icon-bg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 100px; 
        opacity: 0.25;
        z-index: 1;
        color: rgba(255, 255, 255, 0.8); /* لون الأيقونة أكثر وضوحًا */
    }

    .stat-content {
        position: relative;
        z-index: 2; /* التأكد من ظهور النص فوق الأيقونة */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .stat-text {
        font-size: 16px;
        font-weight: bold;
        color: #ffffff; /* لون النص أبيض */
    }

    .stat-number {
        font-size: 40px;
        font-weight: bold;
        color: #ffffff; /* لون النص أبيض */
    }

    /* ألوان خلفية البوكسز */
    .bg-total { background-color: rgba(54, 162, 235, 0.8); } /* أزرق */
    .bg-new { background-color: rgba(76, 175, 80, 0.8); } /* أخضر */
    .bg-progress { background-color: rgba(255, 193, 7, 0.8); } /* أصفر */
    .bg-wait { background-color: rgba(158, 158, 158, 0.8); } /* رمادي */
    .bg-closed { background-color: rgba(244, 67, 54, 0.8); } /* أحمر */
    .bg-average { background-color: rgba(156, 39, 176, 0.8); } /* بنفسجي */

    .card {
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .card .header h2 {
        font-size: 18px;
        color: #333;
        margin: 0;
        padding: 15px;
        border-bottom: 1px solid #eee;
    }

    .card .body {
        padding: 15px;
    }

    .legend-badge {
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 3px;
        margin-right: 5px;
    }

    #dailyStatusChart {
        width: 100% !important;
        height: 400px !important;
    }

    .card .alert-warning {
        margin: 15px;
        padding: 15px;
        border-radius: 4px;
        background-color: #fff3cd;
        color: #856404;
        border: 1px solid #ffeeba;
    }
    #dailyStatusChart {
        width: 100% !important;
        height: 400px !important;
    }

    /* أنماط بطاقات الإحصائات */
    .stats-summary {
        margin-top: 20px;
    }

    .stat-card {
        padding: 15px;
        border-radius: 8px;
        color: white;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .stat-number {
        font-size: 24px;
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
    }

    .stat-label {
        font-size: 14px;
        opacity: 0.9;
    }

    .bg-new { background-color: rgba(76, 175, 80, 0.8); }
    .bg-progress { background-color: rgba(255, 193, 7, 0.8); }
    .bg-wait { background-color: rgba(158, 158, 158, 0.8); }
    .bg-closed { background-color: rgba(244, 67, 54, 0.8); }

    .chartjs-render-monitor {
        margin: 0 auto;
    }
</style>

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script type="text/javascript">
    @php
        $conds_combined = 'daterange=' . implode(' - ', $conds);
    @endphp

    $(function () {
        // Fetch data from the server
        $.ajax({
            url: "{{ route('tickets.tickets.report').'?' }}{!! $conds_combined !!}",
            method: 'GET',
            success: function(response) {
                // Process data for charts
                const data = response.data;

                // Render Call Duration Chart

                // Render Call Distribution Chart
                
            }
        });
    });
    </script>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            const chartSection = `
            <div class="card">
                <div class="header">
                    <h2><i class="fa fa-bar-chart"></i> Ticket Status Chart</h2>
                </div>
                <div class="body" style="position: relative;">
                    <div style="height: 400px;">
                        <canvas id="dailyStatusChart"></canvas>
                    </div>
                    <div id="chartLegend" class="chart-legend mt-3"></div>
                </div>
            </div>`;
            
            document.querySelector('.tickets-stats-container').insertAdjacentHTML('afterend', chartSection);

            const dailyStats = @json($dailyStats ?? []);
            const labels = dailyStats.map(stat => stat.date);
            
            if (dailyStats.length === 0) {
                document.getElementById('dailyStatusChart').closest('.card').innerHTML = `
                    <div class="alert alert-warning">
                        <i class="fa fa-exclamation-triangle"></i> No ticket data available for the selected period.
                    </div>`;
                return;
            }

            const ctx = document.getElementById('dailyStatusChart').getContext('2d');
            
            const chart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: 'New',
                            data: dailyStats.map(stat => stat.new),
                            backgroundColor: 'rgba(76, 175, 80, 0.8)',
                            borderColor: 'rgba(76, 175, 80, 1)',
                            borderWidth: 1,
                            categoryPercentage: 0.8,
                            barPercentage: 0.9
                        },
                        {
                            label: 'In Progress',
                            data: dailyStats.map(stat => stat.progress),
                            backgroundColor: 'rgba(255, 193, 7, 0.8)',
                            borderColor: 'rgba(255, 193, 7, 1)',
                            borderWidth: 1,
                            categoryPercentage: 0.8,
                            barPercentage: 0.9
                        },
                        {
                            label: 'Waiting',
                            data: dailyStats.map(stat => stat.wait),
                            backgroundColor: 'rgba(158, 158, 158, 0.8)',
                            borderColor: 'rgba(158, 158, 158, 1)',
                            borderWidth: 1,
                            categoryPercentage: 0.8,
                            barPercentage: 0.9
                        },
                        {
                            label: 'Closed',
                            data: dailyStats.map(stat => stat.closed),
                            backgroundColor: 'rgba(244, 67, 54, 0.8)',
                            borderColor: 'rgba(244, 67, 54, 1)',
                            borderWidth: 1,
                            categoryPercentage: 0.8,
                            barPercentage: 0.9
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            stacked: true, 
                            grid: {
                                display: false
                            },
                            ticks: {
                                autoSkip: false
                            }
                        },
                        y: {
                            stacked: true, 
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1,
                                precision: 0
                            },
                            title: {
                                display: true,
                                text: 'Number of Tickets'
                            }
                        }
                    },
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.dataset.label || '';
                                    const value = context.raw;
                                    return `${label}: ${value}`;
                                }
                            }
                        },
                        legend: {
                            position: 'top',
                            labels: {
                                boxWidth: 12,
                                padding: 20
                            }
                        }
                    }
                }
            });

            const totalNew = dailyStats.reduce((sum, day) => sum + day.new, 0);
            const totalProgress = dailyStats.reduce((sum, day) => sum + day.progress, 0);
            const totalWait = dailyStats.reduce((sum, day) => sum + day.wait, 0);
            const totalClosed = dailyStats.reduce((sum, day) => sum + day.closed, 0);
            const grandTotal = totalNew + totalProgress + totalWait + totalClosed;

            const legendHtml = ``;
            
            document.getElementById('chartLegend').innerHTML = legendHtml;
        });
    </script>
    <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        // Add a new section for the line and pie charts side by side
        const chartsSection = `
        <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 Ticket Trend</h2>
                    </div>
                    <div class="body" style="position: relative;">
                        <div style="height: 400px;">
                            <canvas id="dailyTrendChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="header">
                        <h2><i class="fa fa-pie-chart"></i> Ticket Category Distribution</h2>
                    </div>
                    <div class="body" style="position: relative;">
                        <div style="height: 400px;">
                            <canvas id="categoryChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>`;
        
        document.querySelector('.tickets-stats-container').insertAdjacentHTML('afterend', chartsSection);

        // Line Chart Logic
        const dailyStats = @json($dailyStats ?? []);
        const labels = dailyStats.map(stat => stat.date);
        if (dailyStats.length > 0) {
            const ctxLine = document.getElementById('dailyTrendChart').getContext('2d');
            const totalTickets = dailyStats.map(stat => stat.new + stat.progress + stat.wait + stat.closed);

            new Chart(ctxLine, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: 'Total Tickets',
                            data: totalTickets,
                            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: 'Number of Tickets' }
                        }
                    },
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `Total Tickets: ${context.raw}`;
                                }
                            }
                        },
                        legend: {
                            position: 'top',
                            labels: { boxWidth: 12, padding: 20 }
                        }
                    }
                }
            });
        }

        // Pie Chart Logic (Category)
        const categoryData = @json($categoryData ?? []);
        if (Object.keys(categoryData).length > 0) {
            const ctxPie = document.getElementById('categoryChart').getContext('2d');
            const labels = Object.keys(categoryData);
            const data = Object.values(categoryData);

            new Chart(ctxPie, {
                type: 'pie',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            data: data,
                            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)',
                                'rgba(100, 181, 246, 0.8)',
                                'rgba(255, 138, 101, 0.8)',
                                'rgba(174, 213, 129, 0.8)',
                                'rgba(255, 241, 118, 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)',
                                'rgba(100, 181, 246, 1)',
                                'rgba(255, 138, 101, 1)',
                                'rgba(174, 213, 129, 1)',
                                'rgba(255, 241, 118, 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 }
                        }
                    }
                }
            });
        }
    });
    </script>
@endpush