@extends('front.layout.app')
@section('content')
    <main>
        <style>
            .button-container {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 50vh;
            }

            #section123 {
                width: 100%;
                word-wrap: break-word;
            }

            .moretext {
                display: none;
            }

            .moreless-button {
                cursor: pointer;
                color: #007bff;
                text-decoration: underline;
            }


            /*.truncated-text {*/
            /*        width: 100%;*/
            /*        display: -webkit-box;*/
            /*        -webkit-box-orient: vertical;*/
            /*        -webkit-line-clamp: 5;*/
            /*        overflow: hidden;*/
            /*        text-overflow: ellipsis;*/
            /*    }*/

            .show-more {
                color: #007bff;
                cursor: pointer;
                display: inline-block;
                margin-top: 10px;
                margin-bottom: 20px;

            }
        </style>

        <!-- Inner Banner Html Start -->
        <div class="inner-ban">
            {{-- <img src="{{ asset('front/images/Inner-Bann.png') }}" class="img-fluid" alt=""> --}}
            <img src="{{ $service->getFirstMediaUrl('cover_service_image') }}" class="img-fluid"
                 alt="cover service image">
            <div class="overlay">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <h2> {{ $service->name }}</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- About Us -->
        <section class="about services-about">
            <div class="container-fluid">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <figure class="about__img" data-aos="zoom-in">
                            {{-- <img src="{{ asset('front/images/bellus-facial.png') }}" alt="image" class="img-fluid"> --}}
                            <img src="{{ $service->getFirstMediaUrl('service_image') }}" class="img-fluid"
                                 alt="service image">
                            <img src="{{ asset('front/images/bellus-facial3.png') }}" alt="image" class="img-fluid">
                        </figure>
                    </div>
                    <div class="col-md-6">
                        <div class="about__content" data-aos="fade-up">
                            <h3 class="subHeading"> Services</h3>
                                <h2 class="heading">  @if($service->name == 'Fillers')
                                        Dermal {{ $service->name }}
                                    @else
                                        {{ $service->name }}
                                    @endif
                                </h2>
                            <!-- Initial truncated description -->
                            <div class="toggleText">
                                <p class="truncated-text">
                                    {{ $service->description }}
                                </p>
                            </div>
                            
                            @if (!empty($service->description))
                                <button class="toggleBtn">Show More</button>
                            @endif


                            
                            
                        {{--                        <a class="collapse-btn" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Show More</a>--}}
                        {{--                        <p class="collapse" id="collapseExample">--}}
                        {{--                            {{ $service->description }}--}}
                        {{--                        </p>--}}
                        <!--<p>-->
                        <!--    {{ $service->description }}-->
                            </p>
                            
                            <!--<a href="about.php" class="themeBtn themeBtn--border border--secondary">about the clinic</a>-->
                        </div>
                    </div>
                </div>
            </div>
        </section>
        @php
            use Illuminate\Support\Str;
        @endphp




        @if ($service->special_packages && $service->special_packages->count() > 0)
            <section class="packages bellus-facial bellus-facial2">
                <div class="container">
                    <h2 class="heading text-center mb-5" data-aos="fade-up">
                        Special Packages
                    </h2>
                    <div class="swiper packageSlider">
                        <div class="swiper-wrapper">
                            @foreach ($service->special_packages as $package)
                                <div class="swiper-slide">
                                    <div class="packages-card packaeCard1">
                                        <div class="packages-pricing">
                                            <h3>{{ $package->package_name ?? 'Package Name' }}</h3>
                                            
                                           
        
                                            @if ($package->description)
                                                    <div>{!! $package->description !!}</div>



                                            @endif
                                        </div>
                                        <a href="{{ route('front.appointment', ['service_packages_id' => $package->id]) }}"
                                           class="themeBtn themeBtn--border border--secondary">
                                            Book Now
                                        </a>
                                        <!--<a href="{{ route('front.appointment', ['service_packages_id' => $package->id]) }}"-->
                                        <!--   class="themeBtn themeBtn--border border--secondary">-->
                                        <!--    Book Now-->
                                        <!--</a>-->
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </section>
        @endif


      
        
        
