@php
    $columns = $orientation === 'portrait' ? 2 : 1;
@endphp

@foreach(array_chunk($cardsData, $cardsPerPage) as $pageCards)
    <div class="page-break-wrap" {!! !$loop->last ? 'style="page-break-after: always;"' : '' !!}>
        <table class="cards-grid">
            @foreach(array_chunk($pageCards, $columns) as $row)
                <tr>
                    @foreach($row as $item)
                        @php
                            $card = $item['card'];
                            $qrPng = $item['qrPng'];
                            $photo = $item['photo'];
                        @endphp
                        <td class="card-cell">
                            <div class="card">
                                @if($background)
                                    <div class="content-overlay" style="background-image: url('{{ $background }}'); background-size: cover; background-position: center;">
                                        <div style="position: absolute; inset: 0; background: rgba(255,255,255,0.90);"></div>
                                    </div>
                                @endif

                                <div class="id-header">
                                    <div class="logo-wrapper">
                                        <div class="cell">
                                            <img src="{{ $companyLogo }}" alt="{{ $card->company?->name }}">
                                        </div>
                                    </div>
                                    @if($orientation === 'portrait')
                                        <div class="header-line"></div>
                                    @endif
                                </div>

                                @if (($allowFields['show_photo'] ?? false) == true)
                                    <div class="photo-wrap">
                                        <div class="cell">
                                            <img src="{{ $photo }}" alt="{{ $card->employee?->first_name }}">
                                        </div>
                                    </div>
                                @endif

                                <div class="employee-name">
                                    {{ $card->employee?->first_name }} {{ $card->employee?->last_name }}
                                </div>

                                @if (($allowFields['show_designation'] ?? false) == true)
                                    <div class="employee-designation">
                                        {{ $card->employee?->currentOrganizationAssignment?->designation?->full_title ?? 'N/A' }}
                                    </div>
                                @endif

                                <table class="fields">
                                    @if (($allowFields['show_employee_id'] ?? false) == true)
                                        <tr>
                                            <td>Employee Code</td>
                                            <td>{{ $card->employee?->employee_no }}</td>
                                        </tr>
                                    @endif
                                    @if (($allowFields['show_department'] ?? false) == true)
                                        <tr>
                                            <td>Department</td>
                                            <td>{{ $card->employee?->currentOrganizationAssignment?->department?->department_name ?? 'N/A' }}</td>
                                        </tr>
                                    @endif
                                    @if (($allowFields['show_blood_group'] ?? false) == true)
                                        <tr>
                                            <td>Blood Group</td>
                                            <td>{{ $card->employee?->blood_group }}</td>
                                        </tr>
                                    @endif
                                    <tr>
                                        <td>Card Number</td>
                                        <td>{{ $card?->card_number }}</td>
                                    </tr>
                                    <tr>
                                        <td>Issue Date</td>
                                        <td>{{ $card?->issue_date->format('d F, Y') }}</td>
                                    </tr>
                                    <tr>
                                        <td>Valid Till</td>
                                        <td>{{ $card?->expiry_date->format('d F, Y') }}</td>
                                    </tr>
                                </table>

                                <div class="signature">
                                    <img src="{{ $signature }}" alt="Signature">
                                    <div class="signature-line"></div>
                                    <div class="signatory-name">{{ $card->employeeIdCardSetting?->signatory_name }}</div>
                                    <div class="signatory-title">{{ $card->employeeIdCardSetting?->signatory_designation }}</div>
                                </div>

                                @if (($allowFields['show_qr_code'] ?? false) == true)
                                    <div class="qr-box">
                                        <img src="data:image/png;base64,{{ $qrPng }}" alt="QR Code">
                                    </div>
                                    <div class="qr-caption">Scan to Verify</div>
                                @endif

                            </div>
                        </td>
                    @endforeach
                </tr>
            @endforeach
        </table>
    </div>
@endforeach