@extends('website.layouts.app')

@section('content')

    @include('website.layouts.title_section')

    <!-- About Company Section -->
    <section class="about-cmpny-sec py-5">
        <div class="container my-md-4">
            @if(isset($about_us['mission']))
            @foreach($about_us['mission'] as $key => $value)
            <div class="row gx-md-5 gy-4 align-items-center mb-5 pb-xl-3">
                
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <div class="info-wrapper pe-lg-4 animate__animated animate__fadeInLeft wow">
                        <h2 class="heading text-capitalize fw-bold mb-3">{{ $value->title }}</h2>
                        <p class="description text-muted mb-4">
                            {!! $value->description !!}
                        </p>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="image-wrapper position-relative animate__animated animate__fadeInRight wow">
                        <img src="{{ $value->image }}" alt="Our Mission" class="img-fluid w-100 " />
                        <div class="img-frame position-absolute top-50 start-50 translate-middle z-1"></div>
                    </div>
                </div>
            </div>
            @endforeach
            @endif

            @if(isset($about_us['vission']))
            @foreach($about_us['vission'] as $key => $value)
            <div class="row gx-md-5 gy-4 align-items-center mb-5 pb-xl-3">
                <div class="col-lg-6 order-2 order-lg-1">
                    <div class="img-wrapper position-relative animate__animated animate__fadeInLeft wow">
                        <img src="{{ $value->image }}" class="img-fluid w-100" alt="Our Vision">
                        <div class="img-frame position-absolute top-50 start-50 translate-middle z-1"></div>
                    </div>
                </div>

                <div class="col-lg-6 order-1 order-lg-2">
                    <div class="content-wrapper animate__animated animate__fadeInRight wow">
                        <div class="heading mb-2">{{ $value->title }}</div>
                        <div class="description">
                            {!! $value->description !!}
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            @endif

            @if(isset($about_us['goals']))
            @foreach($about_us['goals'] as $key => $value)
            <div class="row gx-md-5 gy-4 align-items-center">
                <div class="col-lg-6">
                    <div class="content-wrapper animate__animated animate__fadeInLeft wow">
                        <div class="heading mb-2">{{ $value->title }}</div>
                        <div class="description">
                        {!! $value->description !!}
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="img-wrapper position-relative animate__animated animate__fadeInRight wow">
                        <img src="{{ $value->image }}" class="img-fluid w-100" alt="Our Goals">
                        <div class="img-frame position-absolute top-50 start-50 translate-middle z-1"></div>
                    </div>
                </div>
            </div>
            @endforeach
            @endif

        </div>
    </section>

    <!-- Counter Section -->
    @if(count($counts) > 0)
    <section class="counters-section bg-black position-relative py-5" id="counter-section">
        <div class="container position-relative my-md-4">
            <div class="row">
                @foreach($counts as $index => $item)
                <div class="col-md-3 col-6 counter-item mb-4 mb-md-0">
                    @if($item->image != NULL)
                    <div class="counter-icon mb-3">
                        <img src="{{ url($item->image) }}" alt="Service" class="img-fluid">
                    </div>
                    @endif
                    <h2 class="count-num fw-medium mb-2" id="counter-{{ $index }}" data-target="{{ $item->number }}">0</h2>
                    <p class="counter-label text-uppercase">{{ $item->title }}</p>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <!-- Our Team Section -->
    <section class="our-team-sec overflow-hidden py-5">
        <div class="container my-md-4">
            <div class="section-head text-center mx-auto pb-md-2" style="max-width: 600px;">
                <div class="label-title">Team Member</div>
                <h1 class="heading">Meet Our Team Member</h1>
                <p class="sub-title">Lorem Ipsum is simply dummy text of the printing and
                    typesetting industry. Lorem Ipsum has been the industry's</p>
            </div>

            <div class="row gx-md-5 mt-5">
                @foreach($teams as $team)
                <div class="col-lg-3 col-md-6 mb-5 mb-lg-0">
                    <div class="team-wrapper text-center">
                        <div class="img-wrapper position-relative p-3 p-md-4">
                            <img src="{{ url($team->image) }}" class="img-fluid" alt="Team">
                        </div>
                        <div class="team-info text-center mt-3">
                            <div class="name fs-5 fw-medium text-black text-capitalize">{{ $team->name }}</div>
                            <div class="designation small text-muted text-capitalize">{!! $team->designation !!}</div>
                            <div class="social-wrapper d-flex align-items-center justify-content-center gap-3 mt-2">
                                @if($team->facebook)<a href="{{ $team->facebook }}"><i class="bi bi-facebook"></i></a>@endif
                                @if($team->twitter)<a href="{{ $team->twitter }}"><i class="bi bi-twitter"></i></a>@endif
                                @if($team->instagram)<a href="{{ $team->instagram }}"><i class="bi bi-instagram"></i></a>@endif
                                @if($team->linkedin)<a href="{{ $team->linkedin }}"><i class="bi bi-linkedin"></i></a>@endif
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>


@endsection