@include('htmlpage.frontent.layout.app')
<!-- Bootstrap Container -->
<!-- Start main-content -->
<div class="main-content">

    <div class="page-title" style="background-image: url({{ asset('images/parallax-bg.jpg') }});">
        <div class="auto-container">
            <h1>{{ $project->project_name }}
            </h1>
            <p>{{ $project->location }} | {{ $countries[$project->country] }}</p>
        </div>
    </div>
    <div class="bredcrumb-wrap">
        <div class="auto-container">
            <ul class="bredcrumb-list">
                <li><a href="/">Home</a></li>
                <i class="fa fa-angle-double-right" aria-hidden="true"></i> &nbsp;&nbsp;<li><a
                        href="/project">Projects</a></li>
                <i class="fa fa-angle-double-right" aria-hidden="true"></i> &nbsp;&nbsp;<li>
                    {{ $countries[$project->country] }}</li>
                <i class="fa fa-angle-double-right" aria-hidden="true"></i> &nbsp;&nbsp;<li>
                    {{ $project->site_location }}</li>
                <i class="fa fa-angle-double-right" aria-hidden="true"></i> &nbsp;&nbsp;<li>
                    {{ $project->categoryModel->category }}</li>
                <i class="fa fa-angle-double-right" aria-hidden="true"></i> &nbsp;&nbsp;<li>{{ $project->project_name }}
                </li>
            </ul>
        </div>
    </div>
    <!-- Testimonials -->
    <section class="section-padding">
        <div class="auto-container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="blog-2-block wow fadeInLeft animated" data-wow-delay=".2s" data-wow-duration=".8s"
                        style="visibility: visible; animation-duration: 0.8s; animation-delay: 0.2s; animation-name: fadeInLeft;">
                        <div class="blog-1-image mb_30">
                            <img src="{{ asset('images/bg8.jpg') }}" alt="">
                        </div>
                        <div class="blog-2-bottom-content mb_80">
                            <div class="blog-1-date">{{ $project->categoryModel->category }}</div>
                            <h2 class="mb_10">{{ $project->project_name }} </h2>
                            <p class="blog-1-excerpt">
                                {!! $project->description !!}</p>
                            <blockquote class="mt_40 mb_40 gray-bg p_50 fs_18 fw_medium">
                                <div class="quote-icon theme-color mb_15"><i class="fa fa-quote-left"></i></div>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit amet sit purus tempor dui
                                consequat nibh elit urna interdum.
                                <cite>Darlene Robertson</cite>
                            </blockquote>
                            <p class="mb_40">Tortor etiam sed suspendisse faucibus ac volutpat mattis tortor nec. Orc
                                velit posuere turpis amet
                                Lectus lacus lectus habitasse amet quam libero lorem Volutpat maecenas viverra consequat
                                proin
                                condimentum diam donec aliquet natoque quam vitae leo risus. Eget neque proin in dolor
                                cursus
                                bibendum urna dictum.</p>
                        </div>
                        <div class="author gray-bg p_50 mb_70 pt_45 pb_45 d-flex align-items-center">
                            <div class="blog-single-author-image mr_30 mb_20">
                                <h3>Image Gallery </h3>
                                <!--  -->
                                <div class="filters">
                                    <ul class="filter-tabs filter-btns d-flex justify-content-center">
                                        <li class="filter active" data-role="button" data-filter=".all">All</li>
                                        <li class="filter" data-role="button" data-filter=".cat-1">Gallery</li>
                                        <li class="filter" data-role="button" data-filter=".cat-2">Video </li>
                                    </ul>
                                </div>
                                <div class="sortable-masonry">
                                    <div class="items-container row" style="position: relative; height: auto;">

                                        @if ($galleries->isNotEmpty())
                                            @foreach ($galleries as $gallery)
                                                <!-- Project Block -->
                                                <div class="col-lg-4 col-md-6 gallery-block-1 masonry-item all cat-1">
                                                    <div class="gallery-block-1-inner-box">
                                                        <div class="gallery-block-1-image">
                                                            <img src="{{ asset('storage/' . $gallery->image_path) }}"
                                                                alt="">
                                                        </div>
                                                        <div class="gallery-block-1-overlay">
                                                            <div class="gallery-block-1-lower-content">
                                                                <div class="gallery-block-1-link-btn">
                                                                    <a href="{{ asset('storage/' . $gallery->image_path) }}"
                                                                        class="lightbox-image" data-fancybox="gallery">
                                                                        <span class="fa fa-link"></span></a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- Project Block -->
                                            @endforeach
                                        @else
                                            <p>No galleries found for this project.</p>
                                        @endif



                                    </div>
                                </div>



                                <!--  -->
                            </div>
                        </div>

                        <div class="comments-area">
                            <h3 class="mb_30">2 Comments</h3>
                            <div class="comment-box">
                                <div class="comment">

                                    <div class="author-thumb"><img src="{{ asset('images/testimonial-1.jpg') }}"
                                            alt="">
                                    </div>
                                    <div class="comment-inner">
                                        <h5 class="fs_30 mb_10">Mike Hardson</h5>
                                        <div class="text">Lorem ipsum is simply free text used by copytyping eque
                                            porro est qui dolorem ipsum quia quaed inventore veritatis et quasi
                                            architecto beatae vitae dicta sunt explicabo.</div>
                                        <a class="reply-comment-btn" href="#"> Reply</a>
                                    </div>
                                </div>
                            </div>
                            <div class="comment-box">
                                <div class="comment">
                                    <div class="author-thumb"><img src="{{ asset('images/testimonial-1.jpg') }}"
                                            alt="">
                                    </div>
                                    <div class="comment-inner">
                                        <h5 class="fs_30 mb_10">John Albert</h5>
                                        <div class="text">Lorem ipsum is simply free text used by copytyping eque
                                            porro est qui dolorem ipsum quia quaed inventore veritatis et quasi
                                            architecto beatae vitae dicta sunt explicabo.</div>
                                        <a class="reply-comment-btn" href="#"> Reply</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="comment-form form-alt-2">
                            <h3 class="mb_30">Leave a Comments</h3>
                            <form method="post">
                                <div class="row row-10">
                                    <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                        <input type="text" name="username" placeholder="Name*" required="">
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                        <input type="email" name="email" placeholder="Email*" required="">
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-sm-12 form-group">
                                        <textarea name="message" placeholder="Write Message"></textarea>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-sm-12 form-group">
                                        <button class="btn-1" type="submit" name="submit-form">Post Comment<span
                                                style="top: -6.67188px; left: 182.5px;"></span></button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 ps-lg-55">
                    <div class="tp-default-widget gray-bg">
                        <h4 class="mb_30">Search</h4>
                        <div class="search-widget">
                            <form>
                                <input type="search" placeholder="Search...">
                                <button type="submit"><i class="fa fa-search"></i></button>
                            </form>
                        </div>
                    </div>
                    <div class="tp-default-widget gray-bg">
                        <h4 class="mb_30">Categories</h4>
                        <ul class="category-widget-list">
                            @foreach ($category as $projectCategory)
                                <li class="active"><a
                                        href="{{ route('projectdetails', ['categoryName' => strtolower($projectCategory->category)]) }}">{{ $projectCategory->category }}</a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="tp-default-widget gray-bg">
                        <h4 class="mb_30">Related Projects</h4>
                        <div class="recent-post-widget">
                            <div class="single-recent-post d-flex">
                                <div class="single-recent-post-feature-image mr_20 mb_20">
                                    <a href="#"><img src="{{ asset('images/bg8.jpg') }}" alt=""></a>
                                </div>
                                <div class="single-recent-post-content">
                                    <h5 class="fs_24"><a href="#">Imperdiet consectetur gravida </a></h5>
                                    <p class="mb_20">Country | Location</p>
                                </div>
                            </div>

                            <div class="single-recent-post d-flex">
                                <div class="single-recent-post-feature-image mr_20 mb_20">
                                    <a href="#"><img src="{{ asset('images/bg8.jpg') }}" alt=""></a>
                                </div>
                                <div class="single-recent-post-content">
                                    <h5 class="fs_24"><a href="#">Imperdiet consectetur gravida </a></h5>
                                    <p class="mb_20">Country | Location</p>
                                </div>
                            </div>



                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <!-- Contact Form -->

    <!-- End Accordion -->
    @include('htmlpage.frontent.layout.footer')