{{-- about us single page --}}
@extends('layouts.porto')

@section('title', 'About Us')

@section('content')
    <div id="content" class="content full">

        <section class="page-header page-header-classic page-header-sm">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 order-2 order-md-1 align-self-center p-static">
                        <h1 data-title-border>{{ __('About Us') }}</h1>
                    </div>
                    <div class="col-md-4 order-1 order-md-2 align-self-center">
                        <ul class="breadcrumb d-block text-md-end">
                            <li><a href="#">{{ __('Home') }}</a></li>
                            <li class="active">{{ __('About Us') }}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <div class="container pb-1">

            <div class="row pt-4">
                <div class="col">
                    <div class="overflow-hidden mb-3">
                        <h2 class="word-rotator slide font-weight-bold text-8 mb-0 appear-animation"
                            data-appear-animation="maskUp">
                            <span>{{ __('The New Way to ') }}</span>
                            <span class="word-rotator-words bg-primary">
                                <b class="is-visible">{{ __('Success') }}</b>
                                <b>{{ __('Advance') }}</b>
                                <b>{{ __('Progress') }}</b>
                            </span>
                        </h2>
                    </div>
                </div>
            </div>

            <div class="row mb-2">
                <div class="col-lg-10">

                    <div class="overflow-hidden">
                        <p style="text-align: justify" class="lead mb-0 appear-animation" data-appear-animation="maskUp"
                            data-appear-animation-delay="250">
                            {{ __('We never stop improving our services, including development methodologies, engineering practices, management techniques and') }}
                            <span class="alternative-font">{{ __('QA') }}</span>
                            {{ __('standards to enhance our team’s capabilities and increase customer satisfaction.') }}
                        </p>
                    </div>
                </div>
                <div class="col-lg-2 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="450">
                    <a href="{{ url('career') }}" class="btn btn-modern btn-primary mt-1">{{ __('Join Our Team!') }}</a>
                </div>
            </div>
        </div>
        <section class="section section-default border-0 my-5 appear-animation" data-appear-animation="fadeIn"
            data-appear-animation-delay="750">
            <div class="container py-4">
                <div class="row align-items-center">
                    <div class="col-md-6 appear-animation" data-appear-animation="fadeInLeftShorter"
                        data-appear-animation-delay="1000">
                        <div class="owl-carousel owl-theme nav-inside mb-0"
                            data-plugin-options="{'items': 1, 'margin': 10, 'animateOut': 'fadeOut', 'autoplay': true, 'autoplayTimeout': 6000, 'loop': true}">
                            <div>
                                <img alt="" class="img-fluid"
                                    src="{{ asset('storage') . '/' . $aboutUs->image ?? '' }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="overflow-hidden mb-2">
                            <h2 class="text-color-dark font-weight-normal text-7 mb-0 pt-0 mt-0 appear-animation"
                                data-appear-animation="maskUp" data-appear-animation-delay="1200">{{ $aboutUs->title }}
                        </div>
                        <p class="mb-0 appear-animation" data-appear-animation="fadeInUpShorter"
                            data-appear-animation-delay="1600">{{ $aboutUs->description }}</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="section section-default border-0 my-5">
            <div class="container py-4">

                <div class="row">
                    <div class="col pb-4 text-center">
                        <h2 class="text-color-dark font-weight-normal text-7 mb-0 pt-2">{{ __('Meet') }} <strong
                                class="font-weight-extra-bold">{{ __('Our Team') }}</strong></h2>
                    </div>
                </div>
                
                <div class="row" style="padding-top: 50px;" >
                    <div class="col-md-12"></div>
                    @foreach ($teams as $team)
                        <div class="col-md-3" style="border: 1px solid #ddd; border-radius: 6px";> 
                            <div class="card_img"> 
                                <img src="{{ asset('/storage') }}/{{ $team->image }}" alt="user-image">
                            </div>
                            <div class="card_info text-center p-2">
                                <h5>{{ $team->name ?? '' }}</h5>
                                <p>{{ $team->designation->name ?? '' }}</p>
                            </div>
                            <span class="thumb-info-caption text-center" >
                                <span class="thumb-info-social-icons" style="padding-bottom: 20px">
                                    <a target="_blank" href="{{ $team->facebook }}"><i
                                            class="fab fa-facebook-f"></i><span>{{ __('Facebook') }}</span></a>
                                    <a href="{{ $team->twitter }}"><i
                                            class="fab fa-twitter"></i><span>{{ __('Twitter') }}</span></a>
                                    <a href="{{ $team->linkedin }}"><i
                                            class="fab fa-linkedin-in"></i><span>{{ __('Linkedin') }}</span></a>
                                </span>
                            </span>
                            <br><br><br>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        <section class="section section-default border-0 my-5">
            <div class="container py-4">

                <div class="row">
                    <div class="col pb-4 text-center">
                        <h2 class="text-color-dark font-weight-normal text-7 mb-0 pt-2">{{ __('Meet') }} <strong
                                class="font-weight-extra-bold">{{ __('Our Chanel Partners') }}</strong></h2>
                    </div>
                </div>
                
                <div class="row" style="padding-top: 50px;" >
                    <div class="col-md-12"></div>
                    @foreach ($chanelPartners as $partner)
                        <div class="col-md-3" style="border: 1px solid #ddd; border-radius: 6px";> 
                            <div class="card_img"> 
                                <img src="{{ asset('/storage') }}/{{ $partner->image }}" alt="user-image">
                            </div>
                            <div class="card_info text-center p-2">
                                <h5>{{ $partner->name ?? '' }}</h5>
                                <p>{{ $partner->zone ?? '' }}</p>
                            </div>
                            <br><br><br>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        <div class="container">
            <div class="row">
                <div class="col py-4">
                    <hr class="solid">
                </div>
            </div>
            <div class="row">
                <div class="col-md-8 mx-md-auto text-center">

                    <h2 class="text-color-dark font-weight-normal text-7 mb-0 pt-2">{{ __('Our') }} <strong
                            class="font-weight-extra-bold">{{ __('History') }}</strong></h2>
                    <p>{{ __('How we have started') }}</p>

                    <section class="timeline" id="timeline">
                        @foreach ($histories as $history)
                            @if ($history->year % 2 == 0)
                                <div class="timeline-body">
                                    <div class="timeline-date">
                                        <h3 class="text-primary font-weight-bold">{{ $history->year ?? '' }}</h3>
                                    </div>

                                    <article class="timeline-box left text-start appear-animation"
                                        data-appear-animation="fadeIn" data-appear-animation-delay="200">
                                        <div class="timeline-box-arrow"></div>
                                        <div class="p-2">
                                            <img alt="" class="img-fluid"
                                                src="{{ asset('storage') . '/' . $history->image ?? '' }}" />
                                            <p class="mb-0 text-2">{{ $history->description ?? '' }}</p>
                                        </div>
                                    </article>


                                </div>
                            @else
                                <div class="timeline-date">
                                    <h3 class="text-primary font-weight-bold">{{ $history->year ?? '' }}</h3>
                                </div>

                                <article class="timeline-box right text-start appear-animation"
                                    data-appear-animation="fadeIn" data-appear-animation-delay="400">
                                    <div class="timeline-box-arrow"></div>
                                    <div class="p-2">
                                        <img alt="" class="img-fluid"
                                            src="{{ asset('storage') . '/' . $history->image ?? '' }}" />
                                        <p class="mb-0 text-2">{{ $history->description ?? '' }}</p>
                                    </div>
                                </article>
                            @endif
                        @endforeach

                    </section>

                </div>
            </div>

        </div>


    @stop