@extends('site.inner')

@section('title')
{{--  {!! $category->title !!}--}}
@endsection

@section('title')
    {{ label('lbl_founding_fathers') }}
@endsection

{{--@section('breadcrumb')--}}
{{--    <li class="breadcrumb-item active" aria-current="page">{{label('lbl_about_pppc')}}</li>--}}
{{--@endsection--}}

@section('content')
    <div class="about-page pb-0  mt-0 pages-decorater-bottom bg-white">
        <div class="col-12 px-0">

            <!-- End of Breadcumb Section -->
            <div class="col-12 bg-secondary">
                <div class="px-3 px-md-5 pt-5">
                    {{ breadcrumb() }}
                </div>

                <div class="container-fluid">
                    <div class="p-2 p-md-5">
                        <div class="d-flex justify-content-start align-items-center">
                            <h2 class="school-leadership-title">
                            <span class="bg-primary p-2 title-icon-holder rounded-circle text-center">
                                <i class="fas fa-calendar-alt text-sm text-white icon"></i>
                            </span>
                                <span class="me-2 text-uppercase text-primary text-bold title-text">{{ label('lbl_about_school_and_mwalimu_nyerere') }}</span>
                            </h2>
                        </div>

                        <div class="row">
                            <div class="col-sm-12 col-md-12 col-lg-8">
                                <p class="text-primary text-left">{!! $about_school->content !!}</p>
                            </div>

                            <div class="col-4 d-none d-lg-block">
                                <img src="{{ asset('/uploads/about_school_and_mwalimu_nyerere/'.$about_school->photo_url) }}" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 bg-s">

                <div class="container-fluid">
                    <div class="p-2 p-md-5">
                        <div class="d-flex justify-content-start align-items-center">
                            <h2 class="school-leadership-title">
                            <span class="bg-primary p-2 title-icon-holder rounded-circle text-center">
                                <i class="fas fa-calendar-alt text-sm text-white icon"></i>
                            </span>
                                <span class="me-2 text-uppercase text-primary text-bold title-text">{{ label('lbl_founding_fathers') }}</span>
                            </h2>
                        </div>

                        <!-- BEGIN: THE FOUNDING FATHERS --->
                        <div class="row position-relative">
                            <div class="col-12 d-flex justify-content-center">
                                <div class="mt-5 row">

                                    @if(count($foundingFathers))
                                        @foreach($foundingFathers as $key=>$father)
                                            @if($father->position === 1)
                                                <div class="col-12 d-flex align-items-center">
                                                    <div class="father-photo-frame">
                                                        <div class="father-photo-frame-inner">
                                                            <div class="photo-container">
                                                                <img loading="lazy" src="{{ asset('/uploads/administration/'.$father->photo_url) }}" alt="{{ $father->fullname }}"/>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="father-card ">
                                                        @php
                                                            $cleanedText = preg_replace('/<p>|<\/p>|&nbsp;/', '', $father->content);
                                                        @endphp
                                                        <p class="text-white">
                                                            <q>{{ strip_tags($cleanedText) }}</q>
                                                        </p>
                                                        <span class="text-bold text-secondary d-block father-name">- {{ $father->fullname }} ({{ $father->party }})</span>
                                                    </div>
                                                </div>
                                            @endif
                                        @endforeach
                                    @endif

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

                        <div class="row position-relative">

                            @if(count($foundingFathers))
                                @foreach($foundingFathers as $key=>$father)
                                    @if($father->position === 2)
                                    <div class="d-flex align-items-center founding-father">
                                        <div class="father-photo-frame">
                                            <div class="father-photo-frame-inner">
                                                <div class="photo-container">
                                                    <img loading="lazy" src="{{ asset('/uploads/administration/'.$father->photo_url) }}" alt="{{ $father->fullname }}"/>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="father-card ">
                                            @php
                                                $cleanedText = preg_replace('/<p>|<\/p>|&nbsp;/', '', $father->content);
                                            @endphp
                                            <p class="text-white">
                                                <q>{{ strip_tags($cleanedText) }}</q>
                                            </p>
                                            <span class="text-bold text-secondary d-block father-name">- {{ $father->fullname }} ({{ $father->party }})</span>
                                        </div>
                                    </div>

                                        <!-- <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 ml-xs-4">
                                            <div class="col-12 mt-5 d-flex align-items-center father-content-container">
                                                <div class="father-photo-frame other-father-card-photo-frame">
                                                    <div class="father-photo-frame-inner">
                                                        <div class="photo-container">
                                                            <img src="{{ asset('/uploads/administration/'.$father->photo_url) }}" alt="{{ $father->fullname }}"/>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="father-card other-father-card">
                                                    @php
                                                        $cleanedText = preg_replace('/<p>|<\/p>|&nbsp;/', '', $father->content);
                                                    @endphp
                                                    <p class="text-white">
                                                        <q>{{ strip_tags($cleanedText) }}</q>
                                                    </p>
                                                    <span class="text-bold text-secondary d-block father-name">- {{ $father->fullname }} ({{ $father->party }})</span>
                                                </div>
                                            </div>
                                        </div> -->

                                    @endif
                                @endforeach
                            @endif

                        </div>

                        <div style="margin-top: 4em"></div>
                        <!-- END: THE FOUNDING FATHERS --->
                    </div>
                </div>
            </div>


            <div class="col-12 bg-secondary">
                <div class="container-fluid">
                    <div class="p-2 p-md-5">
                        <div class="d-flex justify-content-start align-items-center">
                            <h2 class="school-leadership-title">
                            <span class="bg-primary p-2 title-icon-holder rounded-circle text-center border border-secondary border-width-2" style="box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3)">
                                <i class="fas fa-star text-sm text-secondary icon"></i>
                            </span>
                                <span class="me-2 text-uppercase text-primary text-bold title-text">{{ label('lbl_fundamental_principles') }}</span>
                            </h2>
                        </div>


                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">

                                @if(count($fundamentalPrinciples))
                                    @foreach($fundamentalPrinciples as $key=>$principle)
                                        <div class="d-flex bg-primary p-1 my-3 fundamental-principle-card">
                                         <span class="bg-secondary p-2 icon-holder rounded-circle text-center shadow-lg border border-secondary border-width-2">
                                            <i class="fas fa-star text-sm text-primary icon"></i>
                                        </span>
                                            <span class="mt-2 text-secondary">{{ $principle->title }}</span>
                                        </div>
                                    @endforeach
                                @endif

                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 d-none d-flex align-items-center justify-content-center">
                                <div class="border border-width-3 border-white">
                                    <img src="images/sliders/_slider.png"  class="fundamental-fathers-image" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
@stop