@forelse ($employees as $e)
    @php
        $avatar = Util::linkFile('pas-photo', $e->user->pas_photo);

        $location_names = [];
        foreach ($e->gateInLocation as $gil) {
            $location_names[] = $gil->location?->name ?? "-";
        }

        if (!empty($location_names)) {
            $location_str = $location_names[0];
            $cnt = count($location_names);

            if($cnt > 2) {
                $txt = "(more "."+".($cnt - 1).")";
                $location_str .= ' <span style="color: #1E90FF;">'.$txt.'</span>';
            }else if ($cnt > 1) {
                $txt = "(more "."+".$cnt.")";
                $location_str .= ' <span style="color: #1E90FF;">'.$txt.'</span>';
            }
        } else {
            $location_str = "-"; // fallback kalau kosong
        }

        $now = date('Y-m-d');
        $tgl_akhir = date('Y-m-d', strtotime($e->end_duty));

    @endphp
    {{-- @if ($now <= $tgl_akhir) --}}
        <tr style="cursor: pointer;" @hasrole(['super_admin', 'contract_user', 'admin_contractor']) class="table-row-employee" @endhasrole>
            <td class="has-text-centered"  onclick="event.stopPropagation();">
                {{-- {{ $loop->index + 1 + $employees->perPage() * ($employees->currentPage() - 1) }} --}}
                <label class="custom-checkbox">
                  <input type="checkbox" class="checkbox" name="item" value="{{ $e->user_id ?? $e->user?->id ?? null }}" onclick="updateCheckAll()">
                  <span class="checkmark"></span>
                </label>
            </td>
            <td  onclick="event.stopPropagation();">
                <div class="collapse has-chevron" style="margin: 0; padding: 0; border: none;">
                    <div class="collapse-header" style="height: 40px;"  onclick="toggleCollapse(event)">
                        <h4>{!! $location_str !!}</h4>
                    </div>
                    <div class="collapse-content">
                        <div class="content">
                            <ol type="1">
                                @foreach($location_names as $loc)
                                <li>{{ $loc }}</li>
                                @endforeach
                            </ol>
                        </div>
                    </div>
                </div>
            </td>
            <td style="cursor: pointer;">
                <div class="flex-media">
                    @if ($avatar)
                        <div class="h-avatar is-medium">
                            <img class="avatar" src="{{ $avatar }}" alt="">
                        </div>
                    @else
                        {!! generate_avatar($u->name) !!}
                    @endif
                    <div class="meta">
                        <span>{{ $e->user->name }}</span>
                    </div>
                </div>
            </td>
            <td>{{ $e->user->position }}</td>
            <td>{{ $e->user->company }}</td>
            <td>
                {{ date('d F Y', strtotime($e->start_duty)) }}
            </td>
            <td>
                {{ date('d F Y', strtotime($e->end_duty)) }}
            </td>
            <td>
                <div class="buttons">
                    @hasrole(['super_admin', 'user_admin', 'contract_user'])
                        @include('components.util.change-status', [
                            'status' => $e->status,
                            'name' => 'gatein_status' . $e->id,
                            'user_id' => $e->user->id,
                            'type' => 'gatein_status',
                            'class' => 'update-status-gatein',
                            'route' => route('gate-in.update'),
                            'gate_in_id' => $e->id,
                            'style' => 'width:170px',
                        ])
                    @else
                        @include('components.util.label-only', [
                            'status' => $e->status,
                            'name' => 'gatein_status' . $e->id,
                            'user_id' => $e->user->id,
                            'type' => 'gatein_status',
                            'class' => 'update-status-gatein',
                            'route' => route('gate-in.update'),
                            'gate_in_id' => $e->id,
                            'style' => 'width:170px',
                        ])
                    @endhasrole
                </div>
            </td>
            <td style="display: none">{{ route('gate-in.edit', ['id' => $e->id]) }}</td>

            @role(['super_admin', 'admin_contractor', 'dokter', 'contract_user'])
                <td  onclick="event.stopPropagation();" class="has-text-centered">
                    @php
                        $urlDownload = $e->qrCode?->image ?? '';
            
                        if($urlDownload) $urlDownload2 = route('download-qrcode', ['url' => $urlDownload]);
                        else $urlDownload2 = 'javascript:;';
                        
                    @endphp

                    @if($e->status == 'Approved')
                        <svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg" class="cursor-pointer" onclick="event.preventDefault(); event.stopPropagation(); window.location.href='{{$urlDownload2}}'">
                        <rect x="0.662598" width="30" height="30" rx="15" fill="#555"/>
                        <path d="M8.1626 14.1667H14.8293V7.5H8.1626V14.1667ZM9.82926 9.16667H13.1626V12.5H9.82926V9.16667Z" fill="white"/>
                        <path d="M8.1626 22.5H14.8293V15.8333H8.1626V22.5ZM9.82926 17.5H13.1626V20.8333H9.82926V17.5Z" fill="white"/>
                        <path d="M16.4959 7.5V14.1667H23.1626V7.5H16.4959ZM21.4959 12.5H18.1626V9.16667H21.4959V12.5Z" fill="white"/>
                        <path d="M23.1626 20.8333H21.4959V22.5H23.1626V20.8333Z" fill="white"/>
                        <path d="M18.1626 15.8333H16.4959V17.5H18.1626V15.8333Z" fill="white"/>
                        <path d="M19.8293 17.5H18.1626V19.1667H19.8293V17.5Z" fill="white"/>
                        <path d="M18.1626 19.1667H16.4959V20.8333H18.1626V19.1667Z" fill="white"/>
                        <path d="M19.8293 20.8333H18.1626V22.5H19.8293V20.8333Z" fill="white"/>
                        <path d="M21.4959 19.1667H19.8293V20.8333H21.4959V19.1667Z" fill="white"/>
                        <path d="M21.4959 15.8333H19.8293V17.5H21.4959V15.8333Z" fill="white"/>
                        <path d="M23.1626 17.5H21.4959V19.1667H23.1626V17.5Z" fill="white"/>
                        </svg>
                    @endif

                </td>
            @endrole
        </tr>
    {{-- @endif --}}
