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

<div class="d-flex justify-content-between mb-3">

    <h5 class="mb-0">
        UN Security Council 1988 Sanctions List (Taliban)
    </h5>

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

</div>


<div class="table-responsive" style="max-height: 500px; overflow-y: auto;">

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

        <thead class="table-light sticky-top">

            <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
                </th>

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

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

            </tr>

        </thead>


        <tbody>

            @forelse ($records as $record)

                <tr>
                    {{-- NO --}}
                    <td>
                        {{ ($records->currentPage() - 1) * $records->perPage() + $loop->iteration }}
                    </td>

                    {{-- NAME --}}
                    <td>

                        @php

                            $fullName = trim(
                                ($record->FIRST_NAME ?? '') .
                                    ' ' .
                                    ($record->SECOND_NAME ?? '') .
                                    ' ' .
                                    ($record->THIRD_NAME ?? '') .
                                    ' ' .
                                    ($record->FOURTH_NAME ?? ''),
                            );
                        @endphp

                        {{ $fullName !== '' ? $fullName : ($record->NAME_ORIGINAL_SCRIPT ?: '-') }}

                    </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 --}}
                    <td>
                        {{ $record->PASSPORT ?: '-' }}
                    </td>

                    {{-- LISTED DATE --}}
                    <td>

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

                    </td>

                    {{-- ACTION --}}
                    <td>

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

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

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

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

                        </div>

                    </td>

                </tr>

            @empty

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

        </tbody>

    </table>

</div>


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