@php
    $phase = config('sys.team_pick_popup.phase', 1);
    $flag_counts = [1 => 8, 2 => 4, 3 => 2];
    $num_flags = $flag_counts[$phase] ?? 8;

    $flags_dir = public_path('assets/images/team_flags');
    $flag_files = glob($flags_dir . '/flag_*.png') ?: [];
    natsort($flag_files);
    $flag_files = array_values(array_slice($flag_files, 0, $num_flags));

    $flags = array_map(function($file) {
        $basename = basename($file, '.png');        // e.g. "flag_1-singapore"
        $parts = explode('-', $basename, 2);
        return [
            'file'    => basename($file),
            'country' => $parts[1] ?? $basename,   // "singapore"
        ];
    }, $flag_files);
@endphp

@component(getPopupLayout(), ['id' => 'popup_team_pick'])
    <style>
        #popup_team_pick .modal-header { display: none !important; }
        #popup_team_pick .masthead-popup { display: none !important; }
        #popup_team_pick .modal-body { padding-top: 0 !important; }
        #popup_team_pick .modal-body {
            background-image: url('{{ asset('assets/images/BACKGROUND-FOOTBALL-FEVER-PREDICTION-FINAL.webp') }}') !important;
            background-size: cover !important;
            background-repeat: no-repeat !important;
            background-position: top center !important;
        }
        #popup_team_pick .team-flag-btn {
            background: rgba(100, 60, 180, 0.35);
            border: 2px solid rgba(150, 100, 220, 0.4);
            border-radius: 12px;
        }
        #popup_team_pick .team-flag-btn.selected {
            outline: 3px solid var(--primary);
            border-radius: 12px;
        }
        #popup_team_pick .team-flag-btn div { color: #fff !important; }
        #popup_team_pick .btn-lock-pick { color: #000 !important; }
        @media (max-width: 575px) {
            #popup_team_pick .modal-body { background-size: 100% auto !important; background-position: top center !important; background-color: #0e0060 !important; }
            #popup_team_pick .status_item { padding-top: 45% !important; }
            #popup_team_pick .d-flex.flex-wrap {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                margin-top: 0 !important;
            }
            #popup_team_pick .team-flag-btn {
                width: auto !important;
                margin: 0.3rem !important;
            }
            #popup_team_pick .team-flag-btn > img {
                width: 80px !important;
                height: 50px !important;
            }
        }
    </style>

    <div class="status_item" status_id="default" style="padding-top: 170px;">
        <img src="{{ asset('assets/images/CONTAINER-FINAL-CHANCES.webp') }}" alt="" style="width:100%; display:block; margin:0 auto 2px;">
        <div class="d-flex flex-wrap justify-content-center" style="margin-top:-1.5rem;">
            @foreach ($flags as $flag)
                <button class="team-flag-btn btn p-2 m-2 position-relative" data-team="{{ $flag['country'] }}">
                    <img src="{{ asset('assets/images/team_flags/' . $flag['file']) }}"
                         alt="{{ $flag['country'] }}" style="width: 80px; height: 50px; object-fit: cover;">
                    <span class="team-flag-check" style="display:none; position:absolute; top:2px; right:2px;
                          background:#28a745; color:#fff; border-radius:50%; width:20px; height:20px;
                          font-size:12px; line-height:20px; text-align:center;">✓</span>
                    <div style="font-size:11px; margin-top:4px; text-align:center;">
                        {{ ucwords(str_replace('-', ' ', $flag['country'])) }}
                    </div>
                </button>
            @endforeach
        </div>
        <div class="d-flex align-items-center justify-content-center mt-3 px-2" style="gap:8px;">
            <input type="checkbox" id="confirm-pick-checkbox" style="flex-shrink:0; width:16px; height:16px; cursor:pointer;">
            <label for="confirm-pick-checkbox" style="font-size:12px; color:#fff; cursor:pointer; text-align:left; margin:0;">
                Once submitted, your prediction cannot be changed. Confirm your pick?
            </label>
        </div>
        <div class="text-center mt-2">
            <button class="btn btn-primary btn-lock-pick" disabled style="opacity:0.5; color:#000;">
                LOCK IN MY PICK
            </button>
        </div>
    </div>

@endcomponent