@php
    // Get project gallery and images from collection
    use Modules\Project\Entities\Project;
    $posts = App\Post::all();
@endphp

@extends('front.layouts.front')

@section('content')

    <div class="article-archive" id="app">
        <div class="container-fluid">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="accordion accordion--testimonial" id="testimonial-accordion">

                            @foreach($stripped_posts as $stripped_post)

                                @php
                                    $article_categories = $stripped_post->post->taxonomies->where('hierarchical', 0)->map(function($item) {
                                        return ['slug' => $item->slug, 'title' => $item->title];
                                    });
                                    $categories_map = $article_categories->map(function($item) {
                                        return $item['title'];
                                    });

                                    $project = $posts->where('slug', $stripped_post->external_link)->first() ?? null;
                                    if(isset($project)) {
                                        $location = Project::find($project->post_id)->location ?? null;
                                    }
                                @endphp

                                <div class="wrap light-bottom-border">

                                    <div class="pt-3 pb-3 pt-md-0 pb-md-3 accordion-heading-wrapper accordion-heading" data-toggle="collapse" data-target="#collapse-testimonial-{{ $loop->iteration }}" id="accordion-heading-{{ $loop->iteration }}">

                                        <h5 class="h5 text-uppercase mb-0">{{ $stripped_post->post->title }}</h5>
                                        <div class="accordion-arrow">
                                            <div class="line-left"></div>
                                            <div class="arrow"></div>
                                            <div class="line-right"></div>
                                        </div>

                                    </div>

                                    <div>
                                        <div id="collapse-testimonial-{{ $loop->iteration }}" class="collapse accordion-content @if($loop->first) show @endif" aria-labelledby="accordion-heading-{{ $loop->iteration }}" data-parent="#testimonial-accordion">
                                        <div class="accordion-body mb-3 pb-3">

                                                <div class="accordion-text">
                                                    {!! $stripped_post->post->description !!}
                                                </div>

                                                @if(isset($project->id))
                                                    <div class="read-more-link" style="text-align: center;">
                                                        <a data-toggle="modal" data-target="#fsModal-{{$project->id}}" data-whatever="@mdo" class="btn btn-primary" href="{{ $stripped_post->external_link }}">View Project</a>
                                                    </div>
                                                    @include('componentproject::layouts.modal')
                                                @endif

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

                                </div>

                            @endforeach

                        </div>

                        {{-- <div class="pt-5 d-flex justify-content-center">
                            {!! str_replace('/?', '?', $posts->links()) !!}
                        </div> --}}

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

        {{-- Links --}}
        <section id="" class="container  " style="">
            <div id="" class="row  " style="">
                <div id="" class="col-12  ">
                    <div class="container bottom-links py-md-4 " id="links-29">
                        <div class="row justify-content-center pb-md-3 pb-md-5 pt-md-4">
                            <div class="col-md-3 text-center px-0 px-md-2">
                                <a class="d-inline-flex align-items-center justify-content-center btn btn-submit btn-secondary btn-expand w-100 mb-3 mb-md-0" href="/gallery" target="_self">Gallery</a>
                            </div>
                            <div class="col-md-3 text-center px-0 px-md-2">
                                <a class="d-inline-flex align-items-center justify-content-center btn btn-submit btn-secondary btn-expand w-100 mb-3 mb-md-0" href="/team" target="_self">Team</a>
                            </div>
                            <div class="col-md-3 text-center px-0 px-md-2">
                                <a class="d-inline-flex align-items-center justify-content-center btn btn-submit btn-secondary btn-expand w-100 mb-3 mb-md-0" href="/about" target="_self">About</a>
                            </div>
                            <div class="col-md-3 text-center px-0 px-md-2">
                                <a class="d-inline-flex align-items-center justify-content-center btn btn-submit btn-secondary btn-expand w-100 mb-3 mb-md-0" href="/contact" target="_self">Contact</a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>
        {{-- End Links --}}

        {{-- Video --}}
        <section class="container-fluid pb-md-0 pb-3">
            <div id="" class="row  pt-5" style="">
                <div id="" class="col-12  ">
                    <div class="component-video">
                        <a class="youtube-link" data-toggle="modal" data-target="#video-popup-modal-144">
                            <div class="youtube-thumbnail-wrapper embed-responsive embed-responsive-20by5">
                                <img src="https://img.youtube.com/vi/kTOBXwg5m1w/maxresdefault.jpg" class="youtube-thumbnail img-fluid embed-responsive-item" alt="">
                            </div>
                        </a>
                    </div>
                    <div class="hero-video-modal">
                        <div class="modal fade" id="video-popup-modal-144" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
                            <div class="modal-dialog modal-dialog-centered" role="document">
                                <div class="modal-content">
                                    <div class="modal-body bg-black">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-id="#video-popup-modal-144"></button>
                                        <!-- 16:9 aspect ratio -->
                                        <div class="embed-responsive embed-responsive-16by9">
                                            <iframe src="https://www.youtube.com/embed/kTOBXwg5m1w?rel=0&autoplay=1&mute=1" data-src="https://www.youtube.com/embed/kTOBXwg5m1w?rel=0&amp;autoplay=1&amp;mute=1" frameborder="0" allowfullscreen="" allow="autoplay; encrypted-media"></iframe>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {{-- End Video --}}

    </div>

@endsection