@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">Dashboard Penilai</h6>
                        <p class="text-sm">Ringkasan Penilaian PA Karyawan</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>

                            {{-- <div class="d-flex align-items-center">
                                <div class="numbers me-3">
                                    <h5 class="font-weight-bolder mb-0">
                                        <select class="form-control" onchange="window.location.href='?period_id=' + this.value">
                                            @foreach ($periodes as $periode)
                                                <option value="{{ $periode->id }}" {{ $selectedPeriodId == $periode->id ? 'selected' : '' }}>
                                                    Periode {{ $periode->quarter }} ({{ $periode->period_range }})
                                                </option>
                                            @endforeach
                                        </select>
                                    </h5>
                                </div>
                            </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 untuk menampilkan periode yang dipilih (hanya tampilan) --}}
                                        <input type="text" name="per_display" class="form-control"
                                            value="{{ $activePeriod ? 'Periode ' . $activePeriod->quarter . ' - ' . $activePeriod->year : '' }}"
                                            readonly>

                                        {{-- Ikon pencarian untuk membuka modal --}}
                                        <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 tersembunyi untuk mengirim ID periode yang sebenarnya --}}
                                    <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">
                                                                    {{-- Tombol ini sekarang akan memanggil fungsi JavaScript --}}
                                                                    <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>

        <div class="row">
            {{-- Card 1: Karyawan --}}
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card h-100">
                    <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">Total Karyawan</p>
                                    <h5 class="font-weight-bolder mb-0">
                                        {{ number_format($stats['total'] ?? 0) }}
                                    </h5>
                                    <p class="mb-0 text-xs">
                                        dari
                                        <span
                                            class="text-info font-weight-bolder">{{ number_format($stats['absoluteTotal'] ?? 0) }}</span>
                                        karyawan
                                    </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>

            {{-- Card 2: Belum Dinilai --}}
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card h-100">
                    <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">Belum Dinilai</p>
                                    <h5 class="font-weight-bolder mb-0">
                                        {{ number_format($stats['inProgress'] ?? 0) }}
                                    </h5>
                                    <p class="mb-0 text-xs">
                                        <span
                                            class="text-warning font-weight-bolder">{{ number_format($stats['trulyInProgress'] ?? 0) }}</span>
                                        dalam proses
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-warning shadow-warning rounded-circle text-center">
                                    <i class="ni ni-time-alarm text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Card 3: Sudah Dinilai (Siap Acc) --}}
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card h-100">
                    <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">Sudah Dinilai</p>
                                    <h5 class="font-weight-bolder mb-0">
                                        {{ number_format($stats['submitted'] ?? 0) }}
                                    </h5>
                                    <p class="mb-0 text-xs">
                                        <span
                                            class="text-warning font-weight-bolder">{{ number_format($stats['approved'] ?? 0) }}</span>
                                        disetujui
                                    </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-like-2 text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Card 4: Ket Absensi --}}
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card h-100">
                    <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">Ket. Absensi</p>
                                    <h5 class="font-weight-bolder mb-0">
                                        {{ isset($stats['employeesOnLeaveNowIds']) && $stats['employeesOnLeaveNowIds'] instanceof \Illuminate\Support\Collection ? $stats['employeesOnLeaveNowIds']->count() : 0 }}
                                    </h5>
                                    <a href="{{ url('empct') }}" class="text-primary text-xs">
                                        Lihat & Kelola Data
                                    </a>
                                </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-calendar-grid-58 text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ROW: Periode & Deadline (ganti dua row bawah lama) --}}
        <div class="row mt-4">
            {{-- Countdown ke Deadline --}}
            <div class="col-lg-5">
                <div class="card h-80">
                    <div class="card-header bg-transparent pb-0 pt-3">
                        <h6 class="text-capitalize">Waktu Deadline</h6>
                        <p class="text-muted mb-0 text-xs">
                            @if (isset($activePeriod->deadline_date))
                                @php
                                    $dlDate = $activePeriod->deadline_date;
                                    $dlIso = date('c', strtotime($dlDate . ' 23:59:59'));
                                @endphp
                                Batas Waktu: <span class="text-xs">{{ date('d M Y', strtotime($dlDate)) }} 23:59</span>
                            @else
                                <span>-</span>
                            @endif
                        </p>
                    </div>
                    <div class="d-flex align-items-center p-4">
                        <div class="icon icon-shape bg-gradient-danger shadow-danger rounded-circle me-3 text-center">
                            <i class="ni ni-watch-time text-lg opacity-10" aria-hidden="true"></i>
                        </div>
                        <div>
                            @if (isset($dlIso))
                                <h6 id="deadlineTimer" class="mb-1">-- hari -- jam -- menit -- detik</h6>
                                <div class="text-muted text-xs">Pastikan semua penilaian tersimpan sebelum penilaian
                                    berakhir.</div>
                            @else
                                <h5 class="mb-1">Belum ada deadline</h5>
                                <div class="text-muted text-xs">Hubungi admin untuk mengatur tanggal batas.</div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            {{-- Periode Berjalan --}}
            <div class="col-lg-7 mb-lg-0 mb-4">
                <div class="card z-index-2 h-100">
                    <div class="card-header d-flex justify-content-between align-items-center bg-transparent pb-0 pt-3">
                        <h6 class="text-capitalize mb-0">Periode Aktif</h6>
                    </div>
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <div
                                    class="icon icon-shape bg-gradient-primary shadow-primary rounded-circle me-3 text-center">
                                    <i class="ni ni-calendar-grid-58 text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                                <div>
                                    @if (isset($activePeriod))
                                        <div class="text-muted mb-1 mr-2 text-sm">Tanggal</div>
                                        <h6 class="mb-2 mr-2">
                                            {{ date('d M Y', strtotime($activePeriod->start_date)) }} &ndash;
                                            {{ date('d M Y', strtotime($activePeriod->end_date)) }}
                                        </h6>
                                        @if (!empty($activePeriod->description))
                                            <div class="text-muted text-xs">{{ $activePeriod->description }}</div>
                                        @endif
                                    @else
                                        <div class="text-muted text-sm">Tidak ada periode yang aktif.</div>
                                    @endif
                                </div>
                            </div>
                            <div class="text-end">
                                @if (isset($activePeriod))
                                    {{-- <a href="{{ route('evalpa.list', ['period_id' => $activePeriod->id]) }}" --}}
                                    <button onclick="window.location='{{ url('evalpa') }}'" class="btn btn-primary">
                                        <i class="fas fa-clipboard-check me-1"></i> Mulai Penilaian
                                    </button>
                                @else
                                    <button class="btn btn-primary" disabled>
                                        <i class="fas fa-clipboard-check me-1"></i> Mulai Penilaian
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Line chart perkembangan score PA --}}
        @if ($is_head ?? false)
            <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>
                            <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>
        @endif
        
    </div>
