@extends('frontend.layout.master')
@section('style')
  <!-- lightgallery cdn -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/css/lightgallery-bundle.min.css"> 
@endsection
@section('content')
  
    <div class="bg-[#f7f6f2]">
        <!-- page us title -->
        <div  class="my-10 text-center mt-0 pt-14 ">
            <h4 class=" font-bold w-52 m-auto uppercase text-primary text-lg md:text-3xl text-[#333] md:tracking-widest   block ">About us</h4>
        </div>
        @php
            $data = get_setting('about_section_message');
            $data = json_decode($data,true);
           // print_r($data);
        @endphp
        <!-- manager title -->
        <div class="container mx-auto px-4">
            <div class=" shape   my-8 lg:mx-auto px-5 bottom-underline">
                <h4 style="font-family: 'Montserrat', sans-serif" class=" font-bold mt-5 m-auto uppercase text-lg md:text-2xl md:tracking-widest   block ">{{ $data['title'] }}</h4>
            </div>
        </div>

        <!-- about des -->
        <div class="about-us-section  py-3">
            <div class="container mx-auto px-4">
              

                <!-- mission -->
                <div class="mission  px-5 py-5 md:grid md:grid-cols-12">

                    <div class="md:col-span-4 mx-auto px-5  mb:pt-4">
                        <img class="img-shadow" src="{{ $data['image'] }}" alt="">
                        <h5 class=" pt-10 font-bold">{{ $data['name'] }}</h5>
                        <span>{{ $data['degree'] }}</span>
                        <span>{{ $data['position'] }}</span>
                    </div>
                    <div class="md:col-span-8 px-5">

                        <p class=" sm:pb-5 mt-5 mb-5">
                            {!! $data['description'] !!}
                        </p>
                        {{-- <button type="button" class="font-light mt-5 text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800  rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2"><a href="#">read more</a></button> --}}
                    </div>

                </div>
            </div>
        </div>

    </div>

    <!-- achivement -->
    <div class="gallery py-10 bg-[#262d38] text-white">
        <div class="container mx-auto px-4">
            <h4 style="font-family: 'Montserrat',   sans-serif" class=" shape bottom-underline  m-auto uppercase  text-lg md:text-2xl md:tracking-widest font-bold  block ">Our Achievements</h4>
            <div id="gallery-2" class="grid grid-cols md:grid-cols-2 lg:grid-cols-4 gap-2">
                @foreach (get_setting_array('achievement') as $key=>$item )
                @php
                    $data = json_decode($item->value,true);
                @endphp
                <div  class=" item p-4" data-src="{{ $data['image'] }}">
                    <img class="w-full" src="{{ $data['image'] }}" alt="">
                    <h5 class="pt-3 font-bold">{{ $data['name'] }} </h5>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- paginations -->
    {{-- <div class="container  pb-8 px-4 mx-auto">
        <hr class="bottom-underline">
        <h5 class="pt-3 font-bold text-right">
            <span class="text-slate-300">1</span>
            <span>2</span>
            <span>3</span>
            <span class="uppercase">Next</span>
        </h5>
    </div> --}}
    <!-- about us -->
    <div class="about-us-section py-3 bg-[#f6f6f3]">
        <div class="container mx-auto px-4">

            @php
            $data = get_setting('about_section_one');
            $data = json_decode($data,true);
           // print_r($data);
            @endphp
            <!-- mission -->
            <div class="mission  px-5 py-5 md:grid md:grid-cols-12">

                <div class="md:col-span-4 mx-auto px-5  mb:pt-4">
                    <img class="img-shadow" src="{{ $data['image'] }}" alt="">

                </div>
                <div class="md:col-span-8 px-5">

                    <p class=" sm:pb-5 mt-5 mb-5">
                        {!! $data['description'] !!} 
                    </p>
                    {{-- <button type="button"  class=" font-light mt-5 text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2"><a href="#">read more</a></button> --}}
                </div>

            </div>
            @php
            $data = get_setting('about_section_two');
            $data = json_decode($data,true);
           // print_r($data);
            @endphp
            <div class="mission  px-5 py-5 md:grid md:grid-cols-12">
                <div class="md:col-span-8 px-5">

                    <p class=" sm:pb-5 mt-5 mb-5">
                        {!! $data['description'] !!}
                    </p>
                    {{-- <button type="button" class="font-light mt-5 text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2"><a href="#">read more</a></button> --}}
                </div>
                <div class="md:col-span-4 mx-auto px-5  mb:pt-4">
                    <img class="img-shadow" src="{{ $data['image'] }}" alt="">

                </div>


            </div>
        </div>
    </div>


    @php
    $data = get_setting('about_section_three');
    $data = json_decode($data,true);
   // print_r($data);
    @endphp
    <div class="bg-[#ffdfd5] py-10">
        <!-- about us title -->
        <div class="container mx-auto px-4">
            <div class="    py-8 lg:mx-auto px-5 ">
                <h4  class=" text-[#333] text-center mt-5 m-auto uppercase text-lg md:text-2xl md:tracking-widest font-bold  block ">{{ $data['title'] }}</h4>
            </div>
        </div>
        <div class="container px-4 mx-auto ">
            <div class="px-5 ">
                {!! $data['description'] !!}
                {{-- <button type="button" class=" mx-auto mt-5 text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800  rounded-lg text-sm px-5 py-2.5 text-center font-light me-2 mb-2"><a href="#">read more</a></button> --}}
            </div>
        </div>
    </div>

@endsection
@section('script')
<!-- lightgallery.js cdn -->
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/lightgallery.min.js"></script>
<script src="{{ asset('js/lightbox.js') }}"></script>
    
@endsection