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

<ul class="nav nav-tabs nav-fill approval-tabs" id="productTabs" role="tablist">
    @foreach ($form->formSections as $key => $formSection)
        <li class="nav-item" role="presentation">
            <button class="nav-link {{ $loop->first ? 'active' : '' }}" id="{{ $key }}-tab" data-bs-toggle="tab" data-bs-target="#{{ $key }}" type="button" role="tab">
                <div class="step-title">
                    <span class="small-text">Section {{ $alphabet[++$alphabetIndex] }}: </span>
                    <span class="main-text">{{ $formSection->section_name }}</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" 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>
    @if ($application->type == 'product')
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="sales-tab" data-bs-toggle="tab" data-bs-target="#sales" 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>
    @endif
</ul>

<div class="tab-content">
    @
    @if ($application->product_group->is_ggp)
        <div id="general" class="tab-pane fade show active">
            <div class="bg-white">
                @include('pages.company.products.partials.form.a-general')
            </div>
        </div>
        <div id="environment" class="tab-pane fade">
            <div class="bg-white">
                @include('pages.company.products.partials.form.b-environment')
            </div>
        </div>
        <div id="product" class="tab-pane fade">
            <div class="bg-white">
                @include('pages.company.products.partials.form.c-product-cert')
            </div>
        </div>
        <div id="manufacturer" class="tab-pane fade">
            <div class="bg-white">
                @include('pages.company.products.partials.form.d-manufacturer')
            </div>
        </div>
    @else
        <div id="general" class="tab-pane fade active">
            <div class="bg-white">
                @include('pages.company.products.partials.form.general')
            </div>
        </div>
    @endif

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

    @if ($application->type == 'product')
        <div id="sales" class="tab-pane fade">
            <div class="bg-white">
                @include('pages.company.products.partials.form.sales-channel')
            </div>
        </div>
    @endif
</div>