@include('htmlpage.frontent.layout.app')
<div class="theme_slider bg-black p-0">
    <div class="page_header">
        <div class="page_header_inner">
            <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="container">
                <div class="page_header_content d-flex align-items-center justify-content-between">

                    <ul class="breadcrumb d-flex align-items-center">
                        <li><a href="/">Home</a></li>
                        <li class="active">Services</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <main class="wrapper">
        <!-- Scroll Progress -->

        <!-- Our Mission -->
        <section class="project-details bg-dark-200">
            <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="container">
                <div class="row">
                    <div class="col-lg-4 col-md-4">
                        <div class="sidebar">
                            <div class="service-information">
                                <ul>
                                    @foreach ($allServices as $serviceItem)
                                        <li class="{{ $serviceItem->service == $service->service ? 'active' : '' }}">
                                            <a
                                                href="{{ route('servicedetails', ['url' => urlencode(str_replace(' ', '-', strtolower($serviceItem->url)))]) }}">{{ $serviceItem->service }}</a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8 col-md-8">
                        <div class="project-details_inner">
                            <div class="post_content">
                                <div class="post-header">
                                    <h1 class="post-title">{{ $service->title }}</h1>
                                </div>
                                <div class="fulltext">
                                    <p>{{ $service->intro_text }}</p>
                                    <h6 style="position: relative" class="pb-3">Service Features<span
                                            class="title-line"></span></h6>
                                    <p>{{ $service->features_intro }}</p>
                                    {!! $service->description !!}
                                    <p>{{ $service->conclusion }}</p>
                                    <div class="post-footer">
                                        <nav class="d-flex align-items-center justify-content-between">
                                            <div class="details_link l-dir pagination-previous">
                                                @if ($previousService)
                                                    <a
                                                        href=" {{ route('servicedetails', ['url' => urlencode(str_replace(' ', '-', strtolower($previousService->url)))]) }}">
                                                        <span class="link_icon">
                                                            <span class="line"></span>
                                                            <span class="circle"></span>
                                                            <span class="dot"></span>
                                                        </span>

                                                    </a>
                                                @else
                                                    <span>No previous service</span>
                                                @endif
                                            </div>
                                            <div class="page-all">
                                                <a href="#"><i class="bi bi-grid"></i></a>
                                            </div>
                                            <div class="details_link r-dir pagination-next">
                                                @if ($nextService)
                                                    <a
                                                        href=" {{ route('servicedetails', ['url' => urlencode(str_replace(' ', '-', strtolower($nextService->url)))]) }}">
                                                        <span class="link_icon">
                                                            <span class="line"></span>
                                                            <span class="circle"></span>
                                                            <span class="dot"></span>
                                                        </span>

                                                    </a>
                                                @else
                                                    <span>No next service</span>
                                                @endif
                                            </div>
                                        </nav>
                                    </div>
                                </div>

                                <div class="related-posts">
                                    <h6 class="widget-title mb-2">Related Projects<span class="title-line"></span></h6>
                                    <div class="grid grid-3 gutter-15 clearfix">
                                        @foreach ($relatedProjects as $project)
                                            <a
                                                href="{{ route('projectdetails', ['url' => urlencode(str_replace(' ', '-', strtolower($project->url)))]) }}">
                                                <div class="grid-item {{ $project->project_name }}">
                                                    <div class="thumb">
                                                        <div class="lazyload-wrapper">
                                                            <img class="item_image"
                                                                src="{{ asset('storage/' . $project->image_path) }}"
                                                                alt="">
                                                        </div>
                                                        <div class="works-info">
                                                            <div class="label-text">
                                                                <h5>{{ $project->project_name }}
                                                                </h5>
                                                                <h6>{{ $project->categoryModel->category }}
                                                                </h6>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </main>
    @include('htmlpage.frontent.layout.footer')