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

@section('title', 'Secretary Dashboard')
@section('page-title', 'Dashboard')

@section('content')
<div class="row">
    <!-- Stats Cards -->
    <div class="col-lg-3 col-6">
        <div class="small-box bg-info">
            <div class="inner">
                <h3>{{ $stats['total_tickets'] }}</h3>
                <p>Total Tickets</p>
            </div>
            <div class="icon">
                <i class="fas fa-ticket-alt"></i>
            </div>
            <a href="{{ route('secretary.tickets.index') }}" class="small-box-footer">
                More info <i class="fas fa-arrow-circle-right"></i>
            </a>
        </div>
    </div>
    
    <div class="col-lg-3 col-6">
        <div class="small-box bg-success">
            <div class="inner">
                <h3>{{ $stats['open_tickets'] }}</h3>
                <p>Open Tickets</p>
            </div>
            <div class="icon">
                <i class="fas fa-folder-open"></i>
            </div>
            <a href="{{ route('secretary.tickets.index', ['status' => 'open']) }}" class="small-box-footer">
                More info <i class="fas fa-arrow-circle-right"></i>
            </a>
        </div>
    </div>
    
    <div class="col-lg-3 col-6">
        <div class="small-box bg-warning">
            <div class="inner">
                <h3>{{ $stats['overdue_tickets'] }}</h3>
                <p>Overdue Tickets</p>
            </div>
            <div class="icon">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <a href="{{ route('secretary.tickets.index', ['overdue' => '1']) }}" class="small-box-footer">
                More info <i class="fas fa-arrow-circle-right"></i>
            </a>
        </div>
    </div>
    
    <div class="col-lg-3 col-6">
        <div class="small-box bg-danger">
            <div class="inner">
                <h3>{{ $stats['urgent_tickets'] }}</h3>
                <p>Urgent Tickets</p>
            </div>
            <div class="icon">
                <i class="fas fa-fire"></i>
            </div>
            <a href="{{ route('secretary.tickets.index', ['priority' => 'urgent']) }}" class="small-box-footer">
                More info <i class="fas fa-arrow-circle-right"></i>
            </a>
        </div>
    </div>
</div>

<div class="row">
    <!-- Charts Row -->
    <div class="col-md-8">
        <div class="card secretary-card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-chart-pie mr-2"></i>
                    Tickets by Status
                </h3>
            </div>
            <div class="card-body">
                <canvas id="statusChart" width="400" height="200"></canvas>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card secretary-card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-chart-bar mr-2"></i>
                    Tickets by Priority
                </h3>
            </div>
            <div class="card-body">
                <canvas id="priorityChart" width="400" height="200"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Recent Activities -->
    <div class="col-md-8">
        <div class="card secretary-card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-history mr-2"></i>
                    Recent Activities
                </h3>
            </div>
            <div class="card-body">
                @if($stats['recent_activities']->count() > 0)
                    <div class="timeline">
                        @foreach($stats['recent_activities'] as $activity)
                            <div class="timeline-item">
                                <div class="timeline-content">
                                    <h6 class="mb-1">
                                        <strong>{{ $activity->performer->name }}</strong>
                                        {{ $activity->description }}
                                    </h6>
                                    <p class="text-muted mb-1">
                                        <small>
                                            <i class="fas fa-clock mr-1"></i>
                                            {{ $activity->created_at->diffForHumans() }}
                                        </small>
                                    </p>
                                    @if($activity->ticket)
                                        <p class="mb-0">
                                            <a href="{{ route('secretary.tickets.show', $activity->ticket->id) }}" class="text-primary">
                                                #{{ $activity->ticket->ticket_number }} - {{ $activity->ticket->title }}
                                            </a>
                                        </p>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <p class="text-muted text-center">No recent activities</p>
                @endif
            </div>
        </div>
    </div>
    
    <!-- Overdue Tickets -->
    <div class="col-md-4">
        <div class="card secretary-card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-exclamation-triangle mr-2 text-warning"></i>
                    Overdue Tickets
                </h3>
            </div>
            <div class="card-body">
                @if($stats['overdue_tickets_list']->count() > 0)
                    @foreach($stats['overdue_tickets_list'] as $ticket)
                        <div class="ticket-card urgent">
                            <div class="card-body p-2">
                                <h6 class="card-title mb-1">
                                    <a href="{{ route('secretary.tickets.show', $ticket->id) }}" class="text-decoration-none">
                                        #{{ $ticket->ticket_number }}
                                    </a>
                                </h6>
                                <p class="card-text small mb-1">{{ Str::limit($ticket->title, 50) }}</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="badge badge-{{ $ticket->priority_color }}">{{ ucfirst($ticket->priority) }}</span>
                                    <small class="text-muted">
                                        {{ $ticket->due_date->diffForHumans() }}
                                    </small>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    <p class="text-muted text-center">No overdue tickets</p>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Status Chart
const statusCtx = document.getElementById('statusChart').getContext('2d');
const statusChart = new Chart(statusCtx, {
    type: 'doughnut',
    data: {
        labels: ['Open', 'In Progress', 'Pending', 'Resolved', 'Closed', 'Cancelled'],
        datasets: [{
            data: [
                {{ $stats['tickets_by_status']['open'] ?? 0 }},
                {{ $stats['tickets_by_status']['in_progress'] ?? 0 }},
                {{ $stats['tickets_by_status']['pending'] ?? 0 }},
                {{ $stats['tickets_by_status']['resolved'] ?? 0 }},
                {{ $stats['tickets_by_status']['closed'] ?? 0 }},
                {{ $stats['tickets_by_status']['cancelled'] ?? 0 }}
            ],
            backgroundColor: [
                '#007bff',
                '#17a2b8',
                '#ffc107',
                '#28a745',
                '#6c757d',
                '#dc3545'
            ]
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});

// Priority Chart
const priorityCtx = document.getElementById('priorityChart').getContext('2d');
const priorityChart = new Chart(priorityCtx, {
    type: 'bar',
    data: {
        labels: ['Low', 'Medium', 'High', 'Urgent'],
        datasets: [{
            label: 'Tickets',
            data: [
                {{ $stats['tickets_by_priority']['low'] ?? 0 }},
                {{ $stats['tickets_by_priority']['medium'] ?? 0 }},
                {{ $stats['tickets_by_priority']['high'] ?? 0 }},
                {{ $stats['tickets_by_priority']['urgent'] ?? 0 }}
            ],
            backgroundColor: [
                '#28a745',
                '#ffc107',
                '#fd7e14',
                '#dc3545'
            ]
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true
            }
        },
        plugins: {
            legend: {
                display: false
            }
        }
    }
});
</script>
@endpush