@empty
    <tr>
        <td colspan="9" class="has-text-centered">
            @include('components.empty.empty-state')
        </td>
    </tr>
@endforelse

    <script>
        function daterangeDutyPeriod() {
            $(document).on('focus', '.contract-period', function() {
                if (!$(this).hasClass('daterangepicker-initialized')) {
                    let start = moment();
                    let end = moment().add(5, 'days');

                    $(this).daterangepicker({
                        autoUpdateInput: false,
                        singleDatePicker: false,
                        showDropdowns: true,
                        minDate: start,
                        maxDate: moment().add(28, 'days'),
                        startDate: start,
                        endDate: end,
                        locale: {
                            format: 'DD/MM/YYYY',
                            applyLabel: "Apply",
                            cancelLabel: "Clear"
                        }
                    }).addClass('daterangepicker-initialized');

                    $(this).on('apply.daterangepicker', function(ev, picker) {
                        const startDate = picker.startDate;
                        const endDate = picker.endDate;

                        $(this).val(
                            startDate.format('DD/MM/YYYY') + ' - ' + endDate.format('DD/MM/YYYY')
                        );
                    });

                    $(this).on('cancel.daterangepicker', function(ev, picker) {
                        $(this).val('');
                    });
                }
            });
        }

        $(document).ready(function() {
            daterangeDutyPeriod()
        });
    </script>
<script>
    function getSelectedLocation() {
        return $("input[name='selected_location_id']").val().split(",");
    }

    function buildTreeFormat(items, preselectedIds) {
        return items.map(item => ({
            id: String(item.id),
            text: item.name,
            parent: item.parent_id ? String(item.parent_id) : "#",
            icon: false,
            state: {
                selected: preselectedIds.includes(String(item.id)) // ✅ pre-select here
            }
        }));
    }

    function initTree() {
        // toggle dropdown on input click
        $('#treeSelect input').on('click', function () {
            $('#treeSelect').toggleClass('open');
        });

        // close dropdown if clicked outside
        $(document).on('click', function (e) {
            if (!$(e.target).closest('#treeSelect').length) {
                $('#treeSelect').removeClass('open');
            }
        });

        // update input text on selection change
        $('#treeContainer').on('changed.jstree', function (e, data) {
            const selectedText = data.selected.map(id => data.instance.get_node(id).text).join(', ');
            $('#treeSelect input').val(selectedText);
            const selectedIds = data.selected;
            $("#location_ids").val(selectedIds.join(','));
        });

        const locations = @json($locations);

        const preselectedIds = getSelectedLocation() ;

        const listLocation = buildTreeFormat(locations, preselectedIds);

        // Example: init jsTree
        $('#treeContainer').jstree({
            core: { data: listLocation },
            plugins: ['checkbox'],
            checkbox: {
                cascade: 'up+down+undetermined'
            }
        });

    }
</script>
<script>
    $(document).ready(function() {
        $('.table-row-employee').click(function() {
            const row = $(this).closest('tr');
            const url = row.find('td:eq(8)').text().trim();

            $.ajax({
                url: url,
                success: (res) => {

                    // Inject html modal content
                    $('#container_modal_edit_gatein').html(res);

                    // Tampilkan modal setelah DOM siap
                    $('#modal_edit_status_gatein').addClass('is-active');

                    // === tunggu elemen input muncul ===
                    setTimeout(() => {
                        initDutyPeriodCalendar(); 
                        initTree();
                    }, 150);
                }
            });
        });

        $('.change-status').click(function(event) {
            event.stopPropagation();
            $(this).toggleClass('is-active')
        });
    });
</script>

<script>
function downloadQR(url, filename) {
    fetch(url)
        .then(res => res.blob())
        .then(blob => {
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = filename;
            document.body.appendChild(link);
            link.click();
            link.remove();
        });
}
</script>