@php
    $alphabet = range('A', 'Z');
    if ($application->product_group->is_ggp) {
        $tabs = [
            'general' => 'General Information',
            'service' => 'Service Requirement',
            'product' => 'Product Requirement',
            'certification' => 'Service Certifications and <br> Standards',
            // 'environment' => 'Environment Management',
            'contact' => 'Contact Person',
        ];
    } else {
        $tabs = [
            'general' => 'General Information',
            'contact' => 'Contact Person',
        ];
    }
@endphp

<ul class="nav nav-tabs nav-fill approval-tabs" id="serviceTabs" role="tablist">
    @foreach ($tabs as $key => $title)
        <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[$loop->index] }}: </span>
                    <span class="main-text">{!! $title !!}</span>
                </div>
            </button>
        </li>
    @endforeach
</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.service.partials.form.a-general')
            </div>
        </div>
        <div id="service" class="tab-pane fade">
            <div class="bg-white">
                @include('pages.company.service.partials.form.b-service-requirement')
            </div>
        </div>
        <div id="product" class="tab-pane fade">
            <div class="bg-white">
                @include('pages.company.service.partials.form.c-product-requirement')
            </div>
        </div>
        <div id="certification" class="tab-pane fade">
            <div class="bg-white">
                @include('pages.company.service.partials.form.d-service-certification')
            </div>
        </div>
        {{-- <div id="environment" class="tab-pane fade">
            <div class="bg-white">
                @include('pages.company.service.partials.form.e-environment')
            </div>
        </div> --}}
    @else
        <div id="general" class="tab-pane fade show active">
            <div class="bg-white">
                @include('pages.company.service.partials.form.general')
            </div>
        </div>
    @endif

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