@include('htmlpage.frontent.layout.app')

<div class="theme_slider bg-black p-0">
    <main class="wrapper">
        @foreach ($categories as $category)
            <section class="bg-dark-200 p-0 text-center pdetails" id="funfacts"
                style="
            background-image: url('{{ asset('storage/' . $category->image_path) }}');
            background-repeat: repeat;
            background-size: cover;
            background-position: left center;
            width: 100%;
            height: 100%;
            transition: all 0.5s ease-in-out;">
                <div class="d-flex justify-content-start secpadding container">
                    <div class="pb-100 catdetails row" data-aos="fade-left" data-aos-duration="1000">
                        <div class="section-header pt-50">
                            <h3><a href="/">Home</a> / <a href="/portfolio">Projects</a> /
                                {{ $category->category }}
                            </h3>
                            <h1 class="border-line "> {{ $category->title }}
                            </h1>
                        </div>
                        <div class="details_link">
                            <a href="/portfolio" class="text-center">
                                <span class="link_text">Our Portfolio</span>
                                <span class="link_icon">
                                    <span class="line"></span>
                                    <span class="circle"></span>
                                    <span class="dot"></span>
                                </span>
                            </a>
                        </div>
                    </div>
            </section>
        @endforeach
        <section class="projects packery" style="padding: 0px;" id="funfacts">
            <!-- Section Grid Lines -->
            <ul class="grid_lines d-none d-md-flex justify-content-between">
                <li class="grid_line"></li>
                <li class="grid_line"></li>
                <li class="grid_line"></li>
                <li class="grid_line"></li>
                <li class="grid_line"></li>
                <li class="grid_line"></li>
                <li class="grid_line"></li>
            </ul>

            <div class="grid clearfix">
                <div class="grid-sizer"></div>
                @foreach ($projects as $category)
                    <div class="grid-item residences width-35">
                        <div class="thumb">
                            <img class="item_image" src="{{ asset('storage/' . $category->image_path) }}"
                                alt="">
                            <div class="inenr-content-absolute">
                                <div class="label-text">
                                    <h6><a
                                            href="{{ route('projectdetails', ['url' => urlencode(str_replace(' ', '-', strtolower($category->url)))]) }}">{{ $category->categoryModel->category }}</a>
                                    </h6>
                                    <h5><a
                                            href="{{ route('projectdetails', ['url' => urlencode(str_replace(' ', '-', strtolower($category->url)))]) }}">{{ $category->project_name }}</a>
                                    </h5>
                                    <div class="details_link"><a
                                            href="{{ route('projectdetails', ['url' => urlencode(str_replace(' ', '-', strtolower($category->url)))]) }}"><span
                                                class="link_text">View
                                                Details</span> <span class="link_icon"><span class="line"></span><span
                                                    class="circle"></span><span class="dot"></span></span></a></div>
                                </div>
                            </div>
                            </h3>
                        </div>
                    </div>
                @endforeach

            </div>
            <div class="btn_group w-100 text-center">
                <button id="load-more" class="btn olive w-100">Show More Project(s)<br>
                    <img src="{{ asset('material/img/projects/arrow2.gif') }}" style="width: 50px;;">
                </button>

            </div>
        </section>


    </main>

    @include('htmlpage.frontent.layout.footer')