@extends('template-layout.app')
@section('content')
    @include('header')


    <!-- Page Header Start -->
    @foreach ($details as $detail)
        <div class="page-header dark-section">



            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-12">
                        <!-- Page Header Box Start -->
                        <div class="page-header-box">
                            <h1 class="text-anime-style-3" data-cursor="-opaque">{{ $detail->careservice->CS_Name }}</h1>
                            <nav class="wow fadeInUp">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{{ route('index') }}">home</a></li>

                                    <li class="breadcrumb-item active" aria-current="page">
                                        {{ $detail->careservice->CS_Name }}</li>
                                </ol>
                            </nav>
                        </div>
                        <!-- Page Header Box End -->
                    </div>
                </div>
            </div>
        </div>
        <!-- Page Header End -->

<h1 class="text-center mt-5">{{ $meta_data->meta_title }}</h1>

        <!-- Page Service Single Start -->
        <div class="page-service-single">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4">
                        <!-- Page Single Sidebar Start -->
                        <div class="page-single-sidebar">
                            <!-- Page Category List Start -->
                            <div class="page-catagery-list wow fadeInUp">
                                <h3>Discover Our Solutions</h3>
                                <ul>
                                    @foreach ($latest_care_services as $latest_care_service)
                                        <li><a
                                                href="{{ route('care.details', [
                                                    'keyword' => $latest_care_service->keyword ?? 'Careservice',
                                                    'name' => Str::slug($latest_care_service->CS_Name),
                                                    'cs_id' => $latest_care_service->CS_Id,
                                                ]) }}">{{ $latest_care_service->CS_Name }}</a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                            <!-- Page Category List End -->

                            <!-- Sidebar CTA Box Start -->

                            <!-- Sidebar CTA Box End -->
                        </div>
                        <!-- Page Single Sidebar End -->
                    </div>

                    <div class="col-lg-8">
                        <!-- Service Single Content Start -->
                        <div class="service-single-contemt">
                            <!-- Page Single Image Start -->
                            <div class="page-single-image">
                                <figure class="image-anime reveal">
                                    <img src="{{ asset('/uploads/care_services_details/' . $detail->CSD_Img) }}"
                                        alt="{{ $detail->CSD_Img_Alt }}"title="{{ $detail->CSD_Img_Title }}">
                                </figure>
                            </div>
                            <!-- Page Single Image End -->

                            <!-- Service Entry Start -->
                            <div class="service-entry">
                                <h2 class="text-anime-style-3">{{ $detail->CSD_Title }}ir</h2>
                                <p class="wow fadeInUp">{{ $detail->CSD_Para1 }}</p>
                                <p class="wow fadeInUp" data-wow-delay="0.2s">{{ $detail->CSD_Para2 }}</p>

                                <!-- Service Power Up Box Start -->
                                <div class="service-power-up-box">
                                    <h2 class="text-anime-style-3">{{ $detail->CSD_Title1 }}</h2>
                                    <p class="wow fadeInUp">{{ $detail->CSD_Para3 }}</p>

                                    <!-- Service Power Image Steps Start -->
                                    <div class="service-power-image-steps">
                                        <!-- Service Power Steps Start -->
                                        <div class="service-power-steps">
                                            <!-- Service Power Step Item Start -->
                                            <div class="service-power-step-item wow fadeInUp" data-wow-delay="0.2s">
                                                <div class="service-power-step-no">
                                                    <h2>01</h2>
                                                </div>
                                                <div class="service-power-step-content">
                                                    <h3>{{ $detail->CSD_Point1 }}</h3>
                                                    <p>{{ $detail->CSD_Point_Desc1 }}</p>
                                                </div>
                                            </div>
                                            <!-- Service Power Step Item End -->

                                            <!-- Service Power Step Item Start -->
                                            <div class="service-power-step-item wow fadeInUp" data-wow-delay="0.4s">
                                                <div class="service-power-step-no">
                                                    <h2>02</h2>
                                                </div>
                                                <div class="service-power-step-content">
                                                    <h3>{{ $detail->CSD_Point2 }}</h3>
                                                    <p>{{ $detail->CSD_Point_Desc2 }}</p>
                                                </div>
                                            </div>
                                            <!-- Service Power Step Item End -->

                                            <!-- Service Power Step Item Start -->
                                            <div class="service-power-step-item wow fadeInUp" data-wow-delay="0.6s">
                                                <div class="service-power-step-no">
                                                    <h2>03</h2>
                                                </div>
                                                <div class="service-power-step-content">
                                                    <h3>{{ $detail->CSD_Point3 }}</h3>
                                                    <p>{{ $detail->CSD_Point_Desc3 }}</p>
                                                </div>
                                            </div>
                                            <!-- Service Power Step Item End -->
                                        </div>
                                        <!-- Service Power Steps End -->

                                        <!-- Service Power Image Start -->
                                        <div class="service-power-image">
                                            <figure class="image-anime reveal">
                                                <img src="{{ asset('/uploads/care_services_details/' . $detail->CSD_Img1) }}"
                                                    alt="">
                                            </figure>
                                        </div>
                                        <!-- Service Power Image End -->
                                    </div>
                                    <!-- Service Power Image Steps End -->
                                </div>
                                <!-- Service Power Up Box End -->

                                <!-- Service Reliable Box Start -->
                                <div class="service-reliable-box">
                                    <h2 class="text-anime-style-3">{{ $detail->CSD_Title2 }}</h2>
                                    <p class="wow fadeInUp">{{ $detail->CSD_Para4 }}</p>

                                    <!-- Service Reliable Item Box Start -->
                                    <div class="service-reliable-item-box">
                                        <!-- Service Reliable Item List Start -->
                                        <div class="service-reliable-item-list">
                                            <!-- Service Reliable Item Start -->
                                            <div class="excellence-item wow fadeInUp" data-wow-delay="0.2s">
                                                <div class="icon-box">
                                                    <img src="/images/icon-excellence-1.svg" alt="">
                                                </div>
                                                <div class="excellence-item-content">
                                                    <h3>{{ $detail->CSD_Icon1 }}</h3>
                                                </div>
                                            </div>
                                            <!-- Service Reliable Item End -->

                                            <!-- Service Reliable Item Start -->
                                            <div class="excellence-item wow fadeInUp" data-wow-delay="0.4s">
                                                <div class="icon-box">
                                                    <img src="/images/icon-excellence-2.svg" alt="">
                                                </div>
                                                <div class="excellence-item-content">
                                                    <h3>{{ $detail->CSD_Icon2 }}</h3>
                                                </div>
                                            </div>
                                            <!-- Service Reliable Item End -->

                                            <!-- Service Reliable Item Start -->
                                            <div class="excellence-item wow fadeInUp" data-wow-delay="0.6s">
                                                <div class="icon-box">
                                                    <img src="/images/icon-excellence-3.svg" alt="">
                                                </div>
                                                <div class="excellence-item-content">
                                                    <h3>{{ $detail->CSD_Icon3 }}</h3>
                                                </div>
                                            </div>
                                            <!-- Service Reliable Item End -->
                                        </div>
                                        <!-- Service Reliable Item List End -->

                                        <ul class="wow fadeInUp" data-wow-delay="0.8s">
                                            <li>{{ $detail->CSD_Li1 }}</li>
                                            <li>{{ $detail->CSD_Li2 }}</li>
                                            <li>{{ $detail->CSD_Li3 }}</li>
                                        </ul>
                                    </div>
                                    <!-- Service Reliable Item Box End -->
                                </div>
                                <!-- Service Reliable Box End -->

                                <!-- Service Care Box Start -->
                                <div class="service-care-box">
                                    <h2 class="text-anime-style-3">{{ $detail->CSD_Title3 }}</h2>
                                    <p class="wow fadeInUp">{{ $detail->CSD_Para5 }}</p>


                                    <!-- Service Care Image Counters End -->
                                </div>
                                <!-- Service Care Box End -->
                            </div>
                            <!-- Service Entry End -->

                            <!-- Page Single FAQs Start -->
                            <div class="page-single-faqs">
                                <!-- Section Title Start -->
                                <div class="section-title">
                                    <h2 class="wow fadeInUp" data-cursor="-opaque">{{ $detail->CSD_FAQ }}</h2>
                                </div>
                                <!-- Section Title End -->

                                <!-- FAQ Accordion Start -->
                                <div class="faq-accordion page-faq-accordion" id="faqaccordion">
                                    <!-- FAQ Item Start -->
                                    <div class="accordion-item wow fadeInUp">
                                        <h2 class="accordion-header" id="heading1">
                                            <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true"
                                                aria-controls="collapse1">
                                                {{ $detail->CSD_Q1 }}
                                            </button>
                                        </h2>
                                        <div id="collapse1" class="accordion-collapse collapse" aria-labelledby="heading1"
                                            data-bs-parent="#faqaccordion">
                                            <div class="accordion-body">
                                                <p>{{ $detail->CSD_A1 }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- FAQ Item End -->

                                    <!-- FAQ Item Start -->
                                    <div class="accordion-item wow fadeInUp" data-wow-delay="0.2s">
                                        <h2 class="accordion-header" id="heading2">
                                            <button class="accordion-button " type="button" data-bs-toggle="collapse"
                                                data-bs-target="#collapse2" aria-expanded="false"
                                                aria-controls="collapse2">
                                                {{ $detail->CSD_Q2 }}
                                            </button>
                                        </h2>
                                        <div id="collapse2" class="accordion-collapse collapse show"
                                            aria-labelledby="heading2" data-bs-parent="#faqaccordion">
                                            <div class="accordion-body">
                                                <p>{{ $detail->CSD_A2 }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- FAQ Item End -->

                                    <!-- FAQ Item Start -->
                                    <div class="accordion-item wow fadeInUp" data-wow-delay="0.4s">
                                        <h2 class="accordion-header" id="heading3">
                                            <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#collapse3"
                                                aria-expanded="false" aria-controls="collapse3">
                                                {{ $detail->CSD_Q3 }}
                                            </button>
                                        </h2>
                                        <div id="collapse3" class="accordion-collapse collapse"
                                            aria-labelledby="heading3" data-bs-parent="#faqaccordion">
                                            <div class="accordion-body">
                                                <p>{{ $detail->CSD_A3 }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- FAQ Item End -->

                                    <!-- FAQ Item Start -->
                                    <div class="accordion-item wow fadeInUp" data-wow-delay="0.6s">
                                        <h2 class="accordion-header" id="heading4">
                                            <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#collapse4"
                                                aria-expanded="false" aria-controls="collapse4">
                                                {{ $detail->CSD_Q4 }}
                                            </button>
                                        </h2>
                                        <div id="collapse4" class="accordion-collapse collapse"
                                            aria-labelledby="heading4" data-bs-parent="#faqaccordion">
                                            <div class="accordion-body">
                                                <p>{{ $detail->CSD_A4 }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- FAQ Item End -->

                                    <!-- FAQ Item Start -->
                                    <div class="accordion-item wow fadeInUp" data-wow-delay="0.8s">
                                        <h2 class="accordion-header" id="heading5">
                                            <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#collapse5"
                                                aria-expanded="false" aria-controls="collapse5">
                                                {{ $detail->CSD_Q5 }}
                                            </button>
                                        </h2>
                                        <div id="collapse5" class="accordion-collapse collapse"
                                            aria-labelledby="heading5" data-bs-parent="#faqaccordion">
                                            <div class="accordion-body">
                                                <p>{{ $detail->CSD_A5 }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- FAQ Item End -->
                                </div>
                                <!-- FAQ Accordion End -->
                            </div>
                            <!-- Page Single FAQs End -->
                        </div>
                        <!-- Service Single Content End -->
                    </div>
                </div>
            </div>
        </div>
    @endforeach
    <!-- Page Service Single End -->


    @include('footer')
@endsection