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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    @push('css')
        {{-- Atau letakkan style ini di file CSS terpisah --}}
        <style>
            .calendar-real-container {
                display: grid;
                grid-template-columns: repeat(7, 1fr);
                gap: 6px;
                margin-top: 10px;
                background: #fff;
                border-radius: 8px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
                padding: 10px;
            }

            .calendar-header-day {
                text-align: center;
                font-weight: bold;
                color: #028284;
                padding: 4px 0 8px 0;
                font-size: 15px;
                background: #f3f6f9;
                border-radius: 4px;
            }

            .calendar-real-day {
                min-height: 60px;
                background: #f8f9fa;
                border-radius: 6px;
                border: 1px solid #e3e3e3;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                font-size: 14px;
                padding: 4px 2px 2px 2px;
                cursor: pointer;
                transition: background 0.2s, box-shadow 0.2s;
                position: relative;
            }

            .calendar-real-day.holiday {
                background: #ffeaea;
                border: 1.5px solid #f53939;
                color: #f53939;
                font-weight: bold;
                box-shadow: 0 2px 8px rgba(245, 57, 57, 0.08);
            }

            .calendar-real-day.today {
                border: 2px solid #028284;
                background: #e6f7f4;
            }

            .calendar-real-day .date-number {
                font-size: 16px;
                font-weight: bold;
                margin-bottom: 2px;
            }

            .calendar-real-day .holiday-dot {
                width: 7px;
                height: 7px;
                background: #f53939;
                border-radius: 50%;
                position: absolute;
                bottom: 6px;
                left: 50%;
                transform: translateX(-50%);
            }

            .calendar-real-day .holiday-desc {
                font-size: 11px;
                color: #f53939;
                margin-top: 2px;
                text-align: center;
                font-weight: 400;
            }

            .calendar-real-day.empty {
                background: transparent;
                border: none;
                cursor: default;
            }

            @media (max-width: 768px) {
                .calendar-real-container {
                    grid-template-columns: repeat(7, 1fr);
                }

                .calendar-real-day {
                    min-height: 40px;
                    font-size: 12px;
                }
            }
        </style>
    @endpush

    {{-- Karyawan --}}
    <div class="container-fluid py-4">
        {{-- Karyawan --}}
        <div class="col-md-12 mb-4">
            <div class="card">
                <div class="card-header">
                    <h6>Karyawan - Tahun: {{ date('Y') }}</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        {{-- Card untuk Karyawan yang Terdaftar --}}
                        <div class="col-md-6 mb-3">
                            <div class="card">
                                <div class="card-body text-center">
                                    <i class="fas fa-users mb-2 text-warning" style="font-size: 24px;"></i>
                                    <p class="text-sm mb-1">Karyawan yang Terdaftar</p>
                                    <h5 class="font-weight-bolder">{{ $karyawan ?? 0 }}</h5>
                                </div>
                            </div>
                        </div>

                        {{-- Card untuk Karyawan yang Memiliki Akun --}}
                        <div class="col-md-6 mb-3">
                            <div class="card">
                                <div class="card-body text-center">
                                    <i class="fas fa-user-check mb-2" style="font-size: 24px; color: #028284;"></i>
                                    <p class="text-sm mb-1">Karyawan yang Memiliki Akun</p>
                                    <h5 class="font-weight-bolder">{{ $karyawanPunyaAkun ?? 0 }}</h5>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12 mb-3">
                            <div class="card shadow-sm">
                                <div class="card-body">
                                    <div class="text-center mb-3">
                                        <i class="fas fa-link mb-2 text-danger" style="font-size: 24px;"></i>
                                        <p class="text-sm mb-1 font-weight-bold text-danger">Akun yang Belum
                                            Terhubung
                                            dengan Profile</p>
                                        <p class="text-danger">({{ $akunBelumTerhubung->count() }} Akun)</p>
                                    </div>
                                    @if (isset($akunBelumTerhubung) && $akunBelumTerhubung->count() > 0)
                                        <div class="text-center mb-3">
                                            <a href="{{ URL::to('/mslink') }}" class="btn btn-sm btn-primary">Perbaiki</a>
                                        </div>
                                    @endif
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped" id="table-akun-belum-terhubung">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th>No</th>
                                                    <th>User ID</th>
                                                    <th>Username</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($akunBelumTerhubung as $index => $akun)
                                                    <tr class="text-danger">
                                                        <td>{{ $index + 1 }}</td>
                                                        <td>{{ $akun->id }}</td>
                                                        <td>{{ $akun->username }}</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            {{-- Pengajuan Cuti --}}
            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h6>Pengajuan Cuti - Tahun: {{ date('Y') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            {{-- Card untuk Permohonan Ditolak --}}
                            <div class="col-md-4 mb-3">
                                <div class="card">
                                    <div class="card-body text-center">
                                        <i class="fas fa-times-circle mb-2 text-danger" style="font-size: 24px;"></i>
                                        <p class="text-sm mb-1">Cuti Ditolak</p>
                                        <h5 class="font-weight-bolder">{{ $cutiDitolak ?? 0 }}</h5>
                                    </div>
                                </div>
                            </div>

                            {{-- Card untuk Permohonan Disetujui --}}
                            <div class="col-md-4 mb-3">
                                <div class="card">
                                    <div class="card-body text-center">
                                        <i class="fas fa-check-circle mb-2" style="font-size: 24px; color: #028284;"></i>
                                        <p class="text-sm mb-1">Cuti Disetujui</p>
                                        <h5 class="font-weight-bolder">{{ $cutiDisetujui ?? 0 }}</h5>
                                    </div>
                                </div>
                            </div>

                            {{-- Card untuk Permohonan Menunggu --}}
                            <div class="col-md-4 mb-3">
                                <div class="card">
                                    <div class="card-body text-center">
                                        <i class="fas fa-clock mb-2 text-warning" style="font-size: 24px;"></i>
                                        <p class="text-sm mb-1">Cuti Menunggu</p>
                                        <h5 class="font-weight-bolder">{{ $cutiMenunggu ?? 0 }}</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Izin/Tugas Section --}}
            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h6>Perizinan - Tahun: {{ date('Y') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            {{-- Card untuk Izin/Tugas Ditolak --}}
                            <div class="col-md-4 mb-3">
                                <div class="card">
                                    <div class="card-body text-center">
                                        <i class="fas fa-times-circle mb-2 text-danger" style="font-size: 24px;"></i>
                                        <p class="text-sm mb-1">Perizinan Ditolak</p>
                                        <h5 class="font-weight-bolder">{{ $perizinanDitolak ?? 0 }}</h5>
                                    </div>
                                </div>
                            </div>

                            {{-- Card untuk Izin/Tugas Disetujui --}}
                            <div class="col-md-4 mb-3">
                                <div class="card">
                                    <div class="card-body text-center">
                                        <i class="fas fa-check-circle mb-2" style="font-size: 24px; color: #028284;"></i>
                                        <p class="text-sm mb-1">Perizinan Disetujui</p>
                                        <h5 class="font-weight-bolder">{{ $perizinanDisetujui ?? 0 }}</h5>
                                    </div>
                                </div>
                            </div>

                            {{-- Card untuk Izin/Tugas Menunggu --}}
                            <div class="col-md-4 mb-3">
                                <div class="card">
                                    <div class="card-body text-center">
                                        <i class="fas fa-clock mb-2 text-warning" style="font-size: 24px;"></i>
                                        <p class="text-sm mb-1">Perizinan Menunggu</p>
                                        <h5 class="font-weight-bolder">{{ $perizinanMenunggu ?? 0 }}</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Kalender Libur Cuti Bersama --}}
        <div class="row mt-4">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <h6>Kalender Cuti Bersama - Tahun: <span id="calendarYear">{{ date('Y') }}</span>
                        </h6>
                        <p class="text-sm">Deskripsi libur cuti bersama akan ditampilkan ketika Anda
                            mengklik tanggal.</p>
                    </div>
                    <div class="card-body">
                        {{-- Dropdown untuk memilih bulan dan tahun --}}
                        <div class="row mb-3">
                            <div class="col-md-5">
                                <label for="bulan">Pilih Bulan</label>
                                <select id="bulan" class="form-select" onchange="updateCalendar()">
                                    @foreach (range(1, 12) as $month)
                                        <option value="{{ $month }}"
                                            {{ $month == now()->month ? 'selected' : '' }}>
                                            {{ DateTime::createFromFormat('!m', $month)->format('F') }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-5">
                                <label for="tahunKalender">Pilih Tahun</label>
                                <select id="tahunKalender" class="form-select" onchange="updateCalendar()">
                                    @php
                                        $currentYear = now()->year;
                                    @endphp
                                    @foreach (range($currentYear - 2, $currentYear + 2) as $year)
                                        <option value="{{ $year }}"
                                            {{ $year == $currentYear ? 'selected' : '' }}>
                                            {{ $year }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="calendar-real-container" id="calendar"></div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        // Inisialisasi DataTables untuk semua tabel list
        $(document).ready(function() {
            var dtOptions = {
                pageLength: 5,
                lengthChange: false,
                ordering: true,
                autoWidth: false,
                responsive: true,
                dom: 'frtip',
                language: {
                    search: "Cari :",
                    lengthMenu: "Tampilkan _MENU_ baris",
                    zeroRecords: "Maaf - Data tidak ada",
                    info: "Data _START_ - _END_ dari _TOTAL_",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(pencarian dari _MAX_ data)"
                }
            };
            $('#table-akun-belum-terhubung').DataTable(dtOptions);
        });
    </script>

    <script>
        // Kalender asli dengan grid hari dan highlight libur
        function updateCalendar() {
            const selectedMonth = parseInt(document.getElementById('bulan').value);
            const selectedYear = parseInt(document.getElementById('tahunKalender').value);
            const holidays = @json($liburCutiBersama);
            const calendarContainer = document.getElementById('calendar');
            calendarContainer.innerHTML = '';

            // Hari-hari dalam seminggu
            const daysOfWeek = ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'];
            // Header hari
            daysOfWeek.forEach(day => {
                const header = document.createElement('div');
                header.className = 'calendar-header-day';
                header.innerText = day;
                calendarContainer.appendChild(header);
            });

            // Hitung jumlah hari dalam bulan dan hari pertama
            const firstDay = new Date(selectedYear, selectedMonth - 1, 1).getDay();
            const daysInMonth = new Date(selectedYear, selectedMonth, 0).getDate();
            const today = new Date();

            // Buat array libur untuk lookup cepat
            const holidayMap = {};
            holidays.forEach(h => {
                const d = new Date(h.tanggal);
                if (d.getFullYear() === selectedYear && d.getMonth() + 1 === selectedMonth) {
                    holidayMap[d.getDate()] = h;
                }
            });

            // Render grid kalender
            let gridCount = 0;
            // Kosongkan hari sebelum tanggal 1
            for (let i = 0; i < firstDay; i++) {
                const empty = document.createElement('div');
                empty.className = 'calendar-real-day empty';
                calendarContainer.appendChild(empty);
                gridCount++;
            }
            // Render hari-hari bulan ini
            for (let day = 1; day <= daysInMonth; day++) {
                const cell = document.createElement('div');
                cell.className = 'calendar-real-day';
                // Highlight hari ini
                if (
                    day === today.getDate() &&
                    selectedMonth === today.getMonth() + 1 &&
                    selectedYear === today.getFullYear()
                ) {
                    cell.classList.add('today');
                }
                // Jika libur
                if (holidayMap[day]) {
                    cell.classList.add('holiday');
                    cell.innerHTML = `<span class="date-number">${day}</span><div class="holiday-dot"></div>`;
                    cell.title = holidayMap[day].deskripsi;
                    cell.addEventListener('click', function() {
                        Swal.fire({
                            title: `Libur Tanggal ${day < 10 ? '0' + day : day}`,
                            html: `<p>${holidayMap[day].deskripsi}</p><p>Tanggal Lengkap: ${new Date(holidayMap[day].tanggal).toLocaleDateString('id-ID', {day: '2-digit', month: '2-digit', year: 'numeric'})}</p>`,
                            icon: 'info',
                            confirmButtonText: 'OK',
                            confirmButtonColor: '#028284'
                        });
                    });
                } else {
                    cell.innerHTML = `<span class="date-number">${day}</span>`;
                }
                calendarContainer.appendChild(cell);
                gridCount++;
            }
            // Kosongkan sisa grid agar kelipatan 7
            while (gridCount % 7 !== 0) {
                const empty = document.createElement('div');
                empty.className = 'calendar-real-day empty';
                calendarContainer.appendChild(empty);
                gridCount++;
            }
        }
        document.addEventListener('DOMContentLoaded', function() {
            updateCalendar();
        });
    </script>
@endpush