@props(['service' => new \App\Models\Service()])

<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 Service</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="reviewTabs" role="tablist">
                @if ($application->product_group->is_ggp)
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab">
                            General Information
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="service-tab" data-bs-toggle="tab" data-bs-target="#service" type="button" role="tab">
                            Service Requirement
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="product-tab" data-bs-toggle="tab" data-bs-target="#product" type="button" role="tab">
                            Product Requirement
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="certificate-tab" data-bs-toggle="tab" data-bs-target="#certificate" type="button" role="tab">
                            Service Certifications and Standards
                        </button>
                    </li>
                    {{-- <li class="nav-item" role="presentation">
                        <button class="nav-link" id="environment-tab" data-bs-toggle="tab" data-bs-target="#environment"
                            type="button" role="tab">
                            Environment Management
                        </button>
                    </li> --}}
                @else
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab">
                            General Information
                        </button>
                    </li>
                @endif

                <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">
                @if ($application->product_group->is_ggp)
                    <div class="tab-pane fade show active" id="general" role="tabpanel">
                        @include('pages.company.service.partials.review.a-general')
                    </div>
                    <div class="tab-pane fade" id="service" role="tabpanel">
                        @include('pages.company.service.partials.review.b-service-requirement')
                    </div>
                    <div class="tab-pane fade" id="product" role="tabpanel">
                        @include('pages.company.service.partials.review.c-product-requirement')
                    </div>
                    <div class="tab-pane fade" id="certificate" role="tabpanel">
                        @include('pages.company.service.partials.review.d-service-certification')
                    </div>
                    {{-- <div class="tab-pane fade" id="environment" role="tabpanel">
                        @include('pages.company.service.partials.review.e-environment')
                    </div> --}}
                @else
                    <div class="tab-pane fade show active" id="general" role="tabpanel">
                        @include('pages.company.service.partials.review.general')
                    </div>
                @endif

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