@extends('layouts.master')

@section('title', $page->title . ' | ' . setting('site.title'))

@section('content')
<!--begin::Content-->

<style>
    /* Department tabs: only the active panel is shown; team-tabs.js toggles .active. */
    .team-panel {
        display: none;
    }

    .team-panel.active {
        display: block;
    }

    .team-tab.active {
        font-weight: bold;
        text-decoration: underline;
    }

    /* Company sub-heading shown above each company_working_with group within a department tab. */
    .team-company-heading {
        color: #2f6fa8;
        border-top: 1px solid #dbe7f0;
        border-bottom: 1px solid #dbe7f0;
        padding: 10px 16px;
        margin: 30px 0 10px;
        font-size: 15px;
    }

    .team-company-group:first-child .team-company-heading {
        margin-top: 0;
    }
</style>

<div class="main-container">

    <!-- Page  Start -->
    <section class="banner-container ">
        <div class="banner-title ">
            <div style="line-height: 1.1;">
                <span style="background-color: #86A34D;font-weight: bold; margin-bottom: 8px;font-size: 64px;">{!! $page->title !!}</span>
            </div>
        </div>
        <div style="height: 400px;" class="banner-image">
            <img src="{{ Voyager::image($page->image) }}" decoding="async" loading="lazy" alt="" style="width: 100%; height: 100%; object-fit: cover; object-position: center;" rel="preload" as="image">
        </div>
    </section>

    <section class="container-fluid  body-container" style="background: #86A34D;" class="pointer">
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-lg-10 col-xl-10 py-3" style="color:white;" class="pointer">
                    WE ARE HIRING : <span style="text-decoration: underline;color:white;" onclick="(location.href='{{ route('careers') }}' )">SEE OPEN POSITIONS</span>
                </div>
            </div>
        </div>
    </section>

    {{-- Department tabs — generated dynamically from the grouped team data. Any new department added in Voyager automatically appears here. --}}
    <section class="container-fluid  body-container" >
        <div class="container">
            <div class="row team-profile">
                <div class="col-md-10 col-lg-10 col-xl-10 pt-3" style="color:white;" class="pointer">
                    <section class="btns_section">

                        @foreach($teams as $department => $members)

                            <button type="button" role="tab"
                                class="btn btn1 team-tab"
                                aria-selected="false"
                                data-target="team-panel-{{ \Illuminate\Support\Str::slug($department) }}">
                                {{ $department }}
                            </button>

                        @endforeach
                        <button type="button" role="tab"
                            class="btn5 btn team-tab team-tab-all active"
                            aria-selected="true"
                            data-target="team-panel-all">
                            All
                        </button>

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

    <!-- Team Section Start -->
    <div class="container-fluid body-container team-profile">
        <div class="row pt-4 pb-4">
            <div class=" col-md-10 col-lg-10 col-xl-10 m-auto">
                <section class="team-profile-details">

                    {{-- One panel per department; only the active one is visible. Within a panel,
                    members are sub-grouped by company_working_with (a heading per company);
                    members with no company set render in a plain grid with no heading. --}}
                    @foreach($teams as $department => $members)
                        @php
                            [$noCompany, $byCompany] = \App\Models\Team::groupByCompany($members);
                        @endphp
                        <div id="team-panel-{{ \Illuminate\Support\Str::slug($department) }}"
                            class="team-panel"
                            role="tabpanel"
                            aria-label="{{ $department }}">

                            @if($noCompany->isNotEmpty())
                                <div class="row team-company-group">
                                    {{-- No "wow" here on purpose: cards live inside hidden tab panels,
                                    and WOW.js would leave off-screen ones permanently invisible.
                                    The panel's own fade-in (see .team-panel.active) animates them. --}}
                                    @foreach($noCompany as $member)
                                        @include('partials.team-member-card', ['member' => $member])
                                    @endforeach
                                </div>
                            @endif

                            @foreach($byCompany as $company => $companyMembers)
                                <div class="team-company-group">
                                    <div class="team-company-heading">{{ $company }}</div>
                                    <div class="row">
                                        @foreach($companyMembers as $member)
                                            @include('partials.team-member-card', ['member' => $member])
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endforeach

                    {{-- "All" panel: every active member across every department, in one grid. --}}
                    <div id="team-panel-all" class="team-panel active" role="tabpanel" aria-label="All">
                        <div class="row">
                            @foreach($teams->collapse() as $member)
                                @include('partials.team-member-card', ['member' => $member])
                            @endforeach
                        </div>
                    </div>

                </section>
            </div>
        </div>
    </div>
    <!-- Team Section End -->

</div>
<!--end::Content-->
@endsection

@push('custom-js-scripts')
    <script src="{{ asset('js/team-tabs.js') }}"></script>
@endpush