@extends('layouts.front-layout')
@section('content')
    <title>{{ $category_detail->meta_title ? : '' }}</title>
    <meta name="description" content="{{ $category_detail->meta_description ? : '' }}">

    <style>
        @keyframes pulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(48, 191, 172, 0.7);
            }
            70% {
                transform: scale(1.05);
                box-shadow: 0 0 0 15px rgba(48, 191, 172, 0);
            }
            100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(48, 191, 172, 0);
            }
        }

        .pulse-btn {
            animation: pulse 2s infinite;
            border: none;
        }

        .out-cont {
            width: 100%;
            margin: 0 auto;
        }

        .img img {
            max-height: 300px;
        }

        .ques:hover {
            text-decoration: underline;
        }

        .button-blue {
            background-color: #30bfac;
            border: none;
        }

        .button-blue:hover {
            background-color: #28a698;
        }

        .accordion-button {
            color: #28a698 !important;
            font-size: 20px
        }

        .accordion-button:hover {
            color: #00796b !important;
            text-decoration: underline;
        }

        .article img {
            max-height: 150px;
        }


        .article-link {
            color: #28a698;
            text-decoration: none;
        }

        .article-link:hover {
            text-decoration: underline;
        }

        .table th {
            background: #00796b;
            font-weight: 600;
            color: #fff;
            text-align: center;
            vertical-align: middle;
        }

        .table th small {
            display: block;
            font-weight: normal;
            font-style: italic;
        }

        .price {
            font-size: 2rem;
            font-weight: bold;
        }

        .product-img {
            max-width: 120px;
        }

        .table td img {
            min-height: 200px;
            object-fit: contain;
        }

        .table td {
            font-size: 14px;
        }

        .table strong {
            font-weight: 600;
        }

        .price span {
            font-size: 4rem !important;
            font-weight: 300;
        }

        .table td,
        .table th {
            vertical-align: middle;
        }

        .shadow-small {
            box-shadow: 0.25rem .25rem 0.5rem rgba(0, 0, 0, .075);
        }

        .shadow-large {
            box-shadow: 0.25rem .25rem 0.5rem rgba(0, 0, 0, .075) !important;
        }

        .shadow-large:hover {
            box-shadow: none;
            transform: none !important;
        }

        .shadow-small:hover {
            box-shadow: 0.125rem .25rem 0.5rem rgba(0, 0, 0, .075) !important;
            transform: none !important;
        }

        @media (max-width: 768px) {
            .table-responsive {
                overflow-x: auto;
            }

            .product-img {
                max-width: 80px;
            }
        }


        @media (max-width: 992px) {
            .consultation-cta h3 {
                font-size: 1.5rem;
            }

            .consultation-cta p {
                font-size: 0.95rem;
            }

            .consultation-cta .d-flex.flex-wrap {
                gap: 2rem 1.5rem;
                justify-content: center;
            }

            .consultation-cta img {
                max-width: 130px;
                height: auto;
            }
        }


        @media (max-width: 576px) {
            .consultation-cta {
                text-align: center;
                padding: 2rem 1rem !important;
            }

            .consultation-cta h3 {
                font-size: 1.3rem;
            }

            .consultation-cta p {
                font-size: 0.9rem;
            }

            .consultation-cta .btn {
                width: 100%;
                font-size: 0.95rem;
            }

            .consultation-cta .d-flex.flex-wrap {
                flex-direction: column;
                align-items: center;
                gap: 1.5rem;
            }

            .consultation-cta .fa-2x {
                font-size: 1.6rem;
            }

            .consultation-cta img {
                max-width: 100px;
                height: auto;
            }

            .consultation-cta .fw-bold.fs-5 {
                font-size: 1rem;
            }

            .consultation-cta .text-white-50 {
                font-size: 0.8rem;
            }
        }

    </style>
    <div class="container d-flex justify-content-center align-items-center my-3">
        <div class="container">
            <a href="{{ url('/') }}"><i class="fa fa-home blue"></i></a>
            <i class="fa fa-chevron-right ms-1 text-secondary"></i>
            <a href="" class="blue text-decoration-none">Treatments</a>
            <i class="fa fa-chevron-right ms-1 text-secondary"></i>
            <a href="" class="blue text-decoration-none">{{ $category_detail->category_name }}</a>
        </div>
    </div>
    <div class="container bg-white out-cont shadow-large border-0">
        <div class="container pb-5 pt-2">
            <div class="row align-items-center">
                <!-- Image -->
                <div class="col-md-5 col-lg-4 mb-4 mb-md-0 img">
                    <img src="{{ $category_detail->categoryImage('category_image')  }}" alt="Hair Loss Treatment"
                         class="img-fluid rounded shadow-small"/>
                </div>

                <!-- Text Content -->
                <div class="col-md-7 col-lg-8">
                    <h1 style="font-weight: 500"
                        class="display-5 text-dark">{{ $category_detail->category_name ? : '' }}</h1>
                    <p class=" text-secondary font18 fw-semibold">
                        {!! $category_detail->short_description ? : '' !!}

                    </p>

                    @if($category_detail->consultation_btn_status === 1)
                        <div class=" d-grid gap-2 d-md-block">
                            <a href="{{ route('categorySlug.consultation', ['categorySlug' => $category_detail->slug]) }}"
                               class="btn btn-primary button-blue btn-lg px-4 pulse-btn">
                                Start Consultation
                            </a>

                        </div>
                    @endif

                    <p class="fs-5 text-secondary text-dark mt-4">
                        {!! $category_detail->long_description ? : '' !!}
                    </p>

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

        <!-- Products -->
        <div class="products container mb-5">
            <div class="row  g-4">

                @foreach ($category_detail->products as $product)
                    <div class="col-md-4 col-lg-4 mb-4">
                        <div class="card h-100 transform  shadow-none border rounded-3"
                             style="min-height: 300px;  margin: auto;">
                            <h5 class="text-center mt-3 mb-3 blue font600">
                                {{ $product->product_name }}
                            </h5>

                            <div class="d-flex justify-content-center mb-2 ">
                                <img class="img-fluid" style="max-height: 160px; object-fit: contain;"
                                     src="{{ $product->productImage('product_main_image')  }}"
                                     alt="{{ $product->product_name }}">
                            </div>
                            <div class="card-body text-center">
                                <p class="text-muted small">
                                    {!!   $product->product_detail_page_short_description !!}
                                </p>
                            </div>
                            <div class="background-blue text-white text-center py-2 rounded-bottom">
                                <a href="{{ route('product.detail.slug', $product->slug) }}"
                                   class="text-white text-decoration-none fw-bold">
                                    from £{{ $product->product_price }}
                                    <i class="fa fa-chevron-right ms-1"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach


                @foreach ($category_detail->subCategories as $subCategory)
                    <div class="col-md-4 col-lg-4 mb-4">
                        <div class="card h-100 transform shadow-none border rounded-3"
                             style="min-height: 300px;  margin: auto;">
                            <h5 class="text-center mt-3 mb-3 blue font600">
                                {{ $subCategory->sub_cate_name ? : '' }}
                            </h5>

                            <div class="d-flex justify-content-center mb-2 ">
                                <a
                                    href="{{route('categorySlug.subcategory.slug', ['categorySlug' => $category_detail->slug, 'subcategorySlug' => $subCategory->slug])}}">
                                    <img class="img-fluid" style="max-height: 160px; object-fit: contain;"
                                         src="{{ $subCategory->subCategoryImage('sub_category_image')  }}"
                                         alt="{{ $subCategory->subCategoryImage('sub_category_image')  }}">
                                </a>

                            </div>
                            <div class="card-body text-center">
                                <p class="text-muted small">
                                    {!! $subCategory->short_description  ? : ''!!}
                                </p>
                            </div>
                        </div>
                    </div>
                @endforeach


            </div>
        </div>

        <!-- Consultation CTA -->
        @if($category_detail->online_consultation_sections_status === 1)
            @include('front.includes.online-consultation-sections')
        @endif
        <div class="container my-5">
            <h1 class="font600 fs-3">Frequently Asked Questions About</h1>
        </div>

        <!-- FAQs: My Account -->

        <div class="mb-8">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="accordion accordion-flush" id="faqAccount">

                        @if($category_detail && $category_detail->frequentlyAskedQuestions->count())
                            @foreach($category_detail->frequentlyAskedQuestions as $index => $faq)
                                <div class="accordion-item bg-transparent border-bottom py-3">
                                    <h2 class="accordion-header" id="faqAccountHeading{{ $index }}">
                                        <button class="accordion-button collapsed bg-transparent fw-bold shadow-none"
                                                type="button"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#faqAccountCollapse{{ $index }}"
                                                aria-expanded="false"
                                                aria-controls="faqAccountCollapse{{ $index }}">
                                            {{ $faq->frequently_asked_questions_title }}
                                        </button>
                                    </h2>
                                    <div id="faqAccountCollapse{{ $index }}"
                                         class="accordion-collapse collapse"
                                         aria-labelledby="faqAccountHeading{{ $index }}"
                                         data-bs-parent="#faqAccount">
                                        <div class="accordion-body">
                                            <p>{!! $faq->frequently_asked_questions_description !!}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <p class="text-center">No FAQs available for this category.</p>
                        @endif

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

        <div class="container my-5">
            <h1 class="fs-5">What is Erectile Dysfunction?</h1>
            <p class="text-secondary font16">
                Erectile dysfunction (ED), also known as impotence, is the inability
                to get or keep an erection firm enough for sexual intercourse. It can
                be a temporary or ongoing issue and can affect men of all ages.
            </p>
        </div>
        <div class="container my-5">
            <h1 class="fs-5">What causes Erectile Dysfunction?</h1>
            <p class="text-secondary font16">
                Erectile dysfunction can be caused by a variety of factors, including
                physical, psychological, and lifestyle-related issues. Common causes
                include cardiovascular disease, diabetes, obesity, hormonal
                imbalances, stress, anxiety, depression, smoking, excessive alcohol
                consumption, and certain medications. In some cases, ED may be a
                combination of these factors.
            </p>
        </div>


        <div class="container">
            <h3 class="mb-4">Compare Treatments</h3>
            <div class="table-responsive">
                <table class="table table-bordered text-center align-middle">
                    <thead>
                    <tr>
                        <th style="background:none;"></th>
                        <th>Sildenafil <small>Best Seller</small></th>
                        <th>Viagra <small>Popular Brand</small></th>
                        <th>Tadalafil <small>Longer-Lasting</small></th>
                        <th>Cialis <small>Longer-Lasting</small></th>
                        <th>Spedra <small>Fast-Acting</small></th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- Product Images -->
                    <tr>
                        <td></td>
                        <td><img src="{{ asset('assets/Assets/slide1.jpg') }}" class="product-img" alt="Sildenafil">
                        </td>
                        <td><img src="{{ asset('assets/Assets/slide2.jpg') }}" class="product-img" alt="Viagra">
                        </td>
                        <td><img src="{{ asset('assets/Assets/slide3.jpg') }}" class="product-img" alt="Tadalafil">
                        </td>
                        <td><img src="{{ asset('assets/Assets/slide1.jpg') }}" class="product-img" alt="Cialis">
                        </td>
                        <td><img src="{{ asset('assets/Assets/slide2.jpg') }}" class="product-img" alt="Spedra">
                        </td>
                    </tr>
                    <!-- Prices -->
                    <tr>
                        <td>Prices from<br><small>per pill</small></td>
                        <td style="font-size: 32px; font-weight: 500;  " class="price text-secondary">£<span>0</span>.99
                        </td>
                        <td style="font-size: 32px; font-weight: 500;  " class="price text-secondary">£<span>6</span>.87
                        </td>
                        <td style="font-size: 32px; font-weight: 500;  " class="price text-secondary">£<span>1</span>.19
                        </td>
                        <td style="font-size: 32px; font-weight: 500;  " class="price text-secondary">£<span>2</span>.38
                        </td>
                        <td style="font-size: 32px; font-weight: 500;  " class="price text-secondary">£<span>5</span>.31
                        </td>
                    </tr>
                    <!-- Active Ingredient -->
                    <tr>
                        <td><strong>Active Ingredient:</strong></td>
                        <td>Sildenafil</td>
                        <td>Sildenafil</td>
                        <td>Tadalafil</td>
                        <td>Tadalafil</td>
                        <td>Avanafil</td>
                    </tr>
                    <!-- Dosage -->
                    <tr>
                        <td><strong>Dosage:</strong><br><small>(before sexual intercourse)</small></td>
                        <td>Take <strong>one tablet</strong> about <strong>an hour</strong> before</td>
                        <td>Take <strong>one tablet</strong> about <strong>an hour</strong> before</td>
                        <td>Take <strong>one tablet</strong> about <strong>30 minutes</strong> before</td>
                        <td>Take <strong>one tablet</strong> about <strong>30 minutes</strong> before</td>
                        <td>Take <strong>one tablet</strong> about <strong>15–30 minutes</strong> before</td>
                    </tr>
                    <!-- How fast it works -->
                    <tr>
                        <td><strong>How fast it works:</strong></td>
                        <td>30–60 minutes</td>
                        <td>30–60 minutes</td>
                        <td>15–30 minutes</td>
                        <td>15–30 minutes</td>
                        <td>15 minutes</td>
                    </tr>
                    <!-- How long it lasts -->
                    <tr>
                        <td><strong>How long it lasts:</strong></td>
                        <td>Up to 4 hours</td>
                        <td>Up to 4 hours</td>
                        <td>Up to 36 hours</td>
                        <td>Up to 36 hours</td>
                        <td>Up to 5 hours</td>
                    </tr>
                    <!-- Generic Treatment -->
                    <tr>
                        <td><strong>Generic Treatment</strong> <i class="bi bi-question-circle"></i></td>
                        <td><i class="fa-solid fa-check"></i></td>
                        <td><i class="fa-solid fa-xmark text-danger fs-4"></i></td>
                        <td><i class="fa-solid fa-check text-success fs-4"></i></td>
                        <td><i class="fa-solid fa-xmark text-danger fs-4"></i></td>
                        <td><i class="fa-solid fa-xmark text-danger fs-4"></i></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Related Articles -->
        @if($category_detail && $category_detail->articles->count())
            <div class="container text-center my-5">
                <h1 class="fs-3">Related Articles</h1>
            </div>

            @foreach($category_detail->articles as $relatedArticle)
                <div class="article container my-5">
                    <div class="row g-4 align-items-center">
                        <div class="col-md-8">
                            <a href="#" class="article-link fs-4 d-block mb-2 font18 font600">
                                {{ $relatedArticle->related_articles_title }}
                            </a>

                            <p class="text-secondary mb-2">
                                {!! \Illuminate\Support\Str::limit(strip_tags($relatedArticle->related_articles_short_description), 120, '...') !!}
                            </p>
                            @if($relatedArticle->slug)
                                <a href="{{ route('article.detail', ['categorySlug' => $category_detail->slug,'articleSlug'=>$relatedArticle->slug]) }}"
                                   class="article-link">
                                    Read full article
                                </a>
                            @endif
                        </div>

                        <div class="col-md-4 text-center">
                            <img src="{{ $relatedArticle->articlesImage('articles_image') }}"
                                 alt="{{ $relatedArticle->related_articles_title }}"
                                 class="img-fluid rounded shadow-small"/>
                        </div>
                    </div>
                </div>
                <hr>
            @endforeach
        @else
            <p class="text-center my-5">No related articles available for this category.</p>
        @endif

        <div class="container my-5 d-flex justify-content-center">
            <a class="btn btn-primary button-blue px-5 py-3 my-3" href="#">Read More</a>
        </div>
    </div>


@endsection