@extends("website.layouts.layout")
@section('title',"Services")
@section("body")

    <!--- services section -->
    <section class="services-breadcrumb-section">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="{{route('homepage')}}">Home</a></li>
                  <li class="breadcrumb-item active" aria-current="page">Services</li>
                </ol>
              </nav>
        </div>
    </section>
    


    <!-- <section class="banner-services">
        <img class="banner-background-ellipse" src="{{asset('webAssets/assets/images/banner-bg-img.png')}}" alt="">
    </section> -->

  <!-- service cards section starts -->
  <section class="cleaning-section-banner">
    <div class="container">
        <div class="text-center">
            <h2>{{ $group_name }}</h2> <!-- Dynamic category name -->
           <span> {!! $group_tagline !!}</span>
        </div>

        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="cleaning-heading-wrapper">
                    <h3 class="mb-2">{{ $category_name }}</h3>
                    {!! $category_description !!}
                
                    <a href="{{ route('client.project.location') }}?sub_ctg_id={{ $category_id}}" class="btn btn-primary">Book Now</a>

                </div>
            </div>
            <div class="col-lg-6 banner-img-col">
                <div class="identity-img-col services-identity-img-col">
                <img src="{{ asset($category_banner) }}" alt="banner-image" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
</section>

    

<section class="project-steps">
    <div class="container">
        <div class="project-step-items">
            <div class="project-top-item">
                <h3 class="heading">Steps to accomplish your project</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>

            <div class="project-steps-container">

                <div class="project-step-row">
                    @foreach ($accomplishStep as $step)
                        <div class="project-step-col">
                            <div class="project-step-inner-col">
                                <div class="project-step-num">
                                    <h3 class="heading">{{ $step->step }}</h3>
                                </div>
                                <div class="project-step-text-col">
                                    <h6 class="heading new-heading">{!! $step->heading !!}</h6>
                                    <p>{!! $step->tagline !!}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

            </div>


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

    <section class="other-services py-5">
    <div class="container">
        <div class="other-services-block">
            <div class="other-services-top-item">
                <h4 class="heading text-center">Other Services</h4>
            </div>

            <div class="other-services-nav">
                <ul class="other-services-nav-item">
                    @foreach($AllCategories as $allCategories)
                    <li class="other-services-nav-link"><a href="{{route('client.project.location',['sub_ctg_id'=>$allCategories->id])}}">{{$allCategories->Category}}</a></li>
                    @endforeach

                </ul>


            </div>
            <div class="explore-services">
                <button class="btn btn-secondary">Explore All Services</button>
            </div>
        </div>
</section>
@endsection