@extends('frontend::layouts.master')
@section('title')

@section('style')

@endsection

@section('content')
    <main>
            <!-- ======= About Section ======= -->
            <section class="section-page">
                <div class="container" data-aos="fade-up">
                    <div class="text-editor">
                        {!! $data['about']['detail'] !!}
                    </div>
                <div class="row position-relative align-items-center justify-content-center">

                    <div class="col-lg-6"> 
                        <img src="{{ asset($data['about']['image']) }}" class="img-w-100 pt-6">
                    </div>

                    <div class="col-lg-6">
                    
                        <div class="text-editor ">
                            {!! $data['about']['desc'] !!}
                        </div>
                    </div>

                </div>

                </div>
            </section>


        <section class="pt-6" id="WoneWith">
            <div class="container" data-aos="fade-up">
                {{-- award --}}
                <div class="splide splide-award-card -mx-[.5rem] mt-12">
                    <div class="splide__track">
                        <div class="splide__list">
                          
                            @foreach ($data['about_certificate'] as $item)
                                <div class="splide__slide">
                                    @if (!empty($item[0]))
                                        <div class="about-box-wrapper">
                                            <div class="about-boximg">
                                                <img src="{{ $item[0]['image'] }}" >
                                                <a href="{{ $item[0]['url'] }}"> 
                                                </a>
                                            </div>
                                            <div class="about-detail">
                                                <h3 class="about-main-title">{{ $item[0]['title'] }}</h3>
                                                <div class="about-sub-title">{!! $item[0]['detail'] !!}</div>
                                                <a href="{{ $item[0]['url'] }}" class="btn-wone-view"> See View </a>
                                            </div>
                                        </div>
                                    @endif
                                    @if (!empty($item[1]))
                                        <div class="about-box-wrapper">
                                            <div class="about-boximg">
                                                <img src="{{ $item[1]['image'] }}" >
                                                <a href="{{ $item[1]['url'] }}"> 
                                                </a>
                                            </div>
                                            <div class="about-detail">
                                                <h3 class="about-main-title">{{ $item[1]['title']}}</h3>
                                                <div class="about-sub-title">{!! $item[1]['detail'] !!}</div>
                                                <a href="{{ $item[1]['url'] }}" class="btn-wone-view"> See View </a>
                                            </div>
                                        </div>
                                    @endif  
                                </div>
                            @endforeach        
                       
                        </div>
                    </div>
                </div>
            </div>

        </section>

        <section class="tabs-about">
            <div class="container">
                <ul class="nav nav-tabs about-tabs about-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Experience</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Educaction</button>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
                        <div class="row justify-center items-center ">
                            <div class="col-md-6">
                                <div>
                                    <div class="event-box-img">
                                        <img src="{{ asset($data['about']['image_exp']) }}" >
                                    </div>
                                   
                                </div>
                            </div>
                            <div class="col-md-6 pt-6">
                                {!! $data['about']['experience'] !!}
                            </div>
                        </div>
                    </div>
                    
                    <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0"> 
                        <div class="row justify-center items-center">
                            <div class="col-md-6 pb-6 ">
                                <div>
                                    {!! $data['about']['education'] !!}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div>
                                    <div class="event-box-img">
                                        <img src="{{ asset($data['about']['image_edu']) }}" >
                                    </div>
                                   
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection

@section('script')


@endsection