@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="about-wrapper">
            <section id="about" class="main-container">
                <div class="row">
                    <div class="col-lg-6">
                        <div id="about">
                            <h1>About Us</h1>
        
                            <hr>
                            {!! $about->about_us !!}
                            {{-- <span class="see-more1">See More...</span>
                            <span class="see-less hidden">See Less</span> --}}
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div>
                            <h1>Our Vission</h1>
                            <hr>
                            {!! $about->our_vission !!}
        
                        </div>
                        <div >
                            <h1>Our Mission</h1>
                            <hr>
                            {!! $about->our_mission !!}
        
                        </div>
                        <div >
                            <h1>Our Core Values</h1>
                            <hr>
                            {!! $about->our_core_values !!}
        
                        </div>
                        <div >
                            <h1>Our Strategy</h1>
                            <hr>
                            {!! $about->our_strategy !!}
        
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div>
                            <h1>Our commitment to protecting vulnerable communities</h1>
                            <hr>
                            {!! $about->our_commitment !!}
        
                        </div>
                    </div>
                </div>
                
                
              
               

            </section>
        </div>
    

        </section>
        </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>
                    <form action="{{ route('view-all-posts') }}" method="POST">
                        @csrf
                        <input type="hidden" name="post_type" value="our_activities">
                        <button class="asio-btn" style="float: right" type="submit">View All</button>
                    </form>
                    <hr>
                    <div class="row">
                        @foreach ($posts as $categoryPosts)
                            @foreach ($categoryPosts as $item)
                                @if ($item->category == 'our_activities')
                                    <div class="col-lg col-sm 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
                        @endforeach

                    </div>
                    <br>
                    <h2 id="successstories">Success Stories</h2>
                    <form action="{{ route('view-all-posts') }}" method="POST">
                        @csrf
                        <input type="hidden" name="post_type" value="success_story">
                        <button class="asio-btn" style="float: right" type="submit">View All</button>
                    </form>
                    <hr>
                    <div class="row">
                        @foreach ($posts as $categoryPosts)
                            @foreach ($categoryPosts 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
                        @endforeach

                    </div>
                    <br>
                    <br>
                    <h2 id="benefeciaryoverview">Beneficiary Overview</h2>
                    <hr>
                    <div class="chart-container">
                        <canvas id="myPieChart"></canvas>
                    </div>
                </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>
                    <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 $categoryPosts)
                            @foreach ($categoryPosts 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
                        @endforeach

                    </div>
                    <br>
                    <h2 id="infrastructuredevelopment">Infrastructure Development</h2>
                    <form action="{{ route('view-all-posts') }}" method="POST">
                        @csrf
                        <input type="hidden" name="post_type" value="infrastructure_develpment">
                        <button class="asio-btn" style="float: right" type="submit">View All</button>
                    </form>
                    <hr>
                    <div class="row">
                        @foreach ($posts as $categoryPosts)
                            @foreach ($categoryPosts 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
                        @endforeach

                    </div>
                    <br>
                    <br>
                    <h2 id="assetcreation">Asset Creation</h2>
                    <form action="{{ route('view-all-posts') }}" method="POST">
                        @csrf
                        <input type="hidden" name="post_type" value="asset_creation">
                        <button class="asio-btn" style="float: right" type="submit">View All</button>
                    </form>
                    <hr>
                    <div class="row">
                        @foreach ($posts as $categoryPosts)
                            @foreach ($categoryPosts 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
                        @endforeach

                    </div>
                    <br>
                    <h2 id="livelihoodgeneraion">Livelihood Generation</h2>
                    <form action="{{ route('view-all-posts') }}" method="POST">
                        @csrf
                        <input type="hidden" name="post_type" value="livelihood_generation">
                        <button class="asio-btn" style="float: right" type="submit">View All</button>
                    </form>
                    <hr>
                    <div class="row">
                        @foreach ($posts as $categoryPosts)
                            @foreach ($categoryPosts 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
                        @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>
                    <h2 id="jawzjan">Jawzjan</h2>
                    <hr>

                </div>
            </section>
        </div>
        <div class="ourimpact-wrapper">
            <section class="main-container" id="disaster">
                <h1>Disaster Response</h1>
                <hr>

                <div class="ourwrok-content">
                <h3>Disaster Management Services by ASIO</h3>

                    <h2>Baghlan</h2>
                    <hr>
                    <div>
                        ASIO is dedicated to providing swift and effective disaster management services. We respond to
                        emergencies by coordinating with funding agencies, local authorities and NGOs, delivering essential
                        food and hot meals to affected individuals.
                        Our efforts include managing joint distribution activities, providing warehouse facilities, and
                        ensuring resources reach the most vulnerable populations. Through these initiatives, ASIO fosters
                        resilience and supports communities in the face of disasters.
                        <h3>Summary Report of Recent Flash Flood in Baghlan province:</h3>
                        <b>Introduction</b><br>
                        On May 10-11, 2024, a devastating flash flood struck Baghlan province, claiming hundreds of lives,
                        destroying property and crops, and displacing thousands. The hardest-hit districts were Burka,
                        Baghlan-e-Jadid, Pol-e-Khumri, Guzargah-e-Nur, and Doshi.
                        <b>ASIO’s Activities</b>
                        ASIO coordinated with local authorities and NGOs, forming five joint assessment teams to evaluate
                        the impact. They provided hot meals to over 2,200 individuals in Baghlan-e-Jadid and 1,200 in
                        Guzargah-e-Nur, despite severe logistical challenges. WFP/ASIO distributed High Energy Biscuits,
                        LNS, and 8,000 loaves of bread daily in Baghlan-e-Jadid. <br>
                        <b>Management of Joint Distribution and Providing Warehouses</b><br>
                        ASIO extended its services by providing warehouse facilities to various organizations, including
                        IOM, UNHCR, UNICEF, and others. They managed joint distribution efforts and supplied digitalized
                        beneficiary lists to OCHA. WFP installed two Mobile Storage Units in Burka and Baghlan-e-Jadid for
                        joint distribution activities. ASIO/WFP provided a two-month full ration of food and nutritional
                        supplements to those affected. <br>
                        <b>Assessments Result</b><br>
                        Over 13 Joint Assessment Teams (JATs) were formed, with ASIO personnel present in nearly all teams.
                        The survey results showed Baghlan-e-Jadid had the highest number of affected households (729),
                        followed by Burka (560) and Pol-e-Khumri (380). These findings highlight the widespread impact of
                        the flood across different regions, necessitating targeted relief efforts. <br>
                        <b>Conclusion</b><br>
                        The flash flood in Baghlan province had a profound impact on communities, with Baghlan-e-Jadid,
                        Burka, and Pol-e-Khumri being the most affected. ASIO’s proactive involvement and swift response
                        were instrumental in delivering timely assistance, from coordinating joint assessment teams to
                        providing hot meals and facilitating joint distribution efforts. As relief organizations, including
                        ASIO, continue their response efforts, it’s imperative to prioritize the most vulnerable populations
                        and ensure equitable distribution of resources. The comprehensive data provided by the survey serves
                        as a vital tool for guiding effective interventions and fostering resilience in the face of future
                        disasters. <br>
                    </div>
                    <br><br>    
                    <h2>Samangan</h2>
                    <hr>
                    <div>
                        <h3>Summary Report of Recent Flash Flood in Samangan Province:</h3>
                        <b>Introduction</b><br>
                        Continuous heavy rainfall from April 2024 triggered flash floods, causing severe damage to
                        residents. ASIO, in partnership with WFP and other organizations, conducted rapid assessments and
                        distributed food commodities, including high-energy biscuits, reaching 441 flood-affected
                        individuals.<br>
                        <b>Response Breakdown</b>
                        <ul>
                            <li>Ruy-e-Duab: 188 households served</li>
                            <li>Khuram wa Sarbagh: 108 households served</li>
                            <li>Aybak Center: 76 households served</li>
                            <li> Hazrat-e-Sultan: 19 households served</li>
                            <li>Dara-e-Suf Bala: 13 households served</li>
                            <li>Feroznakchir: 37 households served</li>
                        </ul>
                     
                        <b>Pre-Assessment Coordination</b><br>
                        Joint teams held meetings to address the needs of affected families, with ANDMA providing detailed
                        overviews of the flood’s impact.
                        <b>Flood-Affected Households Assessment</b>
                        ASIO conducted house-to-house surveys, identifying 441 significantly affected households out of 910
                        surveyed. <br>
                        <b>Immediate Response</b><br>
                        ASIO provided 100% ration food assistance for two months, distributing:
                        <ul>
                            <li>88.2 MT of wheat flour</li>
                            <li>8.0262 MT of vegetable oil</li>
                            <li>0.882 MT of salt</li>
                            <li>11.025 MT of split peas</li>
                            <li>1.478 MT of wheat soy blend</li>
                            <li>0.926 MT of high-energy biscuits</li>
                            <li>1.486 MT of lipid-based nutrient supplement</li>
                        </ul>
                       
                        <b>Conclusion</b><br>
                        Heavy rains in April, May, and June caused severe floods, resulting in fatalities and extensive
                        damage. Despite challenges, ASIO’s coordinated efforts ensured timely and effective disaster
                        response.


                    </div>
                </div>
            </section>
        </div>
        <div class="ourwork-wrapper">
            <section class="main-container" id="partners">
                <h1>Our Valueable Partners</h1>
                <hr>
                <div class="ourwrok-content">
                    
                    <img src="{{ asset('images/donor-logo/giz.png') }}" alt="" width="300">
               
                    <img src="{{ asset('images/donor-logo/ifad.jpg') }}" alt="" width="300">
                
                    <img src="{{ asset('images/donor-logo/world bank.png') }}" alt="" width="300">
                 
                    <img src="{{ asset('images/donor-logo/undp.png') }}" alt="" width="100">
                 
                    <img src="{{ asset('images/donor-logo/wfp.png') }}" alt="" width="300">
                 
                </div>
            </section>
        </div>
    </main>
@endsection