@props(['item' => new \App\Models\Item()])

<div class="card">
    <div class="card-header collapsible cursor-pointer rotate" data-bs-toggle="collapse" data-bs-target="#information">
        <div class="card-title">
            <h3>Review {{ ucfirst($application->type) }}</h3>
        </div>
        <div class="card-toolbar rotate-180">
            <i class="ki-duotone ki-down fs-1"></i>
        </div>
    </div>
    <div id="information" class="collapse show">
        <div class="card-body">
            <!-- Nav tabs -->
            <ul class="nav nav-pills review-tabs" id="infoTabs" role="tablist">
                @foreach ($item->form->formSections->sortBy('order_index') as $formSection)
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {{ $loop->first ? 'active' : '' }}" id="{{ $formSection->id }}-tab" data-bs-toggle="tab" data-bs-target="#{{ $formSection->id }}-tab-content" type="button" role="tab">
                            {{ ucwords(strtolower($formSection->section_name)) }}
                        </button>
                    </li>
                @endforeach

                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab">
                        Contact Person
                    </button>
                </li>
            </ul>

            <!-- Tab content -->
            <div class="tab-content mt-3">
                @foreach ($item->form->formSections->sortBy('order_index') as $formSection)
                    <div id="{{ $formSection->id }}-tab-content" class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" role="tabpanel">
                        <div class="bg-white">
                            @include('pages.company.items.partials.review.base', ['alphabetIndex' => $loop->index])
                        </div>
                    </div>
                @endforeach

                <div class="tab-pane fade" id="contact" role="tabpanel">
                    @include('pages.company.products.partials.review.contact-person')
                </div>
            </div>
        </div>
    </div>
</div>