@extends('web.layouts.main')
@section('content')

<main>
        <!--Start heading-pg-->
        <div class="heading-pg">
            <div class="container">
                <div class="inner">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                          <li class="breadcrumb-item"><a href="{{url(getCurrentLocale().'/')}}">{{__('web.home')}}</a></li>
                          <li class="breadcrumb-item active" aria-current="page"> {{__('web.aboutus')}}</li>
                        </ol>
                    </nav>
                    <h2>{{__('web.aboutus')}}</h2>
                </div>
            </div>
            <img src="{{url('')}}/assets/web/images/line-heading-pg.png" alt="" class="line">
        </div>
        <!--Start about-pg-->
        <section class="about-pg">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="img-box">
                            <img src="{{url('')}}/assets/web/images/about-pg-img.png" alt="">
                            <div class="dr-name">
                                <h3>{{__('web.dr')}} / <b>{{__('web.wael')}}</b></h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="text-box">
                            <h2> {{__('web.pref')}}</h2>
                            <div>
                                {!! aboutdescription($about->id) !!} </div>
                            <a href="{{url(getCurrentLocale().'/booking')}}" class="link-btn mt-4"> {{__('web.book_session')}}</a>
                        </div>
                    </div>
                </div>
            </div>
            <img src="{{url('')}}/assets/web/images/lines-pattern.png" alt="" class="lines">
        </section>
        <!--Start content-sec-->
        <section class="about-pg">
            <div class="container">
                <div class="content-inner">
                    <h2 class="headline">{{aboutname($about->id)}} </h2>
                    <div class="desc">
                        {!! aboutmeta($about->id) !!}
                        </div>
                </div>
            </div>
        </section>
        
        
        
        
        <!--Start goals-sec-->
        <section class="goals-sec">
            <div class="container">
                <div class="text-center">
                    <h2>{{__('web.vision_mission')}}</h2>
                    <p>{{__('web.vision_mission_desc')}}</p>
                </div>
                <div class="row mt-5">
                    <div class="col-lg-6">
                        <div class="text-box">
                            <div class="tab-content" id="pills-tabContent">
                                <div class="tab-pane fade show active" id="pills-tab1" role="tabpanel" aria-labelledby="pills-tab1-tab">
                                    <div class="tab-wrapper">
                                        <h3>{{__('web.message')}}</h3>
                                        <ul class="mt-5">
                                           @foreach($missions as $row)
                                            <li>
                                                <i class="fas fa-dot-circle"></i>  {{$row->name}}
                                            </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-tab2" role="tabpanel" aria-labelledby="pills-tab2-tab">
                                    <div class="tab-wrapper">
                                        <h3>{{__('web.vision')}}</h3>
                                        <ul class="mt-5">
                                            @foreach($visions as $row)
                                            <li>
                                                <i class="fas fa-dot-circle"></i>   {{$row->name}}
                                            </li>
                                            @endforeach
                                            
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <ul class="nav nav-pills" id="pills-tab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link active" id="pills-tab1-tab" data-toggle="pill" href="#pills-tab1" role="tab" aria-controls="pills-tab1" aria-selected="true">{{__('web.message')}}</a>
                                </li>
                                <span class="line"></span>
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link" id="pills-tab2-tab" data-toggle="pill" href="#pills-tab2" role="tab" aria-controls="pills-tab2" aria-selected="false">{{__('web.vision')}}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <img src="{{asset($about->image)}}" alt="" class="goals-img">
                    </div>
                </div>
            </div>
        </section>

    </main>


@stop