@php
    $blocks = [16, 32, 48, 64, 80];
    
    $tipeIntern = request()->get('tipe_intern', 'all');
@endphp

@php
    $aktif = $reportit
        ->where('lastname', '!=', 'IN')
        ->where('isactive', 1)
        ->filter(function ($item) {
            return !isset($item->source) || $item->source != 'magang';
        })
        ->sortBy(fn ($item) => mb_strtolower($item->name ?? ''))
        ->values();

    $nonaktif = $reportit->filter(function ($item) {
        return $item->isactive == 0 && $item->total_poin > 0 && (!isset($item->source) || $item->source != 'magang');
    })
        ->sortBy(fn ($item) => mb_strtolower($item->name ?? ''))
        ->values();

    $intern = $reportit->filter(function ($item) {
        return $item->lastname == 'IN'
            && $item->isactive == 1
            && (!isset($item->source) || $item->source != 'magang');
    })
        ->sortBy(fn ($item) => mb_strtolower($item->name ?? ''))
        ->values();

    $internGrouped = $intern->groupBy('mentor_name');

    // Filter untuk Intern Univ (source = 'magang')
    $internUniv = $reportit->filter(function ($item) {
        return isset($item->source) && $item->source == 'magang' && $item->isactive == 1;
    })
        ->sortBy(fn ($item) => mb_strtolower($item->name ?? ''))
        ->values();

    $internUnivGrouped = $internUniv->groupBy('mentor_name');
@endphp

