@extends('layouts.landing')

@section('title')
    {{ __('message.Tentang Kami') }}
@endsection

@section('content')
    <section class="wrapper bg-gray">
        <div class="container pt-20 pt-md-20 text-center">
            <div class="row">
                <div class="col-xl-6 mx-auto">
                    <h1 class="display-1 mb-4">{{ Helper::aboutSettings('aboutHeroTitle') }}</h1>
                    <p class="lead fs-lg mb-0">{{ Helper::aboutSettings('aboutHeroDesc') }}</p>
                </div>
                <!-- /column -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
        <figure class="position-absoute" style="bottom: 0; left: 0; z-index: 2;">
            @if (Helper::aboutSettings('aboutHeroBg'))
                <img class="img-fluid" height="300"
                    src="{{ asset('uploads/landing-page/about/images/' . Helper::aboutSettings('aboutHeroBg')) }}"
                    alt="" />
            @else
                <img id="logoOutput" src="https://via.placeholder.com/1920x500.png?text=No+Data" alt="">
            @endif
        </figure>
    </section>
    <section class="wrapper bg-soft-primary">
        <div class="container py-8 py-md-10">
            <div class="row mb-10">
                <div class="col-xl-10 mx-auto">
                    <div class="row align-items-center counter-wrapper gy-6 text-center">
                        <div class="col-md-3">
                            <img src="{{ asset('') }}landing/assets/img/icons/lineal/check.svg"
                                class="svg-inject icon-svg icon-svg-lg text-primary mb-3" alt="" />
                            <h3 class="counter">{{ $counter['aktif'] }}</h3>
                            <p>{{ __('message.Anggota Aktif') }}</p>
                        </div>
                        <!--/column -->
                        <div class="col-md-3">
                            <img src="{{ asset('') }}landing/assets/img/icons/lineal/user.svg"
                                class="svg-inject icon-svg icon-svg-lg text-primary mb-3" alt="" />
                            <h3 class="counter">{{ $counter['iso'] }}</h3>
                            <p>{{ __('message.ISO 13485') }}</p>
                        </div>
                        <div class="col-md-3">
                            <img src="{{ asset('') }}landing/assets/img/icons/lineal/award-2.svg"
                                class="svg-inject icon-svg icon-svg-lg text-primary mb-3" alt="" />
                            <h3 class="counter">{{ $counter['fda'] }}</h3>
                            <p>{{ __('message.US FDA') }}</p>
                        </div>
                        <!--/column -->
                        <!--/column -->
                        <div class="col-md-3">
                            <img src="{{ asset('') }}landing/assets/img/icons/lineal/award-2.svg"
                                class="svg-inject icon-svg icon-svg-lg text-primary mb-3" alt="" />
                            <h3 class="counter">{{ $counter['cpakb'] ? '>' . $counter['cpakb'] : '0' }}</h3>
                            <p>{{ __('message.CPAKB') }}</p>
                        </div>
                        <!--/column -->

                    </div>
                    <!--/.row -->
                </div>
                <!-- /column -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /section -->
    <section class="wrapper bg-light angled upper-end lower-end">
        <div class="container py-14 py-md-16">
            <div class="row gx-lg-8 gx-xl-12 gy-10 mb-14 mb-md-17 align-items-center">
                <div class="col-lg-6 position-relative order-lg-2">
                    <div class="shape bg-dot primary rellax w-16 h-20" data-rellax-speed="1"
                        style="top: 3rem; left: 5.5rem"></div>
                    <div class="overlap-grid overlap-grid-2">
                        <div class="item">
                            <figure class="rounded shadow">
                                @if (Helper::aboutSettings('vmBg1'))
                                    <img src="{{ asset('uploads/landing-page/about/images/' . Helper::aboutSettings('vmBg1')) }}"
                                        srcset="{{ asset('uploads/landing-page/about/images/' . Helper::aboutSettings('vmBg1')) }} 2x"
                                        alt="">
                                @else
                                    <img id="logoOutput" src="https://via.placeholder.com/100x100.png?text=No+Data"
                                        alt="">
                                @endif

                            </figure>
                        </div>
                        <!--<div class="item">-->
                        <!--    <figure class="rounded shadow">-->
                        <!--        @if (Helper::aboutSettings('vmBg2'))
    -->
                        <!--            <img src="{{ asset('uploads/landing-page/about/images/' . Helper::aboutSettings('vmBg2')) }}"-->
                        <!--                srcset="{{ asset('uploads/landing-page/about/images/' . Helper::aboutSettings('vmBg2')) }} 2x"-->
                        <!--                alt="">-->
                    <!--        @else-->
                        <!--            <img id="logoOutput" src="https://via.placeholder.com/100x100.png?text=No+Data"-->
                        <!--                alt="">-->
                        <!--
    @endif-->

                        <!--    </figure>-->
                        <!--</div>-->
                    </div>
                </div>
                <!--/column -->
                <div class="col-lg-6">

                    <h2 class="display-4 mb-3">{{ Helper::aboutSettings('vmTitle') }}</h2>
                    <p class="">{!! Helper::aboutSettings('vmDesc') !!} </p>

                    <div class="row gy-3 gx-xl-8">
                        <div class="col-xl-6">
                            <h5 class="text-justify">{{ Helper::aboutSettings('visionTitle') }}
                            </h5>
                            <ul class="icon-list bullet-bg bullet-soft-primary mb-0">
                                <li>{!! Helper::aboutSettings('visionDesc') !!}</li>
                            </ul>
                        </div>
                        <!--/column -->
                        <div class="col-xl-6">
                            <h5>{{ Helper::aboutSettings('missionTitle') }}</h5>
                            <ul class="icon-list bullet-bg bullet-soft-primary mb-0">
                                <li>{!! Helper::aboutSettings('missionDesc') !!}</li>
                            </ul>
                        </div>
                        <!--/column -->
                    </div>
                    <!--/.row -->
                </div>
                <!--/column -->
            </div>
            <!--/.row -->
            <div class="row mb-5">
                <div class="col-md-10 col-xl-8 col-xxl-7 mx-auto text-center">
                    <h2 class="display-4 mb-4 px-lg-14">{{ __('message.Sejarah') }}</h2>
                </div>
                <!-- /column -->
            </div>
            <!-- /.row -->
            <div class="main-timeline">

                <!-- start experience section-->
                @forelse ($histories as $key => $value)
                    <div class="timeline">
                        <div class="icon"></div>
                        <div class="date-content">
                            <div class="date-outer">
                                <span class="date">
                                    @if ($value->image)
                                        <img src="{{ asset('uploads/landing-page/about/images/' . $value->image) }}"
                                            class="img-fluid" height="100" width="100" alt="">
                                    @else
                                        <img id="logoOutput" src="https://via.placeholder.com/100x100.png?text=Your+Image"
                                            alt="">
                                    @endif
                                </span>
                            </div>
                        </div>
                        <div class="timeline-content">
                            <h3 class="title">{{ date('d M Y', strtotime($value->date)) }}</h3>
                            <h5 class="text-primary">{{ $value->title }}</h5>
                            <p class="description">
                                {!! $value->desc !!}
                            </p>
                        </div>
                    </div>
                @empty
                    <div class="text-center">
                        <p>{{ __('message.Tidak ada data') }}</p>
                    </div>
                @endforelse ($histories as $key => $value)
                <!-- end experience section-->
            </div>
            <!--/.row -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /section -->
    <section class="wrapper bg-soft-primary">
        <div class="container pt-16 pb-14 pb-md-0">
            <div class="row gx-lg-8 gx-xl-0 align-items-center">
                <div class="col-md-5 col-lg-5 col-xl-4 offset-xl-1 d-none d-md-flex position-relative align-self-end">
                    <div class="shape rounded-circle bg-pale-primary rellax w-21 h-21 d-md-none d-lg-block"
                        data-rellax-speed="1" style="top: 7rem; left: 1rem"></div>
                    <figure>
                        @if (Helper::aboutSettings('greetImg'))
                            <img src="{{ asset('uploads/landing-page/about/images/' . Helper::aboutSettings('greetImg')) }}"
                                srcset="{{ asset('uploads/landing-page/about/images/' . Helper::aboutSettings('greetImg')) }} 2x"
                                alt="">
                        @else
                            <img src="https://via.placeholder.com/500x700.png?text=No+Data"
                                srcset="https://via.placeholder.com/500x700.png?text=No+Data" alt="">
                        @endif

                    </figure>
                </div>
                <!--/column -->
                <div class="col-md-7 col-lg-6 col-xl-6 col-xxl-5 offset-xl-1">
                    <div class="swiper-container dots-start dots-closer mt-md-10 mb-md-15" data-margin="30"
                        data-dots="true">
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <blockquote class="icon fs-lg">
                                        <p>“{!! Helper::aboutSettings('greetDesc') !!}”</p>
                                        <div class="blockquote-details">
                                            <div class="info ps-0">
                                                <h5 class="mb-1">{{ Helper::aboutSettings('greetAuthor') }}</h5>
                                                <p class="mb-0">{{ Helper::aboutSettings('greetTitle') }}</p>
                                            </div>
                                        </div>
                                    </blockquote>
                                </div>
                            </div>
                            <!--/.swiper-wrapper -->
                        </div>
                        <!-- /.swiper -->
                    </div>
                    <!-- /.swiper-container -->
                </div>
                <!--/column -->
            </div>
            <!--/.row -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /section -->
    <section class="wrapper bg-light">
        <div class="container py-14 py-md-16">
            <div class="row mb-3">
                <div class="col-md-10 col-xl-9 col-xxl-7 mx-auto text-center">
                    <h2 class="display-4 mb-3 px-lg-14">{{ __('message.Pengurus') }}</h2>
                </div>
                <!--/column -->
            </div>
            <!--/.row -->
            <div class="position-relative">
                <x-team-tree :teams="$teamTree" />
                <!-- /.swiper-container -->
            </div>
            <!-- /.position-relative -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /section -->

    <!-- /section -->

    <!-- /section -->
