@if (count($serviceGroups) > 0)
<div class="accordion-item mb-2">
    <h2 class="accordion-header" id="headingOne">
        <button class="accordion-button d-flex align-items-center justify-content-between"
                type="button" data-bs-toggle="collapse"
                data-bs-target="#collapseOne" aria-expanded="false"
                aria-controls="collapseOne">

            <div class="d-flex align-items-center">
                <span class="me-3">
                    <img class="img-fluid" src="./assets/images/accordian-head-img.png" alt="">
                </span>

                <div>
                    <div class="fw-bold custom-title">{{ $title }}</div>
                    <div class="custom-desc">{{ $description }}</div>
                </div>
            </div>

            {{--<div class="ms-auto d-flex align-items-right">
                <span class="custom-badge me-2">
                    {{ collect($serviceGroups)->sum(fn($g) => count($g['children'])) }}
                </span>
            </div>--}}
        </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#mainAccordion">
        <div class="accordion-body">
            @foreach ($serviceGroups as $index => $group)
                <div class="body-title">{{ $index + 1 }}. {{ $group['title'] }}</div>
                <div class="d-flex mt-2 justify-content-between gap-3">
                    @foreach ($group['children'] as $child)
                        @if ($user->hasPermission($child['permission']))
                            <div class="card-bg-primary w-50 p-3">
                                <span class="fw-bold">{{ $child['title'] }}</span>
                                @php $tempId = $child['template_id'] @endphp
                                <x-model.template-modal 
                                :template-id="$tempId"
                                button-class="apply-btn mt-2"
                                />
                            </div>
                        @endif
                        {{--<div class="card-bg-primary w-50 p-3">
                            <span class="fw-bold">{{ $child['title'] }}</span>
                            <button class="apply-btn mt-2">Apply</button>
                        </div>--}}
                    @endforeach
                </div>
                <!-- <hr class="my-3"> -->
            @endforeach
        </div>
    </div>
</div>
@endif