@forelse ($personnel as $p)
    @php
        $avatar_placeholder = url('assets/img/avatars/placeholder.jpg');
        $avatar = $p->user->pas_photo ? Util::linkFile('pas-photo', $p->user->pas_photo) : $avatar_placeholder;

        $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'),
        ];

        $gateNames = [];

        foreach ($p->gateInLocation as $gil) {
            $gateNames[] = $gil->location?->name;
        }

        $implodeGateNames = implode(',', $gateNames);

    @endphp

    <tr>
        <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->user->name }}</span>
                </div>
            </div>
        </td>
        <td class="has-text-centered">{{ $p->user->position }}</td>
        <td>
            @if ($p->user->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->user->company }}</td>
        <td>{{ $implodeGateNames }}</td>
        <td>
            {{ date('d F Y H:i', strtotime($p->start_duty)) }}
        </td>
        <td>
            {{ date('d F Y H:i', strtotime($p->end_duty)) }}
        </td>
        <td class="has-text-centered">
            @php
                $countDays = Util::countDaysDuty($p->start_duty);
            @endphp
            @if ($countDays < 0)
                not started yet
            @else
                {{ $countDays }}
            @endif
        </td>
        <td class="has-text-centered">
            <button data-name="{{ $p->user->name }}" data-user-id="{{ $p->user->id }}"
                class="button h-button is-warning btn-return-worker"><i class="fa-solid fa-rotate-left mr-2"></i>
                <span>Return Worker</span>
            </button>
        </td>
    </tr>
@empty
    <tr>
        <td colspan="10" class="has-text-centered">
            @include('components.empty.empty-state')
        </td>
    </tr>
@endforelse

<script>
    $('.btn-return-worker').on('click', function() {
        const name = $(this).data('name')
        const id = $(this).data('user-id')

        $.ajax({
            url: '{{ route('return-worker.modal-early-return') }}',
            data: {
                id
            },
            success: (res) => {
                getDataPersonnelOnDuty()
                $('#container_modal_early_return').html(res)
                $('#modal_early_return').addClass('is-active')

            }
        })

    })
</script>