@extends('frontend.layouts.app')

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

@section('content')
    @include('frontend.layouts.breadcrumb', ['title' => 'Team Details'])

    <section class="team-details space-top pb-80 md-pb-60 bg-light">
        <div class="container">
            <div class="row align-items-center lg-mx-0">
                <div class="col-lg-4 col-md-6 pl-0 md-px-15">
                    <div class="team-image cms-frame cms-frame--team-detail">
                        <img class="cms-img-cover" src="{{ $team->image ? asset('storage/' . $team->image) : asset('frontend/images/team/hm1-img01.webp') }}" alt="{{ $team->name }}" width="410" height="520">
                    </div>
                </div>
                <div class="col-lg-8">
                    <div class="team-info ml-30 lg-ml-0 py-30">
                        <h2 class="team-name">{{ $team->name }}</h2>
                        <span class="team-role">{{ $team->position }}</span>
                        <h3 class="bio-title">Biography</h3>
                        <p class="bio-text">{{ $team->bio ?: ($team->name . ' supports Ndarama Technologies in delivering practical software systems, implementation support, and client-focused digital operations.') }}</p>
                        <ul class="team-meta">
                            @if(!is_null($team->experience_years))<li><strong>Experience</strong> : {{ $team->experience_years }} Years</li>@endif
                            @if($team->department)<li><strong>Department</strong> : {{ $team->department->name }}</li>@endif
                            @if($team->email)<li><strong>E-Mail</strong> : <a href="mailto:{{ $team->email }}">{{ $team->email }}</a></li>@endif
                            @if($team->phone)<li><strong>Phone</strong> : <a href="tel:{{ $team->phone }}">{{ $team->phone }}</a></li>@endif
                        </ul>
                        <div class="team-social">
                            @if($team->facebook)<a href="{{ $team->facebook }}"><i class="fa-brands fa-facebook-f"></i></a>@endif
                            @if($team->twitter)<a href="{{ $team->twitter }}"><i class="fab fa-x-twitter"></i></a>@endif
                            @if($team->linkedin)<a href="{{ $team->linkedin }}"><i class="fa-brands fa-linkedin-in"></i></a>@endif
                            @if($team->instagram)<a href="{{ $team->instagram }}"><i class="fab fa-instagram"></i></a>@endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if($relatedTeams->count() > 0)
        <section class="tv-team-section bg-light space-bottom">
            <div class="container">
                <div class="title-wrap three mb-40">
                    <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>Our Team</div>
                    <h2 class="sec-title">More Team Members</h2>
                </div>
                <div class="row gy-30">
                    @foreach($relatedTeams as $member)
                        <div class="col-lg-3 col-md-6">
                            <div class="tv-team-card style-2">
                                <div class="team-photo cms-frame cms-frame--team">
                                    <img class="cms-img-cover" src="{{ $member->image ? asset('storage/' . $member->image) : asset('frontend/images/team/hm1-img0' . (($loop->iteration % 3) ?: 3) . '.webp') }}" alt="{{ $member->name }}" width="384" height="420">
                                </div>
                                <div class="team-info">
                                    <div class="info-inner">
                                        <h3 class="team-name"><a href="{{ route('frontend.teams.show', $member) }}">{{ $member->name }}</a></h3>
                                        <p class="team-role">{{ $member->position }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <section class="team-skills space-bottom bg-light">
        <div class="container">
            <div class="row gy-30 justify-content-between">
                <div class="col-lg-6 col-md-6">
                    <div class="title-area">
                        <h2 class="sec-title"><span class="bold">Working Skills</span></h2>
                        <p class="sec-text mb-40">Our team combines software engineering, systems thinking, support, and practical delivery for real client operations.</p>
                    </div>
                    <div class="skill-stats">
                        <div class="stat-box">
                            <h3 class="stat-number"><span class="stat-icon"><i class="fa-solid fa-circle-check"></i></span><span class="count-number odometer" data-count="{{ \App\Models\Project::active()->count() }}">0</span>+</h3>
                            <p class="stat-label mb-0">Successful Projects</p>
                        </div>
                        <div class="stat-box">
                            <h3 class="stat-number"><span class="stat-icon"><i class="fa-solid fa-circle-check"></i></span><span class="count-number odometer" data-count="{{ \App\Models\Service::active()->count() }}">0</span>+</h3>
                            <p class="stat-label mb-0">Digital Solutions</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="contact-form ml-95 lg-ml-20 md-ml-0">
                        <div class="title-wrap text-center">
                            <div class="sub-title-2"><i class="fa-solid fa-circle-check"></i>Contact Me</div>
                            <h2 class="sec-title">Get in touch with {{ \Illuminate\Support\Str::before($team->name, ' ') }}</h2>
                        </div>
                        <form class="contact_form" action="{{ route('frontend.contact.submit') }}" method="post">
                            @csrf
                            @include('frontend.partials.contact-spam-fields')
                            <input type="hidden" name="subject" value="Team enquiry: {{ $team->name }}">
                            <div class="form-group"><input type="text" name="name" placeholder="Your Name *" required></div>
                            <div class="form-group"><input type="email" name="email" placeholder="Enter Your E-Mail *" required></div>
                            <div class="form-group"><input type="text" name="phone" placeholder="Phone No."></div>
                            <div class="form-group"><textarea name="message" placeholder="Write Message :" required></textarea></div>
                            <button type="submit" class="theme-btn bg-theme mt-5 w-100"><span class="link-effect"><span class="btn-title">Send Now</span></span><i class="fa-regular fa-arrow-right-long"></i></button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @include('frontend.partials.newsletter')
@endsection