@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')

    <!-- #Start Main Body  -->
    <div class="bg-[#f6f6f3]">
        <!-- page title -->
        

        <!-- about our factor -->
        <!--  -->
        <div class="about-us-section py-20">
            <div class="container mx-auto px-4">
                @php
                $data = get_setting('factory_section_one');
                $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-4 mx-auto px-5 md:pt-28">
                        <img  src="{{ $data['image'] }}" alt="">
                    </div>
                    <div class="md:col-span-8 px-5">
                        <h4 class="uppercase shape pt-5 bottom-underline text-xl md:text-2xl text-left tracking-widest font-bold">{{ $data['title'] }}</h4>
                        <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('factory_section_two');
                $data = json_decode($data,true);
               // print_r($data);
                @endphp
                <div class="about px-5 md:grid md:grid-cols-12">
                    <div class="md:col-span-8 px-5">
                        <h4 class="uppercase shape pt-5 bottom-underline text-xl md:text-2xl text-left  tracking-widest font-bold">{{ $data['title'] }}</h4>
                        <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 class="md:col-span-4 mx-auto px-5 md:pt-28">
                        <img  src="{{ $data['image'] }}" alt="">
                    </div>
                </div>

                <!-- mission -->

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


    <div class="gallery mb-32 bg-[#262d38] text-white ">
        <div style="padding-top: 60px;" class="container mx-auto px-4">

            <h4 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>

@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