{{-- ===================================================== --}}
{{-- Required Details for SIM Box                        --}}
{{-- ===================================================== --}}
<div style="margin-bottom: 25px; font-family: DejaVu Sans, sans-serif;">

    {{-- Section Header --}}
    <div style="background-color: #f5f5f5; padding: 10px; border: 1px solid #ddd; font-weight: bold; color: #333; font-size: 14px; margin-bottom: 10px;">
        Required Details for SIM Box
    </div>

    {{-- Quantity of SIM Boxes --}}
    @if(!empty($simQuantity) && !empty($simAuthorisationPeriod))
    <div style="margin-bottom: 12px; padding: 8px 16px; background-color: #fafafa; border: 1px solid #ddd; font-size: 11px;">
        <ul style="margin: 0; padding: 0; list-style-position: inside; display: flex; gap: 40px; align-items: center;">
            <li>
                <strong>Quantity of SIM Boxes:</strong>&nbsp;&nbsp;<span style="font-weight: bold; color: #000;">{{ $simQuantity }}</span>
            </li>
            <li>
                <strong>Authorisation Period:</strong>&nbsp;&nbsp;<span style="font-weight: bold; color: #000;">{{ $simAuthorisationPeriod }} {{ Str::plural('Year', $simAuthorisationPeriod) }}</span>
            </li>
        </ul>
    </div>
    @endif
    {{-- SIM Boxes Table --}}
    @if(!empty($simBoxes))
    <table style="width: 100%; border-collapse: collapse; margin-bottom: 15px; font-size: 11px;">
        <thead>
            <tr>
                <th style="border: 1px solid #ddd; padding: 7px; background-color: #f0f0f0; text-align: center; width: 5%;">#</th>
                <th style="border: 1px solid #ddd; padding: 7px; background-color: #f0f0f0; width: 14%;">Make</th>
                <th style="border: 1px solid #ddd; padding: 7px; background-color: #f0f0f0; width: 14%;">Model</th>
                <th style="border: 1px solid #ddd; padding: 7px; background-color: #f0f0f0; width: 16%;">Serial Number</th>
                <th style="border: 1px solid #ddd; padding: 7px; background-color: #f0f0f0; text-align: center; width: 12%;">SIM Holding Capacity</th>
                <th style="border: 1px solid #ddd; padding: 7px; background-color: #f0f0f0; width: 20%;">IMEI Number(s)</th>
                <th style="border: 1px solid #ddd; padding: 7px; background-color: #f0f0f0; width: 19%;">ICDR Certificate</th>
            </tr>
        </thead>
        <tbody>
            @foreach($simBoxes as $index => $box)
            <tr>
                <td style="border: 1px solid #ddd; padding: 7px; text-align: center; font-weight: bold;">{{ $index + 1 }}</td>
                <td style="border: 1px solid #ddd; padding: 7px;">{{ $box['make'] ?? '-' }}</td>
                <td style="border: 1px solid #ddd; padding: 7px;">{{ $box['model'] ?? '-' }}</td>
                <td style="border: 1px solid #ddd; padding: 7px;">{{ $box['serial_number'] ?? '-' }}</td>
                <td style="border: 1px solid #ddd; padding: 7px; text-align: center;">{{ $box['sim_holding_capacity'] ?? '-' }}</td>
                <td style="border: 1px solid #ddd; padding: 7px;">
                    @if(!empty($box['imeis']))
                    @php
                    $imeiList = is_array($box['imeis']) ? $box['imeis'] : [];
                    @endphp
                    @if(count($imeiList) > 0)
                    <ul style="list-style: none; margin: 0; padding: 0;">
                        @foreach($imeiList as $imei)
                        <li style="margin-bottom: 2px;">
                            {{ !empty($imei) ? $imei : '<span style="color: #999;">(empty)</span>' }}
                        </li>
                        @endforeach
                    </ul>
                    @else
                    -
                    @endif
                    @else
                    -
                    @endif
                </td>
                <td style="border: 1px solid #ddd; padding: 7px;">
                    @if(!empty($box['icdr_certificate_name']))
                    <span style="color: #0056b3;">{{ $box['icdr_certificate_name'] }}</span>
                    @else
                    <span style="color: #999;">Not uploaded</span>
                    @endif
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    @else
    <table style="width: 100%; border-collapse: collapse; margin-bottom: 15px; font-size: 11px;">
        <tr>
            <td style="border: 1px solid #ddd; padding: 8px; text-align: center; color: #999;">No SIM box details recorded.</td>
        </tr>
    </table>
    @endif

</div>