@extends('secretary::layouts.master')

@section('title', 'Professional Analytics Dashboard')
@section('page-title', 'Secretary Module Analytics')

@section('content')
<div class="row">
    <!-- Period Selector -->
    <div class="col-12 mb-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-chart-line mr-2"></i>
                    Analytics Period
                </h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <select id="periodSelect" class="form-control">
                            <option value="7">Last 7 Days</option>
                            <option value="30" selected>Last 30 Days</option>
                            <option value="90">Last 90 Days</option>
                            <option value="365">Last Year</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <button id="refreshBtn" class="btn btn-primary">
                            <i class="fas fa-sync-alt"></i> Refresh Data
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Key Performance Indicators -->
    <div class="col-12 mb-4">
        <div class="row">
            <div class="col-lg-3 col-6">
                <div class="small-box bg-info">
                    <div class="inner">
                        <h3 id="totalTickets">{{ $stats['basic_metrics']['total_tickets'] }}</h3>
                        <p>Total Tickets</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-ticket-alt"></i>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-3 col-6">
                <div class="small-box bg-success">
                    <div class="inner">
                        <h3 id="resolutionRate">{{ $stats['performance_metrics']['resolution_rate'] }}%</h3>
                        <p>Resolution Rate</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-3 col-6">
                <div class="small-box bg-warning">
                    <div class="inner">
                        <h3 id="avgResolutionTime">{{ $stats['performance_metrics']['avg_resolution_time_hours'] }}h</h3>
                        <p>Avg Resolution Time</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-clock"></i>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-3 col-6">
                <div class="small-box bg-danger">
                    <div class="inner">
                        <h3 id="overdueTickets">{{ $stats['basic_metrics']['overdue_tickets'] }}</h3>
                        <p>Overdue Tickets</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="col-lg-8 mb-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-chart-bar mr-2"></i>
                    Ticket Trends
                </h3>
            </div>
            <div class="card-body">
                <canvas id="ticketTrendsChart" height="100"></canvas>
            </div>
        </div>
    </div>

    <div class="col-lg-4 mb-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-chart-pie mr-2"></i>
                    Status Distribution
                </h3>
            </div>
            <div class="card-body">
                <canvas id="statusDistributionChart" height="200"></canvas>
            </div>
        </div>
    </div>

    <!-- Category and Priority Analysis -->
    <div class="col-lg-6 mb-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-tags mr-2"></i>
                    Category Analysis
                </h3>
            </div>
            <div class="card-body">
                <canvas id="categoryChart" height="150"></canvas>
            </div>
        </div>
    </div>

    <div class="col-lg-6 mb-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-exclamation mr-2"></i>
                    Priority Analysis
                </h3>
            </div>
            <div class="card-body">
                <canvas id="priorityChart" height="150"></canvas>
            </div>
        </div>
    </div>

    <!-- User Activity -->
    <div class="col-lg-6 mb-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-users mr-2"></i>
                    Top Ticket Creators
                </h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>User</th>
                                <th>Tickets</th>
                                <th>%</th>
                            </tr>
                        </thead>
                        <tbody id="topCreatorsTable">
                            @foreach($stats['user_activity']['top_creators'] as $creator)
                            <tr>
                                <td>{{ $creator['user_name'] }}</td>
                                <td>{{ $creator['ticket_count'] }}</td>
                                <td>
                                    <div class="progress progress-xs">
                                        <div class="progress-bar" style="width: {{ ($creator['ticket_count'] / $stats['user_activity']['top_creators']->max('ticket_count')) * 100 }}%"></div>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-6 mb-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-user-check mr-2"></i>
                    Top Assignees
                </h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>User</th>
                                <th>Assigned</th>
                                <th>%</th>
                            </tr>
                        </thead>
                        <tbody id="topAssigneesTable">
                            @foreach($stats['user_activity']['top_assignees'] as $assignee)
                            <tr>
                                <td>{{ $assignee['user_name'] }}</td>
                                <td>{{ $assignee['ticket_count'] }}</td>
                                <td>
                                    <div class="progress progress-xs">
                                        <div class="progress-bar bg-success" style="width: {{ ($assignee['ticket_count'] / $stats['user_activity']['top_assignees']->max('ticket_count')) * 100 }}%"></div>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Performance Metrics -->
    <div class="col-lg-4 mb-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-tachometer-alt mr-2"></i>
                    Performance Metrics
                </h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        <div class="info-box">
                            <span class="info-box-icon bg-info">
                                <i class="fas fa-clock"></i>
                            </span>
                            <div class="info-box-content">
                                <span class="info-box-text">Avg Response</span>
                                <span class="info-box-number">{{ $stats['performance_metrics']['avg_response_time_hours'] }}h</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="info-box">
                            <span class="info-box-icon bg-success">
                                <i class="fas fa-check"></i>
                            </span>
                            <div class="info-box-content">
                                <span class="info-box-text">First Response</span>
                                <span class="info-box-number">{{ $stats['performance_metrics']['first_response_rate'] }}%</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="info-box">
                            <span class="info-box-icon bg-warning">
                                <i class="fas fa-ticket-alt"></i>
                            </span>
                            <div class="info-box-content">
                                <span class="info-box-text">Tickets/Day</span>
                                <span class="info-box-number">{{ $stats['performance_metrics']['tickets_per_day'] }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="info-box">
                            <span class="info-box-icon bg-danger">
                                <i class="fas fa-redo"></i>
                            </span>
                            <div class="info-box-content">
                                <span class="info-box-text">Reopened Rate</span>
                                <span class="info-box-number">{{ $stats['quality_metrics']['reopened_rate'] }}%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Cost Analysis -->
    <div class="col-lg-4 mb-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-dollar-sign mr-2"></i>
                    Cost Analysis
                </h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12 mb-3">
                        <div class="info-box">
                            <span class="info-box-icon bg-success">
                                <i class="fas fa-calculator"></i>
                            </span>
                            <div class="info-box-content">
                                <span class="info-box-text">Total Estimated</span>
                                <span class="info-box-number">${{ number_format($stats['cost_analysis']['total_estimated_cost'], 2) }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 mb-3">
                        <div class="info-box">
                            <span class="info-box-icon bg-info">
                                <i class="fas fa-calculator"></i>
                            </span>
                            <div class="info-box-content">
                                <span class="info-box-text">Total Actual</span>
                                <span class="info-box-number">${{ number_format($stats['cost_analysis']['total_actual_cost'], 2) }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="info-box">
                            <span class="info-box-icon {{ $stats['cost_analysis']['cost_variance'] > 0 ? 'bg-danger' : 'bg-success' }}">
                                <i class="fas fa-chart-line"></i>
                            </span>
                            <div class="info-box-content">
                                <span class="info-box-text">Cost Variance</span>
                                <span class="info-box-number">{{ $stats['cost_analysis']['cost_variance'] }}%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- System Health -->
    <div class="col-lg-4 mb-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-heartbeat mr-2"></i>
                    System Health
                </h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12 mb-3">
                        <div class="info-box">
                            <span class="info-box-icon bg-primary">
                                <i class="fas fa-comments"></i>
                            </span>
                            <div class="info-box-content">
                                <span class="info-box-text">Total Comments</span>
                                <span class="info-box-number">{{ number_format($stats['system_health']['total_comments']) }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 mb-3">
                        <div class="info-box">
                            <span class="info-box-icon bg-warning">
                                <i class="fas fa-activity"></i>
                            </span>
                            <div class="info-box-content">
                                <span class="info-box-text">Total Activities</span>
                                <span class="info-box-number">{{ number_format($stats['system_health']['total_activities']) }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="info-box">
                            <span class="info-box-icon bg-success">
                                <i class="fas fa-shield-alt"></i>
                            </span>
                            <div class="info-box-content">
                                <span class="info-box-text">System Uptime</span>
                                <span class="info-box-number">{{ $stats['system_health']['system_uptime'] }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Time Analysis -->
    <div class="col-lg-6 mb-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-clock mr-2"></i>
                    Hourly Distribution
                </h3>
            </div>
            <div class="card-body">
                <canvas id="hourlyChart" height="150"></canvas>
            </div>
        </div>
    </div>

    <div class="col-lg-6 mb-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-calendar mr-2"></i>
                    Daily Distribution
                </h3>
            </div>
            <div class="card-body">
                <canvas id="dailyChart" height="150"></canvas>
            </div>
        </div>
    </div>

    <!-- Department Analysis -->
    <div class="col-12 mb-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-building mr-2"></i>
                    Department Analysis
                </h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Department</th>
                                <th>Tickets</th>
                                <th>Percentage</th>
                                <th>Progress</th>
                            </tr>
                        </thead>
                        <tbody id="departmentTable">
                            @foreach($stats['department_analysis']['department_distribution'] as $dept)
                            <tr>
                                <td>{{ $dept['department_name'] }}</td>
                                <td>{{ $dept['ticket_count'] }}</td>
                                <td>
                                    @php
                                        $totalDeptTickets = $stats['department_analysis']['department_distribution']->sum('ticket_count');
                                        $percentage = $totalDeptTickets > 0 ? round(($dept['ticket_count'] / $totalDeptTickets) * 100, 2) : 0;
                                    @endphp
                                    {{ $percentage }}%
                                </td>
                                <td>
                                    <div class="progress">
                                        <div class="progress-bar" style="width: {{ $percentage }}%"></div>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Export and Print Options -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-download mr-2"></i>
                    Export Options
                </h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <button class="btn btn-success btn-block" onclick="exportToPDF()">
                            <i class="fas fa-file-pdf"></i> Export to PDF
                        </button>
                    </div>
                    <div class="col-md-3">
                        <button class="btn btn-info btn-block" onclick="exportToExcel()">
                            <i class="fas fa-file-excel"></i> Export to Excel
                        </button>
                    </div>
                    <div class="col-md-3">
                        <button class="btn btn-warning btn-block" onclick="printReport()">
                            <i class="fas fa-print"></i> Print Report
                        </button>
                    </div>
                    <div class="col-md-3">
                        <button class="btn btn-primary btn-block" onclick="scheduleReport()">
                            <i class="fas fa-calendar"></i> Schedule Report
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.info-box {
    margin-bottom: 1rem;
}
.progress-xs {
    height: 8px;
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let charts = {};

$(document).ready(function() {
    initializeCharts();
    
    $('#periodSelect').change(function() {
        refreshData();
    });
    
    $('#refreshBtn').click(function() {
        refreshData();
    });
});

function initializeCharts() {
    // Ticket Trends Chart
    const ticketTrendsCtx = document.getElementById('ticketTrendsChart').getContext('2d');
    charts.ticketTrends = new Chart(ticketTrendsCtx, {
        type: 'line',
        data: {
            labels: {!! json_encode($stats['trend_analysis']['ticket_creation_trend']->pluck('date')) !!},
            datasets: [{
                label: 'Tickets Created',
                data: {!! json_encode($stats['trend_analysis']['ticket_creation_trend']->pluck('created')) !!},
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                tension: 0.1
            }, {
                label: 'Tickets Resolved',
                data: {!! json_encode($stats['trend_analysis']['ticket_resolution_trend']->pluck('resolved')) !!},
                borderColor: 'rgb(255, 99, 132)',
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // Status Distribution Chart
    const statusCtx = document.getElementById('statusDistributionChart').getContext('2d');
    charts.statusDistribution = new Chart(statusCtx, {
        type: 'doughnut',
        data: {
            labels: {!! json_encode($stats['status_analysis']['status_distribution']->pluck('status')) !!},
            datasets: [{
                data: {!! json_encode($stats['status_analysis']['status_distribution']->pluck('count')) !!},
                backgroundColor: [
                    '#FF6384',
                    '#36A2EB',
                    '#FFCE56',
                    '#4BC0C0',
                    '#9966FF',
                    '#FF9F40'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    });

    // Category Chart
    const categoryCtx = document.getElementById('categoryChart').getContext('2d');
    charts.category = new Chart(categoryCtx, {
        type: 'bar',
        data: {
            labels: {!! json_encode($stats['category_analysis']['category_distribution']->pluck('category')) !!},
            datasets: [{
                label: 'Tickets',
                data: {!! json_encode($stats['category_analysis']['category_distribution']->pluck('count')) !!},
                backgroundColor: 'rgba(54, 162, 235, 0.8)'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // Priority Chart
    const priorityCtx = document.getElementById('priorityChart').getContext('2d');
    charts.priority = new Chart(priorityCtx, {
        type: 'bar',
        data: {
            labels: {!! json_encode($stats['priority_analysis']['priority_distribution']->pluck('priority')) !!},
            datasets: [{
                label: 'Tickets',
                data: {!! json_encode($stats['priority_analysis']['priority_distribution']->pluck('count')) !!},
                backgroundColor: [
                    '#28a745', // Low - Green
                    '#ffc107', // Medium - Yellow
                    '#fd7e14', // High - Orange
                    '#dc3545'  // Urgent - Red
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // Hourly Chart
    const hourlyCtx = document.getElementById('hourlyChart').getContext('2d');
    charts.hourly = new Chart(hourlyCtx, {
        type: 'line',
        data: {
            labels: {!! json_encode($stats['time_analysis']['hourly_distribution']->pluck('hour')) !!},
            datasets: [{
                label: 'Tickets',
                data: {!! json_encode($stats['time_analysis']['hourly_distribution']->pluck('count')) !!},
                borderColor: 'rgb(255, 99, 132)',
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // Daily Chart
    const dailyCtx = document.getElementById('dailyChart').getContext('2d');
    charts.daily = new Chart(dailyCtx, {
        type: 'bar',
        data: {
            labels: {!! json_encode($stats['time_analysis']['daily_distribution']->pluck('day')) !!},
            datasets: [{
                label: 'Tickets',
                data: {!! json_encode($stats['time_analysis']['daily_distribution']->pluck('count')) !!},
                backgroundColor: 'rgba(75, 192, 192, 0.8)'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

function refreshData() {
    const period = $('#periodSelect').val();
    
    $.ajax({
        url: '{{ route("secretary.analytics.statistics") }}',
        method: 'GET',
        data: { period: period },
        success: function(response) {
            updateDashboard(response);
        },
        error: function(xhr) {
            console.error('Error refreshing data:', xhr);
            alert('Error refreshing data. Please try again.');
        }
    });
}

function updateDashboard(data) {
    // Update KPI cards
    $('#totalTickets').text(data.basic_metrics.total_tickets);
    $('#resolutionRate').text(data.performance_metrics.resolution_rate + '%');
    $('#avgResolutionTime').text(data.performance_metrics.avg_resolution_time_hours + 'h');
    $('#overdueTickets').text(data.basic_metrics.overdue_tickets);
    
    // Update charts with new data
    // This would require updating each chart with new data
    // For brevity, I'm showing the structure
}

function exportToPDF() {
    window.print();
}

function exportToExcel() {
    // Implement Excel export
    alert('Excel export functionality would be implemented here');
}

function printReport() {
    window.print();
}

function scheduleReport() {
    // Implement report scheduling
    alert('Report scheduling functionality would be implemented here');
}
</script>
@endpush