@extends('layouts.app')

@section('content') 
<div class="modal-overlay" id="modal-overlay">
    <div class="modal-content" id="modal-content">
        <span class="close-modal" id="close-modal">&times;</span>
        <br><br>
        <div id="modal-body"></div>
    </div>
</div>
<main>

    {{-- <div class="areasofexperties-wrapper">
        <section id="areasofexperties" class="main-container">
            <h1>Our Areas of Experties</h1>
            <hr>
            <br>
            @foreach ($posts as $item)
            @if ($item->category =='areas_of_experties')
            <div class="horizontal-card">
                <div class="card-img">
                    <img src="{{ asset('images/'.$item->image.'') }}" alt="image">
                </div> 
                <div class="card-content">
                    <div class="card-header">
                        <a href="#" role="button" class="expand"
                                            data-content="{!! htmlspecialchars($item->description) !!}">
                                            <i class="fa fa-expand" style="float: right;font-size: 22px;color: grey;"></i>
                                        </a>
                        <div class="card-title">
                            <h4>{{ $item->title }}
                                </h4>
                            <hr>
                            <div class="card-subtitle">Date: {{ $item->date }}</div>
                            <div class="card-subtitle">Location: {{ $item->location }}</div>
                        </div>
                    </div>
                    <div class="card-text">{!! $item->truncated_description !!}

                        @if (strlen(strip_tags($item->description)) > strlen($item->truncated_description))
                            <span class="see-more" data-content="{!! htmlspecialchars($item->description) !!}">See More...</span>
                        @endif
                    </div>
                    <div class="description-text" style="display: none">
                        {!! $item->description !!}
                    </div>
                    <div class="card-footer">


                    </div>
                </div>
            </div>
            <br>
            @endif
            @endforeach
           

    </div>
     --}}
    <div class="ourwork-wrapper">
        <section class="main-container" id="ourwork">
            <h1>Our Work</h1>
            <hr>
            <div class="ourwrok-content">
                <h2 id="ouractivities">Our Activities</h2>
                <hr>
                <div class="row">
                    @foreach ($posts as $item)
                        @if ($item->category=='our_activities')
                        <div class="col-sm col-lg col-md">
                            <div class="vertical-card">
                                <div class="vertical-card-img">
                                    <img src="{{ asset('images/'.$item->image.'') }}" alt="image">
                                </div>
                                <div class="ourwork-cardcontent">
                                    <h4>{{ $item->title }}</h4>
                                    <hr>
                                    <div class="card-subtitle">Date: {{ $item->date }}</div>
                                    <div class="card-subtitle">Location: {{ $item->location }}</div>
                                    <div class="card-text">{!! $item->truncated_description !!}

                                        @if (strlen(strip_tags($item->description)) > strlen($item->truncated_description))
                                            <span class="see-more" data-content="{!! htmlspecialchars($item->description) !!}">See More...</span>
                                        @endif
                                    </div>
                                    <div class="description-text" style="display: none">
                                        {!! $item->description !!}
                                    </div>
                                </div>
                                <div class="card-footer">
                                     
                                     <a href="#" role="button" class="expand">
                                        <i class="fa fa-expand" style="float: right;font-size: 22px;color: grey;"></i>
                                    </a>
    
                                </div>
    
                            </div>
                        </div>
    
                        @endif
                    @endforeach
                   
                </div>
                <br>
                <h2 id="successstories">Success Stories</h2>
                <hr>
                <div class="row">
                    @foreach ($posts as $item)
                        @if ($item->category=='success_story')
                        <div class="col-sm col-lg col-md">
                            <div class="vertical-card">
                                <div class="vertical-card-img">
                                    <img src="{{ asset('images/'.$item->image.'') }}" alt="image">
                                </div>
                                <div class="ourwork-cardcontent">
                                    <h4>{{ $item->title }}</h4>
                                    <hr>
                                    <div class="card-subtitle">Date: {{ $item->date }}</div>
                                    <div class="card-subtitle">Location: {{ $item->location }}</div>
                                    <div class="card-text">{!! $item->truncated_description !!}

                                        @if (strlen(strip_tags($item->description)) > strlen($item->truncated_description))
                                            <span class="see-more" data-content="{!! htmlspecialchars($item->description) !!}">See More...</span>
                                        @endif
                                    </div>
                                    <div class="description-text" style="display: none">
                                        {!! $item->description !!}
                                    </div>
                                </div>
                                <div class="card-footer">
                                     
                                     <a href="#" role="button" class="expand">
                                        <i class="fa fa-expand" style="float: right;font-size: 22px;color: grey;"></i>
                                    </a>
    
                                </div>
    
                            </div>
                        </div>
    
                        @endif
                    @endforeach
                   
                </div>
                <br>
                <br>
            </div>
        </section>
    </div>
    <div class="ourimpact-wrapper">
        <section class="main-container" id="ourimpact">
            <h1>Our Impact</h1>
            <hr>
            <div class="ourwrok-content">
                <h2 id="skilldevelopment">Skill Development</h2>
                <hr>
                <div class="row">
                    @foreach ($posts as $item)
                        @if ($item->category=='skill_develpment')
                        <div class="col-sm col-lg col-md">
                            <div class="vertical-card">
                                <div class="vertical-card-img">
                                    <img src="{{ asset('images/'.$item->image.'') }}" alt="image">
                                </div>
                                <div class="ourwork-cardcontent">
                                    <h4>{{ $item->title }}</h4>
                                    <hr>
                                    <div class="card-subtitle">Date: {{ $item->date }}</div>
                                    <div class="card-subtitle">Location: {{ $item->location }}</div>
                                    <div class="card-text">{!! $item->truncated_description !!}

                                        @if (strlen(strip_tags($item->description)) > strlen($item->truncated_description))
                                            <span class="see-more" data-content="{!! htmlspecialchars($item->description) !!}">See More...</span>
                                        @endif
                                    </div>
                                    <div class="description-text" style="display: none">
                                        {!! $item->description !!}
                                    </div>
                                </div>
                                <div class="card-footer">
                                     
                                     <a href="#" role="button" class="expand">
                                        <i class="fa fa-expand" style="float: right;font-size: 22px;color: grey;"></i>
                                    </a>
    
                                </div>
    
                            </div>
                        </div>
    
                        @endif
                    @endforeach
                   
                </div>
                <br>
                <h2 id="infrastructuredevelopment">Infrastructure Development</h2>
                <hr>
                <div class="row">
                    @foreach ($posts as $item)
                        @if ($item->category=='infrastructure_develpment')
                        <div class="col-sm col-lg col-md">
                            <div class="vertical-card">
                                <div class="vertical-card-img">
                                    <img src="{{ asset('images/'.$item->image.'') }}" alt="image">
                                </div>
                                <div class="ourwork-cardcontent">
                                    <h4>{{ $item->title }}</h4>
                                    <hr>
                                    <div class="card-subtitle">Date: {{ $item->date }}</div>
                                    <div class="card-subtitle">Location: {{ $item->location }}</div>
                                    <div class="card-text">{!! $item->truncated_description !!}

                                        @if (strlen(strip_tags($item->description)) > strlen($item->truncated_description))
                                            <span class="see-more" data-content="{!! htmlspecialchars($item->description) !!}">See More...</span>
                                        @endif
                                    </div>
                                    <div class="description-text" style="display: none">
                                        {!! $item->description !!}
                                    </div>
                                </div>
                                <div class="card-footer">
                                     
                                     <a href="#" role="button" class="expand"">
                                        <i class="fa fa-expand" style="float: right;font-size: 22px;color: grey;"></i>
                                    </a>
    
                                </div>
    
                            </div>
                        </div>
    
                        @endif
                    @endforeach
                   
                </div>
                <br>
                <br>
                <h2 id="assetcreation">Asset Creation</h2>
                <hr>
                <div class="row">
                    @foreach ($posts as $item)
                        @if ($item->category=='asset_creation')
                        <div class="col-sm col-lg col-md">
                            <div class="vertical-card">
                                <div class="vertical-card-img">
                                    <img src="{{ asset('images/'.$item->image.'') }}" alt="image">
                                </div>
                                <div class="ourwork-cardcontent">
                                    <h4>{{ $item->title }}</h4>
                                    <hr>
                                    <div class="card-subtitle">Date: {{ $item->date }}</div>
                                    <div class="card-subtitle">Location: {{ $item->location }}</div>
                                    <div class="card-text">{!! $item->truncated_description !!}

                                        @if (strlen(strip_tags($item->description)) > strlen($item->truncated_description))
                                            <span class="see-more" data-content="{!! htmlspecialchars($item->description) !!}">See More...</span>
                                        @endif
                                    </div>
                                    <div class="description-text" style="display: none">
                                        {!! $item->description !!}
                                    </div>
                                </div>
                                <div class="card-footer">
                                     
                                     <a href="#" role="button" class="expand"">
                                        <i class="fa fa-expand" style="float: right;font-size: 22px;color: grey;"></i>
                                    </a>
    
                                </div>
    
                            </div>
                        </div>
    
                        @endif
                    @endforeach
                   
                </div>
                <br>
                <h2 id="livelihoodgeneraion">Livelihood Generation</h2>
                <hr>
                <div class="row">
                    @foreach ($posts as $item)
                        @if ($item->category=='livelihood_generation')
                        <div class="col-sm col-lg col-md">
                            <div class="vertical-card">
                                <div class="vertical-card-img">
                                    <img src="{{ asset('images/'.$item->image.'') }}" alt="image">
                                </div>
                                <div class="ourwork-cardcontent">
                                    <h4>{{ $item->title }}</h4>
                                    <hr>
                                    <div class="card-subtitle">Date: {{ $item->date }}</div>
                                    <div class="card-subtitle">Location: {{ $item->location }}</div>
                                    <div class="card-text">{!! $item->truncated_description !!}

                                        @if (strlen(strip_tags($item->description)) > strlen($item->truncated_description))
                                            <span class="see-more" data-content="{!! htmlspecialchars($item->description) !!}">See More...</span>
                                        @endif
                                    </div>
                                    <div class="description-text" style="display: none">
                                        {!! $item->description !!}
                                    </div>
                                </div>
                                <div class="card-footer">
                                     
                                     <a href="#" role="button" class="expand"">
                                        <i class="fa fa-expand" style="float: right;font-size: 22px;color: grey;"></i>
                                    </a>
    
                                </div>
    
                            </div>
                        </div>
    
                        @endif
                    @endforeach
                   
                </div>
            </div>

        </section>
    </div>
    <div class="ourwork-wrapper">
        <section class="main-container" id="geopraphicarea">
            <h1>Geographic Coverage</h1>
            <hr>
            <div class="ourwrok-content">
                <h2 id="kunduz">Kunduz</h2>
                <hr>
                <br>
                <h2 id="kabul">Kabul</h2>
                <hr>
                <br>
                <h2 id="baghlan">Baghlan</h2>
                <hr>
                <h2 id="samangan">Samangan</h2>
                <hr>
                <h2 id="takhar">Takhar</h2>
                <hr>

            </div>
        </section>
    </div>
    <div class="ourimpact-wrapper">
        <section class="main-container" id="disaster">
            <h1>Disaster Response</h1>
            <hr>
        </section>
    </div>
    <div class="ourwork-wrapper">
        <section class="main-container" id="partners">
            <h1>Our Valueable Partners</h1>
            <hr>
            <div class="ourwrok-content">
                <h2 id="kunduz">WFP</h2>
                <hr>
                <br>
                <h2 id="kabul">IFAD</h2>
                <hr>
                <br>
                <h2 id="baghlan">UNDP</h2>
                <hr>
                <h2 id="samangan">GIZ</h2>
                <hr>
                <h2 id="takhar">The Wold Bank</h2>
                <hr>

            </div>
        </section>
    </div>
</main>
@endsection