@endsection
@push('css')
    <style>
        .main-timeline {
            position: relative
        }

        .main-timeline:before {
            content: "";
            display: block;
            width: 2px;
            height: 100%;
            background: #c6c6c6;
            margin: 0 auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0
        }

        .main-timeline .timeline {
            margin-bottom: 40px;
            position: relative
        }

        .main-timeline .timeline:after {
            content: "";
            display: block;
            clear: both
        }

        .main-timeline .icon {
            width: 18px;
            height: 18px;
            line-height: 18px;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0
        }

        .main-timeline .icon:before,
        .main-timeline .icon:after {
            content: "";
            width: 100%;
            height: 100%;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.33s ease-out 0s
        }

        .main-timeline .icon:before {
            background: #fff;
            border: 2px solid #232323;
            left: -3px
        }

        .main-timeline .icon:after {
            border: 2px solid #c6c6c6;
            left: 3px
        }

        .main-timeline .timeline:hover .icon:before {
            left: 3px
        }

        .main-timeline .timeline:hover .icon:after {
            left: -3px
        }

        .main-timeline .date-content {
            width: 50%;
            float: left;
            margin-top: 22px;
            position: relative
        }

        .main-timeline .date-content:before {
            content: "";
            width: 36.5%;
            height: 2px;
            background: #c6c6c6;
            margin: auto 0;
            position: absolute;
            top: 0;
            right: 10px;
            bottom: 0
        }

        .main-timeline .date-outer {
            width: 125px;
            height: 125px;
            font-size: 16px;
            text-align: center;
            margin: auto;
            z-index: 1
        }

        .main-timeline .date-outer:before,
        .main-timeline .date-outer:after {
            content: "";
            width: 125px;
            height: 125px;
            margin: 0 auto;
            /* border-radius: 50%; */
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            transition: all 0.33s ease-out 0s
        }

        .main-timeline .date-outer:before {
            background: #fff;
            /* border: 2px solid #232323; */
            left: -6px
        }

        .main-timeline .date-outer:after {
            /* border: 2px solid #c6c6c6; */
            left: 6px
        }

        .main-timeline .timeline:hover .date-outer:before {
            left: 6px
        }

        .main-timeline .timeline:hover .date-outer:after {
            left: -6px
        }

        .main-timeline .date {
            width: 100%;
            margin: auto;
            position: absolute;
            top: 27%;
            left: 0
        }

        .main-timeline .month {
            font-size: 18px;
            font-weight: 700
        }

        .main-timeline .year {
            display: block;
            font-size: 30px;
            font-weight: 700;
            color: #232323;
            line-height: 36px
        }

        .main-timeline .timeline-content {
            width: 50%;
            padding: 20px 0 20px 50px;
            float: right
        }

        .main-timeline .title {
            font-size: 19px;
            font-weight: 700;
            line-height: 24px;
            margin: 0 0 15px 0
        }

        .main-timeline .description {
            margin-bottom: 0
        }

        .main-timeline .timeline:nth-child(2n) .date-content {
            float: right
        }

        .main-timeline .timeline:nth-child(2n) .date-content:before {
            left: 10px
        }

        .main-timeline .timeline:nth-child(2n) .timeline-content {
            padding: 20px 50px 20px 0;
            text-align: right
        }

        @media only screen and (max-width: 991px) {
            .main-timeline .date-content {
                margin-top: 35px
            }

            .main-timeline .date-content:before {
                width: 22.5%
            }

            .main-timeline .timeline-content {
                padding: 10px 0 10px 30px
            }

            .main-timeline .title {
                font-size: 17px
            }

            .main-timeline .timeline:nth-child(2n) .timeline-content {
                padding: 10px 30px 10px 0
            }
        }

        @media only screen and (max-width: 767px) {
            .main-timeline:before {
                margin: 0;
                left: 7px
            }

            .main-timeline .timeline {
                margin-bottom: 20px
            }

            .main-timeline .timeline:last-child {
                margin-bottom: 0
            }

            .main-timeline .icon {
                margin: auto 0
            }

            .main-timeline .date-content {
                width: 95%;
                float: right;
                margin-top: 0
            }

            .main-timeline .date-content:before {
                display: none
            }

            .main-timeline .date-outer {
                width: 110px;
                height: 110px
            }

            .main-timeline .date-outer:before,
            .main-timeline .date-outer:after {
                width: 110px;
                height: 110px
            }

            .main-timeline .date {
                top: 30%
            }

            .main-timeline .year {
                font-size: 24px
            }

            .main-timeline .timeline-content,
            .main-timeline .timeline:nth-child(2n) .timeline-content {
                width: 95%;
                text-align: center;
                padding: 10px 0
            }

            .main-timeline .title {
                margin-bottom: 10px
            }
        }
    </style>
@endpush