@php
    $alphabet = range('A', 'Z');
    $alphabetIndex = 0;
@endphp

<ul class="nav nav-tabs nav-fill approval-tabs" id="formTabs" role="tablist">
    @foreach ($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">
                <div class="step-title">
                    <span class="small-text">Section {{ $alphabet[$alphabetIndex++] }}: </span>
                    <span class="main-text">
                        @php
                            $sectionName = $formSection->section_name;
                            if (strlen($sectionName) > 2) {
                                $words = explode(' ', $sectionName);

                                if (count($words) > 2) {
                                    // Insert "\n" after second word
                                    $words[1] .= "<br>";
                                    $sectionName = implode(' ', $words);
                                }
                            }
                        @endphp
                        {!! ucwords(strtolower($sectionName)) !!}
                    </span>
                </div>
            </button>
        </li>
    @endforeach

    <li class="nav-item" role="presentation">
        <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-content" type="button" role="tab">
            <div class="step-title">
                <span class="small-text">Section {{ $alphabet[$alphabetIndex++] }}: </span>
                <span class="main-text">Contact Person</span>
            </div>
        </button>
    </li>

    <li class="nav-item" role="presentation">
        <button class="nav-link" id="sales-tab" data-bs-toggle="tab" data-bs-target="#sales-tab-content" type="button" role="tab">
            <div class="step-title">
                <span class="small-text">Section {{ $alphabet[$alphabetIndex++] }}: </span>
                <span class="main-text">Sales Channel</span>
            </div>
        </button>
    </li>
</ul>

@php
    $alphabetIndex = 0;
@endphp

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

    <div id="contact-tab-content" class="tab-pane fade">
        <div class="bg-white">
            @include('pages.company.items.partials.form.contact-person')
        </div>
    </div>

    <div id="sales-tab-content" class="tab-pane fade">
        <div class="bg-white">
            @include('pages.company.items.partials.form.sales-channel')
        </div>
    </div>
</div>