@props(['records', 'countryCodes'])

{{-- TABLE HEADER --}}
<div class="d-flex justify-content-between align-items-center mb-3">

    <h5 class="mb-0">
        ISIL (Da'esh) & Al-Qaida Sanctions List
    </h5>

    <span class="badge bg-secondary">
        {{ $records->total() }}
        Records
    </span>

</div>



{{-- TABLE --}}
<div class="table-responsive">

    <table class="table table-hover align-middle mb-0" style=" table-layout: fixed; width: 100%; ">

        <thead class="table-light">
            <tr>

                <th style="width: 35px;">
                    No.
                </th>

                <th style="width: 260px;">
                    Name
                </th>

                <th style="width: 140px;">
                    Nationality
                </th>

                <th style="width: 180px;">
                    Passport / ID No.
                </th>

                <th style="width: 130px;">
                    Date Listed
                </th>

                <th style="width: 180px;">
                    Action
                </th>

            </tr>
        </thead>

        <tbody>
            @forelse($records as $record)
                <tr>

                    {{-- NO --}}
                    <td>
                        {{ $records->firstItem() + $loop->index }}
                    </td>

                    {{-- NAME --}}
                    <td class="fw-semibold" style=" white-space: normal; word-wrap: break-word">

                        {{ trim(
                            ($record->FIRST_NAME ?? '') .
                                ' ' .
                                ($record->SECOND_NAME ?? '') .
                                ' ' .
                                ($record->THIRD_NAME ?? '') .
                                ' ' .
                                ($record->FOURTH_NAME ?? ''),
                        ) ?:
                            '-' }}

                    </td>


                    {{-- NATIONALITY --}}

                    <td>
                        @php
                            $iso3 = $record->NATIONALITY
                                ? $countryCodes[strtolower(trim($record->NATIONALITY))] ?? null
                                : null;

                            $flagCode = $this->getFlagCode($iso3);
                        @endphp

                        @if ($record->NATIONALITY)
                            <div class="d-flex align-items-center gap-2">

                                @if ($flagCode)
                                    <span class="fi fi-{{ $flagCode }}" style="font-size: 18px;"></span>
                                @endif

                                <span>
                                    {{ $record->NATIONALITY }}
                                </span>

                            </div>
                        @else
                            -
                        @endif
                    </td>




                    {{-- PASSPORT / ID --}}
                    <td style=" white-space: normal; word-wrap: break-word; ">
                        {{ $record->PASSPORT ?: '-' }}
                    </td>

                    {{-- LISTED DATE --}}
                    <td>
                        {{ $record->LISTED_ON ? \Carbon\Carbon::parse($record->LISTED_ON)->format('d/m/Y') : '-' }}
                    </td>

                    {{-- ACTION --}}
                    <td style="white-space: nowrap;">

                        <div class="d-flex gap-1">

                            <button type="button" class="btn btn-sm btn-outline-primary"
                                wire:click="viewUnscr1267({{ $record->id }})">
                                View
                            </button>


                            <button type="button" class="btn btn-sm btn-outline-warning"
                                wire:click="editUnscr1267({{ $record->id }})">
                                Edit
                            </button>


                            <button type="button" class="btn btn-sm btn-outline-danger"
                                wire:click="confirmDeleteUnscr1267({{ $record->id }})">
                                Delete
                            </button>

                        </div>

                    </td>

                </tr>

            @empty

                <tr>
                    <td colspan="7" class=" text-center text-muted py-4">
                        No UNSCR 1267 records found.
                    </td>
                </tr>

            @endforelse

        </tbody>

    </table>

</div>

{{-- PAGINATION --}}
<div class="mt-3">
    {{ $records->links() }}
</div>