@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    <script>
        if (window.self !== window.top && window.location.href.indexOf('/add') === -1) {
            document.documentElement.style.display = 'none';
            if (window.parent && window.parent.calendar) {
                window.parent.calendar.refetchEvents();
                if (window.parent.$) {
                    window.parent.$('#modalAddEventIframe').modal('hide');
                }
            }
        }
    </script>
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="section-first">
        <div class="card shadow-lg mx-4">
            <div class="card-body p-3">
                <div class="row gx-4">
                    <div class="col-lg">
                        <div class="nav-wrapper">
                            {{-- check authorize add --}}
                            @if ($authorize->add == '1')
                                {{-- button execute --}}
                                <button class="btn btn-primary mb-0"
                                    onclick="window.location='{{ URL::to($url_menu . '/add') }}'"><i class="fas fa-plus me-1">
                                    </i><span class="font-weight-bold">
                                        ADD</button>
                            @endif
                            <input type="hidden" id="auth-add" name="auth-add" value="{{ $authorize->add }}">
                            <input type="hidden" id="auth-edit" name="auth-edit" value="{{ $authorize->edit }}">
                            <input type="hidden" id="idroles" name="idroles" value="{{ $userinfo->idroles }}">
                            <input type="hidden" id="jabatan" name="jabatan" value="{{ $userinfo->lastname }}">

                            <input type="hidden" id="auth-delete" name="auth-delete" value="{{ $authorize->delete }}">
                            <input type="hidden" id="auth-approval" name="auth-approval"
                                value="{{ $authorize->approval }}">


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <form>
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Filter {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <!-- Tanggal Transaksi - Hanya untuk Internship -->
                                <div class="col-lg-4">
                                    <div class="row mb-3">
                                        <div class="col-lg-4">
                                            <label for="inputdate" class="form-label">Date</label>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="input-group">
                                                <input type="date" class="form-control" id="start-date" name="start-date"
                                                    placeholder="Date From" max="2026-10-03"
                                                    value="2026-10-01">
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="input-group">
                                                <input type="date" class="form-control" id="end-date" name="end-date"
                                                    placeholder="Date To" max="2026-10-03"
                                                    value="2026-10-03">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-1 d-flex justify-content-center">
                                    <div style="border-left: 2px solid #ddd; height: 50%;"></div>
                                </div>
                                <!-- ID Transaksi -->
                                <div class="col-lg-3">
                                    <div class="row mb-3">
                                        <div class="col-lg-4">
                                            <label for="inputCust" class="form-label me-2"
                                                style="min-width: 150px;">ID</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <div class="flex flex-col mb-2 input-group">
                                                <input type="text" id="id" name="id" class="form-control"
                                                    value="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-1 d-flex justify-content-center">
                                    <div style="border-left: 2px solid #ddd; height: 50%;"></div>
                                </div>
                                {{-- Status --}}
                                <div class="col-lg-3">
                                    <div class="row mb-3">
                                        <div class="col-lg-4">
                                            <label for="inputCust" class="form-label me-2"
                                                style="min-width: 150px;">Status</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <div class="flex flex-col mb-2 input-group">
                                                <select id="statusSelect" name="report-filter-status" class="form-select">
                                                    <option value=""></option>
                                                    <option value="ALL">ALL</option>

                                                    @foreach ($status as $s)
                                                        <option value="{{ $s->value }}">
                                                            {{ $s->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <button type="submit" class="btn btn-primary mb-1 mt-3" id="search-form">
                                <i class="fa fa-magnifying-glass"></i> Search
                            </button>
                        </div>
                        <div class="card-footer align-items-center pt-0 pb-2">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @if ($userinfo->lastname != 'IN')
        {{-- Approval Internship --}}
        <div class="container-fluid py-4" id="listtableinship" hidden>
            <div class="row">
                <div class="col-md-12">
                    <div class="card overflow-auto">
                        <div class="card-header pb-0 p-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <h6 class="mb-0 text-uppercase text-sm">List {{ $title_menu }} - Internship</h6>
                                <button class="btn btn-link text-dark p-0" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseInternship" aria-expanded="true"
                                    aria-controls="collapseInternship">
                                    <i class="fas fa-chevron-down"></i>
                                </button>
                            </div>
                        </div>
                        <div class="collapse show" id="collapseInternship">
                            <div class="card-body">
                                <hr class="horizontal dark mt-0">
                                <div class="row mb-3 align-items-end">
                                    <div class="col-lg-3 col-md-4">
                                        <label for="filter-user-select" class="form-label mb-2"
                                            style="font-size: 0.875rem; font-weight: 500;">
                                            Filter by User
                                        </label>
                                        <select id="filter-user-select" class="form-select" style="padding: 0.5rem;">
                                            <option value="">-- All Users --</option>
                                            @foreach ($it_users ?? [] as $user)
                                                <option value="{{ $user->firstname }}">{{ $user->firstname }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-3" id="batch-actions" style="display: none;">
                                    <div class="col-12">
                                        <button class="btn btn-primary" onclick="batchApprove()">
                                            <i class="fas fa-check-circle me-1"></i> Approve Selected (<span
                                                id="selected-count">0</span>)
                                        </button>
                                        <button class="btn btn-danger" onclick="batchReject()">
                                            <i class="fas fa-times-circle me-1"></i> Reject Selected (<span
                                                id="selected-count-reject">0</span>)
                                        </button>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="table-responsive">
                                        <input type="number" class="form-control" name="daily-act-inship"
                                            max="99" hidden>
                                        <table class="table table-hover" id="tabel-dailya-inship">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th style="text-align: center;">
                                                        <div
                                                            class="form-check d-flex justify-content-center align-items-center m-0">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="checkboxesMain">

                                                        </div>
                                                    </th>
                                                    <th scope="col">Action</th>
                                                    <th scope="col">Nama</th>
                                                    {{-- <th scope="col">Date</th> --}}
                                                    <th scope="col">ID</th>
                                                    <th scope="col">Keterangan</th>
                                                    <th scope="col">Kategori</th>
                                                    <th scope="col">Departement</th>
                                                    <th scope="col">User</th>
                                                    <th scope="col">Start</th>
                                                    <th scope="col">Finish</th>
                                                    <th scope="col">Poin</th>
                                                    <th scope="col">Status</th>
                                                    <th scope="col">Approval</th>

                                                </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- header tabel --}}
    <div class="container-fluid py-4" id="listtable" hidden>
        <div class="row">
            <div class="col-md-12">
                <div class="card overflow-auto">
                    <div class="card-header pb-0 p-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6 class="mb-0 text-uppercase text-sm">List {{ $title_menu }}</h6>
                            <button class="btn btn-link text-dark p-0" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseITStaff" aria-expanded="true" aria-controls="collapseITStaff">
                                <i class="fas fa-chevron-down"></i>
                            </button>
                        </div>
                    </div>
                    <div class="collapse show" id="collapseITStaff">
                        <div class="card-body">
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="table-responsive">
                                    <input type="number" class="form-control" name="daily-act" max="99" hidden>
                                    <table class="table table-hover" id="tabel-dailya">
                                        <thead style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th scope="col">Action</th>
                                                <th scope="col">Date</th>
                                                <th scope="col">ID</th>
                                                <th scope="col">Keterangan</th>
                                                <th scope="col">Kategori</th>
                                                <th scope="col">Departement</th>
                                                <th scope="col">User</th>
                                                <th scope="col">Start</th>
                                                <th scope="col">Finish</th>
                                                <th scope="col">Status</th>

                                                @if ($userinfo->idroles === 'inship' || $userinfo->lastname === 'IN')
                                                    <th scope="col">Approval</th>
                                                @endif

                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row px-4 py-2">
                                <div class="col-lg">
                                    <div class="nav-wrapper" id="noted">
                                        <code>
                                            Note :
                                            <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i>
                                            Daily Activity's Rejected
                                            &nbsp;|&nbsp;
                                            <i aria-hidden="true" style="color: #e6f2ff;" class="fas fa-circle"></i> Data
                                            from Ticketing
                                        </code>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- header tabel --}}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card overflow-auto">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Calendar {{ $title_menu }}</p>
                        <hr class="horizontal dark mt-0">

                        <!-- Filter by User & Group -->
                        @if ($userinfo->lastname != 'IN')
                            <div class="row mb-3 align-items-end">
                                <div class="col-lg-3 col-md-4">
                                    <label for="calendar-filter-user" class="form-label mb-2"
                                        style="font-size: 0.875rem; font-weight: 500;">
                                        Filter by User
                                    </label>
                                    <select id="calendar-filter-user" class="form-select" style="padding: 0.5rem;">
                                        <option value="">-- All Users --</option>
                                        <option value="{{ $userinfo->username }}">{{ $userinfo->firstname }}</option>
                                        @foreach ($it_users ?? [] as $user)
                                            @if ($user->username !== $userinfo->username)
                                                <option value="{{ $user->username }}">{{ $user->firstname }}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        @endif

                        <div class="row">
                            <div id='calendar'>

                            </div>
                            <div class="col-lg">
                                <div class="nav-wrapper" id="noted">
                                    <!-- Legend Status -->
                                    <strong>Status:</strong>
                                    <span class="legend-chip legend-completed"></span> Completed
                                    <span class="legend-chip legend-inprogress"></span> In Progress
                                    <span class="legend-chip legend-defined"></span> Defined

                                    <!-- spacer -->
                                    <span class="mx-3">|</span>

                                    <!-- Legend User -->
                                    <strong>Users:</strong>
                                    <span class="legend-chip legend-owner ms-2"
                                        style="background-color: #1e3a8a; border: 1px solid rgba(0,0,0,.2);"
                                        aria-label="Owner"></span> <span id="owner-name-legend">Owner (You)</span>

                                    <span id="dynamic-user-legends" class="ms-2"></span>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <div class="spinner-border text-primary" role="status" id="calendar-loading" style="display: none;">
        <span class="visually-hidden">Loading...</span>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="overflow-x: auto;">
                <div class="modal-header">
                    <h5 class="modal-title" id="eventTitle">Detail Event</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" style="max-height: 400px; overflow-y: auto;">
                    <p id="eventDate"></p>
                    <p id="eventUser"></p>
                    <p><strong>Description:</strong></p>
                    <p id="eventDescription"></p>

                    <p id="eventIT"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    <style>
        .btn-group .btn-outline-secondary.active {
            background-color: #344767;
            color: white;
            border-color: #344767;
        }

        .btn-group .btn-outline-secondary:hover {
            background-color: #344767;
            color: white;
            border-color: #344767;
        }

        /* Owner Legend - WARNA GELAP */
        .legend-owner {
            border: 1px solid rgba(0, 0, 0, .2);
            background-color: #1e3a8a !important;
            /* Hijau gelap emerald-600 */
        }

        /* Dynamic user legend styling */
        #dynamic-user-legends {
            display: inline-block;
        }

        #dynamic-user-legends .legend-chip {
            margin-right: 4px;
        }

        /* weekend */
        .fc-day-sat-sun {
            background: #ffbdbd !important;
        }

        /* label libur */
        .holiday-label {
            position: absolute;
            bottom: 2px;
            left: 4px;
            font-size: 0.7em;
            color: #b91c1c;
        }

        .fc-daygrid-day {
            position: relative;
            /* wajib biar absolute jalan */
        }

        /* sembunyikan shading merah di hari numpang */
        .fc-day-other .fc-bg-event {
            display: none !important;
        }

        /* Chip kecil buat legend identitas */
        .legend-chip {
            display: inline-block;
            width: 16px;
            height: 12px;
            border-radius: 3px;
            vertical-align: middle;
            margin-right: 6px;
            border: 1px solid rgba(0, 0, 0, .2);
            /* Pola diagonal dihapus untuk semua legend */
        }

        /* Completed: garis hijau */
        .legend-completed {
            border-left: 4px solid #2dce89;
        }

        /* In Progress: garis biru muda */
        .legend-inprogress {
            border-left: 4px solid #11cdef;
        }

        /* Defined: garis teal */
        .legend-defined {
            border-left: 4px solid #028284;
        }

        /* Internship: warna solid penuh (background-color) akan diset dinamis sesuai warna user internship */
        .legend-intern {
            border: 1px solid rgba(0, 0, 0, .2);
            background-color: #6f42c1;
            /* default ungu, akan diubah oleh JS */
        }

        /* Styling untuk link +more - hanya tulisan, tidak clickable */
        .fc-more-link {
            font-weight: 600;
            color: #6c757d !important;
            text-decoration: none;
            cursor: default !important;
            padding: 2px 4px;
            border-radius: 3px;
            pointer-events: none !important;
            /* Disable klik pada +more */
        }

        .fc-more-link:hover {
            background-color: transparent;
            text-decoration: none;
        }

        /* Styling untuk modal day activities */
        .day-activities-modal .list-group-item {
            border-radius: 6px;
            /* Hapus transition - tidak ada animasi */
        }

        /* Hapus hover effect - tidak ada animasi saat hover */
        .day-activities-modal .list-group-item:hover {
            /* No animation */
        }

        /* Styling untuk cell yang bisa diklik */
        .fc-daygrid-day:hover {
            background-color: rgba(0, 0, 0, 0.02);
            cursor: pointer;
        }

        /* Styling untuk link +more di time slot (Week/Day view) */
        .time-slot-more-link {
            display: inline-block;
            margin-left: 5px;
            color: #fff !important;
            font-weight: 600;
            text-decoration: underline;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .time-slot-more-link:hover {
            opacity: 0.8;
            text-decoration: underline;
        }

        /* Styling untuk time grid cells agar lebih interaktif */
        .fc-timegrid-slot:hover {
            background-color: rgba(0, 0, 0, 0.02);
            cursor: pointer;
        }

        /* Styling khusus untuk event di time grid */
        .fc-timegrid-event {
            cursor: pointer;
        }

        .fc-timegrid-event .fc-event-main-frame {
            padding: 2px 4px;
        }

        /* Force single column untuk overlapping events di Week/Day view */
        .fc-timegrid-event-harness {
            width: 100% !important;
            left: 0 !important;
            right: 0 !important;
        }

        /* Ensure events tidak overlap secara visual */
        .fc-timegrid-event {
            width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        /* Remove default FullCalendar overlap styling */
        .fc-timegrid-col-events {
            margin: 0 !important;
        }

        /* Align calendar header dengan filter */
        .fc-header-toolbar {
            margin-bottom: 1em !important;
            margin-top: -0.5em !important;
            /* Angkat header ke atas */
            padding: 0 !important;
        }

        /* Align title dan buttons dengan filter row */
        .fc-toolbar-chunk {
            display: flex;
            align-items: center;
        }

        /* Style untuk title bulan */
        .fc-toolbar-title {
            font-size: 1.25rem !important;
            font-weight: 600 !important;
            margin: 0 !important;
            line-height: 1.2 !important;
            /* Kurangi line height */
        }

        /* Style untuk navigation buttons */
        .fc-button {
            padding: 0.4rem 0.8rem !important;
            font-size: 0.875rem !important;
            height: auto !important;
            /* Reset height */
        }

        /* Spacing antara buttons */
        .fc-button-group {
            gap: 0.25rem;
        }
    </style>
    <script>
        // helper global (bisa dipakai di mana saja di halaman ini)
        function fmtLocalYmd(dateObj) {
            return dateObj.getFullYear() + '-' +
                String(dateObj.getMonth() + 1).padStart(2, '0') + '-' +
                String(dateObj.getDate()).padStart(2, '0');
        }
    </script>
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $(document).ready(function() {

            // Inisialisasi DataTable
            $('#tabel-dailya').DataTable({
                "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)"
                },
                "destroy": true,
                "ordering": false,
                responsive: true,
            });

            $('#tabel-dailya-inship').DataTable({
                "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)"
                },
                "destroy": true,
                "ordering": false,
                responsive: true,
            });

            // Initial load: tampilkan semua daily activity dengan approval pending tanpa filter tanggal
            searchTransactions();
        });

        var authadd = document.getElementById('auth-add').value;
        var authedit = document.getElementById('auth-edit').value;
        var authdelete = document.getElementById('auth-delete').value;
        var authapproval = document.getElementById('auth-approval').value;
        var idroles = document.getElementById('idroles').value;
        var jabatan = document.getElementById('jabatan').value;

        // console.log('jabatan', jabatan);

        // var holiday = @json($holiday);

        function searchTransactions(startDate = null, endDate = null) {
            // Ambil nilai input dari form
            var id = $("input[name='id']").val();
            var sdate = startDate || $("input[name='start-date']").val();
            var edate = endDate || $("input[name='end-date']").val();
            var status = $("#statusSelect").val();

            // Validasi input
            // Jika status kosong (tampilkan semua pending), tidak perlu filter tanggal
            if (id === '' && (sdate === '' || edate === '') && status !== '') {
                Swal.fire({
                    title: 'Warning!',
                    text: 'Please fill out ID or both Start Date and End Date!',
                    icon: 'error',
                    confirmButtonColor: '#3085d6'
                });
                return;
            } else if (sdate !== '' && edate !== '' && sdate > edate) {
                Swal.fire({
                    title: 'Warning!',
                    text: 'Start Date must be less than or equal to End Date',
                    icon: 'error',
                    confirmButtonColor: '#3085d6'
                });
                return;
            }

            // Tambahkan spinner dan nonaktifkan tombol
            $('#search-form').append(
                '<span class="spinner-border spinner-border-sm icon-load" role="status" aria-hidden="true"></span>'
            );
            $('#search-form').attr('disabled', true);

            // Buat filter
            var filter = {
                id: id,
                sdate: sdate,
                edate: edate,
                status: status
            };
            console.log(filter);

            // Kirim permintaan AJAX
            $.ajax({
                url: '{{ URL::to('/') }}/dailya/search',
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // Tambahkan CSRF token
                },
                data: filter, // Kirim data dalam format URL-encoded
                success: function(response) {
                    // Tampilkan div tabel dan muat data
                    $('#listtable').removeAttr('hidden');
                    loadrefreshItem(response.data)

                    // data inship
                    if ((Array.isArray(response.datainship) && response.datainship.length > 0) || Number(
                            response.datainship) > 0) {
                        $('#listtableinship').removeAttr('hidden');
                        loadrefreshItemInship(response.datainship);
                    } else {
                        $('#listtableinship').attr('hidden', true);
                    }


                },
                error: function(jqXHR, textStatus, errorThrown) {
                    if (jqXHR.status === 404) {
                        Swal.fire({
                            icon: 'error',
                            title: 'No Data Found',
                            text: jqXHR.responseJSON.message,
                            confirmButtonColor: '#d33'
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: 'Something went wrong!',
                            confirmButtonColor: '#d33'
                        });
                    }
                },
                complete: function() {
                    // Hapus spinner dan aktifkan tombol
                    $('#search-form').find('.icon-load').remove(); // Hapus elemen spinner
                    $('#search-form').attr('disabled', false); // Aktifkan kembali tombol
                }
            });
        }


        $('#search-form').click(function(event) {
            event.preventDefault();
            searchTransactions();

        });

        //function menampilkan data yang telah di filter
        function loadrefreshItem(data) {
            // Kosongkan tabel (tanpa menghancurkan DataTables)
            const table = $('#tabel-dailya').DataTable(); // Ambil instance DataTables
            table.clear(); // Hapus semua data di DataTables

            // Iterasi melalui data dan tambahkan baris ke tbody
            data.forEach(item => {
                // Mapping status dan picking
                // Status dengan Badge
                let status = '';
                switch (item.status) {
                    case 'D':
                        status =
                            '<span class="badge" style="background-color: #028284; color: white;">Defined</span>';
                        break;
                    case 'C':
                        status =
                            '<span class="badge" style="background-color: #2dce89; color: white;">Completed</span>';
                        break;
                    case 'P':
                        status =
                            '<span class="badge" style="background-color: #11cdef; color: white;">In Progress</span>';
                        break;
                    case 'N':
                        status = '<span class="badge bg-danger">None</span>';
                        break;
                    default:
                        status = '<span class="badge bg-secondary">Unknown</span>';
                }
                const safePengerjaan = JSON.stringify(item.pengerjaan || "");
                let approval = '';
                switch (item.approve) {
                    case '0':
                        approval =
                            '<span class="badge bg-warning">Pending</span>';
                        break;
                    case '1':
                        approval =
                            '<span class="badge bg-success">Approve</span>';
                        break;
                    case '2':
                        approval =
                            '<span class="badge bg-danger">Reject</span>';
                        break;

                    default:
                        approval = '<span class="badge bg-secondary">Unknown</span>';
                }
                // Bangun elemen dropdown dengan kondisi
                let dropdownItems = '';

                const allRoles = ['it.mis', 'admins', 'admhrw', 'admmis', 'inship'];
                const inRoles = ['admhrw', 'admmis', 'inship']; // khusus aturan jabatan IN

                if (item.status === 'C' && allRoles.includes(idroles)) {
                    let showUncomplete = false;

                    if (jabatan === 'IN') {
                        // Aturan 1 & 2
                        if (inRoles.includes(idroles) && item.approve == '0' || item.approve == '2') {
                            // jabatan IN, role salah satu inRoles, approve 0 -> boleh UnComplete
                            showUncomplete = true;
                        }
                        // kalau approve == '1' --> tetap false (tidak tampil)
                    } else {
                        // Aturan 3: jabatan BUKAN IN, semua role di allRoles boleh UnComplete
                        // untuk approve 0 maupun 1
                        showUncomplete = true;
                    }

                    if (showUncomplete) {
                        dropdownItems += `
                        <li>
                            <a class="dropdown-item" href="#" onclick="uncompleteDA('${item.id}')" style="cursor: pointer;">
                                <i class="fas fa-undo-alt"></i> <span>UnComplete</span>
                            </a>
                        </li>`;
                    }
                } else if (item.status === 'D') {
                    // Periksa otorisasi untuk Edit
                    if (authedit === '1') {
                        dropdownItems += `
                                <li><a class="dropdown-item" onclick="editDA('${item.encrypted_id}')" style="cursor: pointer;">
                                    <i class="fas fa-pen-to-square"></i> <span> Edit</span>
                                </a></li>
                                `;
                    }
                    // Tambahkan opsi Proses
                    dropdownItems += `
                        <li><a class="dropdown-item" onclick="prosesDA('${item.id}' , '${item.start}', '${item.finish}', '${item.poin}')" style="cursor: pointer;">
                            <i class="fas fa-check-circle"></i> <span> Proses</span>
                        </a></li>
                        `;

                    // Periksa otorisasi untuk Delete
                    if (authdelete === '1') {
                        dropdownItems += `
                            <li><a class="dropdown-item" onclick="deleteDA('${item.id}')" style="cursor: pointer;">
                                <i class="fas fa-trash"></i> <span> Hapus</span>
                            </a></li>
                            `;
                    }
                } else if (item.status === 'P') {
                    if (authedit === '1') {
                        dropdownItems += `
                                <li><a class="dropdown-item" onclick="editDA('${item.encrypted_id}')" style="cursor: pointer;">
                                    <i class="fas fa-pen-to-square"></i> <span> Edit</span>
                                </a></li>
                                `;
                    }
                    dropdownItems += `
                       <li>
                         <a class="dropdown-item"
                            href="#"
                            data-id="${item.id}"
                            data-start="${item.start}"
                            data-finish="${item.finish}"
                            data-poin="${item.poin}"
                            data-pengerjaan='${safePengerjaan}'
                            onclick="handleCompleteDA(this)">
                            <i class="fas fa-flag-checkered"></i> <span> Completed</span>
                        </a>
                        </li>


                        <li><a class="dropdown-item" href="#" onclick="unprosesDA('${item.id}')" style="cursor: pointer;">
                            <i class="fas fa-undo-alt"></i> <span> UnProses</span> <!-- Ikon untuk unprocess -->
                        </a></li>

                        `;
                }

                const username = item.username + (item.user_isactive == 0 ? ' (Not Active)' : '');
                // Tambahkan baris ke DataTables
                const isRejected =
                    item.approve == '2' ||
                    (item.alasan_reject && item.alasan_reject !== 'null'); // kalau ada alasan

                const isTicketingLocked = (item.source === 'ticketing' && ['P', 'C'].includes(item.status));
                let actionHtml = '';
                if (isTicketingLocked) {
                    // Hanya tombol View
                    actionHtml = `
                        <button type="button" class="btn btn-primary" id="view-${item.id}" onclick="viewDA('${item.encrypted_id}')">
                            <i class="fas fa-eye"></i> View
                        </button>`;
                } else {
                    // View + Dropdown (default existing behavior)
                    actionHtml = `
                        <div class="btn-group dropright">
                            <button type="button" class="btn btn-primary" id="view-${item.id}" onclick="viewDA('${item.encrypted_id}')">
                                <i class="fas fa-eye"></i> View
                            </button>
                            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu">
                                ${dropdownItems}
                            </div>
                        </div>`;
                }

                // 2. Tambah row ke DataTable
                const row = table.row.add([
                    actionHtml,
                    item.date,
                    item.id,
                    item.ket,
                    item.katname + " - " + item.detkatname,
                    item.deptname,
                    username,
                    item.start,
                    item.finish,
                    status,
                    @if ($userinfo->idroles === 'inship' || $userinfo->lastname === 'IN')
                        approval
                    @endif
                ]);

                // 3. Ambil node TR-nya
                const rowNode = row.node();

                const hasSource = item.source !== null && item.source !== undefined && String(item.source)
                    .trim() !== '';
                const isTicketingSource = String(item.source || '').toLowerCase() === 'ticketing';
                if (isRejected) {
                    $(rowNode).css('background-color', '#fee2e2');
                } else if (hasSource || isTicketingSource) {
                    $(rowNode).css('background-color', '#e6f2ff');
                }


            });
            // Perbarui tampilan DataTables
            table.draw(); // Render ulang tabel
        }

        //function menampilkan data yang telah di filter
        function loadrefreshItemInship(data) {
            $('#checkboxesMain').prop('checked', false);
            $('#checkboxesMain').prop('indeterminate', false);
            // Kosongkan tabel (tanpa menghancurkan DataTables)
            const table = $('#tabel-dailya-inship').DataTable(); // Ambil instance DataTables
            table.clear(); // Hapus semua data di DataTables

            // Iterasi melalui data dan tambahkan baris ke tbody
            data.forEach(item => {
                // Mapping status dan picking
                // Status dengan Badge
                let status = '';
                switch (item.status) {
                    case 'D':
                        status =
                            '<span class="badge" style="background-color: #028284; color: white;">Defined</span>';
                        break;
                    case 'C':
                        status =
                            '<span class="badge" style="background-color: #2dce89; color: white;">Completed</span>';
                        break;
                    case 'P':
                        status =
                            '<span class="badge" style="background-color: #11cdef; color: white;">In Progress</span>';
                        break;
                    case 'N':
                        status = '<span class="badge bg-danger">None</span>';
                        break;
                    default:
                        status = '<span class="badge bg-secondary">Unknown</span>';
                }

                let approval = '';
                switch (item.approve) {
                    case '0':
                        approval =
                            '<span class="badge bg-warning">Pending</span>';
                        break;
                    case '1':
                        approval =
                            '<span class="badge bg-success">Approve</span>';
                        break;

                    case '2':
                        approval =
                            '<span class="badge bg-danger">Reject</span>';
                        break;

                    default:
                        approval = '<span class="badge bg-secondary">Unknown</span>';
                }
                const safePengerjaanInship = JSON.stringify(item.pengerjaan || "");

                // Bangun elemen dropdown dengan kondisi
                let dropdownItems = '';

                if (item.approve === '1' && item.status === 'C') {
                    dropdownItems += `
                        <li><a class="dropdown-item" href="#" onclick="unapproveDA('${item.id}')" style="cursor: pointer;">
                            <i class="fas fa-rotate-left me-1"></i> <span> Unapprove</span> <!-- Ikon untuk unprocess -->
                        </a></li>
                `;

                } else if (item.approve === '0' && item.status === 'C') {
                    // Periksa otorisasi untuk Edit
                    if (authapproval === '1') {
                        dropdownItems += `
                        <li><a class="dropdown-item"
                        style="cursor: pointer;"
                        onclick="approveDA(this)"
                        data-id="${item.id}"
                        data-reqby="${item.reqby}"
                        data-user="${item.username}"
                        data-dept="${item.deptname}"
                        data-kategori="${item.katname}"
                        data-detkat="${item.detkatname}"
                        data-ket="${item.ket}"

                          data-detail="${item.pengerjaan}">
                        <i class="fas fa-check-circle me-1"></i> <span> Approve</span>
                    </a></li>

                    <li><a class="dropdown-item"
                        style="cursor: pointer;"
                        onclick="rejectDA(this)"
                        data-id="${item.id}"
                        data-reqby="${item.reqby}"
                        data-user="${item.username}"
                        data-dept="${item.deptname}"
                        data-kategori="${item.katname}"
                        data-detkat="${item.detkatname}"
                        data-ket="${item.ket}"
                        data-detail="${item.pengerjaan}">
                    <i class="fas fa-times-circle me-1"></i> <span> Reject</span>
                    </a></li>
                        `;
                    }

                }

                const username = item.username + (item.user_isactive == 0 ? ' (Not Active)' : '');
                let checkboxHtml = '';
                const isCheckboxEnabled = (item.status === 'C' && item.approve === '0');
                const isDisabled = !isCheckboxEnabled ? 'disabled' : '';
                const disabledStyle = !isCheckboxEnabled ? 'opacity: 0.4; cursor: not-allowed;' :
                    'cursor: pointer;';
                checkboxHtml = `
                    <div class="form-check d-flex justify-content-center align-items-center m-0">
                        <input class="checkbox form-check-input"
                            type="checkbox"
                            data-id="${item.id}"
                            ${isDisabled}
                            style="${disabledStyle}">
                    </div>`;
                // Tambahkan baris ke DataTables
                table.row.add([
                    // kolom 1
                    // `<div class="form-check d-flex justify-content-center align-items-center m-0">
                //      <input class="checkbox form-check-input" type="checkbox" data-id="${item.id}">
                //  </div>`,
                    checkboxHtml,

                    // kolom 2
                    `<div class="btn-group dropright">
                        <button type="button" class="btn btn-primary" id="view-${item.id}" onclick="viewDA('${item.encrypted_id}')">
                            <i class="fas fa-eye"></i> View
                        </button>
                        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
                                data-bs-toggle="dropdown" aria-expanded="false">
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <div class="dropdown-menu">
                            ${dropdownItems}
                        </div>
                    </div>`,

                    item.user_inship,
                    // item.date,
                    item.id,
                    item.ket,
                    item.katname + " - " + item.detkatname,
                    item.deptname,
                    username,
                    item.start,
                    item.finish,
                    item.poin,
                    status,
                    approval,

                ]);
            });
            // Perbarui tampilan DataTables
            table.draw(); // Render ulang tabel
        }

        //function view
        function viewDA(id) {
            var idDa = id;

            if (idDa) {
                window.location.href = "{{ url($url_menu . '/show' . '/') }}/" + (idDa);
            } else {
                Swal.fire({
                    title: 'Oops!',
                    text: 'Pilih ID DA terlebih dahulu!',
                    icon: 'warning',
                    confirmButtonText: 'OK'
                });
            }
        }

        //function view
        function editDA(id) {
            var idDa = id;

            if (idDa) {
                window.location.href = "{{ url($url_menu . '/edit' . '/') }}/" + (idDa);
            } else {
                Swal.fire({
                    title: 'Oops!',
                    text: 'Pilih ID DA terlebih dahulu!',
                    icon: 'warning',
                    confirmButtonText: 'OK'
                });
            }
        }

        function prosesDA(id, start) {
            var idDa = id;

            // Cek role user dari input hidden
            const userRole = document.getElementById('jabatan').value;
            const isInternship = userRole === 'IN';

            // Mendapatkan waktu saat ini dalam format datetime-local
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const today = `${year}-${month}-${day}T${hours}:${minutes}`;

            // Cek apakah start sudah terisi atau belum
            let isStartFilled = start && start.trim() !== '' && start !== 'null';
            let dateValue, timeValue;

            if (isStartFilled) {
                // Jika start sudah terisi, ambil tanggal dan jam dari start yang ada
                const startDate = new Date(start);
                dateValue =
                    `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}`;
                timeValue =
                    `${String(startDate.getHours()).padStart(2, '0')}:${String(startDate.getMinutes()).padStart(2, '0')}`;
            } else {
                // Jika belum terisi, gunakan tanggal hari ini
                dateValue = `${year}-${month}-${day}`;
                timeValue = `${hours}:${minutes}`;
            }

            // Tentukan atribut readonly dan style berdasarkan role
            const dateReadonly = isInternship ? 'readonly' : '';
            const dateStyle = isInternship ? 'background-color: #f0f0f0; cursor: not-allowed;' : '';
            const dateHelpText = isInternship ?
                (isStartFilled ? 'Tanggal sudah terisi dan tidak dapat diubah' :
                    'Tanggal diset ke hari ini dan tidak dapat diubah') :
                'Tanggal dapat diubah sesuai kebutuhan';

            // Tampilkan modal untuk mengedit start
            Swal.fire({
                title: `Proses Data - ${idDa}`,
                html: `
                        <div style="margin-bottom: 15px;">
                            <label for="date-input" style="display: block; text-align: left; margin-bottom: 5px;">Tanggal</label>
                            <input id="date-input" type="date" class="swal2-input" value="${dateValue}" ${dateReadonly} style="${dateStyle}">
                            <small style="color: #666; display: block; margin-top: 5px;">${dateHelpText}</small>
                        </div>
                        <div style="margin-bottom: 15px;">
                            <label for="time-input" style="display: block; text-align: left; margin-bottom: 5px;">Jam</label>
                            <input id="time-input" type="time" class="swal2-input" value="${timeValue}">
                            <small style="color: #666; display: block; margin-top: 5px;">Jam dapat diubah sesuai kebutuhan</small>
                        </div>
                    `,
                showCancelButton: true,
                confirmButtonText: 'Proses',
                cancelButtonText: 'Batal',
                didOpen: () => {
                    const dateInput = document.getElementById('date-input');
                    const timeInput = document.getElementById('time-input');
                },
                preConfirm: () => {
                    const dateInputValue = document.getElementById('date-input').value;
                    const timeInputValue = document.getElementById('time-input').value;

                    if (!dateInputValue || !timeInputValue) {
                        Swal.showValidationMessage('Tanggal dan Jam wajib diisi!');
                        return false;
                    }

                    // Gabungkan tanggal dan jam
                    const combinedDateTime = `${dateInputValue}T${timeInputValue}`;

                    return {
                        start: combinedDateTime
                    };
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    const updatedStart = result.value.start;

                    // Ajax untuk memproses data ke database
                    $.ajax({
                        url: '{{ URL::to('/') }}/dailya/proses/' + idDa,
                        type: "POST",
                        dataType: "JSON",
                        data: {
                            start: updatedStart
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            Swal.fire({
                                title: 'Berhasil!',
                                text: `Data ${idDa} berhasil diproses!`,
                                icon: 'success',
                                confirmButtonColor: '#3085d6'
                            }).then(() => {
                                window.location.replace("{{ URL::to('/') }}/dailya/");
                            });
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            Swal.fire({
                                title: 'Oops!',
                                text: `Data ${idDa} tidak dapat diproses!`,
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        }
                    });
                }
            });
        }

        var holiday = @json($holiday);
        const HOLIDAY_MAP = Array.isArray(holiday)
            // jika holiday = [{date:'2025-05-01', name:'Hari Buruh'}, ...]
            ?
            Object.fromEntries(holiday.map(h => [(h.date || '').toString().slice(0, 10), h.name || 'Libur Nasional']))
            // jika holiday = { "2025-05-01": "Hari Buruh", ... } sudah ok
            :
            holiday;

        // Buat background events untuk pewarnaan merah (tanpa DOM inject)
        const HOLIDAY_BG_EVENTS = Object.entries(HOLIDAY_MAP).map(([date, name]) => ({
            // title: name,
            start: date,
            allDay: true,
            display: 'background',
            color: '#ffe1e1' // merah muda stabil
        }));

        function handleCompleteDA(element) {
            const id = element.getAttribute('data-id');
            const start = element.getAttribute('data-start');
            const finish = element.getAttribute('data-finish');
            const poin = element.getAttribute('data-poin');
            const pengerjaan = JSON.parse(element.getAttribute('data-pengerjaan'));

            completeDA(id, start, finish, poin, pengerjaan);
        }

        function handlepagptDA(element) {
            const id = element.getAttribute('data-id');
            const ket = element.getAttribute('data-ket');
            const pengerjaan = JSON.parse(element.getAttribute('data-pengerjaan'));

            pagptDA(id, ket, pengerjaan);
        }

        window._daEventRegistry = {};

        function showDayActivitiesModal(date, segments) {
            const dateStr = date.toLocaleDateString('id-ID', {
                weekday: 'long',
                year: 'numeric',
                month: 'long',
                day: 'numeric'
            });

            const events = segments.map(seg => seg.event);

            function getStatusInfo(status) {
                if (status === 'C') return {
                    color: '#2dce89',
                    text: 'Completed'
                };
                if (status === 'P') return {
                    color: '#11cdef',
                    text: 'In Progress'
                };
                if (status === 'D') return {
                    color: '#028284',
                    text: 'Defined'
                };
                return {
                    color: '#adb5bd',
                    text: 'Unknown'
                };
            }

            const TIME_SLOTS = [{
                    label: '08.00 AM',
                    start: 8,
                    end: 9
                },
                {
                    label: '09.00 AM',
                    start: 9,
                    end: 10
                },
                {
                    label: '10.00 AM',
                    start: 10,
                    end: 11
                },
                {
                    label: '11.00 AM',
                    start: 11,
                    end: 12
                },
                {
                    label: '12.00 PM',
                    start: 12,
                    end: 13
                },
                {
                    label: '01.00 PM',
                    start: 13,
                    end: 14
                },
                {
                    label: '02.00 PM',
                    start: 14,
                    end: 15
                },
                {
                    label: '03.00 PM',
                    start: 15,
                    end: 16
                },
                {
                    label: '04.00 PM',
                    start: 16,
                    end: 17
                },
                {
                    label: '05.00 PM',
                    start: 17,
                    end: 18
                },
            ];

            const _colMap = new Map();
            Object.entries(USER_FIRSTNAME_MAP).forEach(([username, firstname]) => {
                _colMap.set(username, firstname);
            });

            if (window._legendUserMap) {
                window._legendUserMap.forEach((firstname, username) => {
                    _colMap.set(username, firstname);
                });
            }
            const itColumns = Array.from(_colMap.entries());

            function getSlotIndex(eventStart) {
                if (!eventStart) return -1;
                const d = new Date(eventStart);
                const total = d.getHours() * 60 + d.getMinutes();
                for (let i = 0; i < TIME_SLOTS.length; i++) {
                    if (total >= TIME_SLOTS[i].start * 60 && total < TIME_SLOTS[i].end * 60) return i;
                }
                return -1;
            }

            const grid = {};
            TIME_SLOTS.forEach((_, i) => {
                grid[i] = {};
            });
            events.forEach(ev => {
                const si = getSlotIndex(ev.start);
                if (si < 0) return;
                const key = (ev.extendedProps.it_username || ev.extendedProps.it || '').trim();
                if (!grid[si][key]) grid[si][key] = [];
                grid[si][key].push(ev);
            });

            const outOfSlotEvents = events.filter(ev => getSlotIndex(ev.start) < 0);
            const colCount = itColumns.length;
            const modalWidth = Math.min(Math.max(640, 160 + colCount * 160), 1000);

            window._daEventRegistry = {};
            events.forEach((ev, i) => {
                window._daEventRegistry[i] = ev;
            });

            window._showDaDetail = function(evIdx) {
                const ev = window._daEventRegistry[evIdx];
                if (!ev) return;
                const {
                    color,
                    text
                } = getStatusInfo(ev.extendedProps.status || '');

                const startObj = ev.start ? new Date(ev.start) : null;
                const finishRaw = ev.extendedProps.finish;
                const finishObj = finishRaw ? new Date(finishRaw) : null;

                const fmtDate = (d) => d ? d.toLocaleDateString('id-ID', {
                    day: '2-digit',
                    month: 'long',
                    year: 'numeric'
                }) : '-';
                const fmtTime = (d) => d ? d.toLocaleTimeString('id-ID', {
                    hour: '2-digit',
                    minute: '2-digit'
                }) : '-';

                const startDate = fmtDate(startObj);
                const startTime = fmtTime(startObj);
                const finishDate = fmtDate(finishObj);
                const finishTime = fmtTime(finishObj);

                const tanggal = finishObj ?
                    (startDate === finishDate ?
                        startDate :
                        `${startDate} – ${finishDate}`) :
                    startDate;

                const waktu = finishObj ? `${startTime} - ${finishTime}` : startTime;

                const user = ev.extendedProps.user || '-';
                const it = ev.extendedProps.it || '-';
                const desc = (ev.extendedProps.description || '-').replace(/\n/g, '<br>');

                Swal.fire({
                    title: '',
                    html: `
                        <div style="text-align:left; padding:4px 2px;">
                            <p style="font-size:16px; font-weight:600; color:#344767; margin:0 0 8px;">${ev.title}</p>
                            <span style="display:inline-block; background:${color}; color:#fff; border-radius:4px; font-size:12px; padding:2px 12px; margin-bottom:18px;">${text}</span>
                            <table style="width:100%; font-size:14px; border-collapse:collapse;">
                                <tr><td style="color:#888; padding:7px 0; width:35%;">Tanggal</td><td style="color:#333; font-weight:500;">${tanggal}</td></tr>
                                <tr><td style="color:#888; padding:7px 0; border-top:1px solid #f0f0f0;">Waktu</td><td style="color:#333; font-weight:500; border-top:1px solid #f0f0f0;">${waktu}</td></tr>
                                <tr><td style="color:#888; padding:7px 0; border-top:1px solid #f0f0f0;">User</td><td style="color:#333; font-weight:500; border-top:1px solid #f0f0f0;">${user}</td></tr>
                                <tr><td style="color:#888; padding:7px 0; border-top:1px solid #f0f0f0;">IT</td><td style="color:#333; font-weight:500; border-top:1px solid #f0f0f0;">${it}</td></tr>
                                <tr><td style="color:#888; padding:7px 0 0; border-top:1px solid #f0f0f0; vertical-align:top;">Deskripsi</td><td style="color:#555; padding:7px 0 0; border-top:1px solid #f0f0f0;">${desc}</td></tr>
                            </table>
                        </div>
                    `,
                    width: '520px',
                    showCloseButton: true,
                    showConfirmButton: false,
                });
            };

            const GROUP_ORDER_SELF = 'You';
            const groupedCols = new Map();
            itColumns.forEach(([username, firstname]) => {
                let grp = USER_GROUP_MAP[username];
                if (!grp) {
                    const refEvent = events.find(ev => {
                        const itU = (ev.extendedProps.it_username || ev.extendedProps.it || '').trim();
                        return itU === username;
                    });
                    grp = 'Magang Universitas';
                }
                if (!groupedCols.has(grp)) groupedCols.set(grp, []);
                groupedCols.get(grp).push([username, firstname]);
            });

            const GROUP_PRIORITY = {
                'You': 0,
                'Magang HUB': 1,
                'Magang Universitas': 2
            };
            const orderedGroups = [];
            if (groupedCols.has(GROUP_ORDER_SELF)) {
                orderedGroups.push([GROUP_ORDER_SELF,
                    groupedCols.get(GROUP_ORDER_SELF).sort((a, b) => a[1].localeCompare(b[1]))
                ]);
            }
            Array.from(groupedCols.entries())
                .filter(([grp]) => grp !== GROUP_ORDER_SELF)
                .sort((a, b) => {
                    const pa = GROUP_PRIORITY[a[0]] ?? 99;
                    const pb = GROUP_PRIORITY[b[0]] ?? 99;
                    return pa !== pb ? pa - pb : a[0].localeCompare(b[0]);
                })
                .forEach(([grp, cols]) => {
                    orderedGroups.push([grp, cols.sort((a, b) => a[1].localeCompare(b[1]))]);
                });
            // ────────────────────────────────────────────────────────────────

            let tableHtml = `
                <style>
                    .da-table { width:100%; border-collapse:collapse; font-size:12.5px; }
                    .da-table th {
                        background:#f8f9fa; color:#495057;
                        padding:8px 10px; text-align:center;
                        font-weight:600; font-size:12px;
                        border:1px solid #dee2e6;
                        position:sticky; top:0; z-index:2;
                    }
                    .da-table th.group-header {
                        background:#e8f4f8; color:#344767;
                        font-size:11px; letter-spacing:.5px;
                        text-transform:uppercase; padding:5px 8px;
                        border-bottom:2px solid #b8d8e8;
                    }
                    .da-table th.group-header-self {
                        background:#f0f0f0; color:#6c757d;
                    }
                    .da-table td { border:1px solid #e9ecef; padding:5px 6px; vertical-align:top; }
                    .da-slot { background:#fafafa; text-align:center; color:#6c757d; font-size:11.5px; white-space:nowrap; min-width:105px; }
                    .da-rest td { background:#fffbf0 !important; text-align:center; color:#92610a; font-weight:600; font-size:12px; letter-spacing:1px; }
                    .da-card {
                        background:#fff; border-radius:5px; padding:6px 8px;
                        margin-bottom:4px; cursor:pointer;
                        border:1px solid #e9ecef;
                        transition:background .12s;
                    }
                    .da-card:hover { background:#f8f9fa; }
                    .da-card:last-child { margin-bottom:0; }
                    .da-card-title { font-weight:600; font-size:12px; color:#344767; margin-bottom:2px; }
                    .da-card-meta  { font-size:11px; color:#adb5bd; margin-bottom:3px; }
                    .da-badge { display:inline-block; border-radius:3px; font-size:10px; padding:1px 7px; color:#fff; font-weight:500; }
                </style>
                <div style="overflow-x:auto; max-height:450px; overflow-y:auto;">
                <table class="da-table">
                    <thead>
                        <tr>
                            <th rowspan="2" style="vertical-align:middle;">Jam</th>`;

            orderedGroups.forEach(([grp, cols]) => {
                const cls = grp === GROUP_ORDER_SELF ? 'group-header group-header-self' : 'group-header';
                tableHtml += `<th class="${cls}" colspan="${cols.length}">${grp}</th>`;
            });
            tableHtml += `</tr>`;

            // Row 2: Individual user names
            tableHtml += `<tr>`;
            orderedGroups.forEach(([, cols]) => {
                cols.forEach(([, name]) => {
                    tableHtml += `<th style="min-width:120px;">${name}</th>`;
                });
            });
            tableHtml += `</tr></thead><tbody>`;

            // Rebuild itColumns in group order for cell rendering
            const itColumnsOrdered = [];
            orderedGroups.forEach(([, cols]) => cols.forEach(c => itColumnsOrdered.push(c)));

            TIME_SLOTS.forEach((slot, idx) => {
                if (slot.start === 12 && slot.end === 13) {
                    tableHtml += `<tr class="da-rest">
                        <td class="da-slot">${slot.label}</td>
                        <td colspan="${colCount}">ISTIRAHAT</td>
                    </tr>`;
                    return;
                }
                tableHtml += `<tr>`;
                tableHtml += `<td class="da-slot">${slot.label}</td>`;
                itColumnsOrdered.forEach(([key]) => {
                    const cellEvs = grid[idx][key] || [];
                    let content = '';
                    cellEvs.forEach(ev => {
                        const evIdx = events.indexOf(ev);
                        const {
                            color,
                            text
                        } = getStatusInfo(ev.extendedProps.status || '');
                        const finishRaw = ev.extendedProps.finish;
                        const tStart = ev.start ? new Date(ev.start).toLocaleTimeString('id-ID', {
                            hour: '2-digit',
                            minute: '2-digit'
                        }) : '-';
                        const tFinish = finishRaw ? new Date(finishRaw).toLocaleTimeString(
                            'id-ID', {
                                hour: '2-digit',
                                minute: '2-digit'
                            }) : '-';
                        const dStart = ev.start ? new Date(ev.start).toLocaleDateString('id-ID', {
                            day: '2-digit',
                            month: 'short',
                            year: 'numeric'
                        }) : '';
                        const dFinish = finishRaw ? new Date(finishRaw).toLocaleDateString(
                            'id-ID', {
                                day: '2-digit',
                                month: 'short',
                                year: 'numeric'
                            }) : '';
                        const dtStart = dStart ? `${dStart} ${tStart}` : '-';
                        const dtFinish = dFinish ? `${dFinish} ${tFinish}` : '-';
                        const u = ev.extendedProps.user || '';
                        content += `
                            <div class="da-card" onclick="window._showDaDetail(${evIdx})" title="Lihat detail" style="border-left:3px solid ${color};">
                                <div class="da-card-title">${ev.title}</div>
                                <div class="da-card-meta">
                                    ${u ? `${u}<br>` : ''}
                                    ▶ ${dtStart} - ${dtFinish}
                                </div>
                            </div>`;
                    });
                    tableHtml += `<td>${content}</td>`;
                });
                tableHtml += `</tr>`;
            });

            tableHtml += `</tbody></table></div>`;

            let outHtml = '';
            if (outOfSlotEvents.length > 0) {
                outHtml = `<div style="margin-top:12px; padding-top:10px; border-top:1px solid #e9ecef;">
                    <p style="font-size:11.5px; color:#adb5bd; margin-bottom:6px;">Activity di luar jam kerja</p>`;
                outOfSlotEvents.forEach(ev => {
                    const evIdx = events.indexOf(ev);
                    const {
                        color,
                        text
                    } = getStatusInfo(ev.extendedProps.status || '');
                    const finishRaw = ev.extendedProps.finish;
                    const tStart = ev.start ? new Date(ev.start).toLocaleTimeString('id-ID', {
                        hour: '2-digit',
                        minute: '2-digit'
                    }) : '-';
                    const tFinish = finishRaw ? new Date(finishRaw).toLocaleTimeString('id-ID', {
                        hour: '2-digit',
                        minute: '2-digit'
                    }) : '-';
                    const dStart = ev.start ? new Date(ev.start).toLocaleDateString('id-ID', {
                        day: '2-digit',
                        month: 'short',
                        year: 'numeric'
                    }) : '';
                    const dFinish = finishRaw ? new Date(finishRaw).toLocaleDateString('id-ID', {
                        day: '2-digit',
                        month: 'short',
                        year: 'numeric'
                    }) : '';
                    const dtStart = dStart ? `${dStart} ${tStart}` : '-';
                    const dtFinish = dFinish ? `${dFinish} ${tFinish}` : '-';
                    const it = ev.extendedProps.it || '-';
                    const user = ev.extendedProps.user || '-';
                    outHtml += `
                        <div class="da-card" onclick="window._showDaDetail(${evIdx})" style="border-left:3px solid ${color};">
                            <div class="da-card-title">${ev.title}</div>
                            <div class="da-card-meta">
                                ${user} &nbsp;|&nbsp; ${it}<br>
                                ▶ ${dtStart} - ${dtFinish}
                            </div>
                        </div>`;
                });
                outHtml += `</div>`;
            }

            Swal.fire({
                title: `<strong>List Daily Activity</strong>`,
                html: `
                    <div style="text-align:left;">
                        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
                            <span style="font-size:13px; color:#495057;">${dateStr}</span>
                            <span style="font-size:12px; color:#6c757d;">${events.length} activity</span>
                        </div>
                        ${tableHtml}
                        ${outHtml}
                    </div>
                `,
                width: `${modalWidth}px`,
                showCloseButton: true,
                showConfirmButton: false,
                customClass: {
                    container: 'day-activities-modal'
                }
            });
        }

        function showTimeSlotActivitiesModal(dateTime, segments) {
            const dateStr = dateTime.toLocaleDateString('id-ID', {
                weekday: 'long',
                year: 'numeric',
                month: 'long',
                day: 'numeric'
            });

            const timeStr = dateTime.toLocaleTimeString('id-ID', {
                hour: '2-digit',
                minute: '2-digit'
            });

            // Ambil semua events dari segments
            const events = segments.map(seg => seg.event);

            // Buat HTML untuk daftar activities
            let activitiesHtml = '';

            if (events.length === 0) {
                activitiesHtml = '<p class="text-muted text-center">Tidak ada daily activity pada jam ini</p>';
            } else {
                activitiesHtml = '<div class="list-group">';

                events.forEach((event, index) => {
                    const status = event.extendedProps.status || '';
                    const user = event.extendedProps.user || '-';
                    const it = event.extendedProps.it || '-';
                    const description = event.extendedProps.description || '-';

                    // Tentukan warna border berdasarkan status
                    let statusColor = '#6c757d';
                    let statusText = 'Unknown';
                    if (status === 'C') {
                        statusColor = '#2dce89';
                        statusText = 'Completed';
                    } else if (status === 'P') {
                        statusColor = '#11cdef';
                        statusText = 'In Progress';
                    } else if (status === 'D') {
                        statusColor = '#028284';
                        statusText = 'Defined';
                    }

                    // Format waktu start dan end
                    const startTime = event.start ? new Date(event.start).toLocaleTimeString('id-ID', {
                        hour: '2-digit',
                        minute: '2-digit'
                    }) : '-';

                    const endTime = event.end ? new Date(event.end).toLocaleTimeString('id-ID', {
                        hour: '2-digit',
                        minute: '2-digit'
                    }) : '-';

                    activitiesHtml += `
                        <div class="list-group-item" style="border-left: 4px solid ${statusColor}; margin-bottom: 10px;">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1">${event.title}</h6>
                                <small class="badge" style="background-color: ${statusColor};">${statusText}</small>
                            </div>
                            <p class="mb-1"><strong>Time:</strong> ${startTime} - ${endTime}</p>
                            <p class="mb-1"><strong>User:</strong> ${user} | <strong>IT:</strong> ${it}</p>
                            <small class="text-muted">${description}</small>
                        </div>
                    `;
                });

                activitiesHtml += '</div>';
            }

            // Tampilkan modal menggunakan SweetAlert2
            Swal.fire({
                title: `<strong>Activities at ${timeStr}</strong>`,
                html: `
                    <div style="text-align: left;">
                        <p class="mb-3"><strong>${dateStr}</strong></p>
                        <p class="mb-3">Total: <strong>${events.length}</strong> activities at this time</p>
                        <div style="max-height: 500px; overflow-y: auto;">
                            ${activitiesHtml}
                        </div>
                    </div>
                `,
                width: '700px',
                showCloseButton: true,
                showConfirmButton: false,
                customClass: {
                    container: 'day-activities-modal'
                }
            });
        }

        // Fungsi helper untuk dipanggil dari onclick event
        function showTimeSlotActivitiesFromClick(event, dateTimeISO) {
            event.stopPropagation(); // Prevent event bubbling

            const dateTime = new Date(dateTimeISO);
            const calendar = FullCalendar.getCalendar(document.getElementById('calendar'));

            if (!calendar) return;

            // Ambil semua events pada time slot yang sama
            const events = calendar.getEvents().filter(e => {
                if (e.display === 'background' || e.allDay) return false;
                const eStart = new Date(e.start);
                return eStart.getFullYear() === dateTime.getFullYear() &&
                    eStart.getMonth() === dateTime.getMonth() &&
                    eStart.getDate() === dateTime.getDate() &&
                    eStart.getHours() === dateTime.getHours() &&
                    eStart.getMinutes() === dateTime.getMinutes();
            });

            const segments = events.map(e => ({
                event: e
            }));

            if (segments.length > 0) {
                showTimeSlotActivitiesModal(dateTime, segments);
            }
        }

        document.addEventListener("DOMContentLoaded", function() {
            var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
            var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
                return new bootstrap.Popover(popoverTriggerEl);
            });
        });


        function completeDA(id, start, finish, poin, pengerjaan) {
            var idDa = id;

            // Cek role user dari input hidden
            const userRole = document.getElementById('jabatan').value;
            const isInternship = userRole === 'IN';

            // Mendapatkan waktu saat ini dalam format datetime-local
            // Ambil tanggal dan jam dari start
            const startDate = new Date(start);
            const startDateOnly =
                `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}`;


            const hasFinish = finish && finish !== 'null' && finish !== '' && finish !== '0000-00-00 00:00:00';
            let finishTimeOnly = '';
            let finishDateOnly = startDateOnly;
            if (hasFinish) {
                const finishDate = new Date(finish);
                finishTimeOnly =
                    `${String(finishDate.getHours()).padStart(2, '0')}:${String(finishDate.getMinutes()).padStart(2, '0')}`;
                finishDateOnly =
                    `${finishDate.getFullYear()}-${String(finishDate.getMonth() + 1).padStart(2, '0')}-${String(finishDate.getDate()).padStart(2, '0')}`;
            }

            // Tentukan atribut untuk finish date berdasarkan role
            const finishDateReadonly = isInternship ? 'readonly' : '';
            const finishDateStyle = isInternship ? 'background-color: #f0f0f0; cursor: not-allowed;' : '';
            const finishDateHelpText = isInternship ?
                'Tanggal finish sama dengan tanggal start dan tidak dapat diubah' :
                'Tanggal finish dapat diubah sesuai kebutuhan';

            // Fungsi untuk menghitung poin
            function calculatePoints(start, finish) {
                if (!start || !finish) return '0';

                const startDate = new Date(start);
                const finishDate = new Date(finish);

                if (finishDate <= startDate) {
                    return '0';
                }

                let totalDuration = finishDate - startDate;
                // Cek apakah pakai poin baru (mulai Mei 2025 ke atas)
                const thresholdDate = new Date('2025-05-01'); // 1 Mei 2025
                const useNewPoints = startDate >= thresholdDate;

                let totalWorkHours = 0;
                let currentDate = new Date(startDate);

                while (currentDate <= finishDate) {
                    currentDate.setHours(0, 0, 0, 0); // normalisasi
                    const cd = fmtLocalYmd(currentDate);
                    let dayOfWeek = currentDate.getDay(); // 0: Minggu, 6: Sabtu
                    let currentDateString = currentDate.toISOString().split('T')[0]; // Format YYYY-MM-DD

                    const isHoliday = Object.prototype.hasOwnProperty.call(HOLIDAY_MAP, cd);
                    console.log('Loop', cd, 'weekend? ', (dayOfWeek === 0 || dayOfWeek === 6), 'holiday?', isHoliday);

                    if (dayOfWeek !== 0 && dayOfWeek !== 6 && !isHoliday) {

                        let workStart = new Date(currentDate);
                        workStart.setHours(8, 0, 0, 0);

                        let workEnd = new Date(currentDate);
                        workEnd.setHours(17, 0, 0, 0);

                        let lunchStart = new Date(currentDate);
                        lunchStart.setHours(12, 0, 0, 0);

                        let lunchEnd = new Date(currentDate);
                        lunchEnd.setHours(13, 0, 0, 0);

                        let dayStart = startDate > workStart ? startDate : workStart;
                        let dayEnd = finishDate < workEnd ? finishDate : workEnd;

                        // **Pastikan waktu kerja hanya dalam jam 08:00 - 17:00**
                        if (dayEnd > dayStart) {
                            let workHours = (dayEnd - dayStart) / (1000 * 60 * 60);

                            // **Kurangi jam istirahat jika terkena**
                            if (dayStart < lunchEnd && dayEnd > lunchStart) {
                                workHours -= 1;
                            }

                            totalWorkHours += workHours;
                        }
                    }

                    // Lanjutkan ke hari berikutnya
                    currentDate.setDate(currentDate.getDate() + 1);
                    currentDate.setHours(8, 0, 0, 0); // Reset ke awal jam kerja
                }

                if (useNewPoints) {
                    let totalMinutes = totalWorkHours * 60;
                    if (totalMinutes < 15) return '0.1';
                    if (totalMinutes >= 15 && totalMinutes <= 30) return '0.2';
                    if (totalMinutes > 30 && totalMinutes <= 60) return '0.5';
                    if (totalMinutes > 60 && totalMinutes <= 120) return '1';
                    if (totalMinutes > 120 && totalMinutes <= 240) return '2';
                    if (totalMinutes > 240 && totalMinutes <= 480) return '3';
                    if (totalMinutes > 480 && totalMinutes <= 960) return '5';
                    if (totalMinutes > 960 && totalMinutes <= 1920) return '8';
                    if (totalMinutes > 1920 && totalMinutes <= 3840) return '13';
                    if (totalMinutes > 3840) return '21';

                } else {

                    if (totalWorkHours < 1) return '0.2';
                    if (totalWorkHours >= 1 && totalWorkHours <= 2) return '1';
                    if (totalWorkHours > 2 && totalWorkHours <= 4) return '2';
                    if (totalWorkHours > 4 && totalWorkHours <= 8) return '3';
                    if (totalWorkHours > 8 && totalWorkHours <= 16) return '5';
                    if (totalWorkHours > 16 && totalWorkHours <= 32) return '8';
                    if (totalWorkHours > 32) return '13';
                }
            }

            // Tampilkan modal untuk mengedit start dan finish
            Swal.fire({
                title: `Complete Data - ${idDa}`,
                html: `
                    <div style="display: flex; flex-direction: column; gap: 8px; font-size: 14px; max-width: 300px; margin: auto;">
                        <label for="start-input" style="font-weight: 500;">Start</label>
                        <input id="start-input" type="datetime-local" class="swal2-input" value="${start}" readonly style="padding: 5px; font-size: 13px; background-color: #f0f0f0; cursor: not-allowed;">

                        <label for="finish-date-input" style="font-weight: 500;">Tanggal Finish</label>
                        <input id="finish-date-input" type="date" class="swal2-input" value="${finishDateOnly}" ${finishDateReadonly} style="padding: 5px; font-size: 13px; ${finishDateStyle}">
                        <small style="color: #666; font-size: 11px;">${finishDateHelpText}</small>

                        <label for="finish-time-input" style="font-weight: 500;">Jam Finish</label>
                        <input id="finish-time-input" type="time" class="swal2-input" value="${finishTimeOnly}" style="padding: 5px; font-size: 13px;">
                        <small style="color: #666; font-size: 11px;">Jam dapat diubah sesuai kebutuhan</small>

                        <label for="poin-input" style="font-weight:  500;">Poin</label>
                        <input id="poin-input" type="text" class="swal2-input" value="${finishTimeOnly ? calculatePoints(start, `${finishDateOnly}T${finishTimeOnly}`) : ''}" readonly style="padding: 5px; font-size: 13px; background-color: #f0f0f0;">

                        <label for="detail-input" style="font-weight: 500;">Detail Pengerjaan</label>
                    <textarea id="detail-input" name="dpengerjaan" class="swal2-textarea"
                        placeholder="Masukkan detail pengerjaan..."
                        style="height: 80px; padding: 5px; font-size: 13px; resize: none;">${pengerjaan}</textarea>
                    </div>
                `,
                showCancelButton: true,
                confirmButtonText: 'Complete',
                cancelButtonText: 'Batal',
                didOpen: () => {
                    const finishTimeInput = document.getElementById('finish-time-input');
                    const finishDateInput = document.getElementById('finish-date-input');
                    const startValue = document.getElementById('start-input').value;

                    // Update poin secara dinamis saat jam atau tanggal finish diubah
                    function updatePoin() {
                        const finishDate = finishDateInput.value;
                        const finishTime = finishTimeInput.value;
                        const combinedFinish = `${finishDate}T${finishTime}`;

                        const updatedPoin = calculatePoints(startValue, combinedFinish);
                        document.getElementById('poin-input').value = updatedPoin;

                        // Visual feedback jika finish <= start
                        const startDate = new Date(startValue);
                        const finishDateTime = new Date(combinedFinish);

                        if (finishDateTime <= startDate) {
                            finishTimeInput.style.border = '2px solid #d33';
                            document.getElementById('poin-input').style.color = '#d33';
                        } else {
                            finishTimeInput.style.border = '1px solid #d1d5db';
                            document.getElementById('poin-input').style.color = '#000';
                        }
                    }

                    finishTimeInput.addEventListener('input', updatePoin);
                    finishDateInput.addEventListener('input', updatePoin);
                },
                preConfirm: () => {
                    const startValue = document.getElementById('start-input').value;
                    const finishDate = document.getElementById('finish-date-input').value;
                    const finishTime = document.getElementById('finish-time-input').value;
                    const pengerjaanValue = document.getElementById('detail-input').value.trim();

                    // Validasi jam finish wajib diisi
                    if (!finishTime) {
                        Swal.showValidationMessage('Jam Finish wajib diisi!');
                        return false;
                    }

                    // Gabungkan tanggal dan jam
                    const finishValue = `${finishDate}T${finishTime}`;

                    // Validasi finish harus lebih besar dari start
                    const startDate = new Date(startValue);
                    const finishDateTime = new Date(finishValue);

                    if (finishDateTime <= startDate) {
                        Swal.showValidationMessage('Waktu selesai harus setelah waktu mulai!');
                        return false;
                    }

                    // Validasi detail pengerjaan wajib diisi
                    if (!pengerjaanValue) {
                        Swal.showValidationMessage('Detail Pengerjaan wajib diisi!');
                        return false;
                    }

                    return {
                        finish: finishValue,
                        poin: document.getElementById('poin-input').value,
                        pengerjaan: pengerjaanValue
                    };
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    const updatedFinish = result.value.finish;
                    const updatedPoin = result.value.poin;
                    const pengerjaan = result.value.pengerjaan;

                    // AJAX untuk memproses data ke database
                    $.ajax({
                        url: '{{ URL::to('/') }}/dailya/complete/' + idDa,
                        type: "POST",
                        dataType: "JSON",
                        data: {
                            start: start,
                            finish: updatedFinish,
                            poin: updatedPoin,
                            pengerjaan: pengerjaan
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            Swal.fire({
                                title: 'Berhasil! ',
                                text: `Data ${idDa} berhasil diselesaikan! `,
                                icon: 'success',
                                confirmButtonColor: '#3085d6'
                            }).then(() => {
                                window.location.replace("{{ URL::to('/') }}/dailya/");
                            });
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            Swal.fire({
                                title: 'Oops!',
                                text: `Data ${idDa} tidak dapat diselesaikan!`,
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        }
                    });
                }
            });
        }


        document.addEventListener("DOMContentLoaded", function() {
            var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
            var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
                return new bootstrap.Popover(popoverTriggerEl);
            });
        });


        //function unprocess
        function unprosesDA(id) {
            var idDa = id;

            Swal.fire({
                title: `Data ${idDa} akan diproses`, // Perbaikan pada format string
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, unProses'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Ajax untuk memproses data ke database
                    $.ajax({
                        url: '{{ URL::to('/') }}/dailya/unproses/' + idDa,
                        type: "POST",
                        dataType: "JSON",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            // Redirect ke halaman tpuror setelah sukses
                            Swal.fire({
                                title: 'Berhasil!',
                                text: `Data ${idDa} berhasil di unProses!`,
                                icon: 'success',
                                confirmButtonColor: '#3085d6'
                            }).then(() => {
                                window.location.replace("{{ URL::to('/') }}/dailya/");
                            });
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            Swal.fire({
                                title: 'Oops!',
                                text: `Data ${idDa} tidak dapat di unproses!`,
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        }

                    });
                }
            });
        }


        //function uncomplete
        function uncompleteDA(id) {
            var idDa = id;

            Swal.fire({
                title: `Data ${idDa} akan di unComplete`, // Perbaikan pada format string
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, unComplete'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Ajax untuk memproses data ke database
                    $.ajax({
                        url: '{{ URL::to('/') }}/dailya/uncomplete/' + idDa,
                        type: "POST",
                        dataType: "JSON",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            // Redirect ke halaman tpuror setelah sukses
                            Swal.fire({
                                title: 'Berhasil!',
                                text: `Data ${idDa} berhasil di unComplete!`,
                                icon: 'success',
                                confirmButtonColor: '#3085d6'
                            }).then(() => {
                                window.location.replace("{{ URL::to('/') }}/dailya/");
                            });
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            Swal.fire({
                                title: 'Oops!',
                                text: `Data ${idDa} tidak dapat di uncomplete!`,
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        }

                    });
                }
            });
        }

        //function delete
        function deleteDA(id) {
            var idDa = id;

            Swal.fire({
                title: `Data ${idDa} akan dihapus`, // Perbaikan pada format string
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Hapus'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Ajax untuk memproses data ke database
                    $.ajax({
                        url: '{{ URL::to('/') }}/dailya/delete/' + idDa,
                        type: "POST",
                        dataType: "JSON",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            // Redirect ke halaman tpuror setelah sukses
                            Swal.fire({
                                title: 'Berhasil!',
                                text: `Data ${idDa} berhasil dihapus!`,
                                icon: 'success',
                                confirmButtonColor: '#3085d6'
                            }).then(() => {
                                window.location.replace("{{ URL::to('/') }}/dailya/");
                            });
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            Swal.fire({
                                title: 'Oops!',
                                text: `Data ${idDa} tidak dapat dihapus!`,
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        }

                    });
                }
            });
        }

        //API GPT
        function pagptDA(id, ket, peng) {
            var idDa = id;
            var ket = ket;
            var peng = peng;

            Swal.fire({
                title: `Data ${idDa} akan di generate oleh AI`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, generate'
            }).then((result) => {
                if (result.isConfirmed) {

                    // ✅ Tampilkan modal loading sebelum Ajax
                    Swal.fire({
                        title: 'Tunggu sebentar...',
                        html: 'AI sedang memproses data...<br>',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    $.ajax({
                        url: '{{ URL::to('/') }}/dailya/generate/' + idDa,
                        type: "POST",
                        dataType: "JSON",
                        data: {
                            ket: ket,
                            peng: peng
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            Swal.fire({
                                title: 'Sukses!',
                                text: 'AI berhasil generate!',
                                icon: 'success',
                                confirmButtonColor: '#3085d6'
                            }).then(() => {
                                var newWindow = window.open('', '_blank');
                                newWindow.document.open();
                                newWindow.document.write(data.html);
                                newWindow.document.close();
                            });
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            Swal.fire({
                                title: 'Oops!',
                                text: `Data ${idDa} tidak dapat di generate!`,
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        }
                    });
                }
            });
        }

        const CURRENT_IT = @json(session('username'));
        const CURRENT_IT_FIRSTNAME = @json($userinfo->firstname ?? session('username'));

        const USER_GROUP_MAP = {};
        const USER_FIRSTNAME_MAP = {};

        @foreach ($it_users ?? [] as $user)
            @if ($user->lastname === 'IN')
                USER_GROUP_MAP[{{ Js::from($user->username) }}] = 'Magang HUB';
            @else
                USER_GROUP_MAP[{{ Js::from($user->username) }}] = 'You';
            @endif
            USER_FIRSTNAME_MAP[{{ Js::from($user->username) }}] = {{ Js::from($user->firstname) }};
        @endforeach

        @foreach ($magang_users ?? [] as $user)
            USER_GROUP_MAP[{{ Js::from($user->username) }}] = 'Magang Universitas';
            USER_FIRSTNAME_MAP[{{ Js::from($user->username) }}] = {{ Js::from($user->firstname) }};
        @endforeach

        USER_GROUP_MAP[CURRENT_IT] = 'You';
        USER_FIRSTNAME_MAP[CURRENT_IT] = CURRENT_IT_FIRSTNAME;

        const USER_COLOR_MAP = {};
        let colorIndex = 0;

        function getUserColor(username) {
            if (!username) return '#94a3b8'; // soft gray

            // Owner
            if (username === CURRENT_IT) {
                return '#1e3a8a';
            }

            if (USER_COLOR_MAP[username]) {
                return USER_COLOR_MAP[username];
            }

            const userColors = [
                '#60a5fa', // Blue-400 (soft)
                '#93c5fd', // Blue-300
                '#818cf8', // Indigo-400
                '#a5b4fc', // Indigo-300
                '#67e8f9', // Cyan-300
                '#7dd3fc', // Sky-300
                '#c4b5fd', // Violet-300
                '#94a3b8', // Slate-400
                '#bae6fd', // Light Sky
                '#bfdbfe', // Light Blue
            ];

            const color = userColors[colorIndex % userColors.length];
            USER_COLOR_MAP[username] = color;
            colorIndex++;

            return color;
        }

        // Helper function darkenColor (tetap sama)
        function darkenColor(hex, percent) {
            const num = parseInt(hex.replace('#', ''), 16);
            const r = Math.max(0, Math.floor((num >> 16) * (1 - percent)));
            const g = Math.max(0, Math.floor(((num >> 8) & 0x00FF) * (1 - percent)));
            const b = Math.max(0, Math.floor((num & 0x0000FF) * (1 - percent)));
            return '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
        }

        // Fungsi getStatusColor (tetap sama)
        function getStatusColor(status) {
            status = (status || '').toLowerCase();
            if (status === 'completed' || status === 'c') {
                return '#2dce89';
            } else if (status === 'in progress' || status === 'in_progress' || status === 'p') {
                return '#11cdef';
            } else if (status === 'defined' || status === 'd') {
                return '#028284';
            }
            return '#6c757d';
        }

        // FUNGSI BARU: Update dynamic user legends
        function updateDynamicUserLegends(events) {
            // Map untuk menyimpan username IT -> firstname IT
            const userMap = new Map();

            events.forEach(event => {
                // Ambil username IT (yang mengerjakan) - BUKAN user requester
                const itUsername = (event.it_username || event.it || '').trim();

                // Ambil firstname IT untuk display
                // Coba berbagai kemungkinan field
                let itFirstname = '';

                // Priority 1: it_firstname dari extendedProps
                if (event.extendedProps && event.extendedProps.it_firstname) {
                    itFirstname = event.extendedProps.it_firstname;
                }
                // Priority 2: it_firstname langsung dari event
                else if (event.it_firstname) {
                    itFirstname = event.it_firstname;
                }
                // Priority 3: Coba ambil dari it (jika formatnya "FirstName LastName")
                else if (event.it && event.it.includes(' ')) {
                    // Jika it berisi spasi, kemungkinan sudah firstname
                    itFirstname = event.it;
                }
                // Priority 4: Coba dari extendedProps.it
                else if (event.extendedProps && event.extendedProps.it_name) {
                    itFirstname = event.extendedProps.it_name;
                }
                // Priority 5: Fallback ke username tapi extract nama depan jika ada titik
                else if (itUsername) {
                    // Jika username format "firstname.lastname", ambil firstname
                    if (itUsername.includes('.')) {
                        const parts = itUsername.split('.');
                        // Lowercase dulu, baru capitalize first letter
                        const firstname = parts[0].toLowerCase();
                        itFirstname = firstname.charAt(0).toUpperCase() + firstname.slice(1);
                    } else {
                        // Capitalize dengan benar
                        const username = itUsername.toLowerCase();
                        itFirstname = username.charAt(0).toUpperCase() + username.slice(1);
                    }
                }

                itFirstname = itFirstname.trim();

                // Debug log
                console.log('IT Mapping:', {
                    username: itUsername,
                    firstname: itFirstname,
                    event: event
                });

                if (itUsername && itUsername !== CURRENT_IT && itFirstname) {
                    // Simpan mapping username IT -> firstname IT
                    if (!userMap.has(itUsername)) {
                        userMap.set(itUsername, itFirstname);
                    }
                }
            });

            // Simpan ke global agar bisa dibaca showDayActivitiesModal
            window._legendUserMap = userMap;

            const legendContainer = document.getElementById('dynamic-user-legends');
            if (!legendContainer) return;

            legendContainer.innerHTML = '';

            // Sort berdasarkan firstname IT
            const sortedUsers = Array.from(userMap.entries()).sort((a, b) =>
                a[1].localeCompare(b[1]) // Sort by firstname
            );

            sortedUsers.forEach(([itUsername, itFirstname]) => {
                const color = getUserColor(itUsername); // Tetap gunakan username untuk consistency warna

                const legendItem = document.createElement('span');
                legendItem.className = 'me-2';
                legendItem.style.whiteSpace = 'nowrap';
                legendItem.innerHTML = `
            <span class="legend-chip" style="background-color: ${color}; border: 1px solid rgba(0,0,0,.2);"></span>
            <span style="font-size: 0.875rem;">${itFirstname}</span>
        `;

                legendContainer.appendChild(legendItem);
            });
        }

        // Update fungsi updateInternshipLegendColor
        function updateInternshipLegendColor(events) {
            var legendOwner = document.querySelector('.legend-owner');
            if (legendOwner) {
                legendOwner.style.backgroundColor = '#1e3a8a'; // Biru gelap
            }

            // Update owner name dengan firstname
            const ownerNameLegend = document.getElementById('owner-name-legend');
            if (ownerNameLegend && CURRENT_IT_FIRSTNAME) {
                ownerNameLegend.textContent = CURRENT_IT_FIRSTNAME;
            }

            updateDynamicUserLegends(events);
        }

        // Helper format tanggal LOKAL (hindari geser timezone)
        function fmtLocalYmd(dateObj) {
            return dateObj.getFullYear() + '-' +
                String(dateObj.getMonth() + 1).padStart(2, '0') + '-' +
                String(dateObj.getDate()).padStart(2, '0');
        }

        var calendar; // Declare globally so it can be used outside
        document.addEventListener('DOMContentLoaded', function() {
            var modal = new bootstrap.Modal(document.getElementById("myModal"));
            var calendarEl = document.getElementById('calendar');
            var holiday = @json($holiday);

            var selectedCalendarUser = ''; // Variabel global untuk menyimpan filter user yang dipilih
            var selectedCalendarGroup = ''; // Variabel global untuk filter group


            function initCalendar() {
                if (calendar) {
                    calendar.destroy(); // Hapus kalender sebelumnya
                }

                // Inisialisasi kalender
                calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'dayGridMonth', // Hardcode ke Month view saja
                    headerToolbar: {
                        left: '',
                        center: 'title',
                        right: 'prev,next today'
                    },
                    displayEventTime: false,
                    // events: `/api/events?start=${minDate}&end=${maxDate}`,
                    events: function(fetchInfo, successCallback, failureCallback) {

                        $.ajax({
                            url: '{{ URL::to('/') }}/api/events',
                            type: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                                    'content') // Tambahkan CSRF token
                            },
                            data: {
                                start: fetchInfo
                                    .startStr,
                                end: fetchInfo
                                    .endStr
                            },
                            success: function(response) {
                                // Debug: Log response untuk melihat struktur data
                                console.log('Calendar Events Response:', response);
                                console.log('Selected Calendar User:',
                                    selectedCalendarUser);

                                // Filter events berdasarkan IT yang dipilih dari variabel global
                                var filteredResponse = response;
                                if (selectedCalendarUser) {
                                    filteredResponse = response.filter(function(event) {
                                        // Ambil IT username (yang mengerjakan) - BUKAN user requester
                                        var itUser = (event.it_username || event
                                            .it || '').trim();

                                        // Debug: Log setiap event yang dicek
                                        console.log('Event IT User:', itUser,
                                            'Comparing with:',
                                            selectedCalendarUser);

                                        // Direct comparison (case-insensitive) - langsung compare username lengkap
                                        return itUser.toLowerCase() ===
                                            selectedCalendarUser.toLowerCase();
                                    });

                                    console.log('Filtered Response:', filteredResponse);
                                } else if (selectedCalendarGroup) {
                                    filteredResponse = response.filter(function(event) {
                                        var itUser = (event.it_username || event
                                            .it || '').trim();
                                        var grp = USER_GROUP_MAP[itUser] || 'You';
                                        return grp.toLowerCase() ===
                                            selectedCalendarGroup.toLowerCase();
                                    });
                                    console.log('Filtered by Group:', selectedCalendarGroup,
                                        filteredResponse);
                                }

                                // Map response dan set warna berdasarkan IT (yang mengerjakan)
                                var events = filteredResponse.map(function(event) {
                                    // Ambil username IT dari event (yang mengerjakan)
                                    var itUser = (event.it_username || event.it ||
                                        '').trim();

                                    // Background & border = warna IT
                                    var userColor = getUserColor(itUser);

                                    // Return event dengan warna IT
                                    return {
                                        ...event,
                                        backgroundColor: userColor,
                                        borderColor: userColor
                                    };
                                });

                                // Update warna legend Internship berdasarkan user yang login
                                updateInternshipLegendColor(events);

                                successCallback(events);
                            },
                            error: function(xhr, status, error) {
                                console.error("Error fetching events:", error);
                                failureCallback(error);
                            }
                        });
                    },
                    eventSources: [
                        HOLIDAY_BG_EVENTS
                    ],
                    fixedWeekCount: false,
                    showNonCurrentDates: false,
                    height: "auto", // Menggunakan tinggi otomatis
                    contentHeight: "auto", // Menggunakan tinggi otomatis
                    dayMaxEvents: 3, // Maksimal 3 event per cell untuk Month view

                    dateClick: function(info) {
                        const clickedDate = info.date;
                        const dStr = fmtLocalYmd(clickedDate);
                        const authadd = document.getElementById('auth-add').value;
                        const userRole = document.getElementById('jabatan').value;
                        const isInternship = userRole === 'IN';

                        const todayStr = fmtLocalYmd(new Date());
                        const isToday = (dStr === todayStr);
                        const canAdd = (authadd == '1') && (!isInternship || isToday);

                        const events = calendar.getEvents().filter(event => {
                            if (event.display === 'background') return false;
                            const eventDate = new Date(event.start);
                            return eventDate.toDateString() === clickedDate.toDateString();
                        });

                        const segments = events.map(event => ({
                            event: event
                        }));

                        const openAddModal = () => {
                            addModal_reset(dStr);
                            const addModal = new bootstrap.Modal(document.getElementById(
                                'modalAddDaily'));
                            addModal.show();
                        };

                        if (segments.length > 0) {
                            if (canAdd) {
                                Swal.fire({
                                    title: 'Pilihan Tindakan',
                                    html: `Anda memilih tanggal <b>${dStr}</b>.<br>Ada ${segments.length} activity di tanggal ini.`,
                                    icon: 'question',
                                    showCancelButton: true,
                                    showDenyButton: true,
                                    confirmButtonColor: '#3085d6',
                                    denyButtonColor: '#17a2b8',
                                    cancelButtonColor: '#6c757d',
                                    confirmButtonText: 'Tambah Daily',
                                    denyButtonText: 'Lihat Detail',
                                    cancelButtonText: 'Batal'
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        openAddModal();
                                    } else if (result.isDenied) {
                                        showDayActivitiesModal(clickedDate, segments);
                                    }
                                });
                            } else {
                                showDayActivitiesModal(clickedDate, segments);
                            }
                        } else {
                            // Tidak ada activity di hari ini → langsung buka modal tanpa konfirmasi
                            if (canAdd) {
                                openAddModal();
                            }
                        }
                    },

                    // Custom event styling untuk Month view
                    eventDidMount: function(arg) {
                        if (arg.event.display === 'background') return;

                        const itUser = (arg.event.extendedProps.it_username ||
                            arg.event.extendedProps.it || '').trim();

                        var userColor = getUserColor(itUser);
                        arg.el.style.backgroundColor = userColor;
                        arg.el.style.borderColor = userColor;
                        // Teks putih hanya untuk owner (navy gelap), hitam untuk warna soft lainnya
                        arg.el.style.color = (itUser === CURRENT_IT) ? '#fff' : '#1a1a1a';

                        var status = (arg.event.extendedProps.status || '').toLowerCase();
                        var statusColor = getStatusColor(status);

                        // Cek apakah ini intern atau owner
                        const isIntern = itUser && (itUser !== CURRENT_IT);

                        if (isIntern) {
                            arg.el.classList.add('fc-intern');
                        } else {
                            arg.el.classList.add('fc-owner');
                        }

                        arg.el.style.borderLeft = '6px solid ' + statusColor;

                        // (opsional) Tambah badge kecil di pojok
                        const badge = document.createElement('span');
                        badge.style.position = 'absolute';
                        badge.style.top = '2px';
                        badge.style.right = '4px';
                        badge.style.fontSize = '10px';
                        badge.style.opacity = '0.9';
                        badge.textContent = isIntern ? 'INT' : 'OWN';
                        arg.el.appendChild(badge);
                    },

                    eventClick: function(info) {
                        if (info.event.display === 'background') {
                            info.jsEvent.preventDefault();
                            return;
                        }
                        const d = fmtLocalYmd(info.event.start);
                        if (HOLIDAY_MAP[d]) {
                            info.jsEvent.preventDefault();
                            return;
                        }

                        const ev = info.event;

                        function _getStatusInfo(s) {
                            if (s === 'C') return {
                                color: '#2dce89',
                                text: 'Completed'
                            };
                            if (s === 'P') return {
                                color: '#11cdef',
                                text: 'In Progress'
                            };
                            if (s === 'D') return {
                                color: '#028284',
                                text: 'Defined'
                            };
                            return {
                                color: '#adb5bd',
                                text: 'Unknown'
                            };
                        }
                        const {
                            color,
                            text
                        } = _getStatusInfo(ev.extendedProps.status || '');

                        const startObj = ev.start ? new Date(ev.start) : null;
                        const finishRaw = ev.extendedProps.finish;
                        const finishObj = finishRaw ? new Date(finishRaw) : null;

                        const fmtDate = (d) => d ? d.toLocaleDateString('id-ID', {
                            day: '2-digit',
                            month: 'long',
                            year: 'numeric'
                        }) : '-';
                        const fmtTime = (d) => d ? d.toLocaleTimeString('id-ID', {
                            hour: '2-digit',
                            minute: '2-digit'
                        }) : '-';

                        const startDate = fmtDate(startObj);
                        const startTime = fmtTime(startObj);
                        const finishDate = fmtDate(finishObj);
                        const finishTime = fmtTime(finishObj);

                        const tanggal = finishObj ?
                            (startDate === finishDate ?
                                startDate :
                                `${startDate} – ${finishDate}`) :
                            startDate;

                        const waktu = finishObj ? `${startTime} - ${finishTime}` : startTime;
                        const user = ev.extendedProps.user || '-';
                        const it = ev.extendedProps.it || '-';
                        const desc = (ev.extendedProps.description || '-').replace(/\n/g, '<br>');

                        Swal.fire({
                            title: '',
                            html: `
                                <div style="text-align:left; padding:4px 2px;">
                                    <p style="font-size:16px; font-weight:600; color:#344767; margin:0 0 8px;">${ev.title}</p>
                                    <span style="display:inline-block; background:${color}; color:#fff; border-radius:4px; font-size:12px; padding:2px 12px; margin-bottom:18px;">${text}</span>
                                    <table style="width:100%; font-size:14px; border-collapse:collapse;">
                                        <tr><td style="color:#888; padding:7px 0; width:35%;">Tanggal</td><td style="color:#333; font-weight:500;">${tanggal}</td></tr>
                                        <tr><td style="color:#888; padding:7px 0; border-top:1px solid #f0f0f0;">Waktu</td><td style="color:#333; font-weight:500; border-top:1px solid #f0f0f0;">${waktu}</td></tr>
                                        <tr><td style="color:#888; padding:7px 0; border-top:1px solid #f0f0f0;">User</td><td style="color:#333; font-weight:500; border-top:1px solid #f0f0f0;">${user}</td></tr>
                                        <tr><td style="color:#888; padding:7px 0; border-top:1px solid #f0f0f0;">IT</td><td style="color:#333; font-weight:500; border-top:1px solid #f0f0f0;">${it}</td></tr>
                                        <tr><td style="color:#888; padding:7px 0 0; border-top:1px solid #f0f0f0; vertical-align:top;">Deskripsi</td><td style="color:#555; padding:7px 0 0; border-top:1px solid #f0f0f0;">${desc}</td></tr>
                                    </table>
                                </div>
                            `,
                            width: '520px',
                            showCloseButton: true,
                            showConfirmButton: false,
                        });
                    },

                    // Untuk styling weekend (classList butuh el → pakai ini)
                    dayCellDidMount: function(info) {
                        const dow = info.date.getDay();
                        if (dow === 0 || dow === 6) {
                            info.el.classList.add('fc-day-sat-sun');
                        }

                        const d = fmtLocalYmd(info.date);
                        const isCurrentMonth = info.date.getMonth() === info.view.currentStart
                            .getMonth();

                        // Hapus label lama biar nggak dobel
                        const existed = info.el.querySelector('.holiday-label');
                        if (existed) existed.remove();

                        if (isCurrentMonth && HOLIDAY_MAP[d]) {
                            const span = document.createElement('div');
                            span.classList.add('holiday-label');
                            span.innerText = HOLIDAY_MAP[d];

                            // cari container angka tanggal
                            info.el.appendChild(span);
                        }
                    },


                    // eventDidMount: function(info) {
                    //     if (info.event.display === 'background') return;

                    //     // Tambahkan kelas CSS berdasarkan status
                    //     var status = info.event.extendedProps.status;
                    //     if (status === 'C') {
                    //         info.el.style.backgroundColor = '#2dce89'; // Hijau untuk selesai
                    //         info.el.style.borderColor = '#28a745';
                    //         info.el.style.color = '#fff';
                    //     } else if (status === 'P') {
                    //         info.el.style.backgroundColor = '#11cdef'; // in progress
                    //         info.el.style.borderColor = '#ffc107';
                    //         info.el.style.color = '#fff';
                    //     } else if (status === 'D') {
                    //         info.el.style.backgroundColor = '#028284'; // defined
                    //         info.el.style.borderColor = '#dc3545';
                    //         info.el.style.color = '#fff';
                    //     } else {
                    //         info.el.style.backgroundColor = '#007bff'; // Biru untuk status lain
                    //         info.el.style.borderColor = '#007bff';
                    //         info.el.style.color = '#fff';
                    //     }
                    // },

                });

                calendar.render();
            }

            initCalendar();

            // Event listener untuk filter by user di kalender
            $('#calendar-filter-user').on('change', function() {
                selectedCalendarUser = $(this).val(); // Simpan ke variabel global
                selectedCalendarGroup = ''; // Reset group filter
                $('#calendar-filter-group').val('');

                // Refresh kalender dengan filter baru
                if (calendar) {
                    calendar.refetchEvents();
                }

                // Show toast notification
                if (selectedCalendarUser) {
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'success',
                        title: `Filtered by: ${selectedCalendarUser}`,
                        showConfirmButton: false,
                        timer: 2000
                    });
                } else {
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'info',
                        title: 'Showing all users',
                        showConfirmButton: false,
                        timer: 1500
                    });
                }
            });

            $('#calendar-filter-group').on('change', function() {
                selectedCalendarGroup = $(this).val();
                selectedCalendarUser = '';
                $('#calendar-filter-user').val('');

                // Refresh kalender dengan filter group baru
                if (calendar) {
                    calendar.refetchEvents();
                }

                if (selectedCalendarGroup) {
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'success',
                        title: `Filtered by Group: ${selectedCalendarGroup}`,
                        showConfirmButton: false,
                        timer: 2000
                    });
                } else {
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'info',
                        title: 'Showing all groups',
                        showConfirmButton: false,
                        timer: 1500
                    });
                }
            });
        });
        // Fungsi untuk menambah hari pada tanggal
        function addDaysToDate(date, days) {
            var dateObj = new Date(date); // Konversi string tanggal ke objek Date
            dateObj.setDate(dateObj.getDate() + days); // Tambahkan jumlah hari
            return dateObj.toISOString().split('T')[0]; // Kembalikan dalam format YYYY-MM-DD
        }

        // function approveDA(id) {
        //     var idDa = id;

        //     Swal.fire({
        //         title: `Data ${idDa} akan diapprove`, // Perbaikan pada format string
        //         icon: 'warning',
        //         showCancelButton: true,
        //         confirmButtonColor: '#3085d6',
        //         cancelButtonColor: '#d33',
        //         confirmButtonText: 'Ya, Approve'
        //     }).then((result) => {
        //         if (result.isConfirmed) {
        //             // Ajax untuk memproses data ke database
        //             $.ajax({
        //                 url: '{{ URL::to('/') }}/dailya/approve/' + idDa,
        //                 type: "POST",
        //                 dataType: "JSON",
        //                 headers: {
        //                     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //                 },
        //                 success: function(data) {
        //                     // Redirect ke halaman tpuror setelah sukses
        //                     Swal.fire({
        //                         title: 'Berhasil!',
        //                         text: `Data ${idDa} berhasil diapprove!`,
        //                         icon: 'success',
        //                         confirmButtonColor: '#3085d6'
        //                     }).then(() => {
        //                         window.location.replace("{{ URL::to('/') }}/dailya/");
        //                     });
        //                 },
        //                 error: function(jqXHR, textStatus, errorThrown) {
        //                     Swal.fire({
        //                         title: 'Oops!',
        //                         text: `Data ${idDa} tidak dapat diapprove!`,
        //                         icon: 'error',
        //                         confirmButtonColor: '#3085d6'
        //                     });
        //                 }

        //             });
        //         }
        //     });
        // }

        // function approveDA(el) {
        //     const idDa = el.dataset.id;
        //     const reqby = el.dataset.reqby || '-';
        //     const userDept = (el.dataset.user || '-') + ' - ' + (el.dataset.dept || '-');
        //     const keterangan = el.dataset.ket || '-';
        //     const detailRaw = el.dataset.detail || '';

        //     // Kalau item.pengerjaan tadi string biasa, detailRaw sudah cukup.
        //     // Kalau item.pengerjaan tadi object/array, baru perlu JSON.parse:
        //     let detail = detailRaw;
        //     try {
        //         detail = JSON.parse(detailRaw); // kalau gagal parse, detail tetap string awal
        //     } catch (e) {
        //         // ignore, berarti memang string biasa
        //     }

        //     // Kalau ternyata detail masih object/array, ubah ke string rapi
        //     if (typeof detail === 'object') {
        //         detail = JSON.stringify(detail, null, 2);
        //     }

        //     // Ganti newline jadi <br> biar rapi di popup
        //     const detailHtml = String(detail).replace(/\n/g, '<br>');

        //     Swal.fire({
        //         title: `Data ${idDa} akan diapprove`,
        //         html: `
    //         <div style="text-align:left">
    //             <p><strong>Req By</strong> : ${reqby}</p>
    //             <p><strong>User - Dept</strong> : ${userDept}</p>
    //             <p><strong>Keterangan</strong> : ${keterangan}</p>
    //             <p><strong>Detail Pengerjaan</strong> :</p>
    //             <div style="border:1px solid #eee;padding:6px 8px;border-radius:4px;max-height:150px;overflow:auto;">
    //                 ${detailHtml}
    //             </div>
    //         </div> `,
        //         icon: 'warning',
        //         showCancelButton: true,
        //         confirmButtonColor: '#3085d6',
        //         cancelButtonColor: '#d33',
        //         confirmButtonText: 'Ya, Approve'
        //     }).then((result) => {
        //         if (result.isConfirmed) {
        //             $.ajax({
        //                 url: '{{ URL::to('/') }}/dailya/approve/' + idDa,
        //                 type: "POST",
        //                 dataType: "JSON",
        //                 headers: {
        //                     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //                 },
        //                 success: function(data) {
        //                     Swal.fire({
        //                         title: 'Berhasil!',
        //                         text: `Data ${idDa} berhasil diapprove!`,
        //                         icon: 'success',
        //                         confirmButtonColor: '#3085d6'
        //                     }).then(() => {
        //                         window.location.replace("{{ URL::to('/') }}/dailya/");
        //                     });
        //                 },
        //                 error: function() {
        //                     Swal.fire({
        //                         title: 'Oops!',
        //                         text: `Data ${idDa} tidak dapat diapprove!`,
        //                         icon: 'error',
        //                         confirmButtonColor: '#3085d6'
        //                     });
        //                 }
        //             });
        //         }
        //     });
        // }

        function escapeHtml(text) {
            if (!text) return '';
            return String(text)
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        function getDetailFromEl(el) {
            let detail = '';
            try {
                detail = JSON.parse(el.dataset.detail || '');
            } catch (e) {
                detail = el.dataset.detail || '';
            }
            if (!detail) detail = '-';
            if (typeof detail === 'object') {
                detail = JSON.stringify(detail, null, 2);
            }
            return escapeHtml(detail).replace(/\n/g, '<br>');
        }

        function approveDA(el) {
            const idDa = el.dataset.id;
            const reqby = el.dataset.reqby || '-';
            const user = el.dataset.user || '-';
            const dept = el.dataset.dept || '-';
            const kategori = el.dataset.kategori || '-';
            const detkat = el.dataset.detkat || '-';
            const ket = el.dataset.ket || '-';

            // detail dari JSON.stringify di atas
            let detail = '';
            try {
                detail = JSON.parse(el.dataset.detail || ''); // bisa string biasa atau apa pun
            } catch (e) {
                detail = el.dataset.detail || '';
            }
            detail = detail || '-';

            const userDept = `${user || '-'} - ${dept || '-'}`;

            const detailHtml = escapeHtml(detail).replace(/\n/g, '<br>');

            Swal.fire({
                title: `Approve Daily Activity`,
                width: '700px', // dibuat lebar
                html: `
            <div style="text-align:left; font-size:13px;">
                <table style="width:100%; border-collapse:collapse;">
                    <tr>
                        <td style="width:30%; font-weight:bold; padding:2px 4px;">ID</td>
                        <td style="padding:2px 4px;">${idDa}</td>
                    </tr>
                    <tr>
                        <td style="font-weight:bold; padding:2px 4px;">Req By</td>
                        <td style="padding:2px 4px;">${reqby}</td>
                    </tr>
                    <tr>
                        <td style="font-weight:bold; padding:2px 4px;">User / Dept</td>
                        <td style="padding:2px 4px;">${userDept}</td>
                    </tr>
                    <tr>
                        <td style="font-weight:bold; padding:2px 4px;">Kategori</td>
                        <td style="padding:2px 4px;">${kategori} - ${detkat}</td>
                    </tr>
                    <tr>
                        <td style="font-weight:bold; padding:2px 4px;">Keterangan</td>
                        <td style="padding:2px 4px;">${ket}</td>
                    </tr>
                </table>

                <div style="margin-top:10px; font-weight:bold;">Detail Pengerjaan</div>
                <div style="
                    margin-top:4px;
                    border:1px solid #ddd;
                    border-radius:4px;
                    padding:8px;
                    max-height:320px;
                    overflow:auto;
                    background:#fafafa;
                    font-size:12px;
                    white-space:pre-wrap;
                    ">
                    ${detailHtml}
                </div>
            </div>
            `,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Approve'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '{{ URL::to('/') }}/dailya/approve/' + idDa,
                        type: 'POST',
                        dataType: 'JSON',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            Swal.fire({
                                title: 'Berhasil!',
                                text: `Data ${idDa} berhasil diapprove!`,
                                icon: 'success',
                                confirmButtonColor: '#3085d6'
                            }).then(() => {
                                window.location.replace("{{ URL::to('/') }}/dailya/");
                            });
                        },
                        error: function() {
                            Swal.fire({
                                title: 'Oops!',
                                text: `Data ${idDa} tidak dapat diapprove!`,
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        }
                    });
                }
            });
        }

        function unapproveDA(id) {
            var idDa = id;

            Swal.fire({
                title: `Data ${idDa} akan diapprove`, // Perbaikan pada format string
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, unApprove'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Ajax untuk memproses data ke database
                    $.ajax({
                        url: '{{ URL::to('/') }}/dailya/unapprove/' + idDa,
                        type: "POST",
                        dataType: "JSON",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            // Redirect ke halaman tpuror setelah sukses
                            Swal.fire({
                                title: 'Berhasil!',
                                text: `Data ${idDa} berhasil diunapprove!`,
                                icon: 'success',
                                confirmButtonColor: '#3085d6'
                            }).then(() => {
                                window.location.replace("{{ URL::to('/') }}/dailya/");
                            });
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            Swal.fire({
                                title: 'Oops!',
                                text: `Data ${idDa} tidak dapat diunapprove!`,
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        }

                    });
                }
            });
        }

        function rejectDA(el) {
            const idDa = el.dataset.id;
            const reqby = el.dataset.reqby || '-';
            const user = el.dataset.user || '-';
            const dept = el.dataset.dept || '-';
            const kategori = el.dataset.kategori || '-';
            const detkat = el.dataset.detkat || '-';
            const ket = el.dataset.ket || '-';

            const userDept = `${user || '-'} - ${dept || '-'}`;
            const detailHtml = getDetailFromEl(el);

            Swal.fire({
                title: `Reject Daily Activity`,
                width: '700px',
                html: `
            <div style="text-align:left; font-size:13px;">
                <table style="width:100%; border-collapse:collapse;">
                    <tr>
                        <td style="width:30%; font-weight:bold; padding:2px 4px;">ID</td>
                        <td style="padding:2px 4px;">${idDa}</td>
                    </tr>
                    <tr>
                        <td style="font-weight:bold; padding:2px 4px;">Req By</td>
                        <td style="padding:2px 4px;">${reqby}</td>
                    </tr>
                    <tr>
                        <td style="font-weight:bold; padding:2px 4px;">User / Dept</td>
                        <td style="padding:2px 4px;">${userDept}</td>
                    </tr>
                    <tr>
                        <td style="font-weight:bold; padding:2px 4px;">Kategori</td>
                        <td style="padding:2px 4px;">${kategori} - ${detkat}</td>
                    </tr>
                    <tr>
                        <td style="font-weight:bold; padding:2px 4px;">Keterangan</td>
                        <td style="padding:2px 4px;">${ket}</td>
                    </tr>
                </table>

                <div style="margin-top:10px; font-weight:bold;">Detail Pengerjaan</div>
                <div style="
                    margin-top:4px;
                    border:1px solid #ddd;
                    border-radius:4px;
                    padding:8px;
                    max-height:240px;
                    overflow:auto;
                    background:#fafafa;
                    font-size:12px;
                    white-space:pre-wrap;
                ">
                    ${detailHtml}
                </div>

                <div style="margin-top:10px; font-weight:bold;">Alasan Reject</div>
                <textarea id="rejectReason" class="swal2-textarea"
                    placeholder="Tulis alasan reject..."
                    style="width:90%; box-sizing:border-box; font-size:12px;"></textarea>
            </div>
             `,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#F43F5E',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, Reject',
                preConfirm: () => {
                    const reason = (document.getElementById('rejectReason')?.value || '').trim();
                    if (!reason) {
                        Swal.showValidationMessage('Alasan reject wajib diisi');
                        return false;
                    }
                    return {
                        reason
                    };
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    const reason = result.value.reason;

                    $.ajax({
                        url: '{{ URL::to('/') }}/dailya/reject/' + idDa,
                        type: 'POST',
                        dataType: 'JSON',
                        data: {
                            reason: reason
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            Swal.fire({
                                title: 'Berhasil!',
                                text: `Data ${idDa} berhasil direject!`,
                                icon: 'success',
                                confirmButtonColor: '#3085d6'
                            }).then(() => {
                                window.location.replace("{{ URL::to('/') }}/dailya/");
                            });
                        },
                        error: function() {
                            Swal.fire({
                                title: 'Oops!',
                                text: `Data ${idDa} tidak dapat direject!`,
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        }
                    });
                }
            });

        }
        // Fungsi untuk Batch Approve
        function batchApprove() {
            const selectedIds = getCheckedIds();

            if (selectedIds.length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Perhatian',
                    text: 'Pilih minimal 1 data untuk di-approve',
                    confirmButtonColor: '#3085d6'
                });
                return;
            }

            // Ambil detail data yang tercentang untuk ditampilkan
            const selectedData = [];
            $('#tabel-dailya-inship tbody .checkbox:checked').each(function() {
                const row = $(this).closest('tr');
                const id = $(this).data('id');
                const nama = row.find('td').eq(2).text().trim(); // Kolom Nama
                const ket = row.find('td').eq(4).text().trim(); // Kolom Keterangan
                const kategori = row.find('td').eq(5).text().trim(); // Kolom Kategori
                const user = row.find('td').eq(7).text().trim(); // Kolom User
                const start = row.find('td').eq(8).text().trim(); // Kolom Start
                const finish = row.find('td').eq(9).text().trim(); // Kolom Finish

                // Ambil detail pengerjaan dari dropdown action button (data-detail)
                const actionBtn = row.find('.dropdown-item[onclick^="approveDA"]');
                let detailPengerjaan = '-';
                if (actionBtn.length > 0) {
                    const detail = actionBtn.attr('data-detail') || '-';
                    // Trim extra spaces dan normalize whitespace
                    detailPengerjaan = detail.replace(/\s+/g, ' ').trim();
                }

                selectedData.push({
                    id: id,
                    nama: nama,
                    ket: ket,
                    kategori: kategori,
                    user: user,
                    start: start,
                    finish: finish,
                    detail: detailPengerjaan
                });
            });

            // Buat HTML list untuk ditampilkan dengan tabel
            let dataListHtml =
                '<div style="max-height:  450px; overflow-y:  auto; overflow-x: auto; text-align: left; margin-top: 15px;">';
            dataListHtml += '<table style="width: 100%; font-size:  13px; border-collapse: collapse;">';
            dataListHtml += '<thead><tr style="background-color: #f0f0f0;">';
            dataListHtml +=
                '<th style="padding:  8px; border: 1px solid #ddd; font-weight:  bold; white-space: nowrap;">Nama</th>';
            dataListHtml += '<th style="padding: 8px; border:  1px solid #ddd; font-weight: bold;">Keterangan</th>';
            dataListHtml += '<th style="padding: 8px; border: 1px solid #ddd; font-weight: bold;">Detail Pengerjaan</th>';
            dataListHtml +=
                '<th style="padding: 8px; border: 1px solid #ddd; font-weight: bold; white-space: nowrap;">Kategori</th>';
            dataListHtml +=
                '<th style="padding: 8px; border: 1px solid #ddd; font-weight: bold; white-space: nowrap;">User</th>';
            dataListHtml +=
                '<th style="padding: 8px; border: 1px solid #ddd; font-weight: bold; white-space: nowrap;">Start</th>';
            dataListHtml +=
                '<th style="padding: 8px; border: 1px solid #ddd; font-weight: bold; white-space: nowrap;">Finish</th>';
            dataListHtml += '</tr></thead>';
            dataListHtml += '<tbody>';

            selectedData.forEach((item, index) => {
                const bgColor = index % 2 === 0 ? '#ffffff' : '#f9f9f9';
                // Format detail untuk ditampilkan (escape HTML, ganti newline dengan <br>)
                const detailFormatted = escapeHtml(item.detail).replace(/\n/g, '<br>');

                dataListHtml += `<tr style="background-color: ${bgColor};">
                    <td style="padding:  8px; border: 1px solid #ddd; font-size: 12px; white-space: nowrap; vertical-align: top;">${item.nama}</td>
                    <td style="padding: 8px; border: 1px solid #ddd; font-size: 12px; vertical-align: top; max-width: 200px;">${item.ket}</td>
                    <td style="padding: 8px; border: 1px solid #ddd; font-size: 12px; vertical-align: top; max-width: 250px;">
                        <div style="max-height: 100px; overflow-y: auto; line-height: 1.4; word-wrap: break-word;">
                            ${detailFormatted}
                        </div>
                    </td>
                    <td style="padding: 8px; border: 1px solid #ddd; font-size: 12px; white-space: nowrap; vertical-align: top;">${item.kategori}</td>
                    <td style="padding: 8px; border: 1px solid #ddd; font-size: 12px; white-space: nowrap; vertical-align: top;">${item.user}</td>
                    <td style="padding: 8px; border: 1px solid #ddd; font-size:  12px; white-space:  nowrap; vertical-align: top;">${item.start}</td>
                    <td style="padding:  8px; border: 1px solid #ddd; font-size: 12px; white-space: nowrap; vertical-align: top;">${item.finish}</td>
                </tr>`;
            });

            dataListHtml += '</tbody></table></div>';

            Swal.fire({
                title: `Approve ${selectedIds.length} Data? `,
                html: `
                    <p style="margin-bottom:  10px; font-size:  16px; font-weight:  500;">Anda akan approve data berikut:</p>
                    ${dataListHtml}
                `,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Approve Semua',
                cancelButtonText: 'Batal',
                width: '1100px',
                customClass: {
                    title: 'swal-title-large'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    // Tampilkan loading
                    Swal.fire({
                        title: 'Processing...',
                        html: 'Sedang memproses approval...',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    // Proses approve satu per satu
                    let successCount = 0;
                    let failCount = 0;
                    let promises = [];

                    selectedIds.forEach(id => {
                        const promise = $.ajax({
                            url: '{{ URL::to('/') }}/dailya/approve/' + id,
                            type: 'POST',
                            dataType: 'JSON',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        }).done(function() {
                            successCount++;
                        }).fail(function() {
                            failCount++;
                        });

                        promises.push(promise);
                    });

                    // Tunggu semua request selesai
                    Promise.all(promises.map(p => p.catch(e => e))).then(() => {
                        Swal.fire({
                            icon: successCount > 0 ? 'success' : 'error',
                            title: 'Batch Approval Selesai',
                            html: `
                                <p style="font-size: 16px;"><strong>Berhasil: </strong> ${successCount} data</p>
                                <p style="font-size: 16px;"><strong>Gagal: </strong> ${failCount} data</p>
                            `,
                            confirmButtonColor: '#3085d6'
                        }).then(() => {
                            window.location.reload();
                        });
                    });
                }
            });
        }

        // Fungsi untuk Batch Reject
        function batchReject() {
            const selectedIds = getCheckedIds();

            if (selectedIds.length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Perhatian',
                    text: 'Pilih minimal 1 data untuk di-reject',
                    confirmButtonColor: '#3085d6'
                });
                return;
            }

            // Ambil detail data yang tercentang
            const selectedData = [];
            $('#tabel-dailya-inship tbody .checkbox:checked').each(function() {
                const row = $(this).closest('tr');
                const id = $(this).data('id');
                const nama = row.find('td').eq(2).text().trim(); // Kolom Nama
                const ket = row.find('td').eq(4).text().trim(); // Kolom Keterangan
                const kategori = row.find('td').eq(5).text().trim(); // Kolom Kategori
                const user = row.find('td').eq(7).text().trim(); // Kolom User
                const start = row.find('td').eq(8).text().trim(); // Kolom Start
                const finish = row.find('td').eq(9).text().trim(); // Kolom Finish

                // Ambil detail pengerjaan dari dropdown action button (data-detail)
                const actionBtn = row.find('.dropdown-item[onclick^="rejectDA"]');
                let detailPengerjaan = '-';
                if (actionBtn.length > 0) {
                    const detail = actionBtn.attr('data-detail') || '-';
                    // Trim extra spaces dan normalize whitespace
                    detailPengerjaan = detail.replace(/\s+/g, ' ').trim();
                }

                selectedData.push({
                    id: id,
                    nama: nama,
                    ket: ket,
                    kategori: kategori,
                    user: user,
                    start: start,
                    finish: finish,
                    detail: detailPengerjaan
                });
            });

            let dataListHtml =
                '<div style="max-height: 450px; overflow-y: auto; overflow-x: auto; text-align: left; margin-top: 15px;">';
            dataListHtml += '<table style="width: 100%; font-size: 13px; border-collapse: collapse;">';
            dataListHtml += '<thead><tr style="background-color: #f0f0f0;">';
            dataListHtml +=
                '<th style="padding:  8px; border: 1px solid #ddd; font-weight: bold; white-space:  nowrap; width: 10%;">Nama</th>';
            dataListHtml +=
                '<th style="padding: 8px; border: 1px solid #ddd; font-weight: bold; width: 15%;">Keterangan</th>';
            dataListHtml +=
                '<th style="padding: 8px; border: 1px solid #ddd; font-weight:  bold; width: 15%;">Detail Pengerjaan</th>';
            dataListHtml +=
                '<th style="padding: 8px; border: 1px solid #ddd; font-weight: bold; white-space: nowrap; width:  12%;">Kategori</th>';
            dataListHtml +=
                '<th style="padding: 8px; border: 1px solid #ddd; font-weight: bold; white-space: nowrap; width: 10%;">User</th>';
            dataListHtml +=
                '<th style="padding: 8px; border: 1px solid #ddd; font-weight: bold; white-space: nowrap; width:  8%;">Start</th>';
            dataListHtml +=
                '<th style="padding: 8px; border: 1px solid #ddd; font-weight: bold; white-space: nowrap; width:  8%;">Finish</th>';
            dataListHtml +=
                '<th style="padding: 8px; border: 1px solid #ddd; font-weight: bold; width: 22%;">Alasan Reject *</th>';
            dataListHtml += '</tr></thead>';
            dataListHtml += '<tbody>';

            selectedData.forEach((item, index) => {
                const bgColor = index % 2 === 0 ? '#ffffff' : '#f9f9f9';
                // Format detail untuk ditampilkan
                const detailFormatted = escapeHtml(item.detail).replace(/\n/g, '<br>');

                dataListHtml += `<tr style="background-color: ${bgColor};">
                    <td style="padding: 8px; border:  1px solid #ddd; font-size: 12px; vertical-align: top; white-space: nowrap;">${item.nama}</td>
                    <td style="padding: 8px; border: 1px solid #ddd; font-size: 12px; vertical-align: top;">
                        <div style="max-height: 80px; overflow-y: auto; line-height: 1.4; word-wrap: break-word;">
                            ${item.ket}
                        </div>
                    </td>
                    <td style="padding: 8px; border: 1px solid #ddd; font-size:  12px; vertical-align:  top;">
                        <div style="max-height: 80px; overflow-y: auto; line-height:  1.4; word-wrap: break-word;">
                            ${detailFormatted}
                        </div>
                    </td>
                    <td style="padding: 8px; border: 1px solid #ddd; font-size: 12px; vertical-align: top; white-space: nowrap;">${item.kategori}</td>
                    <td style="padding: 8px; border: 1px solid #ddd; font-size: 12px; vertical-align: top; white-space: nowrap;">${item.user}</td>
                    <td style="padding: 8px; border: 1px solid #ddd; font-size: 12px; vertical-align: top; white-space: nowrap;">${item.start}</td>
                    <td style="padding: 8px; border: 1px solid #ddd; font-size: 12px; vertical-align: top; white-space: nowrap;">${item.finish}</td>
                    <td style="padding: 8px; border: 1px solid #ddd;">
                        <textarea
                            class="reject-reason-input"
                            data-id="${item.id}"
                            data-nama="${item.nama}"
                            placeholder="Tulis alasan reject..."
                            style="width:  100%;
                                min-height: 60px;
                                padding:  8px;
                                font-size: 12px;
                                border: 1px solid #ccc;
                                border-radius: 4px;
                                resize: vertical;
                                box-sizing: border-box;"></textarea>
                    </td>
                </tr>`;
            });

            dataListHtml += '</tbody></table></div>';

            Swal.fire({
                title: `Reject ${selectedIds.length} Data?`,
                html: `
                    <p style="margin-bottom: 10px; font-size: 16px; font-weight: 500;">Anda akan reject data berikut:</p>
                    <p style="font-size: 13px; color: #d33; margin-bottom: 10px;">* Harap isi alasan reject untuk setiap data</p>
                    ${dataListHtml}
                `,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#F43F5E',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, Reject Semua',
                cancelButtonText: 'Batal',
                width: '1200px',
                customClass: {
                    title: 'swal-title-large',
                    htmlContainer: 'swal-html-container-large'
                },
                preConfirm: () => {
                    const reasons = {};
                    let allFilled = true;
                    let emptyNama = '';

                    $('.reject-reason-input').each(function() {
                        const id = $(this).data('id');
                        const nama = $(this).data('nama');
                        const reason = $(this).val().trim();

                        if (!reason) {
                            allFilled = false;
                            emptyNama = nama;
                            $(this).css('border', '2px solid red');
                            return false; // break loop
                        } else {
                            $(this).css('border', '1px solid #ccc');
                        }

                        reasons[id] = reason;
                    });

                    if (!allFilled) {
                        Swal.showValidationMessage(`Alasan reject untuk "${emptyNama}" wajib diisi!`);
                        return false;
                    }

                    return {
                        reasons
                    };
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    const reasonsMap = result.value.reasons;

                    Swal.fire({
                        title: 'Processing...',
                        html: 'Sedang memproses reject...',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    let successCount = 0;
                    let failCount = 0;
                    let promises = [];

                    selectedIds.forEach(id => {
                        const promise = $.ajax({
                            url: '{{ URL::to('/') }}/dailya/reject/' + id,
                            type: 'POST',
                            dataType: 'JSON',
                            data: {
                                reason: reasonsMap[id]
                            },
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        }).done(function() {
                            successCount++;
                        }).fail(function() {
                            failCount++;
                        });

                        promises.push(promise);
                    });

                    Promise.all(promises.map(p => p.catch(e => e))).then(() => {
                        Swal.fire({
                            icon: successCount > 0 ? 'success' : 'error',
                            title: 'Batch Reject Selesai',
                            html: `
                                <p style="font-size:  16px;"><strong>Berhasil:</strong> ${successCount} data</p>
                                <p style="font-size: 16px;"><strong>Gagal:</strong> ${failCount} data</p>
                            `,
                            confirmButtonColor: '#3085d6'
                        }).then(() => {
                            window.location.reload();
                        });
                    });
                }
            });
        }
        $(document).ready(function() {
            $('#checkboxesMain').on('change', function() {
                const isChecked = $(this).prop('checked');
                $('#tabel-dailya-inship tbody .checkbox:not(:disabled)').prop('checked', isChecked);

                updateCheckedCount();
            });

            $(document).on('change', '#tabel-dailya-inship tbody .checkbox:not(:disabled)', function() {
                const totalCheckboxes = $('#tabel-dailya-inship tbody .checkbox:not(:disabled)').length;
                const checkedCheckboxes = $('#tabel-dailya-inship tbody .checkbox:not(:disabled):checked')
                    .length;

                if (checkedCheckboxes === totalCheckboxes && totalCheckboxes > 0) {
                    $('#checkboxesMain').prop('checked', true);
                    $('#checkboxesMain').prop('indeterminate', false);
                } else if (checkedCheckboxes === 0) {
                    $('#checkboxesMain').prop('checked', false);
                    $('#checkboxesMain').prop('indeterminate', false);
                } else {
                    $('#checkboxesMain').prop('checked', false);
                    $('#checkboxesMain').prop('indeterminate', true);
                }

                updateCheckedCount();
            });

            function updateCheckedCount() {
                const checkedCount = $('#tabel-dailya-inship tbody .checkbox:not(:disabled):checked').length;
                $('input[name="daily-act-inship"]').val(checkedCount);

                $('#selected-count').text(checkedCount);
                $('#selected-count-reject').text(checkedCount);

                if (checkedCount > 0) {
                    $('#batch-actions').slideDown(200);
                } else {
                    $('#batch-actions').slideUp(200);
                }
            }

            window.getCheckedIds = function() {
                const checkedIds = [];
                $('#tabel-dailya-inship tbody .checkbox:not(:disabled):checked').each(function() {
                    checkedIds.push($(this).data('id'));
                });
                return checkedIds;
            };
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#filter-user-select').on('change', function() {
                const selectedName = $(this).val();
                applyUserFilter(selectedName);

                if (selectedName) {
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'success',
                        title: `Filtered by:  ${selectedName}`,
                        showConfirmButton: false,
                        timer: 2000
                    });
                } else {
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'info',
                        title: 'Showing all users',
                        showConfirmButton: false,
                        timer: 1500
                    });
                }
            });

            // Fungsi untuk apply filter berdasarkan user yang dipilih
            function applyUserFilter(firstname) {
                const table = $('#tabel-dailya-inship').DataTable();

                if (firstname) {
                    table.column(2).search('^' + firstname + '$', true, false).draw();
                } else {
                    table.column(2).search('').draw();
                }

                // Reset checkbox setelah filter
                $('#checkboxesMain').prop('checked', false);
                $('#checkboxesMain').prop('indeterminate', false);

                // Update counter
                if (typeof updateCheckedCount === 'function') {
                    updateCheckedCount();
                }
            }
        });
    </script>

    <script>
        // Fungsi helper untuk proteksi field date
        function protectDateField(fieldId, originalValue) {
            const dateField = document.getElementById(fieldId);
            if (!dateField) return;

            const originalDate = dateField.value;
            dateField.setAttribute('data-original', originalDate);
            dateField.setAttribute('readonly', true);

            let isRestoring = false;

            const restoreValue = () => {
                if (isRestoring) return;
                isRestoring = true;
                dateField.value = originalDate;
                isRestoring = false;
            };

            dateField.addEventListener('input', restoreValue);
            dateField.addEventListener('paste', e => e.preventDefault());

            const observer = new MutationObserver(mutations => {
                if (isRestoring) return;

                mutations.forEach(mutation => {
                    if (mutation.type === 'attributes' &&
                        (mutation.attributeName === 'readonly' || mutation.attributeName ===
                            'value')) {

                        isRestoring = true;
                        dateField.setAttribute('readonly', true);
                        dateField.value = originalDate;
                        isRestoring = false;
                    }
                });
            });

            observer.observe(dateField, {
                attributes: true,
                attributeFilter: ['readonly', 'value']
            });
        }

        // Override fungsi prosesDA dengan proteksi
        if (typeof window.prosesDA === 'function') {
            const originalProsesDA = window.prosesDA;
            window.prosesDA = function(id, start) {
                const userRole = document.getElementById('jabatan')?.value;
                const isInternship = userRole === 'IN';

                originalProsesDA(id, start);

                if (isInternship) {
                    setTimeout(() => {
                        const dateInput = document.getElementById('date-input');
                        if (dateInput && dateInput.hasAttribute('readonly')) {
                            protectDateField('date-input', dateInput.value);
                        }
                    }, 100);
                }
            };
        }

        function protectDateField(fieldId, originalValue) {
            const dateField = document.getElementById(fieldId);
            if (!dateField) return;

            const originalDate = dateField.value;
            dateField.setAttribute('data-original', originalDate);
            dateField.setAttribute('readonly', true);

            let isRestoring = false;

            const restoreValue = () => {
                if (isRestoring) return;
                isRestoring = true;
                dateField.value = originalDate;
                isRestoring = false;
            };

            dateField.addEventListener('input', restoreValue);
            dateField.addEventListener('paste', e => e.preventDefault());

            const observer = new MutationObserver(mutations => {
                if (isRestoring) return;

                mutations.forEach(mutation => {
                    if (mutation.type === 'attributes' &&
                        (mutation.attributeName === 'readonly' || mutation.attributeName ===
                            'value')) {

                        isRestoring = true;
                        dateField.setAttribute('readonly', true);
                        dateField.value = originalDate;
                        isRestoring = false;
                    }
                });
            });

            observer.observe(dateField, {
                attributes: true,
                attributeFilter: ['readonly', 'value']
            });
        }

        // Override fungsi completeDA dengan proteksi
        if (typeof window.completeDA === 'function') {
            const originalCompleteDA = window.completeDA;
            window.completeDA = function(id, start, finish, poin, pengerjaan) {
                const userRole = document.getElementById('jabatan')?.value;
                const isInternship = userRole === 'IN';

                originalCompleteDA(id, start, finish, poin, pengerjaan);

                if (isInternship) {
                    setTimeout(() => {
                        const startDateInput = document.getElementById('start-input');
                        const finishDateInput = document.getElementById('finish-date-input');
                        if (startDateInput && startDateInput.hasAttribute('readonly') && finishDateInput &&
                            finishDateInput.hasAttribute('readonly')) {
                            protectDateField('start-input', startDateInput.value);
                            protectDateField('finish-date-input', finishDateInput.value);
                        }
                    }, 100);
                }
            };
        }
    </script>

    {{-- CSS dan JavaScript untuk collapse animation --}}
    <style>
        .btn-link i {
            transition: transform 0.3s ease;
        }

        .btn-link[aria-expanded="false"] i {
            transform: rotate(-90deg);
        }

        .btn-link[aria-expanded="true"] i {
            transform: rotate(0deg);
        }

        .btn-link:hover {
            text-decoration: none;
        }
    </style>

    <script>
        // Script untuk toggle icon chevron saat collapse
        document.addEventListener('DOMContentLoaded', function() {
            // Handle collapse events untuk Internship
            const collapseInternship = document.getElementById('collapseInternship');
            if (collapseInternship) {
                collapseInternship.addEventListener('show.bs.collapse', function() {
                    const btn = document.querySelector('[data-bs-target="#collapseInternship"]');
                    if (btn) btn.setAttribute('aria-expanded', 'true');
                });

                collapseInternship.addEventListener('hide.bs.collapse', function() {
                    const btn = document.querySelector('[data-bs-target="#collapseInternship"]');
                    if (btn) btn.setAttribute('aria-expanded', 'false');
                });
            }

            // Handle collapse events untuk IT Staff
            const collapseITStaff = document.getElementById('collapseITStaff');
            if (collapseITStaff) {
                collapseITStaff.addEventListener('show.bs.collapse', function() {
                    const btn = document.querySelector('[data-bs-target="#collapseITStaff"]');
                    if (btn) btn.setAttribute('aria-expanded', 'true');
                });

                collapseITStaff.addEventListener('hide.bs.collapse', function() {
                    const btn = document.querySelector('[data-bs-target="#collapseITStaff"]');
                    if (btn) btn.setAttribute('aria-expanded', 'false');
                });
            }
        });
    </script>

    {{-- ============================================================ --}}
    {{-- MODAL ADD DAILY ACTIVITY - Google Calendar Popup Style       --}}
    {{-- (view-switching inside one modal, no nested modal bug)       --}}
    {{-- ============================================================ --}}

    {{-- CSS for the add modal (fresh, light, elegant) --}}
    <style>
        /* ═══ Modal wrapper ═══════════════════════════════════════════════ */
        #modalAddDaily .modal-dialog {
            max-width: 490px;
        }

        #modalAddDaily .modal-content {
            border-radius: 16px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            border: none;
            overflow: hidden;
            background: #fff;
        }

        /* ═══ Header area (date + close + title) ══════════════════════════ */
        .gc-header {
            padding: 24px 24px 0;
            background: #fff;
        }

        .gc-header-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }

        .gc-header-date {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: .95rem;
            font-weight: 600;
            color: #3b82f6;
        }

        .gc-header-date i {
            font-size: .9rem;
        }

        .gc-header .btn-close {
            width: 28px;
            height: 28px;
            background-color: transparent;
            opacity: .8;
            filter: invert(1) grayscale(100%) brightness(0);
            /* Make it black and solid */
            transition: opacity .15s;
        }

        .gc-header .btn-close:hover {
            opacity: 1;
        }

        /* Title input (Keterangan) */
        .gc-title-wrap {
            padding: 0 0 16px;
            position: relative;
        }

        .gc-title-input {
            display: block;
            width: 100%;
            border: none !important;
            border-bottom: 1px solid transparent !important;
            border-radius: 0 !important;
            font-size: 1.35rem !important;
            font-weight: 500 !important;
            line-height: 1.4 !important;
            padding: 0 0 6px !important;
            box-shadow: none !important;
            background: transparent;
            color: #1e293b;
        }

        .gc-title-input::placeholder {
            color: #cbd5e1;
            font-weight: 500;
        }

        .gc-title-input:focus {
            outline: none;
        }

        .gc-char-count {
            font-size: .8rem;
            color: #94a3b8;
            position: absolute;
            right: 0;
            bottom: 0;
            background: #fff;
            padding-left: 4px;
        }

        /* ═══ Modal body ══════════════════════════════════════════════════ */
        #modalAddDaily .modal-body {
            padding: 10px 24px 10px;
            max-height: 60vh;
            overflow-y: auto;
        }

        /* ── Sub-label ── */
        .gc-sub-label {
            font-size: .75rem;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: .8px;
            margin-bottom: 6px;
            font-weight: 600;
            display: block;
        }

        /* ── Field Wrappers ── */
        .gc-field-group {
            margin-bottom: 18px;
        }

        /* Detail Pengerjaan special field (no gray background) */
        .gc-detail-wrap {
            display: flex;
            align-items: flex-start;
            border-bottom: 1px solid #e2e8f0;
            padding-bottom: 4px;
            gap: 10px;
        }

        .gc-detail-wrap i {
            color: #94a3b8;
            margin-top: 4px;
            font-size: 1rem;
        }

        .gc-detail-wrap textarea {
            flex: 1;
            border: none;
            padding: 0;
            resize: none;
            font-size: .95rem;
            color: #334155;
            background: transparent;
            line-height: 1.5;
        }

        .gc-detail-wrap textarea:focus {
            outline: none;
        }

        .gc-detail-wrap textarea::placeholder {
            color: #94a3b8;
        }

        /* Gray Rounded Fields */
        .gc-field {
            display: flex;
            align-items: center;
            background-color: #f8fafc;
            border-radius: 8px;
            padding: 8px 12px;
            gap: 10px;
            border: 1px solid transparent;
            transition: all 0.2s;
            position: relative;
        }

        .gc-field:hover {
            background-color: #f1f5f9;
        }

        .gc-field:focus-within {
            background-color: #fff;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .gc-field>i.icon-left {
            color: #94a3b8;
            font-size: 1rem;
        }

        .gc-field input,
        .gc-field select {
            flex: 1;
            border: none;
            background: transparent;
            font-size: .95rem;
            color: #334155;
            outline: none;
            padding: 0;
            width: 100%;
        }

        .gc-field input::placeholder {
            color: #94a3b8;
        }

        .gc-field .select2-container {
            flex: 1;
            min-width: 0;
        }

        .gc-field .select2-container .select2-selection--single {
            border: 0;
            background: transparent;
            height: 38px;
            padding-left: 24px;
        }

        .gc-field .select2-container .select2-selection--single .select2-selection__rendered {
            line-height: 38px;
        }

        .gc-field .select2-container .select2-selection--single .select2-selection__arrow {
            height: 38px;
        }

        .gc-field select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            cursor: pointer;
            padding-right: 12px;
            background: transparent;
            text-overflow: ellipsis;
        }

        .gc-field input[type="file"] {
            padding: 3px 0;
        }

        .gc-field input[type="file"]::file-selector-button {
            margin-right: 10px;
            border: none;
            background: #e2e8f0;
            padding: 5px 12px;
            border-radius: 6px;
            color: #475569;
            font-size: .85rem;
            font-weight: 600;
            cursor: pointer;
            transition: background .2s;
        }

        .gc-field input[type="file"]::file-selector-button:hover {
            background: #cbd5e1;
        }

        /* Custom Dropdown UI */
        .gc-field.has-dropdown {
            position: relative;
            cursor: pointer;
        }

        .gc-autocomplete-wrap {
            flex: 1;
            min-width: 0;
        }

        .gc-autocomplete-list {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            right: 0;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
            border: 1px solid #e2e8f0;
            z-index: 9999;
            max-height: 200px;
            overflow-y: auto;
            display: none;
            flex-direction: column;
            padding: 4px;
        }

        .gc-autocomplete-list.show {
            display: flex;
        }

        .gc-autocomplete-item {
            padding: 7px 12px;
            font-size: .92rem;
            color: #475569;
            border-radius: 7px;
            cursor: pointer;
            transition: all .12s;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex-shrink: 0;
        }

        .gc-autocomplete-item:hover,
        .gc-autocomplete-item.active {
            background: #eff6ff;
            color: #2563eb;
            font-weight: 500;
        }

        .gc-autocomplete-item .ac-highlight {
            background: #dbeafe;
            color: #1d4ed8;
            border-radius: 3px;
            padding: 0 2px;
            font-weight: 600;
        }

        .gc-autocomplete-empty {
            padding: 10px 12px;
            font-size: .9rem;
            color: #94a3b8;
            text-align: center;
        }

        .gc-select-display {
            flex: 1;
            font-size: .95rem;
            color: #334155;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            user-select: none;
        }

        .gc-select-options {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            right: 0;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            border: 1px solid #f1f5f9;
            z-index: 1050;
            overflow-y: auto;
            max-height: 200px;
            display: none;
            flex-direction: column;
            padding: 4px;
        }

        .gc-field.has-dropdown.active .gc-select-options {
            display: flex;
        }

        .gc-field.has-dropdown.active {
            border-color: #3b82f6;
            background-color: #fff;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .gc-field.has-dropdown.active .icon-right {
            transform: rotate(180deg);
        }

        .gc-field .icon-right {
            transition: transform .2s;
        }

        .gc-option {
            padding: 8px 12px;
            font-size: .95rem;
            color: #475569;
            border-radius: 8px;
            transition: all .15s;
        }

        .gc-option:hover {
            background: #eff6ff;
            color: #2563eb;
            font-weight: 500;
        }

        .gc-field .icon-right {
            color: #94a3b8;
            font-size: .9rem;
            pointer-events: none;
        }

        .gc-field .pick-btn {
            background: none;
            border: none;
            color: #94a3b8;
            padding: 0;
            cursor: pointer;
            font-size: .95rem;
            pointer-events: auto;
            transition: color .2s;
        }

        .gc-field .pick-btn:hover {
            color: #3b82f6;
        }

        /* Poin box */
        .gc-poin-box {
            background-color: #f0f7ff;
            border-radius: 8px;
            padding: 12px 14px;
            margin-top: 20px;
            margin-bottom: 4px;
        }

        .gc-poin-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: .75rem;
            font-weight: 700;
            color: #3b82f6;
            letter-spacing: .5px;
            margin-bottom: 8px;
        }

        .gc-poin-header i.fa-star {
            color: #facc15;
            font-size: .9rem;
        }

        .gc-poin-header i.fa-info-circle {
            color: #93c5fd;
            font-size: .8rem;
            cursor: pointer;
        }

        .gc-poin-value {
            color: #2563eb;
            font-weight: 600;
            font-size: 1.05rem;
            border: none;
            background: transparent;
            padding: 0;
            width: 100%;
            outline: none;
        }

        /* ── Two-col ── */
        .gc-2col {
            display: flex;
            gap: 14px;
        }

        .gc-2col>div {
            flex: 1;
            min-width: 0;
        }

        /* ═══ Footer ══════════════════════════════════════════════════════ */
        #modalAddDaily .modal-footer {
            border-top: 1px solid #f8fafc;
            padding: 16px 24px 20px;
            background: #fff;
            justify-content: flex-end;
            gap: 10px;
        }

        .gc-btn-cancel {
            color: #64748b !important;
            font-weight: 500;
            font-size: .95rem;
            padding: 8px 20px;
            border-radius: 8px !important;
            border: 1px solid #e2e8f0 !important;
            background: #fff !important;
            transition: background .15s, color .15s !important;
        }

        .gc-btn-cancel:hover {
            background: #f8fafc !important;
            color: #334155 !important;
        }

        .gc-btn-save {
            background: #2563eb !important;
            border: none !important;
            border-radius: 8px !important;
            padding: 8px 24px !important;
            font-weight: 500 !important;
            font-size: .95rem !important;
            color: #fff !important;
            box-shadow: none !important;
            transition: background .15s !important;
        }

        .gc-btn-save:hover {
            background: #1d4ed8 !important;
        }

        .gc-btn-save:disabled {
            background: #93c5fd !important;
        }

        /* ═══ Picker panel ══════════════════════════════════════════════════ */
        .gc-picker-header {
            display: flex;
            align-items: center;
            padding: 10px 16px;
            border-bottom: 1px solid #f1f5f9;
            gap: 10px;
            background: #f8fafc;
        }

        .gc-picker-header h6 {
            margin: 0;
            font-size: .975rem;
            color: #334155;
            font-weight: 600;
        }

        .gc-back-btn {
            border: none;
            background: none;
            color: #94a3b8;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: background .15s, color .15s;
        }

        .gc-back-btn:hover {
            background: #e2e8f0;
            color: #334155;
        }

        .gc-picker-body {
            padding: 10px 16px 4px;
        }
    </style>

    {{-- ===== MAIN ADD DAILY MODAL (Google Calendar popup + view-switching) ===== --}}
    <div class="modal fade" id="modalAddDaily" tabindex="-1" aria-labelledby="modalAddDailyLabel" aria-hidden="true"
        data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">

                {{-- HEADER: light blue bg, date + close, then big title --}}
                <div class="gc-header">
                    <div class="gc-header-top">
                        <div class="gc-header-date">
                            <i class="fas fa-calendar-day"></i>
                            <span id="addDailyHeaderDate"></span>
                        </div>
                        <button type="button" class="btn-close btn-sm" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="gc-title-wrap">
                        <input type="text" id="add_dket_display" class="gc-title-input"
                            placeholder="Tambah keterangan..." maxlength="50" oninput="addModal_syncKet(this)">
                        <div class="gc-char-count"><span id="add_ket_count">0</span>/50</div>
                    </div>
                </div>

                {{-- Form Body --}}
                {{-- MODAL BODY: switchable views ──────────────────── --}}
                <div class="modal-body">
                    <form id="addDailyForm" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" id="add_ddate" name="ddate" value="{{ date('Y-m-d') }}">
                        <input type="hidden" id="add_dket" name="dket" value="">
                        @if ($userinfo->lastname != 'IN')
                            <input type="hidden" id="add_dapprove" name="dapprove" value="1">
                            <input type="hidden" id="add_dreqby" name="dreqby" value="">
                        @endif

                        {{-- ═══════════ VIEW: MAIN FORM ═══════════ --}}
                        <div id="addDailyMainView">

                            @if ($userinfo->lastname == 'IN')
                                {{-- ID Ticket --}}
                                <div class="gc-field-group">
                                    <div class="gc-sub-label">ID Ticket</div>
                                    <div class="gc-field" id="gc_field_ticket">
                                        <i class="fas fa-ticket-alt icon-left"></i>
                                        <select class="ticket-select2" id="add_dticket_id" name="dticket_id">
                                            <option value="">Pilih ID Ticket</option>
                                            @foreach ($tickets as $ticket)
                                                <option value="{{ $ticket->id }}">
                                                    {{ $ticket->id }} | {{ $ticket->problem }} | PIC :
                                                    {{ $ticket->firstname }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <span class="spinner-border spinner-border-sm text-primary d-none"
                                            id="add_ticket_loading" role="status" aria-label="Loading ticket"></span>
                                    </div>
                                </div>
                            @endif

                            {{-- Detail Pengerjaan --}}
                            <div class="gc-field-group">
                                <div class="gc-sub-label">Detail Pengerjaan</div>
                                <div class="gc-detail-wrap">
                                    <i class="fas fa-align-left"></i>
                                    <textarea id="add_dpengerjaan" name="dpengerjaan" rows="2" placeholder="Deskripsikan detail pekerjaan..."></textarea>
                                </div>
                            </div>

                            {{-- Kategori --}}
                            <div class="gc-field-group">
                                <div class="gc-sub-label">Kategori *</div>
                                <input type="hidden" id="add_dkategori" name="dkategori">
                                <input type="hidden" id="add_ddetkat" name="ddetkat">
                                <div class="gc-field" id="gc_field_kategori">
                                    <i class="fas fa-tags icon-left"></i>
                                    <div class="gc-autocomplete-wrap">
                                        <input type="text" id="add_ddetkatname"
                                            placeholder="Ketik atau pilih kategori..." autocomplete="off"
                                            oninput="acKategori_onInput(this)" onfocus="acKategori_onFocus(this)"
                                            onkeydown="acKategori_onKeydown(event)">
                                        <div class="gc-autocomplete-list" id="ac_list_kategori"></div>
                                    </div>
                                    <button type="button" class="pick-btn" onclick="addModal_showPicker('kategori')"
                                        title="Buka tabel pilih">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>

                            @if ($userinfo->lastname == 'IN')
                                <div class="gc-field-group">
                                    <div class="gc-sub-label">Request By *</div>
                                    <input type="hidden" id="add_dreqby" name="dreqby"
                                        value="{{ $mentor->mentor_username ?? '' }}">
                                    <input type="hidden" id="add_dapprove" name="dapprove" value="0">
                                    <div class="gc-field" id="gc_field_reqby">
                                        <i class="far fa-user icon-left"></i>
                                        <div class="gc-autocomplete-wrap">
                                            <input type="text" id="add_dreqbyname"
                                                placeholder="Ketik nama requester..." autocomplete="off"
                                                value="{{ $mentor->mentor_firstname ?? '' }}"
                                                oninput="acReqby_onInput(this)" onfocus="acReqby_onFocus(this)"
                                                onkeydown="acReqby_onKeydown(event)">
                                            <div class="gc-autocomplete-list" id="ac_list_reqby"></div>
                                        </div>
                                        <button type="button" class="pick-btn" onclick="addModal_showPicker('reqby')"
                                            title="Buka tabel pilih">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                            @endif

                            {{-- User & Dept --}}
                            <div class="gc-field-group">
                                <div class="gc-sub-label">User - Dept. *</div>
                                <input type="hidden" id="add_duser" name="duser">
                                <input type="hidden" id="add_ddept" name="ddept">
                                <div class="gc-field" id="gc_field_user">
                                    <i class="far fa-user icon-left"></i>
                                    <div class="gc-autocomplete-wrap">
                                        <input type="text" id="add_dusername" placeholder="Ketik nama atau dept..."
                                            autocomplete="off" oninput="acUser_onInput(this)"
                                            onfocus="acUser_onFocus(this)" onkeydown="acUser_onKeydown(event)">
                                        <div class="gc-autocomplete-list" id="ac_list_user"></div>
                                    </div>
                                    <button type="button" class="pick-btn" onclick="addModal_showPicker('user')"
                                        title="Buka tabel pilih">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>

                            {{-- Dampak & Urgency --}}
                            <div class="gc-2col gc-field-group">
                                <div>
                                    <div class="gc-sub-label">Dampak *</div>
                                    <div class="gc-field has-dropdown" id="add_ddampak_field"
                                        onclick="addModal_toggleDropdown(event, 'add_ddampak_field')" tabindex="0"
                                        onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();addModal_toggleDropdown(event, 'add_ddampak_field');}">
                                        <i class="fas fa-bolt icon-left"></i>
                                        <div class="gc-select-display" id="add_ddampak_display">Low</div>
                                        <input type="hidden" id="add_ddampak" name="ddampak" value="1">
                                        <div class="gc-select-options">
                                            <div class="gc-option" tabindex="0"
                                                onclick="addModal_selectOption(event, 'add_ddampak_field', 'add_ddampak', '', 'Pilih...')"
                                                onkeydown="if(event.key==='Enter'){addModal_selectOption(event, 'add_ddampak_field', 'add_ddampak', '', 'Pilih...');}">
                                                Pilih...</div>
                                            @foreach ($urgency as $u)
                                                <div class="gc-option" tabindex="0"
                                                    onclick="addModal_selectOption(event, 'add_ddampak_field', 'add_ddampak', '{{ $u->value }}', '{{ $u->name }}')"
                                                    onkeydown="if(event.key==='Enter'){addModal_selectOption(event, 'add_ddampak_field', 'add_ddampak', '{{ $u->value }}', '{{ $u->name }}');}">
                                                    {{ $u->name }}</div>
                                            @endforeach
                                        </div>
                                        <i class="fas fa-chevron-down icon-right"></i>
                                    </div>
                                </div>
                                <div>
                                    <div class="gc-sub-label">Urgency *</div>
                                    <div class="gc-field has-dropdown" id="add_durgency_field"
                                        onclick="addModal_toggleDropdown(event, 'add_durgency_field')" tabindex="0"
                                        onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();addModal_toggleDropdown(event, 'add_durgency_field');}">
                                        <div class="gc-select-display" id="add_durgency_display"
                                            style="padding-left:4px;">Low</div>
                                        <input type="hidden" id="add_durgency" name="durgency" value="1">
                                        <div class="gc-select-options">
                                            <div class="gc-option" tabindex="0"
                                                onclick="addModal_selectOption(event, 'add_durgency_field', 'add_durgency', '', 'Pilih...')"
                                                onkeydown="if(event.key==='Enter'){addModal_selectOption(event, 'add_durgency_field', 'add_durgency', '', 'Pilih...');}">
                                                Pilih...</div>
                                            @foreach ($urgency as $u)
                                                <div class="gc-option" tabindex="0"
                                                    onclick="addModal_selectOption(event, 'add_durgency_field', 'add_durgency', '{{ $u->value }}', '{{ $u->name }}')"
                                                    onkeydown="if(event.key==='Enter'){addModal_selectOption(event, 'add_durgency_field', 'add_durgency', '{{ $u->value }}', '{{ $u->name }}');}">
                                                    {{ $u->name }}</div>
                                            @endforeach
                                        </div>
                                        <i class="fas fa-chevron-down icon-right"></i>
                                    </div>
                                </div>
                            </div>

                            {{-- Start & Finish --}}
                            <div class="gc-2col gc-field-group">
                                <div>
                                    <div class="gc-sub-label">Start</div>
                                    <div class="gc-field">
                                        <i class="far fa-clock icon-left"></i>
                                        @if ($userinfo->lastname == 'IN')
                                            <input type="time" id="add_start" onchange="addModal_onStartChange()">
                                            <input type="hidden" id="add_start_full" name="start">
                                        @else
                                            <input type="datetime-local" id="add_start" name="start"
                                                onchange="addModal_onStartChange()">
                                        @endif
                                    </div>
                                </div>
                                <div>
                                    <div class="gc-sub-label">Finish</div>
                                    <div class="gc-field">
                                        @if ($userinfo->lastname == 'IN')
                                            <input type="time" id="add_finish" onchange="addModal_calculatePoints()"
                                                style="padding-left:4px;">
                                            <input type="hidden" id="add_finish_full" name="finish">
                                        @else
                                            <input type="datetime-local" id="add_finish" name="finish"
                                                onchange="addModal_calculatePoints()" style="padding-left:4px;">
                                        @endif
                                    </div>
                                </div>
                            </div>

                            {{-- Status --}}
                            <div class="gc-field-group">
                                <div class="gc-sub-label">Status *</div>
                                <div class="gc-field has-dropdown" id="add_dstatus_field"
                                    onclick="addModal_toggleDropdown(event, 'add_dstatus_field')" tabindex="0"
                                    onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();addModal_toggleDropdown(event, 'add_dstatus_field');}">
                                    <i class="far fa-check-circle icon-left"></i>
                                    <div class="gc-select-display" id="add_dstatus_display">Pilih status...</div>
                                    <input type="hidden" id="add_dstatus" name="dstatus" value="">
                                    <div class="gc-select-options">
                                        <div class="gc-option" tabindex="0"
                                            onclick="addModal_selectOption(event, 'add_dstatus_field', 'add_dstatus', '', 'Pilih status...', 'addModal_changeStatus')"
                                            onkeydown="if(event.key==='Enter'){addModal_selectOption(event, 'add_dstatus_field', 'add_dstatus', '', 'Pilih status...', 'addModal_changeStatus');}">
                                            Pilih status...</div>
                                        @foreach ($status as $s)
                                            <div class="gc-option" tabindex="0"
                                                onclick="addModal_selectOption(event, 'add_dstatus_field', 'add_dstatus', '{{ $s->value }}', '{{ $s->name }}', 'addModal_changeStatus')"
                                                onkeydown="if(event.key==='Enter'){addModal_selectOption(event, 'add_dstatus_field', 'add_dstatus', '{{ $s->value }}', '{{ $s->name }}', 'addModal_changeStatus');}">
                                                {{ $s->name }}</div>
                                        @endforeach
                                    </div>
                                    <i class="fas fa-chevron-down icon-right"></i>
                                </div>
                            </div>

                            {{-- Poin --}}
                            <div class="gc-poin-box">
                                <div class="gc-poin-header">
                                    <i class="fas fa-star"></i>
                                    <span>POIN (AUTO)</span>
                                    <i class="fas fa-info-circle" tabindex="0" role="button" data-bs-toggle="popover"
                                        data-bs-trigger="focus" data-bs-html="true" data-bs-placement="right"
                                        data-bs-title="Kategori Poin"
                                        data-bs-content="<ul style='padding-left:14px;font-size:.78rem;margin:0'>
                                            <li>&lt;15 Mnt: 0.1</li><li>15-30 Mnt: 0.2</li>
                                            <li>31-60 Mnt: 0.5</li><li>1-2 Jam: 1</li>
                                            <li>2-4 Jam: 2</li><li>4-8 Jam: 3</li>
                                            <li>1-2 Hari: 5</li><li>2-4 Hari: 8</li>
                                            <li>4-8 Hari: 13</li><li>&gt;8 Hari: 21</li>
                                        </ul>"></i>
                                </div>
                                <input type="text" class="gc-poin-value" id="add_dpoin" name="dpoin" readonly
                                    placeholder="—">
                            </div>

                            {{-- Lampiran --}}
                            <div class="gc-field-group" style="margin-top:14px;">
                                <div class="gc-sub-label">Lampiran</div>
                                <div class="gc-field" style="padding-right:0;">
                                    <i class="fas fa-paperclip icon-left"></i>
                                    <input type="file" id="add_dimage" name="dimage" accept=".jpg,.jpeg,.png"
                                        style="line-height:1.5;">
                                </div>
                                <div style="font-size:.75rem;color:#94a3b8;margin-top:4px;">
                                    Maks. 3 MB &middot; JPG, JPEG, PNG
                                </div>
                            </div>

                            <div class="pb-2 mt-3">
                                <small class="text-muted" style="font-size:.82rem;">(<code>*</code>) Wajib diisi</small>
                            </div>

                        </div>{{-- end #addDailyMainView --}}

                        {{-- ═══════════ VIEW: KATEGORI PICKER ═══════════ --}}
                        <div id="addKategoriPickerView" style="display:none;">
                            <div class="gc-picker-header">
                                <button type="button" class="gc-back-btn" onclick="addModal_showPicker(null)">
                                    <i class="fas fa-arrow-left"></i>
                                </button>
                                <h6><i class="fas fa-tags me-2 text-primary"></i>Pilih Kategori</h6>
                            </div>
                            <div class="gc-picker-body">
                                <div class="table-responsive">
                                    <table id="tableAddKategori"
                                        class="table table-bordered table-striped table-hover table-sm">
                                        <thead style="background:#daecff;">
                                            <tr>
                                                <th style="width:40px;"></th>
                                                <th>Kategori</th>
                                                <th>Detail Kategori</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($kategori as $kat)
                                                <tr style="cursor:pointer;"
                                                    onclick="addModal_selectKategori('{{ $kat->id }}','{{ addslashes($kat->detail) }}','{{ addslashes($kat->kategoriname) }}','{{ $kat->kategori }}')">
                                                    <td class="text-center text-primary">
                                                        <i class="fas fa-check-circle"></i>
                                                    </td>
                                                    <td>{{ $kat->kategoriname }}</td>
                                                    <td>{{ $kat->detail }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        {{-- ═══════════ VIEW: USER PICKER ═══════════ --}}
                        <div id="addUserPickerView" style="display:none;">
                            <div class="gc-picker-header">
                                <button type="button" class="gc-back-btn" onclick="addModal_showPicker(null)">
                                    <i class="fas fa-arrow-left"></i>
                                </button>
                                <h6><i class="fas fa-users me-2 text-primary"></i>Pilih User</h6>
                            </div>
                            <div class="gc-picker-body">
                                <div class="table-responsive">
                                    <table id="tableAddUser"
                                        class="table table-bordered table-striped table-hover table-sm">
                                        <thead style="background:#daecff;">
                                            <tr>
                                                <th style="width:40px;"></th>
                                                <th>Nama</th>
                                                <th>Departemen</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($users as $user)
                                                @if ($user->isactive == '1')
                                                    <tr style="cursor:pointer;"
                                                        onclick="addModal_selectUser('{{ $user->nik }}','{{ addslashes($user->nama) }}','{{ $user->id_departemen }}','{{ addslashes($user->namedept) }}')">
                                                        <td class="text-center text-primary">
                                                            <i class="fas fa-check-circle"></i>
                                                        </td>
                                                        <td>{{ $user->nama }}</td>
                                                        <td>{{ $user->namedept }}</td>
                                                    </tr>
                                                @endif
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        {{-- ═══════════ VIEW: REQBY PICKER ═══════════ --}}
                        <div id="addReqbyPickerView" style="display:none;">
                            <div class="gc-picker-header">
                                <button type="button" class="gc-back-btn" onclick="addModal_showPicker(null)">
                                    <i class="fas fa-arrow-left"></i>
                                </button>
                                <h6><i class="fas fa-user-tie me-2 text-primary"></i>Pilih Request By</h6>
                            </div>
                            <div class="gc-picker-body">
                                <div class="table-responsive">
                                    <table id="tableAddReqby"
                                        class="table table-bordered table-striped table-hover table-sm">
                                        <thead style="background:#daecff;">
                                            <tr>
                                                <th style="width:40px;"></th>
                                                <th>Nama</th>
                                                <th>Username</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @if (isset($reqby))
                                                @foreach ($reqby as $req)
                                                    <tr style="cursor:pointer;"
                                                        onclick="addModal_selectReqby('{{ $req->uname }}','{{ addslashes($req->nama) }}')">
                                                        <td class="text-center text-primary">
                                                            <i class="fas fa-check-circle"></i>
                                                        </td>
                                                        <td>{{ $req->nama }}</td>
                                                        <td>{{ $req->uname }}</td>
                                                    </tr>
                                                @endforeach
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>



                    </form>
                </div>{{-- end .modal-body --}}

                {{-- FOOTER --}}
                <div class="modal-footer" id="addDailyFooter">
                    <button type="button" class="btn gc-btn-cancel" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn gc-btn-save" id="addDailySaveBtn" onclick="submitAddDailyModal()">
                        Simpan
                    </button>
                </div>
            </div>
        </div>
    </div>

    @php
        $acKategoriData = $kategori
            ->map(
                fn($k) => [
                    'id' => $k->id,
                    'idkat' => $k->kategori,
                    'kategoriname' => $k->kategoriname,
                    'detail' => $k->detail,
                    'label' => $k->kategoriname . ' - ' . $k->detail,
                ],
            )
            ->values()
            ->toArray();

        $acUserData = $users
            ->where('isactive', '1')
            ->values()
            ->map(
                fn($u) => [
                    'nik' => $u->nik,
                    'nama' => $u->nama,
                    'iddept' => $u->id_departemen,
                    'namedept' => $u->namedept,
                    'label' => $u->nama . ' - ' . $u->namedept,
                ],
            )
            ->values()
            ->toArray();

        $acReqbyData = isset($reqby)
            ? collect($reqby)
                ->map(
                    fn($r) => [
                        'uname' => $r->uname,
                        'nama' => $r->nama,
                        'label' => $r->nama . ' - ' . $r->uname,
                    ],
                )
                ->values()
                ->toArray()
            : [];
    @endphp

    <script>
        (function() {
            'use strict';
            let dtAddKategori, dtAddUser, dtAddReqby;

            document.addEventListener('DOMContentLoaded', function() {
                $('#add_dticket_id').select2({
                    width: '100%',
                    placeholder: 'Pilih ID Ticket',
                    allowClear: true,
                    dropdownParent: $('#modalAddDaily')
                }).on('change', addModal_loadTicketDetail);

                const dtOpts = {
                    language: {
                        search: 'Cari:',
                        lengthMenu: '_MENU_ baris',
                        zeroRecords: 'Tidak ada data',
                        info: '_START_-_END_ / _TOTAL_',
                        infoEmpty: 'Kosong',
                        infoFiltered: '(dari _MAX_)'
                    },
                    destroy: true,
                    ordering: false,
                    responsive: true,
                    pageLength: 10
                };
                dtAddKategori = $('#tableAddKategori').DataTable(dtOpts);
                dtAddUser = $('#tableAddUser').DataTable({
                    ...dtOpts,
                    ordering: true
                });
                dtAddReqby = $('#tableAddReqby').DataTable({
                    ...dtOpts,
                    ordering: true
                });


                // Init popovers inside the modal
                document.getElementById('modalAddDaily')
                    ?.querySelectorAll('[data-bs-toggle="popover"]')
                    .forEach(el => new bootstrap.Popover(el, {
                        trigger: 'focus',
                        html: true
                    }));
            });

            window.addModal_showPicker = function(pickerName) {
                const mainView = document.getElementById('addDailyMainView');
                const footer = document.getElementById('addDailyFooter');
                const pickerViews = ['addKategoriPickerView', 'addUserPickerView', 'addReqbyPickerView'];

                mainView.style.display = 'none';
                pickerViews.forEach(id => {
                    const el = document.getElementById(id);
                    if (el) el.style.display = 'none';
                });

                if (!pickerName) {
                    mainView.style.display = '';
                    if (footer) footer.style.display = '';
                } else {
                    if (footer) footer.style.display = 'none';
                    const map = {
                        kategori: 'addKategoriPickerView',
                        user: 'addUserPickerView',
                        reqby: 'addReqbyPickerView'
                    };
                    const viewEl = document.getElementById(map[pickerName]);
                    if (viewEl) {
                        viewEl.style.display = '';
                        setTimeout(() => {
                            const inp = viewEl.querySelector('.dataTables_filter input');
                            if (inp) inp.focus();
                        }, 80);
                    }
                }
            };

            window.addModal_syncKet = function(obj) {
                document.getElementById('add_dket').value = obj.value;
                const ctr = document.getElementById('add_ket_count');
                if (ctr) ctr.textContent = obj.value.length;
                obj.style.borderBottomColor = obj.value.length >= 50 ? '#ef4444' : 'transparent';
            };

            window.addModal_getFullDatetime = function(inputId) {
                const val = document.getElementById(inputId)?.value;
                if (!val) return '';
                const jabatan = document.getElementById('jabatan')?.value;
                if (jabatan === 'IN') {
                    const dateStr = document.getElementById('add_ddate').value;
                    return dateStr + 'T' + val;
                }
                return val;
            };

            window.addModal_toggleDropdown = function(e, id) {
                e.stopPropagation();
                const field = document.getElementById(id);
                const isActive = field.classList.contains('active');
                document.querySelectorAll('.gc-field.has-dropdown').forEach(el => el.classList.remove('active'));
                if (!isActive) field.classList.add('active');
            };

            window.addModal_selectOption = function(e, fieldId, inputId, value, text, onChangeFunc) {
                e.stopPropagation();
                document.getElementById(fieldId).classList.remove('active');
                document.getElementById(inputId).value = value;
                document.getElementById(inputId + '_display').textContent = text;
                if (onChangeFunc) {
                    window[onChangeFunc]();
                }
            };

            document.addEventListener('click', function() {
                document.querySelectorAll('.gc-field.has-dropdown').forEach(el => el.classList.remove(
                    'active'));
            });

            window.addModal_changeStatus = function() {
                const status = document.getElementById('add_dstatus').value;
                const startEl = document.getElementById('add_start');
                const finEl = document.getElementById('add_finish');
                const dateStr = document.getElementById('add_ddate').value;
                const now = new Date();
                const pad = n => String(n).padStart(2, '0');
                const jabatan = document.getElementById('jabatan').value;

                const currentTime = `${pad(now.getHours())}:${pad(now.getMinutes())}`;
                const defaultDateTime = jabatan === 'IN' ?
                    currentTime :
                    `${dateStr}T${currentTime}`;

                if (status === 'D') {
                    startEl.value = '';
                    finEl.value = '';
                } else if (status === 'P') {
                    if (!startEl.value) startEl.value = defaultDateTime;
                } else if (status === 'C') {
                    if (!startEl.value) startEl.value = defaultDateTime;
                    if (!finEl.value) finEl.value = defaultDateTime;
                }
                addModal_calculatePoints();
            };

            window.addModal_onStartChange = function() {
                const jabatan = document.getElementById('jabatan').value;
                const startEl = document.getElementById('add_start');
                const finEl = document.getElementById('add_finish');
                const full = addModal_getFullDatetime('add_start');
                if (full) {
                    if (jabatan === 'IN') {
                        finEl.min = startEl.value;
                        finEl.max = '23:59';
                        if (finEl.value && finEl.value <= startEl.value) finEl.value = '';
                    } else {
                        finEl.min = full;
                        finEl.removeAttribute('max');
                    }
                }
                addModal_calculatePoints();
            };

            window.addModal_calculatePoints = function() {
                const s = addModal_getFullDatetime('add_start');
                const f = addModal_getFullDatetime('add_finish');
                const poinEl = document.getElementById('add_dpoin');
                if (!s || !f) {
                    poinEl.value = '';
                    return;
                }
                const sd = new Date(s),
                    fd = new Date(f);
                if (fd <= sd) {
                    poinEl.value = '0';
                    return;
                }

                const useNew = sd >= new Date('2025-05-01');
                let totalWH = 0;
                let cur = new Date(sd);
                while (cur <= fd) {
                    cur.setHours(0, 0, 0, 0);
                    const cd = fmtLocalYmd(cur);
                    const dow = cur.getDay();
                    const isH = Object.prototype.hasOwnProperty.call(HOLIDAY_MAP, cd);
                    if (dow !== 0 && dow !== 6 && !isH) {
                        const wS = new Date(cur);
                        wS.setHours(8, 0, 0, 0);
                        const wE = new Date(cur);
                        wE.setHours(17, 0, 0, 0);
                        const lS = new Date(cur);
                        lS.setHours(12, 0, 0, 0);
                        const lE = new Date(cur);
                        lE.setHours(13, 0, 0, 0);
                        const dS = sd > wS ? sd : wS;
                        const dE = fd < wE ? fd : wE;
                        if (dE > dS) {
                            let wh = (dE - dS) / 3600000;
                            if (dS < lE && dE > lS) wh -= 1;
                            totalWH += wh;
                        }
                    }
                    cur.setDate(cur.getDate() + 1);
                    cur.setHours(8, 0, 0, 0);
                }

                let pt;
                if (useNew) {
                    const m = totalWH * 60;
                    if (m < 15) pt = '0.1';
                    else if (m <= 30) pt = '0.2';
                    else if (m <= 60) pt = '0.5';
                    else if (m <= 120) pt = '1';
                    else if (m <= 240) pt = '2';
                    else if (m <= 480) pt = '3';
                    else if (m <= 960) pt = '5';
                    else if (m <= 1920) pt = '8';
                    else if (m <= 3840) pt = '13';
                    else pt = '21';
                } else {
                    if (totalWH < 1) pt = '0.2';
                    else if (totalWH <= 2) pt = '1';
                    else if (totalWH <= 4) pt = '2';
                    else if (totalWH <= 8) pt = '3';
                    else if (totalWH <= 16) pt = '5';
                    else if (totalWH <= 32) pt = '8';
                    else pt = '13';
                }
                poinEl.value = pt;
            };

            // ── Picker selectors (called from table row onclick) ─────────────
            window.addModal_selectKategori = function(id, detail, kategoriname, idkat) {
                document.getElementById('add_dkategori').value = idkat;
                document.getElementById('add_ddetkat').value = id;
                document.getElementById('add_ddetkatname').value = kategoriname + ' - ' + detail;
                acKategori_hideList();
                addModal_showPicker(null); // back to main form
            };

            window.addModal_selectUser = function(nik, nama, iddept, dept) {
                document.getElementById('add_duser').value = nik;
                document.getElementById('add_dusername').value = nama + ' - ' + dept;
                document.getElementById('add_ddept').value = iddept;
                acUser_hideList();
                addModal_showPicker(null);
            };

            window.addModal_selectReqby = function(uname, nama) {
                document.getElementById('add_dreqby').value = uname;
                document.getElementById('add_dreqbyname').value = nama;
                if (typeof acReqby_hideList === 'function') {
                    acReqby_hideList();
                }
                addModal_showPicker(null);
            };

            const AC_KATEGORI_DATA = @json($acKategoriData);

            let acKatIndex = -1;

            function acKategori_highlight(text, q) {
                if (!q) return text;
                const esc = q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                return text.replace(new RegExp('(' + esc + ')', 'gi'), '<span class="ac-highlight">$1</span>');
            }

            function acKategori_renderList(items, q) {
                const list = document.getElementById('ac_list_kategori');
                list.innerHTML = '';
                acKatIndex = -1;
                if (!items.length) {
                    list.innerHTML =
                        '<div class="gc-autocomplete-empty"><i class="fas fa-search me-1"></i>Tidak ditemukan</div>';
                    list.classList.add('show');
                    return;
                }
                items.forEach((item, i) => {
                    const div = document.createElement('div');
                    div.className = 'gc-autocomplete-item';
                    div.innerHTML = acKategori_highlight(item.label, q);
                    div.dataset.idx = i;
                    div.addEventListener('mousedown', function(e) {
                        e.preventDefault();
                        acKategori_select(item);
                    });
                    list.appendChild(div);
                });
                list.classList.add('show');
            }

            function acKategori_select(item) {
                document.getElementById('add_dkategori').value = item.idkat;
                document.getElementById('add_ddetkat').value = item.id;
                document.getElementById('add_ddetkatname').value = item.label;
                acKategori_hideList();
            }

            function acKategori_hideList() {
                const list = document.getElementById('ac_list_kategori');
                if (list) {
                    list.classList.remove('show');
                    list.innerHTML = '';
                }
                acKatIndex = -1;
            }

            window.acKategori_onInput = function(inp) {
                const q = inp.value.trim().toLowerCase();
                if (!q) {
                    acKategori_hideList();
                    return;
                }
                const filtered = AC_KATEGORI_DATA.filter(d =>
                    d.label.toLowerCase().includes(q)
                ).slice(0, 20);
                acKategori_renderList(filtered, q);
            };

            window.acKategori_onFocus = function(inp) {
                const q = inp.value.trim().toLowerCase();
                if (q) {
                    const filtered = AC_KATEGORI_DATA.filter(d =>
                        d.label.toLowerCase().includes(q)
                    ).slice(0, 20);
                    acKategori_renderList(filtered, q);
                }
            };

            window.acKategori_onKeydown = function(e) {
                const list = document.getElementById('ac_list_kategori');
                const items = list.querySelectorAll('.gc-autocomplete-item');
                if (!list.classList.contains('show') || !items.length) return;
                if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    acKatIndex = Math.min(acKatIndex + 1, items.length - 1);
                    items.forEach((el, i) => el.classList.toggle('active', i === acKatIndex));
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    acKatIndex = Math.max(acKatIndex - 1, 0);
                    items.forEach((el, i) => el.classList.toggle('active', i === acKatIndex));
                } else if (e.key === 'Enter') {
                    e.preventDefault();
                    if (acKatIndex >= 0 && items[acKatIndex]) items[acKatIndex].dispatchEvent(new MouseEvent(
                        'mousedown'));
                } else if (e.key === 'Escape') {
                    acKategori_hideList();
                }
            };

            const AC_USER_DATA = @json($acUserData);

            let acUserIndex = -1;

            function acUser_highlight(text, q) {
                if (!q) return text;
                const esc = q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                return text.replace(new RegExp('(' + esc + ')', 'gi'), '<span class="ac-highlight">$1</span>');
            }

            function acUser_renderList(items, q) {
                const list = document.getElementById('ac_list_user');
                list.innerHTML = '';
                acUserIndex = -1;
                if (!items.length) {
                    list.innerHTML =
                        '<div class="gc-autocomplete-empty"><i class="fas fa-search me-1"></i>Tidak ditemukan</div>';
                    list.classList.add('show');
                    return;
                }
                items.forEach((item, i) => {
                    const div = document.createElement('div');
                    div.className = 'gc-autocomplete-item';
                    div.innerHTML = acUser_highlight(item.label, q);
                    div.dataset.idx = i;
                    div.addEventListener('mousedown', function(e) {
                        e.preventDefault();
                        acUser_select(item);
                    });
                    list.appendChild(div);
                });
                list.classList.add('show');
            }

            function acUser_select(item) {
                document.getElementById('add_duser').value = item.nik;
                document.getElementById('add_dusername').value = item.label;
                document.getElementById('add_ddept').value = item.iddept;
                acUser_hideList();
            }

            function acUser_hideList() {
                const list = document.getElementById('ac_list_user');
                if (list) {
                    list.classList.remove('show');
                    list.innerHTML = '';
                }
                acUserIndex = -1;
            }

            window.acUser_onInput = function(inp) {
                const q = inp.value.trim().toLowerCase();
                document.getElementById('add_duser').value = '';
                document.getElementById('add_ddept').value = '';
                if (!q) {
                    acUser_hideList();
                    return;
                }
                const filtered = AC_USER_DATA.filter(d =>
                    d.label.toLowerCase().includes(q)
                ).slice(0, 20);
                acUser_renderList(filtered, q);
            };

            window.acUser_onFocus = function(inp) {
                const q = inp.value.trim().toLowerCase();
                if (q) {
                    const filtered = AC_USER_DATA.filter(d =>
                        d.label.toLowerCase().includes(q)
                    ).slice(0, 20);
                    acUser_renderList(filtered, q);
                }
            };

            window.acUser_onKeydown = function(e) {
                const list = document.getElementById('ac_list_user');
                const items = list.querySelectorAll('.gc-autocomplete-item');
                if (!list.classList.contains('show') || !items.length) return;
                if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    acUserIndex = Math.min(acUserIndex + 1, items.length - 1);
                    items.forEach((el, i) => el.classList.toggle('active', i === acUserIndex));
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    acUserIndex = Math.max(acUserIndex - 1, 0);
                    items.forEach((el, i) => el.classList.toggle('active', i === acUserIndex));
                } else if (e.key === 'Enter') {
                    e.preventDefault();
                    if (acUserIndex >= 0 && items[acUserIndex]) items[acUserIndex].dispatchEvent(new MouseEvent(
                        'mousedown'));
                } else if (e.key === 'Escape') {
                    acUser_hideList();
                }
            };

            const AC_REQBY_DATA = @json($acReqbyData ?? []);

            let acReqbyIndex = -1;

            function acReqby_highlight(text, q) {
                if (!q) return text;
                const esc = q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                return text.replace(new RegExp('(' + esc + ')', 'gi'), '<span class="ac-highlight">$1</span>');
            }

            function acReqby_renderList(items, q) {
                const list = document.getElementById('ac_list_reqby');
                if (!list) return;
                list.innerHTML = '';
                acReqbyIndex = -1;
                if (!items.length) {
                    list.innerHTML =
                        '<div class="gc-autocomplete-empty"><i class="fas fa-search me-1"></i>Tidak ditemukan</div>';
                    list.classList.add('show');
                    return;
                }
                items.forEach((item, i) => {
                    const div = document.createElement('div');
                    div.className = 'gc-autocomplete-item';
                    div.innerHTML = acReqby_highlight(item.label, q);
                    div.dataset.idx = i;
                    div.addEventListener('mousedown', function(e) {
                        e.preventDefault();
                        acReqby_select(item);
                    });
                    list.appendChild(div);
                });
                list.classList.add('show');
            }

            function acReqby_select(item) {
                document.getElementById('add_dreqby').value = item.uname;
                document.getElementById('add_dreqbyname').value = item.nama;
                acReqby_hideList();
            }

            function acReqby_hideList() {
                const list = document.getElementById('ac_list_reqby');
                if (list) {
                    list.classList.remove('show');
                    list.innerHTML = '';
                }
                acReqbyIndex = -1;
            }

            window.acReqby_onInput = function(inp) {
                const q = inp.value.trim().toLowerCase();
                document.getElementById('add_dreqby').value = '';
                if (!q) {
                    acReqby_hideList();
                    return;
                }
                const filtered = AC_REQBY_DATA.filter(d =>
                    d.label.toLowerCase().includes(q)
                ).slice(0, 20);
                acReqby_renderList(filtered, q);
            };

            window.acReqby_onFocus = function(inp) {
                const q = inp.value.trim().toLowerCase();
                if (q) {
                    const filtered = AC_REQBY_DATA.filter(d =>
                        d.label.toLowerCase().includes(q)
                    ).slice(0, 20);
                    acReqby_renderList(filtered, q);
                }
            };

            window.acReqby_onKeydown = function(e) {
                const list = document.getElementById('ac_list_reqby');
                if (!list) return;
                const items = list.querySelectorAll('.gc-autocomplete-item');
                if (!list.classList.contains('show') || !items.length) return;
                if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    acReqbyIndex = Math.min(acReqbyIndex + 1, items.length - 1);
                    items.forEach((el, i) => el.classList.toggle('active', i === acReqbyIndex));
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    acReqbyIndex = Math.max(acReqbyIndex - 1, 0);
                    items.forEach((el, i) => el.classList.toggle('active', i === acReqbyIndex));
                } else if (e.key === 'Enter') {
                    e.preventDefault();
                    if (acReqbyIndex >= 0 && items[acReqbyIndex]) items[acReqbyIndex].dispatchEvent(new MouseEvent(
                        'mousedown'));
                } else if (e.key === 'Escape') {
                    acReqby_hideList();
                }
            };

            document.addEventListener('click', function(e) {
                if (!e.target.closest('#gc_field_kategori')) acKategori_hideList();
                if (!e.target.closest('#gc_field_user')) acUser_hideList();
                if (!e.target.closest('#gc_field_reqby')) {
                    if (typeof acReqby_hideList === 'function') acReqby_hideList();
                }
            });

            const ADD_URGENCY_LABELS = @json($urgency->pluck('name', 'value'));

            function addModal_setSelectValue(inputId, displayId, value) {
                const normalizedValue = value == null ? '' : String(value);
                const input = document.getElementById(inputId);
                const display = document.getElementById(displayId);
                if (input) input.value = normalizedValue;
                if (display) display.textContent = ADD_URGENCY_LABELS[normalizedValue] || 'Pilih...';
            }

            async function addModal_loadTicketDetail() {
                const ticketInput = document.getElementById('add_dticket_id');
                const loadingIcon = document.getElementById('add_ticket_loading');
                const ticketId = ticketInput ? ticketInput.value.trim() : '';
                if (!ticketId) return;

                ticketInput.setCustomValidity('');
                ticketInput.readOnly = true;
                loadingIcon?.classList.remove('d-none');

                try {
                    const ticketUrl = @json(url('/dailya/ticket'));
                    const response = await fetch(`${ticketUrl}/${encodeURIComponent(ticketId)}`, {
                        headers: {
                            'Accept': 'application/json'
                        }
                    });
                    const result = await response.json();
                    if (!response.ok) throw new Error(result.message || 'Data ticket gagal dimuat.');

                    const ticket = result.data;
                    const ket = ticket.keterangan || '';
                    document.getElementById('add_dket').value = ket;
                    document.getElementById('add_dket_display').value = ket;
                    document.getElementById('add_ket_count').textContent = ket.length;
                    document.getElementById('add_dkategori').value = ticket.kategori || '';
                    document.getElementById('add_ddetkat').value = ticket.detkat || '';
                    document.getElementById('add_ddetkatname').value = [ticket.kategori_name, ticket.detkat_name]
                        .filter(Boolean).join(' - ');
                    document.getElementById('add_duser').value = ticket.user || '';
                    document.getElementById('add_ddept').value = ticket.dept || '';
                    document.getElementById('add_dusername').value = [ticket.user_name, ticket.dept_name]
                        .filter(Boolean).join(' - ');
                    addModal_setSelectValue('add_ddampak', 'add_ddampak_display', ticket.dampak);
                    addModal_setSelectValue('add_durgency', 'add_durgency_display', ticket.urgency);

                    const reqby = document.getElementById('add_dreqby');
                    const reqbyName = document.getElementById('add_dreqbyname');
                    if (reqby) reqby.value = ticket.reqby || '';
                    if (reqbyName) reqbyName.value = ticket.reqby_name || '';
                } catch (error) {
                    ticketInput.setCustomValidity(error.message);
                    Swal.fire({
                        icon: 'error',
                        title: 'Ticket tidak dapat digunakan',
                        text: error.message
                    });
                    ticketInput.focus();
                } finally {
                    ticketInput.readOnly = false;
                    loadingIcon?.classList.add('d-none');
                }
            }

            const addTicketInput = document.getElementById('add_dticket_id');
            if (addTicketInput) {
                addTicketInput.addEventListener('input', function() {
                    this.setCustomValidity('');
                });
                addTicketInput.addEventListener('keydown', function(event) {
                    if (event.key === 'Enter') {
                        event.preventDefault();
                        addModal_loadTicketDetail();
                    }
                });
            }

            window.addModal_reset = function(dateStr) {
                document.getElementById('add_ddate').value = dateStr;
                const p = dateStr.split('-');
                const d = new Date(+p[0], +p[1] - 1, +p[2]);
                document.getElementById('addDailyHeaderDate').textContent =
                    d.toLocaleDateString('id-ID', {
                        weekday: 'long',
                        year: 'numeric',
                        month: 'long',
                        day: 'numeric'
                    });
                document.getElementById('addDailyForm').reset();
                document.getElementById('add_ddate').value = dateStr;
                const dispKet = document.getElementById('add_dket_display');
                if (dispKet) {
                    dispKet.value = '';
                    dispKet.style.borderBottomColor = 'transparent';
                }
                document.getElementById('add_dket').value = '';
                const ctr = document.getElementById('add_ket_count');
                if (ctr) ctr.textContent = '0';
                ['add_dkategori', 'add_ddetkat', 'add_ddetkatname',
                    'add_duser', 'add_ddept', 'add_dusername', 'add_dpoin', 'add_dstatus', 'add_dticket_id'
                ].forEach(id => {
                    const el = document.getElementById(id);
                    if (el) el.value = '';
                });
                const ticketInput = document.getElementById('add_dticket_id');
                if (ticketInput) {
                    ticketInput.readOnly = false;
                    ticketInput.setCustomValidity('');
                    $('#add_dticket_id').val('').trigger('change.select2');
                }
                document.getElementById('add_ticket_loading')?.classList.add('d-none');
                acKategori_hideList();
                acUser_hideList();

                if (document.getElementById('add_ddampak_display')) document.getElementById('add_ddampak_display')
                    .textContent = 'Low';
                if (document.getElementById('add_durgency_display')) document.getElementById('add_durgency_display')
                    .textContent = 'Low';
                if (document.getElementById('add_dstatus_display')) document.getElementById('add_dstatus_display')
                    .textContent = 'Pilih status...';

                if (document.getElementById('add_ddampak')) document.getElementById('add_ddampak').value = '1';
                if (document.getElementById('add_durgency')) document.getElementById('add_durgency').value = '1';

                if (document.getElementById('add_dreqby')) document.getElementById('add_dreqby').value =
                    '{{ $mentor->mentor_username ?? '' }}';
                if (document.getElementById('add_dreqbyname')) document.getElementById('add_dreqbyname').value =
                    '{{ $mentor->mentor_firstname ?? '' }}';


                const now = new Date();
                const pad = n => String(n).padStart(2, '0');
                const currentTime = `${pad(now.getHours())}:${pad(now.getMinutes())}`;

                ['add_finish'].forEach(id => {
                    const el = document.getElementById(id);
                    if (el) el.value = '';
                });
                const startEl = document.getElementById('add_start');
                if (startEl) {
                    const jabatan = document.getElementById('jabatan')?.value;
                    startEl.value = (jabatan === 'IN') ? currentTime : `${dateStr}T${currentTime}`;
                }
                addModal_showPicker(null);
            };

            window.submitAddDailyModal = function() {
                const ket = document.getElementById('add_dket').value.trim();
                const detkat = document.getElementById('add_ddetkat').value;
                const user = document.getElementById('add_duser').value;
                const dept = document.getElementById('add_ddept').value;
                const dampak = document.getElementById('add_ddampak').value;
                const urgency = document.getElementById('add_durgency').value;
                const status = document.getElementById('add_dstatus').value;
                const detail = document.getElementById('add_dpengerjaan').value.trim();

                const jabatan = document.getElementById('jabatan')?.value;
                if (jabatan === 'IN') {
                    const startFullEl = document.getElementById('add_start_full');
                    if (startFullEl) startFullEl.value = addModal_getFullDatetime('add_start');

                    const finishFullEl = document.getElementById('add_finish_full');
                    if (finishFullEl) finishFullEl.value = addModal_getFullDatetime('add_finish');
                }

                const btn = document.getElementById('addDailySaveBtn');
                const orig = btn.innerHTML;
                btn.disabled = true;
                btn.innerHTML =
                    '<span class="spinner-border spinner-border-sm me-1" style="width:14px;height:14px;"></span>Menyimpan...';

                $.ajax({
                    url: '{{ URL::to($url_menu) }}',
                    type: 'POST',
                    data: new FormData(document.getElementById('addDailyForm')),
                    contentType: false,
                    processData: false,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    success: function(res) {
                        btn.disabled = false;
                        btn.innerHTML = orig;
                        bootstrap.Modal.getInstance(document.getElementById('modalAddDaily'))?.hide();
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: res.message || 'Daily Activity berhasil ditambah!',
                            confirmButtonColor: '#1a73e8',
                            timer: 2000,
                            timerProgressBar: true
                        });
                        if (typeof calendar !== 'undefined' && calendar) calendar.refetchEvents();
                        if (typeof searchTransactions === 'function') searchTransactions();
                    },
                    error: function(xhr) {
                        btn.disabled = false;
                        btn.innerHTML = orig;
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal!',
                            text: xhr.responseJSON?.message || 'Gagal menyimpan data.',
                            confirmButtonColor: '#d33'
                        });
                    }
                });
            };

        }());
    </script>
@endsection