@endsection

@push('js')
    <script src="{{ asset('assets/js/plugins/chartjs.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
    <script>
        // Filter periodes
        function select_modalper(periodId, periodText) {
            document.querySelector('input[name="per_display"]').value = periodText;
            document.getElementById('per_id').value = periodId;
            document.getElementById('periodFilterForm').submit();
        }

        // Deadline date
        const deadlineIso =
            "{{ $activePeriod ? ($activePeriod->deadline_date ? date('c', strtotime($activePeriod->deadline_date . ' 23:59:59')) : '') : '' }}";

        if (deadlineIso) {
            const deadlineDate = new Date(deadlineIso);
            const timerElement = document.getElementById('deadlineTimer');

            function updateTimer() {
                const now = new Date().getTime();
                const distance = deadlineDate - now;

                if (distance < 0) {
                    timerElement.innerHTML = "Waktu Habis!";
                    return;
                }

                const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);

                timerElement.innerHTML = `${days} hari ${hours} jam ${minutes} menit ${seconds} detik`;
            }

            setInterval(updateTimer, 1000);
            updateTimer();
        }

        // Line chart PA growth
        console.log('Labels dari Controller:', @json($periodChartLabels));
        console.log('Data dari Controller:', @json($periodChartData));

        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();
            });
        }
    </script>
@endpush