@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <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">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</button>
                        {{-- check authorize edi --}}
                        @if ($authorize->edit == '1')
                            {{-- check status active --}}
                            @if ($list->isactive == 1)
                                {{-- button save --}}
                                <button class="btn btn-primary mb-0" style="display: none;" id="{{ $dmenu }}-save"
                                    onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();"><i
                                        class="fas fa-floppy-disk me-1"> </i><span class="font-weight-bold">Simpan</button>
                                {{-- button edit --}}
                                <button class="btn btn-warning mb-0" id="{{ $dmenu }}-edit"><i
                                        class="fas fa-edit me-1"> </i><span class="font-weight-bold">Edit</button>
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row px-4 py-2">
            <div class="table-responsive">
                <div class="table display">
                    <div class="card">
                        <form role="form" method="POST" action="{{ URL::to($url_menu . '/' . $idencrypt) }}"
                            enctype="multipart/form-data" id="{{ $dmenu }}-form">
                            @csrf
                            @method('PUT')
                            {{-- @php
                                dd($header);
                            @endphp --}}
                            <div class="card-body">
                                <p class="text-uppercase text-sm">Form Absensi Karyawan</p>
                                <hr class="horizontal dark mt-0">
                                <div class="row">
                                    <div class="table-responsive">
                                        {{-- retrieve table header --}}
                                        <table class="table display nowrap" id="list_detail" style="width:100%">

                                            <div class="row px-4 py-2">
                                                <div class="col-lg">
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <!-- Informasi PIC dan Sub Departemen -->
                                                        <div>
                                                            <h5>
                                                                <b>PIC:</b>
                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                {{ $pic->nama }}
                                                            </h5>
                                                            <h5>
                                                                <b>Departemen:</b>
                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                {{ $departemen->nama }}
                                                            </h5>
                                                            <h5>
                                                                <b>Sub Departemen:</b>
                                                                &nbsp;&nbsp;&nbsp;
                                                                {{ $sub_departemen->nama }}
                                                            </h5>
                                                            <h5>
                                                                <b>Periode:</b>
                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                {{ $periode->periode }}
                                                            </h5>
                                                            <h5>
                                                                <b>Tanggal:</b>
                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                {{ \Carbon\Carbon::parse($periode->tgl_mulai)->format('d-m-Y') }}
                                                                s/d
                                                                {{ \Carbon\Carbon::parse($periode->tgl_selesai)->format('d-m-Y') }}
                                                            </h5>
                                                        </div>



                                                        <!-- Card Informasi Penting -->
                                                        <div class="card ml-3" style="border-radius: 10px;">
                                                            <div class="card-body"
                                                                style="background-color: #b0e9eb; border-radius: 10px;">
                                                                <h6 class="card-title"><b>Informasi Penting!!</b></h6>
                                                                <p class="card-text">
                                                                    <b>Klik Edit terlebih dahulu sebelum melakukan
                                                                        Absensi.</b> <br>
                                                                    <b>0</b> = Tidak Berpuasa<br>
                                                                    <b>1</b> = Berpuasa<br>
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <select class="form-select departemen" name="id_departemen" hidden>
                                                <option value="{{ $departemen->id }}"></option>
                                            </select>
                                            <select class="form-select sub_departemen" name="id_sub_departemen" hidden>
                                                <option value="{{ $sub_departemen->id }}"></option>
                                            </select>
                                            <select class="form-select periode_id" name="id_periode" hidden>
                                                <option value="{{ $periode->id }}"></option>
                                            </select>

                                            <div class="table-responsive">
                                                <table id="list_absensi" class="table table-bordered table-striped nowrap"
                                                    style="width:100%">
                                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                        <tr>
                                                            @if($adaPindah)
                                                            <th class="text-center pindah-header">
                                                                <span class="label-info">Info</span>

                                                                <span class="label-pindah">
                                                                    <input type="checkbox"
                                                                        id="check-all-pindah">
                                                                    Pindah
                                                                </span>
                                                            </th>
                                                            @endif

                                                            <th>No</th>
                                                            <th>NIK</th>
                                                            <th>Nama</th>

                                                            @php
                                                                $startDate = new \Carbon\Carbon($periode->tgl_mulai);
                                                                $endDate = new \Carbon\Carbon($periode->tgl_selesai);
                                                            @endphp
                                                            @while ($startDate <= $endDate)
                                                                <th class="{{ $startDate->isWeekend() ? 'bg-red' : '' }}">
                                                                    <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
                                                                        <div>{{ $startDate->format('j - M') }}</div>
                                                                        <div class="check-all-container">
                                                                            <label class="check-all-label">
                                                                                <input type="checkbox" 
                                                                                       class="check-all-date" 
                                                                                       data-date="{{ $startDate->format('Y-m-d') }}"
                                                                                       data-value="0"
                                                                                       title="Centang semua 0 untuk tanggal ini">
                                                                                <span>0</span>
                                                                            </label>
                                                                            <label class="check-all-label">
                                                                                <input type="checkbox" 
                                                                                       class="check-all-date" 
                                                                                       data-date="{{ $startDate->format('Y-m-d') }}"
                                                                                       data-value="1"
                                                                                       title="Centang semua 1 untuk tanggal ini">
                                                                                <span>1</span>
                                                                            </label>
                                                                        </div>
                                                                    </div>
                                                                </th>
                                                                @php $startDate->addDay(); @endphp
                                                            @endwhile
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($karyawan as $index => $a)
                                                           

                                                            <tr>
                                                                @if($adaPindah)
                                                                    <td class="text-center pindah-cell">

                                                                        {{-- ikon sblum edit --}}
                                                                        @if(($pindahDept[$a->nik] ?? false) === true)
                                                                            <i class="fas fa-exclamation-triangle pindah-alert"
                                                                            title="Karyawan pindah departemen"
                                                                            onclick="Swal.fire({
                                                                                    icon: 'warning',
                                                                                    title: 'Pindah Departemen',
                                                                                    text: 'Karyawan ini berpindah departemen',
                                                                                    confirmButtonText: 'OK',
                                                                                    confirmButtonColor: '#028284'
                                                                            })">
                                                                            </i>

                                                                        @endif


                                                                        {{-- aktif saat edit --}}
                                                                        @if(($pindahDept[$a->nik] ?? false) === true)
                                                                            <input type="checkbox"
                                                                                name="pindah_departemen[]"
                                                                                value="{{ $a->nik }}"
                                                                                class="pindah-dept d-none"
                                                                                {{ ($pindahStatus[$a->nik] ?? '1') == '0' ? 'checked' : '' }}>
                                                                        @endif

                                                                    </td>
                                                                @endif


                                                                <td>{{ $index + 1 }}</td>
                                                                <td>{{ $a->nik }}</td>
                                                                <td>{{ $a->nama }}</td>
                                                                

                                                                @php
                                                                    $startDate = new \Carbon\Carbon(
                                                                        $periode->tgl_mulai,
                                                                    );
                                                                @endphp
                                                                @while ($startDate <= $endDate)
                                                                
                                                                    <td
                                                                        class="text-sm text-center {{ $startDate->isWeekend() ? 'bg-red' : '' }}">
                                                                        @php
                                                                            $absensiKey =
                                                                                $a->nik .
                                                                                '-' .
                                                                                $startDate->format('Y-m-d');
                                                                            $absensiRecord = $detailAbsensi->get(
                                                                                $absensiKey,
                                                                            );
                                                                        @endphp

                                                                        @if ($absensiRecord)
                                                                            <input type="hidden"
                                                                                name="absensi[{{ $a->nik }}][{{ $startDate->format('Y-m-d') }}]"
                                                                                value="unset">
                                                                            <input type="checkbox"
                                                                                class="attendance-checkbox {{ $startDate->isWeekend() ? 'bg-red' : '' }}"
                                                                                name="absensi[{{ $a->nik }}][{{ $startDate->format('Y-m-d') }}]"
                                                                                data-date-column="{{ $startDate->format('Y-m-d') }}"
                                                                                value="0"
                                                                                {{ $absensiRecord->puasa == '0' ? 'checked' : '' }}>
                                                                            0
                                                                            <input type="checkbox"
                                                                                class="attendance-checkbox {{ $startDate->isWeekend() ? 'bg-red' : '' }}"
                                                                                name="absensi[{{ $a->nik }}][{{ $startDate->format('Y-m-d') }}]"
                                                                                data-date-column="{{ $startDate->format('Y-m-d') }}"
                                                                                value="1"
                                                                                {{ $absensiRecord->puasa == '1' ? 'checked' : '' }}>
                                                                            1
                                                                        @else
                                                                            <input type="checkbox"
                                                                                class="attendance-checkbox {{ $startDate->isWeekend() ? 'bg-red' : '' }}"
                                                                                name="absensi[{{ $a->nik }}][{{ $startDate->format('Y-m-d') }}]"
                                                                                data-date-column="{{ $startDate->format('Y-m-d') }}"
                                                                                value="0"> 0
                                                                            <input type="checkbox"
                                                                                class="attendance-checkbox {{ $startDate->isWeekend() ? 'bg-red' : '' }}"
                                                                                name="absensi[{{ $a->nik }}][{{ $startDate->format('Y-m-d') }}]"
                                                                                data-date-column="{{ $startDate->format('Y-m-d') }}"
                                                                                value="1"> 1
                                                                        @endif
                                                                    </td>
                                                                    @php $startDate->addDay(); @endphp
                                                                @endwhile
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>

                                            @foreach ($table_header as $header)
                                                <div class="col-md-12">
                                                    <div class="form-group">

                                                        @error($header->field)
                                                            <p class='text-danger text-xs pt-1'> {{ $message }}
                                                            </p>
                                                        @enderror
                                                    </div>
                                                </div>
                                            @endforeach
                                    </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> Hari Sabtu &
                                                    Minggu</code>
                                            </div>
                                            <div class="keterangan" id="ket"><code>Note : <i aria-hidden="true"
                                                        style="color: #ffc2cd;" class="fas fa-circle"></i> Isi yang Puasa
                                                    saja</code>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        {{-- check flag js on dmenu --}}
        @if ($jsmenu == '1')
            @if (view()->exists("js.{$dmenu}"))
                @push('addjs')
                    {{-- file js in folder (resources/views/js) --}}
                    @include('js.' . $dmenu);
                @endpush
            @else
                @push('addjs')
                    <script>
                        Swal.fire({
                            title: 'JS Not Found!!',
                            text: 'Please Create File JS',
                            icon: 'error',
                            confirmButtonColor: '#028284'
                        });
                    </script>
                @endpush
            @endif
        @endif
    @endsection
    @push('js')
        <script src="{{ asset('/') }}assets/js/jquery.dataTables.min.js"></script>
        <script src="{{ asset('/') }}assets/js/dataTables.fixedColumns.min.js"></script>
        <script>
            let isBulkPindah = false;

            $('.attendance-checkbox').change(function() {
                // Mendapatkan nama kelas untuk menandai kolom tanggal (sesuaikan dengan kelas yang digunakan)
                var dateColumnClass = $(this).data('date-column'); // Ambil data kolom tanggal dari checkbox
                var currentRow = $(this).closest('tr'); // Mendapatkan baris saat ini

                // Mencari semua checkbox dalam baris saat ini yang memiliki kolom tanggal yang sama
                var checkboxesInRow = currentRow.find('.attendance-checkbox[data-date-column="' + dateColumnClass +
                    '"]');

                // Jika checkbox yang dipilih adalah 'checked'
                if ($(this).is(':checked')) {
                    // Nonaktifkan semua checkbox lainnya dalam baris saat ini
                    checkboxesInRow.not(this).prop('checked', false);
                }
            });

                $(document).ready(function () {
                    let table = $('#list_absensi').DataTable({
                        language: {
                            lengthMenu: "Tampilkan _MENU_ baris per halaman",
                            zeroRecords: "Maaf - Data tidak ada",
                            info: "Menampilkan _START_ - _END_ dari _TOTAL_ data",
                            infoEmpty: "Tidak ada data",
                            infoFiltered: "(pencarian dari _MAX_ total data)"
                        },
                        scrollX: true,
                        scrollY: "70vh",
                        scrollCollapse: true,
                        paging: false,
                        ordering: false,
                        fixedColumns: {
                            left: {{ $adaPindah ? 4 : 3 }}
                        },
                        fixedHeader: true,
                        dom: 'rt'
                    });

                // Refresh ukuran tabel setelah load untuk memastikan freeze bekerja
                setTimeout(function() {
                    table.columns.adjust().draw();
                    // Trigger resize untuk fix header sync
                    $(window).trigger('resize');
                }, 300);

                // Trigger resize lagi untuk memastikan header tersinkron
                setTimeout(function() {
                    $(window).trigger('resize');
                }, 600);
            });

            let columnAbjad = '';
            $(document).ready(function() {
                let numColumns = $('#list_{{ $dmenu }}').DataTable().columns().count();
                let columnNames = '';
                for (let index = 0; index < numColumns; index++) {
                    columnNames = $('#list_{{ $dmenu }}').DataTable().columns(index).header()[0].textContent;
                    if (columnNames == 'Status' || columnNames == 'status') {
                        columnAbjad = String.fromCharCode(65 + index);
                    }
                }

                //set disable all input form
                $('#{{ $dmenu }}-form').find('label').addClass('disabled');
                $('#{{ $dmenu }}-form').find('input').attr('disabled', 'disabled');
                $('#{{ $dmenu }}-form').find('select').attr('disabled', 'disabled');
                $('#{{ $dmenu }}-form').find('textarea').attr('disabled', 'disabled');
                $('#{{ $dmenu }}-form').find('input[key="true"]').parent('.form-group').css('display',
                    '');
                $('#{{ $dmenu }}-form').find('select[key="true"]').parent('.form-group').css('display',
                    '');

                // function enable input form
                function enable_text() {
                    $('#{{ $dmenu }}-form').find('label').removeClass('disabled');
                    $('#{{ $dmenu }}-form').find('input').removeAttr('disabled');
                    $('#{{ $dmenu }}-form').find('select').removeAttr('disabled');
                    $('#{{ $dmenu }}-form').find('textarea').removeAttr('disabled');
                    $('#{{ $dmenu }}-form').find('input[key="true"]').parent('.form-group').css('display',
                        'none');
                    $('#{{ $dmenu }}-form').find('select[key="true"]').parent('.form-group').css('display',
                        'none');
                    $('#check-all-pindah').prop('disabled', false);
                }

                //event button edit
                $('#{{ $dmenu }}-edit').click(function() {
                    enable_text();
                    $('#check-all-pindah').prop('disabled', false);
                    $('.pindah-dept').removeClass('d-none');
                    $('body').addClass('mode-edit');
                    $(this).css('display', 'none');
                    $('#{{ $dmenu }}-save').css('display', '');
                    
                    // Fix tampilan setelah mode edit aktif
                    // Recalculate DataTables columns dan trigger resize
                    setTimeout(function() {
                        let table = $('#list_absensi').DataTable();
                        table.columns.adjust().draw(false);
                        $(window).trigger('resize');
                    }, 50);
                    
                    // Trigger resize sekali lagi untuk memastikan sinkronisasi
                    setTimeout(function() {
                        $(window).trigger('resize');
                    }, 150);
                });
            });

            $(document).on('change', '.pindah-dept', function () {

                if (isBulkPindah) return;

                let checkbox = $(this);
                let row = checkbox.closest('tr');

                if (checkbox.is(':checked')) {

                    Swal.fire({
                        title: 'Pindah Departemen?',
                        html: `
                            <div style="text-align:left">
                                <p>Checkbox ini akan muncul jika karyawan berpindah departemen</p>
                                <p>Jika <b>Pindah Departemen</b> dicentang:</p>
                                <ul>
                                    <li>Data karyawan ini akan <b>dihilangkan dari daftar</b></li>
                                    
                                </ul>
                            </div>
                        `,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: '<i class="fas fa-check"></i> Ya, Lanjutkan',
                        cancelButtonText: '<i class="fas fa-times"></i> Batal',
                        confirmButtonColor: '#028284',
                        cancelButtonColor: '#6c757d',
                        reverseButtons: true
                    }).then((result) => {

                        // Jika BATAL
                        if (!result.isConfirmed) {
                            checkbox.prop('checked', false);
                        } 
                        // Jika SETUJU
                        else {
                            row.css({});
                            checkbox.prop('enabled', true);
                        }
                    });
                }

            });

            $(document).on('change', '#check-all-pindah', function () {

                let checked = $(this).is(':checked');

                // Jika UNCHECK header → rollback semua TANPA alert
                if (!checked) {
                    $('.pindah-dept').prop('checked', false);
                    return;
                }

                // MODE MASS → tampilkan 1x alert
                Swal.fire({
                    title: 'Pindah Departemen?',
                    html: `
                        <div style="text-align:left">
                            <p>Checkbox ini akan muncul jika karyawan berpindah departemen</p>

                            <p>Jika <b>Pindah Departemen</b> dicentang:</p>
                            <ul>
                                <li>Semua karyawan akan <b>dihilangkan dari daftar</b></li>
                            </ul>
                        </div>
                    `,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '<i class="fas fa-check"></i> Ya, Lanjutkan',
                    cancelButtonText: '<i class="fas fa-times"></i> Batal',
                    confirmButtonColor: '#028284',
                    cancelButtonColor: '#6c757d',
                    reverseButtons: true
                }).then((result) => {

                    
                    if (!result.isConfirmed) {
                        $('#check-all-pindah').prop('checked', false);
                        $('.pindah-dept').prop('checked', false);
                        return;
                    }

                   
                    isBulkPindah = true;
                    $('.pindah-dept').prop('checked', true);
                    isBulkPindah = false;

                });
                
            });

            // Handler untuk checkbox "Centang Semua" per tanggal (0 atau 1)
            $(document).on('change', '.check-all-date', function () {
                let isChecked = $(this).is(':checked');
                let targetDate = $(this).data('date');
                let targetValue = $(this).data('value').toString();
                
                // Uncheck checkbox lawan di header yang sama
                $(`.check-all-date[data-date="${targetDate}"]`).not(this).prop('checked', false);
                
                // Cari semua checkbox dengan tanggal yang sama
                let checkboxes = $(`.attendance-checkbox[data-date-column="${targetDate}"]`);
                
                if (isChecked) {
                    // Centang semua checkbox dengan value yang dipilih
                    checkboxes.filter(`[value="${targetValue}"]`).prop('checked', true);
                    // Uncheck semua checkbox dengan value lawan
                    let oppositeValue = targetValue === '0' ? '1' : '0';
                    checkboxes.filter(`[value="${oppositeValue}"]`).prop('checked', false);
                } else {
                    // Uncheck semua checkbox untuk tanggal tersebut
                    checkboxes.prop('checked', false);
                }
            });

            // Update status checkbox header ketika checkbox individual berubah
            $(document).on('change', '.attendance-checkbox', function() {
                let dateColumn = $(this).data('date-column');
                
                // Cek untuk value 0
                let allCheckboxesZero = $(`.attendance-checkbox[data-date-column="${dateColumn}"][value="0"]`);
                let checkedZeros = allCheckboxesZero.filter(':checked');
                let headerCheckboxZero = $(`.check-all-date[data-date="${dateColumn}"][data-value="0"]`);
                headerCheckboxZero.prop('checked', checkedZeros.length === allCheckboxesZero.length && allCheckboxesZero.length > 0);
                
                // Cek untuk value 1
                let allCheckboxesOne = $(`.attendance-checkbox[data-date-column="${dateColumn}"][value="1"]`);
                let checkedOnes = allCheckboxesOne.filter(':checked');
                let headerCheckboxOne = $(`.check-all-date[data-date="${dateColumn}"][data-value="1"]`);
                headerCheckboxOne.prop('checked', checkedOnes.length === allCheckboxesOne.length && allCheckboxesOne.length > 0);
            });

        </script>
        <style>
        /* Header tetap di atas */
        .dataTables_scrollHead {
            background: #b0e9eb !important;
            position: sticky;
            top: 0;
            z-index: 1020;
        }

        .dataTables_scrollHead th {
            background: #b0e9eb !important;
            position: sticky;
            top: 0;
            z-index: 1030;
            border-bottom: 2px solid #ddd;
        }

        /* Warna weekend */
        .bg-red {
            background: #F08080 !important;
            color: black !important;
        }

    
        .dataTables_scrollBody td:nth-child(-n+{{ $adaPindah ? 4 : 3 }}),
        .dataTables_scrollHead th:nth-child(-n+{{ $adaPindah ? 4 : 3 }}) {
            position: sticky;
            z-index: 1040;
            background: white;
        }

        /* Atur posisi LEFT satu per satu (WAJIB) */
        .dataTables_scrollBody td:nth-child(1),
        .dataTables_scrollHead th:nth-child(1) {
            left: 0px;
        }

        .dataTables_scrollBody td:nth-child(2),
        .dataTables_scrollHead th:nth-child(2) {
            left: 70px; /* lebar kolom 1 */
        }

        .dataTables_scrollBody td:nth-child(3),
        .dataTables_scrollHead th:nth-child(3) {
            left: 150px; /* lebar kolom 2 */
        }

        @if($adaPindah)
        .dataTables_scrollBody td:nth-child(4),
        .dataTables_scrollHead th:nth-child(4) {
            left: 230px; /* lebar kolom 3 */
        }
        @endif

        /* Info teks */
        .keterangan code,
        .keterangan i {
            color: black;
        }

        /* Stabilkan ukuran header */
        .dataTables_scrollHeadInner {
            width: auto !important;
        }

        /* Hindari thead geser */
        table.dataTable thead {
            position: sticky;
            top: 0;
            z-index: 1050;
        }

        .pindah-alert {
            color: #ffc107; /* kuning warning */
            font-size: 18px;
            cursor: pointer;
        }

        .pindah-alert:hover {
            color: #ff9800;
            font-size: 20px;

        }

        /* Saat mode edit → sembunyikan icon */
        .mode-edit .pindah-alert {
            display: none !important;
        }

        .pindah-cell {
            vertical-align: middle;
        }
        .mode-edit .pindah-dot {
            display: none !important;
        }
        /* Header kolom */
        .pindah-header {
            min-width: 80px;
            vertical-align: middle;
            text-align: center;
        }

        /* Default */
        .label-info {
            display: inline;
        }

        .label-pindah {
            display: none;
            align-items: center;
            gap: 4px;
        }

        /* Saat edit */
        .mode-edit .label-info {
            display: none;
        }

        .mode-edit .label-pindah {
            display: inline-flex;
        }

        /* Container untuk checkbox 0 dan 1 di header - TERSEMBUNYI default */
        .check-all-container {
            display: none !important;
        }

        /* Tampilkan hanya saat mode edit */
        body.mode-edit .check-all-container {
            display: flex !important;
            gap: 8px;
            justify-content: center;
            align-items: center;
            margin-top: 4px;
        }

        .check-all-label {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            cursor: pointer;
            font-size: 11px;
            font-weight: bold;
        }

        .check-all-label input[type="checkbox"] {
            cursor: pointer;
            transform: scale(1);
            margin: 0;
        }

        .check-all-label:hover {
            color: #028284;
        }

        /* Pastikan header th menampung konten dengan baik */
        #list_absensi thead th {
            vertical-align: middle;
            text-align: center;
            white-space: nowrap;
        }

        /* Style untuk div dalam header */
        #list_absensi thead th > div {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 2px;
        }

        /* Fix untuk DataTables Fixed Columns - pastikan header sinkron */
        .dataTables_scrollHead th,
        .dtfc-fixed-left th,
        .DTFC_LeftHeadWrapper th {
            vertical-align: middle !important;
            text-align: center !important;
        }

        /* Pastikan semua header wrapper menggunakan flex column */
        .dataTables_scrollHead th > div,
        .dtfc-fixed-left th > div,
        .DTFC_LeftHeadWrapper th > div {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
        }

        /* Pastikan checkbox container di dalam DataTables juga tersembunyi */
        .dataTables_scrollHead .check-all-container,
        .dtfc-fixed-left .check-all-container,
        .DTFC_LeftHeadWrapper .check-all-container {
            display: none !important;
        }

        /* Tampilkan saat mode edit di semua wrapper DataTables */
        body.mode-edit .dataTables_scrollHead .check-all-container,
        body.mode-edit .dtfc-fixed-left .check-all-container,
        body.mode-edit .DTFC_LeftHeadWrapper .check-all-container {
            display: flex !important;
            gap: 8px;
            justify-content: center;
            align-items: center;
            margin-top: 4px;
        }

        </style>

    @endpush