@if ($service->id == 13923 || $service->id == 13924 || $service->id == 13932 || $service->id == 13938)
     <section class="ready-schedule">
                <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="ready-wrap">
                        <h2 class="heading">CONSULTATION NEEDED</h2>
                        
                        @if ($service->id == 13923)

                            <p class="para text-center" data-aos="fade-up">
                                Before scheduling an Endolift Body treatment, consulting with a medical professional is crucial. 
                                This initial meeting is a foundational step in determining whether you are a good candidate. 
                                We will discuss your medical history, skin condition, and specific body contouring goals in the consultation. 
                                This session provides an invaluable opportunity to ask questions, understand the potential outcomes, 
                                and learn about the necessary pre-treatment preparations and post-treatment care. 
                                The consultation helps to tailor the treatment plan to your unique needs, 
                                ensuring optimal results and satisfaction with the Endolift Body process.
                            </p>
                        @endif
                        
                        @if ($service->id == 13924)

                            <p class="para text-center" data-aos="fade-up">
                                The treatment will be customized based on your individual needs, and to ensure optimal outcomes, a preliminary consultation with our specialists at Bellus Medical Aesthetics and Wellness in Minot, ND, is essential before scheduling your Endolift Face procedure.
                            </p>
                        @endif
                        
                        @if ($service->id == 13932)
                         <p class="para text-center" data-aos="fade-up">
                            Before undergoing LADYLIFT Vaginal Rejuvenation, a consultation with one of our experienced healthcare providers at Bellus Medical Aesthetics and Wellness in Minot, ND, is necessary. Your provider will discuss your medical history, assess your concerns, and determine if LADYLIFT is the right treatment option. With this personalized approach, you’ll receive treatment that addresses your unique needs and goals, maximizing the effectiveness and safety of the procedure. Additionally, your provider will explain the treatment process in detail, answer any questions, and provide pre-and post-procedure care recommendations. Schedule your consultation today to regain your confidence and improve your overall well-being.
                        </p>
                        @endif
                        
                        @if ($service->id == 13938)
                         <p class="para text-center" data-aos="fade-up">
                            At Bellus Medical Aesthetics and Wellness in Minot, ND, our consultative approach to neurotoxin treatments is carefully crafted to meet your unique aesthetic goals. In your personalized consultation, we assess your suitability, discuss your desires, and prepare a treatment plan that aligns with your expectations. It includes selecting the right neurotoxin product, explaining the procedure and aftercare, and addressing your concerns. Our commitment is to ensure you are fully informed and comfortable with your treatment plan, paving the way for outstanding results. Schedule your consultation today to explore how neurotoxin treatments can rejuvenate your appearance with precision and care.
                        </p>
                        @endif
                        
                        @if ($service->id == 13938)
                            <section class="glow-tox-section">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="glow-tox-content text-center" data-aos="fade-up">
                                                <h2 class="heading">GLOW TOX</h2>
                                                <p><strong>Neurotoxin:</strong> $12/u</p>
                                                <p><strong>Hyperhydrosis Treatment with Tox:</strong> $950</p>
                                                <p><strong>Lip Flip (Tox):</strong> $150</p>
                                                
                                                
                                            <p>Glow Tox is an innovative treatment that synergizes the skin-rejuvenating effects of a VI Peel with the wrinkle-reducing capabilities of neurotoxin injections, such as Botox or Xeomin. This powerful combination amplifies the anti-aging benefits, increasing wrinkle reduction by 36% while enhancing overall results. By targeting all signs of aging, Glow Tox ensures a comprehensive approach to skincare. The VI Peel exfoliates and improves the skin's texture and tone, preparing it for the neurotoxin injection, which then relaxes the muscles responsible for fine lines. Together, they create a more youthful, vibrant appearance, addressing all areas of concern for a truly transformative effect.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </section>
                        @endif
                        
                        
                        <a href="{{ route('front.appointment', ['consultant_booking' => 'yes']) }}" class="themeBtn">Book Now</a>

                    </div>
                </div>
            </div>
        </div>
    </section>
