@extends('layout.mainlayout')

@section('content')
<div class="page-wrapper cardhead">
    <div class="content container-fluid">
        @component('components.breadcrumb')
            @slot('title')
                Ticket Analytics
            @endslot
        @endcomponent

        <div class="card border-0 report-shell mb-3">
            <div class="card-body">
                <div class="row g-2">
                    <div class="col-md-2">
                        <label class="form-label mb-1">From</label>
                        <input type="date" id="from" class="form-control">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label mb-1">To</label>
                        <input type="date" id="to" class="form-control">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label mb-1">Period</label>
                        <select id="period" class="form-control">
                            <option value="daily">Daily</option>
                            <option value="weekly">Weekly</option>
                            <option value="monthly" selected>Monthly</option>
                            <option value="quarterly">Quarterly</option>
                            <option value="halfyearly">Half Yearly</option>
                            <option value="yearly">Yearly</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label mb-1">Department</label>
                        <select id="department_id" class="form-control select2">
                            <option value="">All Departments</option>
                            @foreach($departments as $d)
                                <option value="{{ $d->id }}">{{ $d->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label mb-1">Resolver</label>
                        <select id="resolver_id" class="form-control select2">
                            <option value="">All Resolvers</option>
                            @foreach($resolvers as $r)
                                <option value="{{ $r->id }}">{{ $r->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12">
                        <button class="btn btn-primary w-100 mt-1" onclick="loadTicketReport()">Apply Filters</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-2 mb-3">
            <div class="col-xl col-md-4">
                <div class="card kpi-card border-0">
                    <div class="card-body text-center">
                        <small>Assigned Tickets</small>
                        <h3 id="kpiAssigned" class="mb-0">0</h3>
                    </div>
                </div>
            </div>
            <div class="col-xl col-md-4">
                <div class="card kpi-card border-0">
                    <div class="card-body text-center">
                        <small>Resolved Tickets</small>
                        <h3 id="kpiResolved" class="mb-0">0</h3>
                    </div>
                </div>
            </div>
            <div class="col-xl col-md-4">
                <div class="card kpi-card border-0">
                    <div class="card-body text-center">
                        <small>Open Tickets</small>
                        <h3 id="kpiOpen" class="mb-0">0</h3>
                    </div>
                </div>
            </div>
            <div class="col-xl col-md-4">
                <div class="card kpi-card border-0">
                    <div class="card-body text-center">
                        <small>Reopened Tickets</small>
                        <h3 id="kpiReopened" class="mb-0">0</h3>
                    </div>
                </div>
            </div>
            <div class="col-xl col-md-4">
                <div class="card kpi-card border-0">
                    <div class="card-body text-center">
                        <small>Escalated Tickets</small>
                        <h3 id="kpiEscalated" class="mb-0">0</h3>
                    </div>
                </div>
            </div>
            <div class="col-xl col-md-4">
                <div class="card kpi-card border-0">
                    <div class="card-body text-center">
                        <small>Resolve Performance</small>
                        <h3 id="kpiPerformance" class="mb-0">0%</h3>
                    </div>
                </div>
            </div>
            <div class="col-xl col-md-4">
                <div class="card kpi-card border-0">
                    <div class="card-body text-center">
                        <small>Avg Resolve Time</small>
                        <h3 id="kpiAvgHours" class="mb-0">0 h</h3>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-3">
            <div class="col-12">
                <div class="card border-0 chart-card">
                    <div class="card-header bg-transparent border-0 pb-0">
                        <h5 class="mb-0">Resolver Workload: Assigned vs Resolved</h5>
                    </div>
                    <div class="card-body">
                        <div id="resolverWorkloadChart"></div>
                    </div>
                </div>
            </div>

            <div class="col-xl-6">
                <div class="card border-0 chart-card">
                    <div class="card-header bg-transparent border-0 pb-0">
                        <h5 class="mb-0">Period Trend: Performance and Volumes</h5>
                    </div>
                    <div class="card-body">
                        <div id="periodTrendChart"></div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3">
                <div class="card border-0 chart-card">
                    <div class="card-header bg-transparent border-0 pb-0">
                        <h5 class="mb-0">Average Resolution Time</h5>
                    </div>
                    <div class="card-body">
                        <div id="avgResolutionChart"></div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3">
                <div class="card border-0 chart-card">
                    <div class="card-header bg-transparent border-0 pb-0">
                        <h5 class="mb-0">Status Breakdown</h5>
                    </div>
                    <div class="card-body">
                        <div id="statusBreakdownChart"></div>
                    </div>
                </div>
            </div>

            <div class="col-12">
                <div class="card border-0 chart-card">
                    <div class="card-header bg-transparent border-0 pb-0">
                        <h5 class="mb-0">Department Performance Overview</h5>
                    </div>
                    <div class="card-body">
                        <div id="departmentPerformanceChart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
let resolverWorkloadChart, periodTrendChart, avgResolutionChart, departmentPerformanceChart, statusBreakdownChart;

function setDefaultDates() {
    const today = new Date();
    const first = new Date(today.getFullYear(), today.getMonth(), 1);
    from.value = first.toISOString().split('T')[0];
    to.value = today.toISOString().split('T')[0];
}

function chartEmpty(selector, message) {
    const el = document.querySelector(selector);
    if (!el) return;
    el.innerHTML = `<div class="text-muted text-center py-4">${message}</div>`;
}

function loadTicketReport() {
    if (!from.value || !to.value) setDefaultDates();

    const params = new URLSearchParams({
        from: from.value,
        to: to.value,
        period: period.value,
        department_id: department_id.value,
        resolver_id: resolver_id.value
    });

    fetch(`{{ route('tickets.report.data') }}?${params.toString()}`)
        .then(r => r.json())
        .then(data => {
            const k = data.kpis || {};
            kpiAssigned.innerText = Number(k.assigned_count || 0);
            kpiResolved.innerText = Number(k.resolved_count || 0);
            kpiOpen.innerText = Number(k.open_count || 0);
            kpiReopened.innerText = Number(k.reopened_count || 0);
            kpiEscalated.innerText = Number(k.escalated_count || 0);
            kpiPerformance.innerText = `${Number(k.performance_pct || 0).toFixed(2)}%`;
            kpiAvgHours.innerText = `${Number(k.avg_resolution_hours || 0).toFixed(2)} h`;

            renderResolverWorkload(data.resolver_chart || {});
            renderPeriodTrend(data.period_chart || {});
            renderAvgResolution(data.period_chart || {});
            renderDepartmentPerformance(data.department_chart || {});
            renderStatusBreakdown(k);
        })
        .catch(() => {
            chartEmpty('#resolverWorkloadChart', 'Unable to load report data.');
            chartEmpty('#periodTrendChart', 'Unable to load report data.');
            chartEmpty('#avgResolutionChart', 'Unable to load report data.');
            chartEmpty('#departmentPerformanceChart', 'Unable to load report data.');
            chartEmpty('#statusBreakdownChart', 'Unable to load report data.');
        });
}

function renderResolverWorkload(chart) {
    const labels = chart.labels || [];
    if (!labels.length) return chartEmpty('#resolverWorkloadChart', 'No resolver data for selected filters.');

    resolverWorkloadChart?.destroy();
    resolverWorkloadChart = new ApexCharts(document.querySelector('#resolverWorkloadChart'), {
        chart: { type: 'bar', height: 380, toolbar: { show: true } },
        series: [
            { name: 'Assigned', data: chart.assigned || [] },
            { name: 'Resolved', data: chart.resolved || [] },
        ],
        xaxis: { categories: labels },
        plotOptions: { bar: { columnWidth: '55%' } },
        dataLabels: { enabled: false },
        legend: { position: 'bottom' }
    });
    resolverWorkloadChart.render();
}

function renderPeriodTrend(chart) {
    const labels = chart.labels || [];
    if (!labels.length) return chartEmpty('#periodTrendChart', 'No period trend data for selected filters.');

    periodTrendChart?.destroy();
    periodTrendChart = new ApexCharts(document.querySelector('#periodTrendChart'), {
        chart: { type: 'line', height: 360, toolbar: { show: true } },
        series: [
            { name: 'Assigned', type: 'column', data: chart.assigned || [] },
            { name: 'Resolved', type: 'column', data: chart.resolved || [] },
            { name: 'Performance %', type: 'line', data: chart.performance || [] }
        ],
        xaxis: { categories: labels },
        yaxis: [
            { title: { text: 'Ticket Count' } },
            { opposite: true, title: { text: 'Performance %' }, labels: { formatter: v => `${Number(v).toFixed(0)}%` } }
        ],
        stroke: { width: [0, 0, 3] },
        dataLabels: { enabled: false },
        legend: { position: 'bottom' }
    });
    periodTrendChart.render();
}

function renderAvgResolution(chart) {
    const labels = chart.labels || [];
    if (!labels.length) return chartEmpty('#avgResolutionChart', 'No average resolution data for selected filters.');

    avgResolutionChart?.destroy();
    avgResolutionChart = new ApexCharts(document.querySelector('#avgResolutionChart'), {
        chart: { type: 'bar', height: 360, toolbar: { show: false } },
        series: [{ name: 'Avg Hours', data: chart.avg_resolution_hours || [] }],
        xaxis: { categories: labels },
        dataLabels: { enabled: false },
        tooltip: { y: { formatter: v => `${Number(v).toFixed(2)} h` } }
    });
    avgResolutionChart.render();
}

function renderDepartmentPerformance(chart) {
    const labels = chart.labels || [];
    if (!labels.length) return chartEmpty('#departmentPerformanceChart', 'No department data for selected filters.');

    departmentPerformanceChart?.destroy();
    departmentPerformanceChart = new ApexCharts(document.querySelector('#departmentPerformanceChart'), {
        chart: { type: 'bar', height: 360, toolbar: { show: true } },
        series: [
            { name: 'Performance %', data: chart.performance || [] },
            { name: 'Avg Resolution Hours', data: chart.avg_resolution_hours || [] }
        ],
        xaxis: { categories: labels },
        yaxis: [
            { title: { text: 'Performance %' }, labels: { formatter: v => `${Number(v).toFixed(0)}%` } },
            { opposite: true, title: { text: 'Avg Hours' } }
        ],
        dataLabels: { enabled: false },
        legend: { position: 'bottom' }
    });
    departmentPerformanceChart.render();
}

function renderStatusBreakdown(kpis) {
    const openCount = Number(kpis.open_count || 0);
    const reopenedCount = Number(kpis.reopened_count || 0);
    const escalatedCount = Number(kpis.escalated_count || 0);
    const total = openCount + reopenedCount + escalatedCount;

    if (!total) {
        statusBreakdownChart?.destroy();
        return chartEmpty('#statusBreakdownChart', 'No status breakdown data for selected filters.');
    }

    statusBreakdownChart?.destroy();
    statusBreakdownChart = new ApexCharts(document.querySelector('#statusBreakdownChart'), {
        chart: { type: 'donut', height: 360 },
        series: [openCount, reopenedCount, escalatedCount],
        labels: ['Open', 'Reopened', 'Escalated'],
        colors: ['#0ea5e9', '#f59e0b', '#ef4444'],
        dataLabels: { enabled: true },
        legend: { position: 'bottom' }
    });
    statusBreakdownChart.render();
}

document.addEventListener('DOMContentLoaded', function() {
    setDefaultDates();
    if (window.jQuery && $.fn.select2) {
        $('#department_id').select2({ width: '100%' });
        $('#resolver_id').select2({ width: '100%' });
    }
    loadTicketReport();
});
</script>
@endpush

@push('styles')
<style>
.report-shell,
.kpi-card,
.chart-card {
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.kpi-card small {
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 11px;
    font-weight: 700;
}
.kpi-card h3 {
    color: #0f172a;
    font-weight: 800;
}
</style>
@endpush