@extends('layout.layout')

@section('content')

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

<style>
    body {
        font-family: 'Inter', sans-serif;
        background-color: #f7f8fa;
    }

    .dashboard-card {
        background-color: #ffffff;
        border-radius: 1rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
        padding: 1.5rem;
        height: 100%;
    }

    .table-header {
        background-color: #f9fafb;
    }

    .data-row:nth-child(even) {
        background-color: #fefefe;
    }

    .data-row:hover {
        background-color: #f3f4f6;
    }
</style>

<div class="p-4 sm:p-6 md:p-8">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">

        {{-- Requests by Team --}}
        <div class="dashboard-card">
            <h2 class="text-xl font-semibold text-gray-800 mb-6">Requests by Team</h2>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="table-header">
                        <tr>
                            <th class="px-4 py-3 text-left text-sm font-medium text-gray-500 tracking-wider">Staff</th>
                            <th class="px-4 py-3 text-center text-sm font-medium text-gray-500 tracking-wider">Pending</th>
                            <th class="px-4 py-3 text-center text-sm font-medium text-gray-500 tracking-wider">In Progress</th>
                            <th class="px-4 py-3 text-center text-sm font-medium text-gray-500 tracking-wider">Done</th>
                            <th class="px-4 py-3 text-center text-sm font-medium text-gray-500 tracking-wider">Rejected</th>
                            <th class="px-4 py-3 text-center text-sm font-medium text-gray-500 tracking-wider">Total</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200 text-sm">
                        @php $total = ['pending'=>0, 'in_progress'=>0, 'done'=>0, 'rejected'=>0, 'total'=>0]; @endphp
                        @foreach ($requestsLastWeek as $staff)
                        <tr class="data-row">
                            <td class="px-4 py-3 whitespace-nowrap font-medium text-gray-900">{{ $staff['name'] }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-center text-gray-700">{{ $staff['pending'] }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-center text-blue-600 font-bold">{{ $staff['in_progress'] }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-center text-green-600 font-bold">{{ $staff['done'] }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-center text-red-600 font-bold">{{ $staff['rejected'] }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-center font-bold">{{ $staff['total'] }}</td>
                        </tr>
                        @php
                        $total['pending'] += $staff['pending'];
                        $total['in_progress'] += $staff['in_progress'];
                        $total['done'] += $staff['done'];
                        $total['rejected'] += $staff['rejected'];
                        $total['total'] += $staff['total'];
                        @endphp
                        @endforeach
                        {{-- Total Row --}}
                        <tr class="bg-gray-100 font-bold border-t-2 border-gray-300">
                            <td class="px-4 py-3 whitespace-nowrap text-gray-900">Total</td>
                            <td class="px-4 py-3 text-center">{{ $total['pending'] }}</td>
                            <td class="px-4 py-3 text-center">{{ $total['in_progress'] }}</td>
                            <td class="px-4 py-3 text-center">{{ $total['done'] }}</td>
                            <td class="px-4 py-3 text-center">{{ $total['rejected'] }}</td>
                            <td class="px-4 py-3 text-center">{{ $total['total'] }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Open Requests by Priority --}}
        <div class="dashboard-card flex flex-col">
            <h2 class="text-xl font-semibold text-gray-800 mb-6">Open Requests by Priority</h2>
            <div class="flex-grow flex items-center justify-center">
                <div class="w-full max-w-xs h-64">
                    <canvas id="priorityPieChart"></canvas>
                </div>
            </div>
        </div>

        {{-- Requests Last Week (Stacked Bar Chart) --}}
        <div class="dashboard-card mt-8 lg:mt-0">
            <h2 class="text-xl font-semibold text-gray-800 mb-6">Requests Last Week</h2>
            <div class="h-80">
                <canvas id="requestsBarChart"></canvas>
            </div>
        </div>


        <div class="dashboard-card mt-8 lg:mt-0">
            <h2 class="text-xl font-semibold text-gray-800 mb-6">SLA Violation by Team</h2>
            <div class="h-80">
                <canvas id="slaViolationChart"></canvas>
            </div>
        </div>


    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {

        // ====== Open Requests by Priority ======
        const requestsPriority = @json($requestsPriority);
        const priorityLabels = requestsPriority.map(item => item.priority.charAt(0).toUpperCase() + item.priority.slice(1));
        const priorityData = requestsPriority.map(item => item.total_requests);

        new Chart(document.getElementById('priorityPieChart'), {
            type: 'doughnut',
            data: {
                labels: priorityLabels,
                datasets: [{
                    label: 'Open Requests',
                    data: priorityData,
                    backgroundColor: ['rgb(239, 68, 68)', 'rgb(34, 197, 94)', 'rgb(209, 213, 219)'],
                    hoverOffset: 15,
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 20,
                            usePointStyle: true,
                            boxWidth: 6
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: ctx => `${ctx.label}: ${ctx.raw}`
                        }
                    }
                }
            }
        });

        // ====== Requests Last Week Chart (per staff) ======
        const requestsLastWeek = @json($requestsLastWeek);
        
        const staffLabels = requestsLastWeek.map(s => s.name);
        const pendingData = requestsLastWeek.map(s => parseInt(s.pending));
        const inProgressData = requestsLastWeek.map(s => parseInt(s.in_progress));
        const doneData = requestsLastWeek.map(s => parseInt(s.done));
        const rejectedData = requestsLastWeek.map(s => parseInt(s.rejected));
        
        new Chart(document.getElementById('requestsBarChart'), {
            type: 'bar',
            data: {
                labels: staffLabels,
                datasets: [
                    { label: 'Pending', data: pendingData, backgroundColor: 'rgb(250, 204, 21)' },
                    { label: 'In Progress', data: inProgressData, backgroundColor: 'rgb(59, 130, 246)' },
                    { label: 'Done', data: doneData, backgroundColor: 'rgb(34, 197, 94)' },
                    { label: 'Rejected', data: rejectedData, backgroundColor: 'rgb(239, 68, 68)' }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: { stacked: true },
                    y: { stacked: true, beginAtZero: true }
                }
            }
        });
        
        // ====== SLA Violation by Team (Static Data) ======
        const slaLabels = ['Team Requests'];
        const slaDatasets = [{
                label: 'Mohamed Adel',
                data: [3],
                backgroundColor: 'rgb(59, 130, 246)'
            }, // Blue
            {
                label: 'Yasser Mostafa',
                data: [2],
                backgroundColor: 'rgb(16, 185, 129)'
            } // Green
        ];
        new Chart(document.getElementById('slaViolationChart'), {
            type: 'bar',
            data: {
                labels: slaLabels,
                datasets: slaDatasets
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            usePointStyle: true
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: ctx => `${ctx.dataset.label}: ${ctx.raw}`
                        }
                    }
                },
                scales: {
                    x: {
                        stacked: true
                    },
                    y: {
                        stacked: true,
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Request Count'
                        }
                    }
                }
            }
        });
    });
</script>

@endsection