@endif


@if (!empty($service->treatments) && $service->treatments->count() > 0)

            <section class="peckages bellus-facial">
                <div class="container">
                    <h2 class="heading text-center mb-5" data-aos="fade-up">Treatments </h2>

                    <div class="swiper packageSlider">
                        <div class="swiper-wrapper">
                            @foreach ($service->treatments as $treatment)
                                <div class="swiper-slide">
                                    <div class="packages-card">
                                        <div class="packages-pricing">
                                            <h3>{{ $treatment->base_title }}</h3>
                                        <!--@if ($treatment->base_price > 0)-->
                                        <!--    <h5 class="price"><span>&dollar;</span>{{ number_format($treatment->base_price, 2) }}</h5>-->
                                            <!--    @endif-->
                                            @if ($treatment->base_price > 0)
                                               
                                            
                                            @if ($service->id == 13944)
                                                <h5 class="price">
                                                    <span>&dollar;</span>{{ number_format($treatment->base_price, 2) }} / $180.00
                                                </h5>
                                            @else
                                                <h5 class="price">
                                                    <span>&dollar;</span>{{ number_format($treatment->base_price, 2) }}
                                                </h5>
                                            @endif
                                      @endif

                                        </div>
                                        @if ($treatment->additional_title)
                                            <div class="packages-pricing">
                                                <h3>{{ $treatment->additional_title }}</h3>
                                                <h5 class="price">
                                                    <span>&dollar;</span>{{ number_format($treatment->additional_price, 2) }}
                                                </h5>
                                            </div>
                                        @endif
                                        <p class="para" id="section123" data-lenis-prevent>
                                             {!! Str::limit($treatment->description, 800) !!}
                                            
                                        </p>

                                        {{-- <a href="{{ route('front.service.detail') }}" class="themeBtn themeBtn--border border--secondary">book now</a> --}}
                                        <a href="{{ route('front.service.detail', ['id' => $service->id, 'treatmentId' => $treatment->id]) }}"
                                           class="themeBtn themeBtn--border border--secondary">
                                            Book Now
                                        </a>
                                    </div>
                                    
                                </div>
                        @endforeach



                        <!-- Modal for showing the full description -->
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                    <!-- Modal for showing full description -->
                    @foreach ($service->treatments as $treatment)
                        <div class="modal fade" id="descriptionModal{{ $treatment->id }}" tabindex="-1" role="dialog"
                             aria-labelledby="descriptionModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title"
                                            id="descriptionModalLabel">{{ $treatment->base_title }}</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <p>{{ $treatment->description }}</p>
                                    </div>
                                    <!--<div class="modal-footer">-->
                                    <!--    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>-->
                                    <!--</div>-->
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </section>
        @endif
        
      @if ($service->id == 13944)
    <section class="peckages bellus-facial bellus-facial2">
        <div class="container">
            <h2 class="heading text-center mb-5" data-aos="fade-up">
                CUSTOMIZABLE IV ADD-ONS & INJECTABLES
            </h2>

            <div class="swiper packageSlider">
                <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="packages-card packaeCard1">
                                <div class="packages-pricing">
                                    <h3>Enhance any therapy with these additional nutrients: $10-$30</h3>
                                   
                                </div>
                                
                                <ul class="addon-list">
                                    <li>Vitamin C</li>
                                    <li>Vitamin D (Injection Only)</li>
                                    <li>Glutathione</li>
                                    <li>Tri-Immune Boost</li>
                                    <li>B-Complex</li>
                                    <li>Mineral Blend</li>
                                    <li>Lipo Plus (Injection Only)</li>
                                    <li>Odansetron (for nausea)</li>
                                    <li>Anti-inflammatory (ketorolac)</li>
                                </ul>

                                <a href="{{ route('front.service.detail', ['id' => $service->id, 'treatmentId' => $treatment->id ?? null]) }}"
                                   class="themeBtn themeBtn--border border--secondary book-now addon-btn"
                                   data-treatment-id="{{ $treatment->id ?? '' }}">
                                    Book Now
                                </a>
                            </div>
                        </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>
