@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @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-04">
                                            </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-04">
                                            </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-body">
                            <p class="text-uppercase text-sm">List {{ $title_menu }} - Internship</p>
                            <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>
    @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-body">
                        <p class="text-uppercase text-sm">List {{ $title_menu }}</p>
                        <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</code>
                                </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 -->
                        @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>
                                        @foreach ($it_users ?? [] as $user)
                                            <option value="{{ $user->username }}">
                                                {{ $user->firstname }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        @endif

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

                            </div>
                            <div class="col-lg">
                                <div class="nav-wrapper" id="noted">
                                    <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 kecil -->
                                    <span class="mx-2">|</span>

                                    <!-- Legend identitas -->
                                    {{-- <span class="legend-chip legend-intern" aria-label="Internship"></span> Internship --}}
                                    <span class="legend-chip legend-owner ms-3" aria-label="Owner"></span> Owner (You)
                                </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>
        /* 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;
        }

        .fc-event.fc-intern {
            /* Warna solid tanpa pola diagonal - sama seperti owner */
            /* border-left akan diset dinamis sesuai warna status */
        }

        /* sedikit aksen untuk owner (opsional) */
        .fc-event.fc-owner {
            box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
        }

        /* 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 */
        }

        /* Owner: warna solid penuh (background-color) akan diset dinamis sesuai warna user */
        .legend-owner {
            border: 1px solid rgba(0, 0, 0, .2);
            background-color: #6f42c1;
            /* default ungu, akan diubah oleh JS */
        }
    </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,
            });

            // Mendapatkan tanggal hari ini dalam waktu lokal
            var today = new Date();

            // Mendapatkan tanggal 1 bulan ini dalam waktu lokal
            var firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);

            // Format tanggal ke format YYYY-MM-DD secara manual untuk menghindari masalah zona waktu
            var formattedToday = today.getFullYear() + '-' +
                String(today.getMonth() + 1).padStart(2, '0') + '-' +
                String(today.getDate()).padStart(2, '0');

            var formattedFirstDay = firstDayOfMonth.getFullYear() + '-' +
                String(firstDayOfMonth.getMonth() + 1).padStart(2, '0') + '-' +
                String(firstDayOfMonth.getDate()).padStart(2, '0');

            // Tetapkan nilai default pada input
            $("input[name='start-date']").val(formattedFirstDay); // Default: Tanggal 1 bulan ini
            $("input[name='end-date']").val(formattedToday); // Default: Hari ini

            searchTransactions(formattedFirstDay, formattedToday);
        });

        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
            if (id === '' && (sdate === '' || edate === '')) {
                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


                // 2. Tambah row ke DataTable
                const row = table.row.add([
                    `<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.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();

                // 4. Kalau kondisi reject terpenuhi → kasih class warna
                if (isRejected) {
                    $(rowNode).css('background-color', '#fee2e2');
                }


            });
            // 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);
        }

        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
            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}`;

            // 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 finishTimeOnly = `${hours}:${minutes}`;

            // 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="${startDateOnly}" ${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="${calculatePoints(start, today)}" 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'));

        // Variabel global untuk menyimpan warna legend internship (warna user yang login)
        var INTERNSHIP_LEGEND_COLOR = '#6f42c1'; // Default ungu

        // Setiap user dapat warna unik
        function getUserColor(username) {
            if (!username) return '#6c757d';

            // Hash username
            let hash = 0;
            for (let i = 0; i < username.length; i++) {
                hash = username.charCodeAt(i) + ((hash << 5) - hash);
            }

            // Base colors (15 hue berbeda)
            const baseColors = [
                '#FF6B6B', '#E74C3C', '#FFA07A', '#FF8C42',
                '#FFD93D', '#F39C12', '#9B59B6', '#8E44AD',
                '#E91E63', '#FF69B4', '#C0392B', '#D35400',
                '#8B4513', '#795548', '#607D8B',
            ];

            // Variasi saturasi untuk setiap base color (3 variasi)
            const saturationVariants = ['', '-dark', '-darker'];

            const colorIndex = Math.abs(hash) % baseColors.length;
            const variantIndex = Math.floor(Math.abs(hash) / baseColors.length) % saturationVariants.length;

            let color = baseColors[colorIndex];

            // Jika variant, buat warna lebih gelap
            if (variantIndex === 1) {
                // Buat 20% lebih gelap
                color = darkenColor(color, 0.2);
            } else if (variantIndex === 2) {
                // Buat 40% lebih gelap
                color = darkenColor(color, 0.4);
            }

            return color;
        }

        // Helper function untuk darken color
        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 untuk mendapatkan warna status
        function getStatusColor(status) {
            status = (status || '').toLowerCase();

            if (status === 'completed' || status === 'c') {
                return '#2dce89'; // Hijau
            } else if (status === 'in progress' || status === 'in_progress' || status === 'p') {
                return '#11cdef'; // Biru muda
            } else if (status === 'defined' || status === 'd') {
                return '#028284'; // Teal
            }
            return '#6c757d'; // Default abu-abu
        }

        // Fungsi untuk update warna legend Internship dan Owner berdasarkan warna user yang login
        function updateInternshipLegendColor(events) {
            // Cari event milik user yang login
            var userEvent = events.find(function(event) {
                var itUser = (event.it_username || event.it || '').trim();
                return itUser === CURRENT_IT;
            });

            // Jika ada event user, ambil warna user (bukan status)
            if (userEvent) {
                var itUser = (userEvent.it_username || userEvent.it || '').trim();
                var userColor = getUserColor(itUser);
                INTERNSHIP_LEGEND_COLOR = userColor; // Simpan warna user ke variabel global

                // Update background-color legend Internship (warna solid penuh)
                var legendIntern = document.querySelector('.legend-intern');
                if (legendIntern) {
                    legendIntern.style.backgroundColor = userColor;
                }

                // Update background-color legend Owner (warna solid penuh)
                var legendOwner = document.querySelector('.legend-owner');
                if (legendOwner) {
                    legendOwner.style.backgroundColor = userColor;
                }
            } else {
                // Jika tidak ada event, gunakan warna berdasarkan username yang login
                var userColor = getUserColor(CURRENT_IT);
                INTERNSHIP_LEGEND_COLOR = userColor;

                // Update background-color legend Internship (warna solid penuh)
                var legendIntern = document.querySelector('.legend-intern');
                if (legendIntern) {
                    legendIntern.style.backgroundColor = userColor;
                }

                // Update background-color legend Owner (warna solid penuh)
                var legendOwner = document.querySelector('.legend-owner');
                if (legendOwner) {
                    legendOwner.style.backgroundColor = userColor;
                }
            }
        }

        // 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');
        }

        document.addEventListener('DOMContentLoaded', function() {
            var modal = new bootstrap.Modal(document.getElementById("myModal"));
            var calendarEl = document.getElementById('calendar');
            var holiday = @json($holiday);
            var calendar;
            var selectedCalendarUser = ''; // Variabel global untuk menyimpan filter user yang dipilih

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

                // Set batas awal dan akhir bulan
                var startMonth = new Date(startDate);
                var endMonth = new Date(endDate);

                // Format ke YYYY-MM-DD
                function getMonthRange(date) {
                    const year = date.getUTCFullYear();
                    const month = date.getUTCMonth();

                    // Hari pertama bulan
                    const firstDay = new Date(Date.UTC(year, month, 1));
                    // Hari terakhir bulan
                    const lastDay = new Date(Date.UTC(year, month + 1, 0));

                    return {
                        start: firstDay.toISOString().split('T')[0],
                        end: lastDay.toISOString().split('T')[0]
                    };
                }

                // Mengambil rentang bulan
                var minDate = getMonthRange(startMonth).start;
                var maxDate = getMonthRange(endMonth).end;

                // Inisialisasi kalender
                calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'dayGridMonth',
                    initialDate: minDate,
                    validRange: {
                        start: minDate,
                        end: maxDate
                    },
                    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 user yang dipilih dari variabel global
                                var filteredResponse = response;
                                if (selectedCalendarUser) {
                                    filteredResponse = response.filter(function(event) {
                                        // Coba berbagai field yang mungkin berisi username
                                        var itUser = (event.it_username || event
                                                .it || event.username || event
                                                .firstname || event.user || '')
                                            .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);
                                }

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

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

                                    // Return event dengan warna user
                                    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

                    eventClick: function(info) {
                        if (info.event.display === 'background') {
                            info.jsEvent.preventDefault(); // stop klik
                            return;
                        }

                        // Atau kalau kamu tidak pakai background events, cek manual
                        const d = fmtLocalYmd(info.event.start);
                        if (HOLIDAY_MAP[d]) {
                            info.jsEvent.preventDefault();
                            return;
                        }
                        // Update modal content
                        document.getElementById("eventTitle").textContent = info.event.title;
                        document.getElementById("eventDate").textContent = 'Date Start: ' + info.event
                            .start
                            .toLocaleDateString();
                        // document.getElementById("eventDescription").textContent = info.event
                        //     .extendedProps
                        //     .description;
                        // Mengambil deskripsi dari event dan mengubah \n menjadi <br>
                        var description = info.event.extendedProps.description ?? '-';
                        var formattedDescription = description.replace(/\n/g,
                            '<br>'); // Menambahkan <br> pada setiap \n
                        document.getElementById("eventDescription").innerHTML = formattedDescription;

                        document.getElementById("eventUser").textContent = 'User: ' + info.event
                            .extendedProps.user;

                        document.getElementById("eventIT").textContent = 'IT: ' + info.event
                            .extendedProps
                            .it;
                        modal.show();
                    },

                    // 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';
                    //     }
                    // },

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

                        // Ambil username IT dari event - cek berbagai field yang mungkin
                        const itUser = (info.event.extendedProps.it_username ||
                            info.event.extendedProps.it ||
                            info.event.extendedProps.firstname ||
                            info.event.extendedProps.user || '').trim();

                        // Background & border utama = warna USER
                        var userColor = getUserColor(itUser);
                        info.el.style.backgroundColor = userColor;
                        info.el.style.borderColor = userColor;
                        info.el.style.color = '#fff';

                        // Ambil warna status untuk border-left
                        var status = (info.event.extendedProps.status || '').toLowerCase();
                        var statusColor = getStatusColor(status);

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

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

                        // Set border-left dengan warna STATUS (untuk semua event)
                        info.el.style.borderLeft = '4px 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';
                        info.el.appendChild(badge);
                    },

                });

                calendar.render();
            }

            // Inisialisasi pertama kali dengan bulan saat ini tanpa offset
            var today = new Date();
            var currentYear = today.getUTCFullYear();
            var currentMonth = today.getUTCMonth() + 1; // Bulan dimulai dari 0
            var currentMonthStart = `${currentYear}-${String(currentMonth).padStart(2, '0')}-01`;
            var currentMonthEnd = new Date(Date.UTC(currentYear, currentMonth, 0)).toISOString().split('T')[0];

            var currentMonthEnddate = addDaysToDate(currentMonthEnd, 1);

            initCalendar(currentMonthStart, currentMonthEnddate);

            // console.log('start, end', currentMonthStart, currentMonthEnd);

            // Event listener untuk perubahan tanggal
            document.getElementById('start-date').addEventListener('change', function() {
                var startDate = this.value;
                var endDate = document.getElementById('end-date').value || startDate;
                initCalendar(startDate, endDate);
            });

            document.getElementById('end-date').addEventListener('change', function() {
                var startDate = document.getElementById('start-date').value || this.value;
                var endDate = this.value;
                initCalendar(startDate, endDate);
            });

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

                // 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
                    });
                }
            });
        });
        // 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>
@endsection