@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <div class="row mt-4">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header p-3 pb-0">
                        <h6 class="mb-1">Dasbor Administrator</h6>
                        <p class="text-sm">Ringkasan Sistem MSJ Framework - {{ $format->tanggalIndonesia(now()) }} <span
                                class="live-time text-primary"></span></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <div class="icon icon-shape bg-gradient-info shadow-info rounded-circle me-3 text-center">
                                    <i class="ni ni-calendar-grid-58 text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                                <h6 class="mb-0 text-sm">Pilih Periode</h6>
                            </div>

                            {{-- Filter Periode Menggunakan Modal --}}
                            <div class="col-md-3">
                                <form id="periodFilterForm" method="GET" action="{{ url($url_menu) }}">
                                    <div class="input-group input-group-m">
                                        <input type="text" name="per_display" class="form-control"
                                            value="{{ $activePeriod ? 'Periode ' . $activePeriod->quarter . ' - ' . $activePeriod->year : '' }}"
                                            readonly>

                                        <span class="input-group-text bg-primary text-light" data-bs-toggle="modal"
                                            data-bs-target="#searchModalper" style="cursor: pointer;">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>

                                    <input type="hidden" name="period_id" id="per_id" value="{{ $selectedPeriodId }}">
                                </form>
                            </div>


                            <div class="modal fade" id="searchModalper" tabindex="-1" role="dialog"
                                aria-labelledby="searchModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="searchModalLabel">Pilih Periode</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body table-responsive">
                                            <table class="display table" id="list_{{ $url_menu }}_per">
                                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                    <tr>
                                                        <th width="20px">Action</th>
                                                        <th>Tahun</th>
                                                        <th>Periode</th>
                                                        <th>Rentang Periode</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @if (!empty($periodes))
                                                        @foreach ($periodes as $period)
                                                            <tr>
                                                                <td width="20px">
                                                                    <span class="btn badge bg-primary badge-lg"
                                                                        onclick="select_modalper('{{ $period->id }}', 'Periode {{ $period->quarter }} - {{ $period->year }}')">
                                                                        <i class="bi bi-check-circle me-1"></i> Pilih
                                                                    </span>
                                                                </td>
                                                                <td>{{ $period->year }}</td>
                                                                <td>Periode {{ $period->quarter }}</td>
                                                                <td>{{ $period->period_range }}</td>
                                                                <td>
                                                                    <span
                                                                        class="badge {{ $period->status === 'active' ? 'bg-success' : ($period->status === 'prep' ? 'bg-warning' : 'bg-secondary') }}">
                                                                        @switch($period->status)
                                                                            @case('active')
                                                                                Aktif
                                                                            @break

                                                                            @case('prep')
                                                                                Persiapan
                                                                            @break

                                                                            @case('locked')
                                                                                Terkunci
                                                                            @break

                                                                            @case('injury')
                                                                                Injury
                                                                            @break

                                                                            @default
                                                                                Tidak Diketahui
                                                                        @endswitch
                                                                    </span>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    @endif
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Statistics Cards -->
        <div class="row">
            <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-uppercase font-weight-bold mb-0 text-sm">Karyawan</p>
                                    <h5 class="font-weight-bolder">
                                        {{ number_format($stats['total_employees']) }}
                                    </h5>
                                    <p class="mb-0">
                                        <span
                                            class="text-info font-weight-bolder text-sm">{{ $stats['total_departments'] }}</span>
                                        departemen
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-danger shadow-danger rounded-circle text-center">
                                    <i class="ni ni-badge text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-uppercase font-weight-bold mb-0 text-sm">Siap Direview</p>
                                    <h5 class="font-weight-bolder">
                                        {{ number_format($stats['ready_approval_by_admin']) }}
                                    </h5>
                                    <p class="mb-0">
                                        <span
                                            class="text-warning font-weight-bolder text-sm">{{ number_format($stats['pending_reviews']) }}</span>
                                        masih dalam proses
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-success shadow-success rounded-circle text-center">
                                    <i class="ni ni-paper-diploma text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-uppercase font-weight-bold mb-0 text-sm">Approved</p>
                                    <h5 class="font-weight-bolder">
                                        {{ number_format($stats['approval_by_head']) }}
                                    </h5>
                                    <p class="mb-0">
                                        <span
                                            class="text-danger font-weight-bolder text-sm">{{ number_format($stats['need_approval_by_head']) }}</span>
                                        belum di approve
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-info shadow-info rounded-circle text-center">
                                    <i class="ni ni-check-bold text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Department and Periods Overview -->
        <div class="row mt-4">

            <div class="col-lg-6">
                <div class="card h-100">
                    <div class="card-header pb-0">
                        <h6>Performa Penilaian Terbaik</h6>
                        <p class="text-sm">
                            <i class="fa fa-star text-success"></i>
                            <span class="font-weight-bold">10 Karyawan Teratas Berdasarkan Skor Penilaian Kinerja</span>
                        </p>
                    </div>
                    <div class="card-body p-3">
                        <div id="employeeBulletChart" style="width: 100%; height: 300px;"></div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="card h-100">
                    <div class="card-header pb-0">
                        <h6>Penilaian Kinerja per Departemen</h6>
                        <p class="text-sm">
                            <i class="fa fa-users text-info"></i>
                            <span class="font-weight-bold">Rata-rata Penilaian Kinerja per Departemen</span>
                        </p>
                    </div>
                    <div class="card-body p-3">
                        <div id="departmentDistributionChart" style="width: 100%; height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- System Overview -->
        <div class="row mt-4">
            <div class="col-lg-12 mb-lg-0 mb-4">
                <div class="card">
                    <div class="card-header pb-0">
                        <div class="d-flex align-items-center justify-content-between">
                            <h6>Penilaian Kinerja per Periode</h6>
                            <div class="d-flex align-items-center">
                                <h6 class="mb-0 text-xs">Filter Departemen:</h6>
                                <select class="form-control"
                                    onchange="window.location.href='?period_id={{ $selectedPeriodId }}&department_id=' + this.value">
                                    <option value="">Semua Departemen</option>
                                    @foreach ($departments as $dept)
                                        <option value="{{ $dept->id }}"
                                            {{ $selectedDepartmentId == $dept->id ? 'selected' : '' }}>
                                            {{ $dept->nama }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <p class="text-sm">
                            <i class="fa fa-arrow-up text-success"></i> <i class="fa fa-arrow-down text-danger"></i>
                            <span class="font-weight-bold">Tren Rata-rata Skor Penilaian Kinerja</span>
                        </p>
                    </div>
                    <div class="card-body p-3">
                        <div id="periodPerformanceChart" style="width: 100%; height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    @include('js.dashboard')
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

    <script>
        function select_modalper(periodId, periodText) {
            document.querySelector('input[name="per_display"]').value = periodText;
            document.getElementById('per_id').value = periodId;
            document.getElementById('periodFilterForm').submit();
        }

        // Ambil data dari PHP untuk Bar Chart
        let employeeLabels = @json(array_column($best_employees_stats, 'employee_name'));
        let employeeData = @json(array_column($best_employees_stats, 'average_performance_score'));
        let employeeTargetData = @json(array_column($best_employees_stats, 'target_score'));
        let employeeDepartment = @json(array_column($best_employees_stats, 'department_name'));

        const employeeChartDom = document.getElementById('employeeBulletChart');
        if (employeeChartDom) {
            const employeeChart = echarts.init(employeeChartDom);

            // Gabungkan dan urutkan data
            const employeeCombinedData = employeeLabels.map((label, index) => ({
                name: label,
                value: employeeData[index],
                target: employeeTargetData[index],
                department: employeeDepartment[index]
            }));

            employeeCombinedData.sort((a, b) => a.value - b.value);

            employeeLabels = employeeCombinedData.map(item => item.name);
            employeeData = employeeCombinedData.map(item => item.value);

            const employeeTargetSeries = employeeCombinedData.map(item => item.target);

            const employeeOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function(params) {
                        // Cari data asli dari array yang sudah digabungkan dan diurutkan
                        const originalData = employeeCombinedData.find(item => item.name === params[0].name);

                        if (!originalData) {
                            return '';
                        }

                        let tooltipContent = originalData.name + '<br>';
                        tooltipContent += 'Departemen: ' + originalData.department + '<br>';

                        let actualScore, targetScore;
                        let actualColor, targetColor;

                        params.forEach(function(item) {
                            if (item.seriesName === 'Skor Aktual') {
                                actualScore = item.value;
                                actualColor = item.color;
                            } else if (item.seriesName === 'Skor Target') {
                                targetScore = item.value;
                                targetColor = item.color;
                            }
                        });

                        if (actualScore !== undefined) {
                            tooltipContent +=
                                `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${actualColor};"></span> Skor PA: ${actualScore.toFixed(2)}<br>`;
                        }
                        if (targetScore !== undefined) {
                            tooltipContent +=
                                `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${targetColor};"></span> Target: ${targetScore}`;
                        }

                        return tooltipContent;
                    }
                },
                grid: {
                    top: '10%',
                    left: '2%',
                    right: '10%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    name: 'Skor PA',
                    min: 0,
                    max: 5,
                    nameLocation: 'end',
                    nameTextStyle: {
                        align: 'right',
                        verticalAlign: 'middle',
                        padding: [0, 0, 0, 10]
                    },
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                yAxis: {
                    type: 'category',
                    data: employeeLabels,
                    name: 'Employee',
                    axisLabel: {
                        interval: 0,
                        formatter: function(value) {
                            if (value.length > 20) {
                                return value.substring(0, 18) + '...';
                            }
                            return value;
                        }
                    }
                },
                series: [{
                        name: 'Skor Aktual',
                        type: 'bar',
                        stack: 'performance',
                        data: employeeData,
                        barWidth: '50%',
                        z: 1,
                        itemStyle: {
                            color: function(params) {
                                const originalIndex = employeeCombinedData.findIndex(item => item.name ===
                                    params.name);
                                const actualValue = employeeCombinedData[originalIndex].value;

                                if (actualValue >= 4.25) return '#4caf50';
                                if (actualValue >= 3.5) return '#17c1e8';
                                if (actualValue >= 2.75) return '#ffc107';
                                return '#f44335';
                            },
                            borderRadius: [0, 5, 5, 0]
                        }
                    },
                    {
                        name: 'Skor Target',
                        type: 'bar',
                        stack: 'performance',
                        data: employeeTargetSeries,
                        barWidth: '50%',
                        z: 0,
                        itemStyle: {
                            color: '#e0e0e0'
                        }
                    }
                ]
            };

            employeeChart.setOption(employeeOption);
            window.addEventListener('resize', () => employeeChart.resize());
        }

        // Ambil data dari PHP untuk Line Chart
        let periodChartLabels = @json($periodChartLabels);
        let periodChartData = @json($periodChartData);

        const periodChartDom = document.getElementById('periodPerformanceChart');
        if (periodChartDom) {
            const periodChart = echarts.init(periodChartDom);

            const periodOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        if (params.value === undefined || params.value === null) {
                            return '';
                        }

                        let tooltipContent = '';

                        tooltipContent += params.name + '<br>';

                        tooltipContent += params.marker + ' ' + params.seriesName + ': ' +
                            parseFloat(params.value).toFixed(2);

                        return tooltipContent;
                    }
                },
                grid: {
                    top: '10%',
                    left: '3%',
                    right: '10%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: true,
                    data: periodChartLabels,
                    name: 'Periode',
                    axisLabel: {
                        formatter: function(value) {
                            return value.replace(' - ', ' - \n');
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: 'Skor\nPerforma',
                    min: 0,
                    max: 5,
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                series: [{
                    name: 'Performa Berdasarkan Target',
                    type: 'line',
                    data: periodChartData,
                    smooth: true,
                    itemStyle: {
                        color: '#17c1e8'
                    }
                }]
            };

            periodChart.setOption(periodOption);

            window.addEventListener('resize', function() {
                periodChart.resize();
            });
        }

        // Pie Chart Script
        let departmentChartLabels = @json($departmentChartLabels);
        let departmentChartData = @json($departmentChartData);

        // const customColors = [
        //     '#4a90e2', '#50e3c2', '#f5a623', '#f8e71c', '#7ed321',
        //     '#bd10e0', '#9013fe', '#4a4a4a', '#007aff', '#9b9b9b',
        //     '#f5a623', '#50e3c2', '#4a90e2', '#f8e71c', '#7ed321',
        // ];

        const pieChartDom = document.getElementById('departmentDistributionChart');
        if (pieChartDom) {
            const pieChart = echarts.init(pieChartDom);

            const pieOption = {
                // color: customColors,
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                series: [{
                    name: 'PA Prosentage',
                    type: 'pie',
                    radius: ['0%', '68%'],
                    center: ['50%', '45%'],
                    data: departmentChartLabels.map((label, index) => ({
                        name: label,
                        value: departmentChartData[index]
                    })),
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };

            pieChart.setOption(pieOption);
            window.addEventListener('resize', () => pieChart.resize());
        }
    </script>
@endpush