@endif

        
        @if ($service->pricing && $service->pricing->count() > 0)
            <section class="packages bellus-facial bellus-facial2">
                <div class="container">
                    <h2 class="heading text-center mb-5" data-aos="fade-up">
                           @if ($service->id == 13940)
                                SKIN SHAPE BODY CONTOURING RF - Pricing
                            @else
                                Pricing
                            @endif
                                    
                    </h2>
                    <div class="swiper packageSlider">
                        <div class="swiper-wrapper">
                        @foreach ($service->pricing as $pricing)
                            <!-- Check if pricing data exists for the service -->
                                @if ($pricing->sub1_pack_name)
                                    <div class="swiper-slide">
                                        <div class="packages-card packaeCard1">
                                            <div class="packages-pricing">
                                                <!-- Display the service name -->
                                                <h3>{{ $pricing->sub1_pack_name ?? 'Service Name' }}</h3>
                                                <span>&dollar;</span>{{ number_format($pricing->sub1_price, 2) }}

                                            <!-- Display Package of 3 -->
                                                @if ($pricing->sub2_price)
                                                    <h5 class="price">
                                                        <span>&dollar;</span>{{ number_format($pricing->sub2_price, 2) }}
                                                        -
                                                        <b>{{ $pricing->sub2_pack_name }}</b>
                                                    </h5>
                                                @endif

                                            <!-- Display Package of 6 -->
                                                @if ($pricing->sub3_price)
                                                    <h5 class="price">
                                                        <span>&dollar;</span>{{ number_format($pricing->sub3_price, 2) }}
                                                        -
                                                        <b>{{ $pricing->sub3_pack_name }}</b>
                                                    </h5>
                                                @endif
                                            </div>
                                            {{-- <p class="para">This is a special package designed for your unique needs. Get the best     treatment with additional services.</p> --}}
                                                                                <a href="{{ route('front.appointment', ['service_pricing_id' => $pricing->id]) }}"
                                           class="themeBtn themeBtn--border border--secondary">
                                            Book Now
                                        </a>
                                            <!--<a href="{{ route('front.appointment') }}"-->
                                            <!--   class="themeBtn themeBtn--border border--secondary">-->
                                            <!--    Book Now-->
                                            <!--</a>-->
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </section>
        @endif
        





        @php
            session(['service_id' => $service->id]);
            $sessionServiceId = session('service_id');
        @endphp

    @if ($service->id != 13923 && $service->id != 13924)
    @if ($service->treatments->isEmpty() && $service->addons->isEmpty() && $service->pricing->isEmpty())
        <section class="ready-schedule">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="ready-wrap">
                            <h3 class="subHeading">SCHEDULE</h3>
                            <h2 class="heading">READY TO SCHEDULE YOUR BEAUTY<br> TREATMENT?</h2>
                            <a href="{{ route('front.appointment', ['consultant_booking' => 'yes']) }}" class="themeBtn">Book Now</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
