@forelse ($personnel as $p)
    @php

        $avatar = Util::linkFile('pas-photo', $p->pas_photo);

        $firstLetters = strtoupper(implode('', array_map(fn($word) => $word[0], explode(' ', $p->name))));

        $bgcolors = [
            'Approved' => '#3DAD5C',
            'Need Review' => '#FAAD43',
            'Decline' => '#ED3E3E',
        ];

        $icons = [
            'Approved' => url('assets/img/icons/approved.svg'),
            'Need Review' => url('assets/img/icons/pending.svg'),
            'Decline' => url('assets/img/icons/decline.svg'),
        ];

        $route = route('employee.detail', ['id' => encrypt($p->id)]);

    @endphp

    <tr onclick="redirectDetail('{{ $route }}')" style="cursor: pointer">
        <td class="has-text-centered">{{ $loop->index + 1 + $personnel->perPage() * ($personnel->currentPage() - 1) }}
        </td>
        <td>
            <div class="flex-media">
                <div class="h-avatar is-small">
                    <img class="avatar" src="{{ $avatar }}">
                </div>
                <div class="meta">
                    <span>{{ $p->name }}</span>
                </div>
            </div>
        </td>
        <td>{{ $p->nik }}</td>
        <td class="has-text-centered">{{ $p->position }}</td>
        <td>
            @if ($p->gender == 'Male')
                <span style="background-color: #48A8EF !important;display: flex; align-items: center;"
                    class="tag is-info is-rounded">
                    <img src="{{ url('assets/img/icons/male.svg') }}" class="mr-2">
                    @lang('app.male')
                </span>
            @else
                <span style="background-color: #E62864 !important;display: flex; align-items: center;"
                    class="tag is-danger is-rounded fs-12 fw-500">
                    <img src="{{ url('assets/img/icons/female.svg') }}" class="mr-2">
                    @lang('app.female')
                </span>
            @endif
        </td>
        <td>{{ $p->company }}</td>
        @if($category == 'mcu_approved')
        <td>
            @php
                $sqlVisitors = DB::table('gate_in_visitors')
                ->where('id', '=', $p->id)
                ->get();
            @endphp
            @if($sqlVisitors->isEmpty())
                <p>-</p>
            @else
                @foreach($sqlVisitors as $visitor)
                    @php
                        $sqlVisitors2 = DB::table('visitors')
                        ->where('id', '=', $visitor->visitor_id)
                        ->first();
                        $avatar_defaults = asset('assets/img/avatars/placeholder.jpg');
                        $avatar_visitor = $sqlVisitors2->pas_photo ? Util::linkFile('pas-photo', $sqlVisitors2->pas_photo) : $avatar_defaults;
                    @endphp
                    <div class="flex-media">
                        <div class="h-avatar is-small">
                            <img class="avatar" src="{{ $avatar_visitor }}">
                        </div>
                        <div class="meta">
                            <span>{{ $sqlVisitors2->name ?? '' }}</span>
                        </div>
                    </div>

                    {{-- @if($sqlVisitors2->isEmpty())
                            <p>-</p>
                    @else
                        <div class="flex-media">
                            <div class="h-avatar is-small">
                                <img class="avatar" src="{{ $avatar_visitor }}">
                            </div>
                            <div class="meta">
                                <span>{{ $sqlVisitors2->name ?? '' }}</span>
                            </div>
                        </div>
                    @endif --}}
                @endforeach
            @endif
        </td>
        @endif
        {{-- <td class="has-text-centered">
            <div class="control" style="display: flex; justify-content: center; align-items: center;">
                <div class="h-select" style="width: 160px !important">
                    @foreach ($bgcolors as $key => $color)
                        @php
                            $status = $p->employeeMcu->status ?? ($p->gateInVisitor[0]->status ?? null);
                        @endphp

                        @if ($status === $key)
                            <div class="select-box"
                                style="background-color: {{ $color }}; border-color: {{ $color }}">
                                <img class="mr-2" src="{{ $icons[$key] }}">
                                <div class="fs-12 text-white fw-700">{{ $key }}</div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </td> --}}
    </tr>
@empty
    <tr>
        <td colspan="6" class="has-text-centered">
            @include('components.empty.empty-state')
        </td>
    </tr>
@endforelse

<Script>
    function redirectDetail(url) {
        window.open(url, '_blank');
    }
</Script>