@extends('Web/App')
@section('main-content')
@include('Web/Layouts/minibanner')

    <section>
        <div class="bg-darkblue-theme p-3 row d-flex">
            <div class="col-md-8 m-auto">
                <h1 class="heading text-brown-theme">Our Roots</h1>
                <P class="container text-light text-center">
                    Established in the year 2007, the roots to this great institution are traced back to the vision of Dr. Nelson Muguku and Mrs. Leah Muguku aimed at providing a meaningful future for the Kenyan boy Child. The School is founded on strong Christian principles.
                </P>
            </div>
            <div class="col-md-4 m-auto">
                @if ($about_tumaini_video_youtube_link)               
                    <iframe class="col-12" src="https://www.youtube.com/embed/{{$about_tumaini_video_youtube_link}}" allowfullscreen> </iframe>
                @else
                    <video src="{{asset('storage/landingpage/'.$about_tumaini_video)}}" controls class="col-12" id="about_vid"></video>
                @endif
            </div>
            
        </div>
        <div class="container mt-5">
            <h1 class="heading text-darkblue-theme p-3">Our <span class="text-blue-theme"> Values</span> </h1>
            {{-- <div class="underlining shadow"></div> --}}
            <div class="row mt-3 animate__animated animate__slideIn">
                {{-- Mission --}}
                <div class="col-lg-4 p-4">
                    <div class=" bg-lightgrey rounded p-2 values-item" style="height:100%">
                        <h4 class="text-darkblue-theme heading"> <span class="fa fa-anchor text-blue-theme"></span> MISSION</h4>
                        <hr>
                        <p style="font-weight:600"  class="text-center">To provide quality education that will produce responsible citizens with skills needed to develop a foundation for future success in life and remain relevant in a dynamic society.</p>
                    </div>
                </div>

                {{-- vision --}}
                <div class="col-lg-4 p-4">
                    <div class=" bg-lightgrey rounded p-2 values-item m-auto" style="min-height:80%">
                        <h4 class="text-darkblue-theme heading"> <span class="fa fa-anchor text-blue-theme"></span> VISION</h4>
                        <hr>
                        <p style="font-weight:600"  class="text-center">To become a Center of Academic Excellence.</p>
                    </div>                   
                </div>

                {{-- Core Values --}}
                <div class="col-lg-4 p-4">
                    <div class=" bg-lightgrey rounded p-2 values-item" style="height:100%">
                        <h4 class="text-darkblue-theme heading"> <span class="fa fa-anchor text-blue-theme"></span> CORE VALUES</h4>
                        <hr>
                        <div class="d-flex">
                            <ul style="font-weight:600" class="m-auto">
                                <li>God fearing</li>
                                <li>Integrity</li>
                                <li>Team work</li>
                                <li>Commitment</li>
                                <li>Discipline</li>
                                <li>Justice and fairness</li>
                                <li>Concern for environment</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-5">
            <div class="underlining shadow"></div>
            <h1 class="heading text-darkblue-theme p-3">OUR <span class="text-blue-theme"> ACHIEVEMENTS</span> </h1>
            <div class="bg-brown-theme p-2">
                @php
                    $competencies = [1,2,3]
                @endphp

                <div class="row container m-auto d-flex">   
                    @foreach ($achievements as $item)
                        <div class="col-lg-4 col-md-6 p-2 m-auto">
                            <div class="bg-light p-3 rounded">
                                <h4 class="" style="font-weight:800">{{$item->title}}</h4>
                                @if ($item->youtube_link)               
                                    <iframe class="col-12" src="https://www.youtube.com/embed/{{$item->youtube_link}}"> </iframe>
                                @else
                                    @if ($item->media_type == 'video')
                                        <video src="{{asset('storage/updates/'.$item->media)}}" controls class="col-12"></video>
                                    @else
                                    <img src="{{asset('storage/updates/'.$item->media)}}" class="col-12">
                                    @endif
                                @endif
                                <div class="competencies-paragraph">
                                    <p>{!!$item->description!!}</p>
                                </div>
                                <div class="mt-2">
                                    <a href="#" class=" ">READ MORE <span class="fa fa-arrow-circle-right"></span></a>
                                </div>
                            </div>
                        </div> 
                    @endforeach                 
                    
                </div>
            </div>

        </div>

    </section>
@endsection