@extends('frontend.slices.main')
@section('content')
<div class="section banner-page about">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="title-page" style="background-color: #083472; padding: 5px 5px 5px 5px; border-radius: 5px;">Career</div>
            </div>
        </div>
    </div>
</div>

<div class="section why overlap">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-12">
                <h3>Join Us</h3>
                <p>You are our valuable asset that will accelerate the achievement of the vision <br>
                    to strengthen the position of PT. Konishi Lemindo Indonesia as an advanced.</p>
                <div class="margin-bottom-50"></div>

                <div class="career-tabs" data-example-id="togglable-tabs">
                    <ul id="myTabs" class="nav nav-tabs" role="tablist">
                        @php $i = 1; @endphp
                        @foreach ($careers as $career)
                        <li role="presentation" class="{{ $i == 1 ? 'active' : '' }}">
                            <a href="#tab{{ $i }}" role="tab" id="careerTab{{ $i }}" data-toggle="tab" aria-controls="tab{{ $i }}" aria-expanded="{{ $i == 1 ? 'true' : 'false' }}">{{ $career->position }}</a>
                        </li>
                        @php $i++; @endphp
                        @endforeach
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        @php $i = 1; @endphp
                        @foreach ($careers as $career)
                        <div role="tabpanel" class="tab-pane fade {{ $i == 1 ? 'active in' : '' }}" id="tab{{ $i }}">
                            <div class="row">
                                <div class="col-sm-12 col-md-12">
                                    <div class="body-tab">
                                        {!! $career->description ?? '' !!}
                                        <div class="margin-bottom-30"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @php $i++; @endphp
                        @endforeach
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

@endsection