<div class="row">
    @if ($reportit->isEmpty())
        <div class="text-center text-muted py-4">
            <strong>Maaf</strong> - Tidak ada data!
        </div>
    @else
        <div style="max-height: 60vh; overflow-y: auto;">
        @if (($tipeIntern == 'all' || $tipeIntern == 'intern_it') && $aktif->count())
            <h6 class="text-uppercase text-secondary mt-4">Intern IT</h6>

            <div class="row">
            @foreach ($aktif->chunk(ceil($aktif->count() / 2)) as $chunk)
                <div class="col-12 col-md-5">
                    @foreach ($chunk as $r)
                        @php
                            $isDanger = !isset($r->has_start_today) || (int) $r->has_start_today !== 1;
                        @endphp

                        <div class="d-flex align-items-center" style="width: 100%;">
                            @if ($isDanger)
                                <div class="name" style="width: 300px; font-weight: bold; color: #dc3545;">
                                    {{ $r->name }}
                                </div>
                            @else
                                <div class="name" style="width: 300px; font-weight: bold; color: #333;">
                                    {{ $r->name }}
                                </div>
                            @endif
                            <button type="button"
                                class="btn btn-outline-secondary btn-sm rounded-circle p-1 d-inline-flex align-items-center justify-content-center"
                                data-bs-toggle="tooltip" data-bs-placement="bottom"
                                data-bs-title="Last start: {{ $r->last_start ?? '-' }}" onclick="showDetail(this)"
                                data-nik="{{ $r->nik ?? '' }}" data-name="{{ $r->username }}"
                                data-nameit="{{ $r->name }}" data-poin="{{ $r->total_poin }}"
                                data-laststart="{{ $r->last_start ?? '' }}" data-pjname="{{ $r->pj_name ?? '' }}"
                                data-mentorname="{{ $r->mentor_name ?? '' }}" style="position:relative; top:8px;">
                                <i class="fas fa-circle-info fa-sm"></i>
                            </button>
                            <div class="d-flex align-items-center flex-grow-1" style="gap: 12px;">
                                <div class="bar-container d-flex" style="gap: 4px; min-width: 120px;">
                                    @foreach ($blocks as $b)
                                        @php
                                            $fill = 0;
                                            if ($r->total_poin >= $b) {
                                                $fill = 100;
                                            } elseif ($r->total_poin >= $b - 10) {
                                                $fill = (($r->total_poin - ($b - 10)) / 10) * 100;
                                            }
                                            $fillShown = $isDanger && $fill == 0 ? 2 : $fill;
                                        @endphp

                                        <div class="bar {{ $isDanger ? 'danger' : '' }}">
                                            <div class="bar-fill {{ $isDanger ? 'danger' : 'ok' }}"
                                                style="width: {{ $fillShown }}%; transition: width .25s;">
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                                <div class="text-muted fw-bold" style="min-width: 80px; text-align: left;">
                                    @if ($isDanger)
                                        <span class="text-danger"> {{ number_format(($r->total_poin / 80) * 100, 1) }}% -
                                            {{ $r->total_poin }}</span>
                                    @else
                                        {{ number_format(($r->total_poin / 80) * 100, 1) }}% - {{ $r->total_poin }}
                                    @endif
                                </div>

                            </div>
                        </div>
                    @endforeach

                </div>
            @endforeach
            </div>
        @endif

        @if (($tipeIntern == 'all' || $tipeIntern == 'internship') && $intern->count())
            <hr>
            <h6 class="text-uppercase text-secondary mt-4">Internship</h6>

            <div class="row">
                @foreach ($internGrouped as $mentorName => $internList)
                    @php
                        $borderColors = [
                            '#e57373',
                            '#ffb74d',
                            '#ffd54f',
                            '#81c784',
                            '#64b5f6',
                            '#ba68c8',
                            '#f06292',
                            '#4db6ac',
                        ];
                        $borderColor = $borderColors[$loop->index % count($borderColors)];
                    @endphp

                    <div class="col-12 mt-3 mb-2">
                        <h6 class="text-muted fw-bold"
                            style="font-size: 0.95rem; border-bottom: 1px solid {{ $borderColor }}; padding-bottom: 5px;">
                            <i class="fas fa-user-tie me-2"></i>
                            Mentor: {{ $mentorName ?? 'Belum Ada Mentor' }}
                            <span class="badge bg-secondary ms-2">{{ $internList->count() }} orang</span>
                        </h6>
                    </div>

                    @foreach ($internList->chunk(ceil($internList->count() / 2)) as $chunk)
                        <div class="col-12 col-md-5">
                            @foreach ($chunk as $r)
                                @php
                                    $isDanger = !isset($r->has_start_today) || (int) $r->has_start_today !== 1;
                                @endphp

                                <div class="d-flex mb-3 align-items-center" style="width: 100%;">
                                    @if ($isDanger)
                                        <div class="name" style="width: 300px; font-weight: bold; color: #dc3545;">
                                            {{ $r->name }}
                                        </div>
                                    @else
                                        <div class="name" style="width: 300px; font-weight: bold; color: #333;">
                                            {{ $r->name }}
                                        </div>
                                    @endif
                                    <button type="button"
                                        class="btn btn-outline-secondary btn-sm rounded-circle p-1 d-inline-flex align-items-center justify-content-center"
                                        data-bs-toggle="tooltip" data-bs-placement="bottom"
                                        data-bs-title="Last start: {{ $r->last_start ?? '-' }}" onclick="showDetail(this)"
                                        data-nik="{{ $r->nik ?? '' }}" data-name="{{ $r->username }}"
                                        data-nameit="{{ $r->name }}" data-poin="{{ $r->total_poin }}"
                                        data-laststart="{{ $r->last_start ?? '' }}"
                                        data-pjname="{{ $r->pj_name ?? '' }}"
                                        data-mentorname="{{ $r->mentor_name ?? '' }}" style="position:relative; top:8px;">
                                        <i class="fas fa-circle-info fa-sm"></i>
                                    </button>

                                    <div class="d-flex align-items-center flex-grow-1" style="gap: 12px;">
                                        <div class="bar-container d-flex" style="gap: 4px; min-width: 120px;">
                                            @foreach ($blocks as $b)
                                                @php
                                                    $fill = 0;
                                                    if ($r->total_poin >= $b) {
                                                        $fill = 100;
                                                    } elseif ($r->total_poin >= $b - 10) {
                                                        $fill = (($r->total_poin - ($b - 10)) / 10) * 100;
                                                    }
                                                    $fillShown = $isDanger && $fill == 0 ? 2 : $fill;
                                                @endphp

                                                <div class="bar {{ $isDanger ? 'danger' : '' }}">
                                                    <div class="bar-fill {{ $isDanger ? 'danger' : 'ok' }}"
                                                        style="width: {{ $fillShown }}%; transition: width .25s;">
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>

                                        <div class="text-muted fw-bold" style="min-width: 80px; text-align: left;">
                                            @if ($isDanger)
                                                <span class="text-danger">
                                                    {{ number_format(($r->total_poin / 80) * 100, 1) }}% -
                                                    {{ $r->total_poin }}</span>
                                            @else
                                                {{ number_format(($r->total_poin / 80) * 100, 1) }}% - {{ $r->total_poin }}
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endforeach

                    @if (!$loop->last)
                        <div class="col-12">
                            <div style="height: 15px;"></div>
                        </div>
                    @endif
                @endforeach
            </div>
        @endif

        @if (($tipeIntern == 'all' || $tipeIntern == 'intern_univ') && $internUniv->count())
            <hr>
            <h6 class="text-uppercase text-secondary mt-4">Internship Universitas</h6>

            <div class="row" style="max-height: 60vh; overflow-y: auto; padding-right: 10px;">
                @foreach ($internUnivGrouped as $mentorName => $internUnivList)
                    @php
                        $borderColors = [
                            '#e57373',
                            '#ffb74d',
                            '#ffd54f',
                            '#81c784',
                            '#64b5f6',
                            '#ba68c8',
                            '#f06292',
                            '#4db6ac',
                        ];
                        $borderColor = $borderColors[$loop->index % count($borderColors)];
                    @endphp

                    {{-- <div class="col-12 mt-3 mb-2">
                        <h6 class="text-muted fw-bold"
                            style="font-size: 0.95rem; border-bottom: 1px solid {{ $borderColor }}; padding-bottom: 5px;">
                            <i class="fas fa-user-tie me-2"></i>
                            Mentor: {{ $mentorName ?? 'Belum Ada Mentor' }}
                            <span class="badge bg-secondary ms-2">{{ $internUnivList->count() }} orang</span>
                        </h6>
                    </div> --}}

                    @foreach ($internUnivList->chunk(ceil($internUnivList->count() / 2)) as $chunk)
                        <div class="col-12 col-md-5">
                            @foreach ($chunk as $r)
                                @php
                                    $isDanger = !isset($r->has_start_today) || (int) $r->has_start_today !== 1;
                                @endphp

                                <div class="d-flex mb-3 align-items-center" style="width: 100%;">
                                    @if ($isDanger)
                                        <div class="name" style="width: 300px; font-weight: bold; color: #dc3545;">
                                            {{ $r->name }}
                                        </div>
                                    @else
                                        <div class="name" style="width: 300px; font-weight: bold; color: #333;">
                                            {{ $r->name }}
                                        </div>
                                    @endif
                                    <button type="button"
                                        class="btn btn-outline-secondary btn-sm rounded-circle p-1 d-inline-flex align-items-center justify-content-center"
                                        data-bs-toggle="tooltip" data-bs-placement="bottom"
                                        data-bs-title="Last start: {{ $r->last_start ?? '-' }}" onclick="showDetail(this)"
                                        data-nik="{{ $r->nik ?? '' }}" data-name="{{ $r->username }}"
                                        data-nameit="{{ $r->name }}" data-poin="{{ $r->total_poin }}"
                                        data-laststart="{{ $r->last_start ?? '' }}"
                                        data-pjname="{{ $r->pj_name ?? '' }}"
                                        data-mentorname="{{ $r->mentor_name ?? '' }}"
                                        data-source="magang"
                                        style="position:relative; top:8px;">
                                        <i class="fas fa-circle-info fa-sm"></i>
                                    </button>

                                    <div class="d-flex align-items-center flex-grow-1" style="gap: 12px;">
                                        <div class="bar-container d-flex" style="gap: 4px; min-width: 120px;">
                                            @foreach ($blocks as $b)
                                                @php
                                                    $fill = 0;
                                                    if ($r->total_poin >= $b) {
                                                        $fill = 100;
                                                    } elseif ($r->total_poin >= $b - 10) {
                                                        $fill = (($r->total_poin - ($b - 10)) / 10) * 100;
                                                    }
                                                    $fillShown = $isDanger && $fill == 0 ? 2 : $fill;
                                                @endphp

                                                <div class="bar {{ $isDanger ? 'danger' : '' }}">
                                                    <div class="bar-fill {{ $isDanger ? 'danger' : 'ok' }}"
                                                        style="width: {{ $fillShown }}%; transition: width .25s;">
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>

                                        <div class="text-muted fw-bold" style="min-width: 80px; text-align: left;">
                                            @if ($isDanger)
                                                <span class="text-danger">
                                                    {{ number_format(($r->total_poin / 80) * 100, 1) }}% -
                                                    {{ $r->total_poin }}</span>
                                            @else
                                                {{ number_format(($r->total_poin / 80) * 100, 1) }}% -
                                                {{ $r->total_poin }}
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endforeach

                    @if (!$loop->last)
                        <div class="col-12">
                            <div style="height: 15px;"></div>
                        </div>
                    @endif
                @endforeach
            </div>
        @endif


        {{-- ========== NON AKTIF (ALWAYS SHOW) ========== --}}
        @if ($nonaktif->count())
            <hr>
            <h6 class="text-uppercase text-secondary mt-4">Non Aktif</h6>

            <div class="row">
            @foreach ($nonaktif->chunk(ceil($nonaktif->count() / 2)) as $chunk)
                <div class="col-12 col-md-5">
                    @foreach ($chunk as $r)
                        @php
                            $isDanger = !isset($r->has_start_today) || (int) $r->has_start_today !== 1;
                        @endphp

                        <div class="d-flex mb-3 align-items-center" style="width: 100%;">
                            @if ($isDanger)
                                <div class="name" style="width: 300px; font-weight: bold; color: #dc3545;">
                                    {{ $r->name }}
                                </div>
                            @else
                                <div class="name" style="width: 300px; font-weight: bold; color: #333;">
                                    {{ $r->name }}
                                </div>
                            @endif
                            <button type="button"
                                class="btn btn-outline-secondary btn-sm rounded-circle p-1 d-inline-flex align-items-center justify-content-center"
                                data-bs-toggle="tooltip" data-bs-placement="bottom"
                                data-bs-title="Last start: {{ $r->last_start ?? '-' }}" onclick="showDetail(this)"
                                data-nik="{{ $r->nik ?? '' }}" data-name="{{ $r->username }}"
                                data-nameit="{{ $r->name }}" data-poin="{{ $r->total_poin }}"
                                data-laststart="{{ $r->last_start ?? '' }}" data-pjname="{{ $r->pj_name ?? '' }}"
                                data-mentorname="{{ $r->mentor_name ?? '' }}" style="position:relative; top:8px;">
                                <i class="fas fa-circle-info fa-sm"></i>
                            </button>

                            <div class="d-flex align-items-center flex-grow-1" style="gap: 12px;">
                                <div class="bar-container d-flex" style="gap: 4px; min-width: 120px;">
                                    @foreach ($blocks as $b)
                                        @php
                                            $fill = 0;
                                            if ($r->total_poin >= $b) {
                                                $fill = 100;
                                            } elseif ($r->total_poin >= $b - 10) {
                                                $fill = (($r->total_poin - ($b - 10)) / 10) * 100;
                                            }
                                            $fillShown = $isDanger && $fill == 0 ? 2 : $fill;
                                        @endphp

                                        <div class="bar {{ $isDanger ? 'danger' : '' }}">
                                            <div class="bar-fill {{ $isDanger ? 'danger' : 'ok' }}"
                                                style="width: {{ $fillShown }}%; transition: width .25s;">
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                                <div class="text-muted fw-bold" style="min-width: 80px; text-align: left;">
                                    @if ($isDanger)
                                        <span class="text-danger"> {{ number_format(($r->total_poin / 80) * 100, 1) }}% -
                                            {{ $r->total_poin }}</span>
                                    @else
                                        {{ number_format(($r->total_poin / 80) * 100, 1) }}% - {{ $r->total_poin }}
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endforeach
            </div>
        @endif
        </div>
    @endif
</div>