@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>
        @if ($post_type == 'areas_of_experties')
            <div class="areasofexperties-wrapper">
                <section id="areasofexperties" class="main-container">
                    <h1>Our Areas of Experties</h1>
                    <form action="{{ route('view-all-posts') }}" method="POST">
                        @csrf
                        <input type="hidden" name="post_type" value="areas_of_experties">
                        <button class="asio-btn" style="float: right" type="submit">View All</button>
                    </form>
                    <hr>
                    <br>
                    @foreach ($postexp 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 }}
                                                {{-- <a href="#" class="like-btn {{ $item->liked ? '' : 'not-liked' }}">
                                                <i class="fa fa-heart"></i>
                                            </a>
                                            <input type="hidden" name="id" class="id" value="{{ $item->id }}"> --}}
                                            </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">
                                        {{-- <button class="asio-btn">More...</button> --}}

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


            </div>
        @elseif ($post_type == 'our_activities')
            <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"
                                                    data-content="{!! htmlspecialchars($item->description) !!}">
                                                    <i class="fa fa-expand"
                                                        style="float: right;font-size: 22px;color: grey;"></i>
                                                </a>

                                            </div>

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

                        </div>
                    </div>
                </section>
            </div>
        @elseif ($post_type == 'success_story')
            <div class="ourwork-wrapper">
                <section class="main-container" id="ourwork">
                    <h1>Our Work</h1>
                    <hr>
                    <div class="ourwrok-content">
                        <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"
                                                    data-content="{!! htmlspecialchars($item->description) !!}">
                                                    <i class="fa fa-expand"
                                                        style="float: right;font-size: 22px;color: grey;"></i>
                                                </a>

                                            </div>

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

                        </div>
                    </div>
                </section>
            </div>
        @elseif ($post_type == 'skill_develpment')
            <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>
                        <form action="{{ route('view-all-posts') }}" method="POST">
                            @csrf
                            <input type="hidden" name="post_type" value="skill_develpment">
                            <button class="asio-btn" style="float: right" type="submit">View All</button>
                        </form>
                        <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"
                                                    data-content="{!! htmlspecialchars($item->description) !!}">
                                                    <i class="fa fa-expand"
                                                        style="float: right;font-size: 22px;color: grey;"></i>
                                                </a>

                                            </div>

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

                        </div>
                    </div>

                </section>
            </div>
        @elseif ($post_type == 'infrastructure_develpment')
            <div class="ourimpact-wrapper">
                <section class="main-container" id="ourimpact">
                    <h1>Our Impact</h1>
                    <hr>
                    <div class="ourwrok-content">
                        <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"
                                                    data-content="{!! htmlspecialchars($item->description) !!}">
                                                    <i class="fa fa-expand"
                                                        style="float: right;font-size: 22px;color: grey;"></i>
                                                </a>

                                            </div>

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

                        </div>
                    </div>

                </section>
            </div>
        @elseif ($post_type == 'asset_creation')
            <div class="ourimpact-wrapper">
                <section class="main-container" id="ourimpact">
                    <h1>Our Impact</h1>
                    <hr>
                    <div class="ourwrok-content">
                        <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"
                                                    data-content="{!! htmlspecialchars($item->description) !!}">
                                                    <i class="fa fa-expand"
                                                        style="float: right;font-size: 22px;color: grey;"></i>
                                                </a>

                                            </div>

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

                        </div>
                        
                    </div>

                </section>
            </div>
        @elseif ($post_type == 'livelihood_generation')
            <div class="ourimpact-wrapper">
                <section class="main-container" id="ourimpact">
                    <h1>Our Impact</h1>
                    <hr>
                    <div class="ourwrok-content">
                        <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"
                                                    data-content="{!! htmlspecialchars($item->description) !!}">
                                                    <i class="fa fa-expand"
                                                        style="float: right;font-size: 22px;color: grey;"></i>
                                                </a>

                                            </div>

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

                        </div>
                    </div>

                </section>
            </div>
        @else
            <h1>Nothing to show</h1>
        @endif


    </main>
@endsection