@extends('frontend.layouts.app')

@section('title', $title)
@section('description', $description)

@section('content')
@php
    $assetPath = fn (string $path) => asset('frontend/' . ltrim($path, '/'));
@endphp

@include('frontend.layouts.breadcrumb', ['title' => $department->name])

<section class="tv-about-section style-3 space bg-light">
    <div class="container">
        <div class="row gy-30 align-items-center">
            <div class="col-lg-5">
                <div class="about-left">
                    <div class="about-thumb cms-frame cms-frame--service">
                        <img class="cms-img-cover br-20" src="{{ asset('storage/uploads/generated/ndarama-collaboration.png') }}" alt="{{ $department->name }}">
                    </div>
                    <div class="counter mt-40">
                        <div class="about-counter">
                            <div class="count-box"><span class="count-number odometer" data-count="{{ max(1, $statistics['total_users']) }}">0</span></div>
                            <div class="text"><span>+</span><p>Team <br> Members</p></div>
                            <div class="scribble md-d-none"><img src="{{ $assetPath('images/icons/scribble-2.webp') }}" alt=""></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-7">
                <div class="about-content-wrap">
                    <div class="title-wrap three">
                        <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>Department</div>
                        <h2 class="sec-title">{{ $department->name }} Department</h2>
                        <p>{{ $department->description ?: "Learn about the {$department->name} department and the work handled by this team." }}</p>
                    </div>
                    <div class="row gy-20 mt-30">
                        @foreach([
                            ['Team Members', $statistics['total_users']],
                            ['Active Projects', $statistics['active_projects']],
                            ['Completed Projects', $statistics['completed_projects']],
                            ['Open Positions', $statistics['open_vacancies']],
                        ] as $stat)
                            <div class="col-md-6">
                                <div class="tv-feature-box">
                                    <h2>{{ $stat[1] }}</h2>
                                    <p>{{ $stat[0] }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <a href="{{ route('frontend.departments.index') }}" class="theme-btn mt-40 br-30">
                        <span class="link-effect"><span class="effect-1">All Departments</span><span class="effect-1">All Departments</span></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

@if($department->children->count() > 0)
    <section class="tv-service-section style-2 bg-light">
        <div class="tv-service-inner space-top position-relative overflow-hidden mx-30 ml-mx-0">
            <div class="bg image"><img src="{{ $assetPath('images/service/hm2-bg01.webp') }}" alt=""></div>
            <div class="container">
                <div class="title-wrap two white text-center">
                    <div class="sub-title-2 text-white two"><i class="fa-solid fa-circle-check"></i>Sub Departments</div>
                    <h2 class="sec-title">Teams Inside {{ $department->name }}</h2>
                </div>
                <div class="service-slider swiper">
                    <div class="swiper-wrapper">
                        @foreach($department->children as $child)
                            <div class="swiper-slide">
                                <div class="tv-service-single-box wow fadeInUp">
                                    <div class="inner-box">
                                        <div class="icon"><img src="{{ $assetPath('images/service/hm1-icon0' . (($loop->iteration % 3) ?: 3) . '.webp') }}" alt=""></div>
                                        <h4 class="title">{{ $child->name }}</h4>
                                        <div class="border2 mt-20 mb-20"></div>
                                        <p class="text">{{ \Illuminate\Support\Str::limit($child->description ?: 'Explore this sub-department.', 110) }}</p>
                                        <a href="{{ route('frontend.departments.show', $child->slug) }}" class="theme-btn w-100 mt-40"><span class="link-effect"><span class="effect-1">EXPLORE MORE</span><span class="effect-1">EXPLORE MORE</span></span><i class="fa-solid fa-arrow-up-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
@endif

@if($department->projects->count() > 0)
    <section class="tv-project-section inner space bg-light">
        <div class="container">
            <div class="title-wrap text-center">
                <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>Projects</div>
                <h2 class="sec-title">Recent Department Projects</h2>
            </div>
            <div class="row gy-40">
                @foreach($department->projects as $project)
                    <div class="col-lg-4 col-md-6 col-sm-6">
                        <div class="project-single-box">
                            <div class="thumb cms-frame cms-frame--project-list">
                                <img class="img cms-img-cover" src="{{ $project->featured_image ? asset('storage/' . $project->featured_image) : $assetPath('images/project/project0' . (($loop->iteration % 6) ?: 6) . '.webp') }}" alt="{{ $project->title }}" width="416" height="320">
                            </div>
                            <div class="project-info">
                                <h4 class="title"><a href="{{ route('frontend.projects.show', $project->slug) }}">{{ $project->title }}</a></h4>
                                <div class="project-badge"><span>{{ strtoupper($project->status_label ?? $project->status) }}</span><span>{{ optional($project->updated_at)->format('d M, Y') }}</span></div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endif

@if($department->vacancies->count() > 0)
    <section class="tv-service-section space-bottom inner style-2 bg-light">
        <div class="container">
            <div class="title-wrap text-center three">
                <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>Careers</div>
                <h2 class="sec-title">Open Positions</h2>
            </div>
            <div class="row gy-30">
                @foreach($department->vacancies as $vacancy)
                    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6">
                        <div class="tv-service-single-box wow fadeInUp">
                            <div class="inner-box">
                                <div class="icon"><img src="{{ $assetPath('images/service/details-icon01.webp') }}" alt=""></div>
                                <h4 class="title">{{ $vacancy->title }}</h4>
                                <div class="border2 mt-20 mb-20"></div>
                                <p class="text">{{ \Illuminate\Support\Str::limit(strip_tags($vacancy->description), 110) }}</p>
                                <a href="{{ route('frontend.vacancies.show', $vacancy->slug) }}" class="theme-btn w-100 mt-40"><span class="link-effect"><span class="effect-1">APPLY NOW</span><span class="effect-1">APPLY NOW</span></span><i class="fa-solid fa-arrow-up-right"></i></a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endif

@include('frontend.partials.newsletter')
@endsection