{{-- This is a guide for fixing Edit button visibility in package allocation tables --}}

{{-- ISSUE: Edit buttons only show for first row (index 0) when using rowspan --}}
{{-- SOLUTION: Add Edit/Copy/Delete buttons to EVERY row, or use rowspan consistently --}}

{{-- CORRECT APPROACH 1: Edit button on each row (no rowspan) --}}
<table class="w-full">
    <thead>
        <tr>
            <th>ID</th>
            <th>Section</th>
            <th>Amount</th>
            <th>Status</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach($allocations as $allocation)
        <tr>
            <td>{{ $allocation->id }}</td>
            <td>{{ $allocation->section }}</td>
            <td>RM {{ $allocation->amount }}</td>
            <td>{{ $allocation->status }}</td>
            <td>
                <div class="flex gap-2">
                    <a href="{{ route('admin.allocations.edit', $allocation) }}" class="btn btn-edit">
                        <i class="fas fa-edit"></i> Edit
                    </a>
                    <button class="btn btn-copy">
                        <i class="fas fa-copy"></i> Copy
                    </button>
                    <button class="btn btn-delete">
                        <i class="fas fa-trash"></i> Delete
                    </button>
                </div>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>

{{-- CORRECT APPROACH 2: Using rowspan (only show actions on first row) --}}
<table class="w-full">
    <thead>
        <tr>
            <th>ID</th>
            <th>Section</th>
            <th>Amount</th>
            <th>Status</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach($allocations as $index => $allocation)
            @php
                $details = $allocation->details ?? [];
                $detailCount = is_array($details) ? count($details) : (is_object($details) && method_exists($details, 'count') ? $details->count() : 1);
            @endphp
            
            @foreach($details as $detailIndex => $detail)
            <tr>
                @if($detailIndex === 0)
                    {{-- First row: show ID and main info with rowspan --}}
                    <td rowspan="{{ $detailCount }}">{{ $allocation->id }}</td>
                    <td rowspan="{{ $detailCount }}">{{ $allocation->section }}</td>
                    <td rowspan="{{ $detailCount }}">RM {{ $allocation->amount }}</td>
                    <td rowspan="{{ $detailCount }}">{{ $allocation->status }}</td>
                    <td rowspan="{{ $detailCount }}" class="text-right">
                        <div class="flex gap-2 justify-end">
                            <a href="{{ route('admin.allocations.edit', $allocation) }}" class="btn btn-edit">
                                <i class="fas fa-edit"></i> Edit
                            </a>
                            <button class="btn btn-copy" onclick="copyAllocation({{ $allocation->id }})">
                                <i class="fas fa-copy"></i> Copy
                            </button>
                            <button class="btn btn-delete" onclick="deleteAllocation({{ $allocation->id }})">
                                <i class="fas fa-trash"></i> Delete
                            </button>
                        </div>
                    </td>
                @endif
                {{-- Remaining rows: only show detail info --}}
                <td>{{ $detail->name ?? 'Detail' }}</td>
            </tr>
            @endforeach
        @endforeach
    </tbody>
</table>

{{-- KEY POINTS: --}}
{{-- 1. If using rowspan, ONLY the first row gets the action buttons with @if($detailIndex === 0) --}}
{{-- 2. The rowspan attribute should equal the number of detail rows --}}
{{-- 3. ALL rows with rowspan use @if($idx === 0) to show actions only once per group --}}
{{-- 4. Make sure your controller passes the correct data structure --}}