@endif





        @if (!empty($service->addons) && $service->addons->count() > 0)
            <section class="peckages bellus-facial bellus-facial2">
                <div class="container">
                    <h2 class="heading text-center mb-5" data-aos="fade-up">Optional Add-ons</h2>

                    <div class="swiper packageSlider">
                        <div class="swiper-wrapper">
                            @foreach ($service->addons as $addon)
                                <div class="swiper-slide">
                                    <div class="packages-card packaeCard1">
                                        <div class="packages-pricing">
                                            <h3>{{ $addon->name }}</h3>
                                            <h5 class="price"><span>&dollar;</span>{{ number_format($addon->price, 2) }}
                                            </h5>
                                        </div>
                                        <p class="para">{{ $addon->description }}</p>
                                        <a href="{{ route('front.service.detail', ['id' => $service->id, 'treatmentId' => $treatment->id ?? null]) }}"
                                           class="themeBtn themeBtn--border border--secondary book-now addon-btn"
                                           data-treatment-id="{{ $treatment->id ?? '' }}">
                                            Book Now
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </section>
        @endif

       

        @if ($service->special_packages->isEmpty())

            <section class="peckages bellus-facial bellus-facial3">
                <div class="container">
                    <h2 class="heading text-center mb-5" data-aos="fade-up">Benefits of {{ $service->name }}</h2>
                    <div class="row" data-aos="fade-up">
                        <div class="col-md-6">
                            <div class="packages-card">
                                <ul>
                                    @foreach($service->benefits->take(5) as $benefit)
                                        <li>{{ $benefit->benefit }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="packages-card">
                                <ul>
                                    @foreach($service->benefits->skip(5) as $benefit)
                                        <li>{{ $benefit->benefit }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif
        
        @if ($service->special_packages->isEmpty())
                <section class="faqSec faqInner">
                    <div class="container">
                        <h3 class="subHeading">Faq</h3>
                        <h2 class="heading mb-5" data-aos="fade-up">FAQs</h2>
                        <div class="row">
                            <div class="col-md-12" data-aos="fade-right">
                                <div id="accordion">
                                    @foreach($faqs as $key => $faq)
                                        <div class="card">
                                            <div id="heading{{ $key }}">
                                                <h5 class="mb-0">
                                                    <button class="btn btn-link" data-toggle="collapse"
                                                            data-target="#collapse{{ $key }}"
                                                            aria-expanded="{{ $key == 0 ? 'true' : 'false' }}"
                                                            aria-controls="collapse{{ $key }}">
                                                        <span></span>{{ $faq->question }}
                                                        <i class="fas fa-plus"></i>
                                                    </button>
                                                </h5>
                                            </div>
                                            <div id="collapse{{ $key }}" class="collapse {{ $key == 0 ? 'show' : '' }}"
                                                 aria-labelledby="heading{{ $key }}" data-parent="#accordion">
                                                <div class="card-body">
                                                    <p>{{ $faq->answer }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
        
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
        @endif
        
        @endsection


        @push('script')
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

            <script>
                document.addEventListener('DOMContentLoaded', function () {


                    const sessionTreatmentId = @json(session('treatment_id'));
                    const addonsButtons = document.querySelectorAll('.addon-btn');

                    addonsButtons.forEach(function (button) {
                        button.addEventListener('click', function (e) {
                            if (!sessionTreatmentId) {
                                e.preventDefault();
                                alert('Please select treatment first!');
                            }
                        });
                    });


                });

                // window.addEventListener('DOMContentLoaded', function() {
                //     var descriptionText = document.getElementById('description-text');
                //     var showMoreLink = document.getElementById('show-more');
                //
                //     descriptionText.style.webkitLineClamp = "3";
                //     showMoreLink.innerText = "Show More";
                //
                //     showMoreLink.addEventListener('click', function() {
                //         // Toggle the line-clamp value
                //         if (descriptionText.style.webkitLineClamp === "3") {
                //             descriptionText.style.webkitLineClamp = "none";
                //             showMoreLink.innerText = "Show Less";
                //         } else {
                //             descriptionText.style.webkitLineClamp = "3";
                //             showMoreLink.innerText = "Show More";
                //         }
                //     });
                // });


                // $(document).ready(function() {
                //     $('.moreless-button').click(function(e) {
                //         e.preventDefault();

                //         var moreText = $(this).prev('.moretext');
                //         var button = $(this);

                //         moreText.slideToggle();  // Toggle the visibility of the extra description

                //         // Change the button text between "Show More" and "Show Less"
                //         if (button.text() == "Show More") {
                //             button.text("Show Less");
                //         } else {
                //             button.text("Show More");
                //         }
                //     });
                // });

                // Open modal on clicking the Show More button
                //    document.getElementById('showMoreBtn').addEventListener('click', function() {
                //        $('#myModal').modal('show');
                //    });

            </script>
    @endpush