@extends('frontend::layouts.app')

@section('content')
    @if (!empty($about_us_first['list'][0]))
                <section class="about-section-sec">
            <div class="about-section-sec-container about-section-sec-container--intro">
                <!-- Card Left -->
                <div class="about-section-sec-card about-section-sec-card--content">
                    <div class="about-section-sec-card-right">
                        <div class="about-section-sec-box about-1">
                            {!! $about_us_first['detail'] ?? '' !!}
                            <a href="#about-history" class="btn">@lang('frontend::lang.more_detail')</a>
                        </div>
                    </div>
                </div>
                <!-- Card Right -->
                @if (!empty($about_us_first['image']))
                    <div class="about-section-sec-card about-section-sec-card--media">
                        <div class="about-section-sec-image">
                            <video id="comp-m8wszah4_video" class="K8MSra" crossorigin="anonymous" playsinline=""
                                preload="auto" muted="" loop="" autoplay=""
                                src="{{ $about_us_first['image'] ?? '' }}"
                                style="height: 200%; width: 100%; object-fit: cover; object-position: center center; opacity: 1;"></video>
                        </div>
                    </div>
                @endif
            </div>
        </section>
    @endif

    @if (!empty($about_us['list']))
        <section class="about-section-sec">
            <h1 id="about-history">@lang('frontend::lang.history_vision_solution_mission')</h1>
        </section>

        @foreach ($about_us['list'] as $k => $list)
            @if ($k % 2 == 0)
                <section class="about-section-sec">
                    <div class="about-section-sec-container">
                        <!-- Card Left -->
                        <div class="about-section-sec-card about-section-sec-card--content">
                            <div class="about-section-sec-card-right founder">
                                <div class="about-section-sec-box">
                                    {{-- <h2>{!! $list['name'] ?? '' !!}</h2> --}}
                                    {!! $list['detail'] ?? '' !!}
                                </div>
                            </div>
                        </div>

                        <!-- Card Right -->
                        @if (!empty($list['image']))
                                                        <div class="about-section-sec-card about-section-sec-card--media">
                                <div class="about-section-sec-image">
                                    @if (!empty($type) && $type == 'mp4')
                                        <video id="comp-m8wt408e_video" class="K8MSra" crossorigin="anonymous"
                                            playsinline="" preload="auto" muted="" loop="" autoplay=""
                                            src="{{ $list['image'] }}"
                                            style="height: 200%; width: 100%; object-fit: cover; object-position: center center; opacity: 1;"></video>
                                    @else
                                        <img src="{{ $list['image'] }}" alt="{{ $list['name'] ?? '' }}">
                                    @endif
                                </div>
                            </div>
                        @endif
                    </div>
                </section>
            @else
                <section class="about-section-sec">
                    <div class="about-section-sec-container">
                        <!-- Card Left -->
                        <div class="about-section-sec-card about-section-sec-card--media">
                            <div class="about-section-sec-image">
                                @if (!empty($list['image']))
                                                                        @if (!empty($type) && $type == 'mp4')
                                        <video id="comp-m8wt408e_video" class="K8MSra" crossorigin="anonymous"
                                            playsinline="" preload="auto" muted="" loop="" autoplay=""
                                            src="{{ $list['image'] }}"
                                            style="height: 200%; width: 100%; object-fit: cover; object-position: center center; opacity: 1;"></video>
                                    @else
                                        <img src="{{ $list['image'] }}" alt="{{ $list['name'] ?? '' }}">
                                    @endif
                                @endif
                            </div>
                        </div>
                        <!-- Card Right -->
                        <div class="about-section-sec-card about-section-sec-card--content">
                            <div class="about-section-sec-card-right">
                                <div class="about-section-sec-box">
                                    {{-- <h2>{!! $list['name'] ?? '' !!}</h2> --}}
                                    {!! $list['detail'] ?? '' !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            @endif
        @endforeach
    @endif
@endsection