@extends('layouts.front-layout')
@section('content')
    <title>{{ $sub_category->meta_title ? : '' }}</title>
    <meta name="description" content="{{ $sub_category->meta_description ? : '' }}">
    <style>
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }

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

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

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

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

        .article-link {
            color: #30bfac;
            text-decoration: none;
        }

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

        .table th {
            background: #00796b;
            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,
        .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;
            }
        }
    </style>
    <div class="card shadow-large border-0 mx-3 mx-md-5 my-5">
        <div class="container py-5">
            <div class="row align-items-center">
                <!-- Image -->
                <div class="col-md-5 mb-4 mb-md-0 img">
                    <img src="{{ $sub_category->subCategoryImage('sub_category_image')  }}" alt="Hair Loss Treatment"
                         class="img-fluid rounded shadow-small"/>
                </div>

                <!-- Text Content -->
                <div class="col-md-7">
                    <h1 style="font-weight: 500" class="display-5 text-dark">{{ $sub_category->sub_cate_name }}</h1>
                    <p class="fs-5 fw-semibold ">
                        {!! $sub_category->short_description ? : '' !!}

                    </p>

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

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

                    {{-- <div class="mt-3">
              <span class="fw-semibold">View Treatments for: </span>
              <a href="#" class="text-decoration-none article-link">Men</a>,
              <a href="#" class="text-decoration-none article-link">Women</a> or
              <a href="#" class="text-decoration-none article-link">All</a>
            </div> --}}
                </div>
            </div>
        </div>

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

                @foreach ($sub_category->products as $product)
                    <div class="col-md-4 col-lg-3 mb-4">
                        <div class="card h-100 shadow-small border rounded-3"
                             style="min-height: 300px; max-width: 350px; margin: auto;">
                            <h5 class="text-center mt-3 mb-3 blue fw-bold">
                                {{ $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="{{ asset('assets/Assets/slide1.jpg') }}" 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





            </div>
        </div>

        <!-- Consultation CTA -->
        <div class="container-fluid py-5 px-4 px-md-5 rounded" style="background-color: #28a698">
            <div class="row align-items-center">
                <!-- Left Content -->
                <div class="col-md-8 text-white">
                    <a href="{{ route('categorySlug.consultation', ['categorySlug' => $sub_category->category->slug]) }}">
                    <h3 class="fw-bold">
                        <i class="fa-regular fa-flag me-2"></i>
                        Start Your Online
                        Consultation
                    </h3>
                    </a>
                    <p class="mt-3">
                        Fill in our online questionnaire so our medical team can show you
                        eligible <strong>hair loss</strong> treatments.
                    </p>

                    <!-- Button -->
                    <div class="my-4">
                        <a href="#" style="background-color: #e56515"
                           class="btn btn-warning text-white fw-semibold px-4 py-2">
                            Start consultation
                            <i class="fa-solid fa-chevron-right ms-2"></i>
                        </a>
                    </div>

                    <!-- Features -->
                    <div class="d-flex flex-wrap gap-4 gap-md-5 mt-4">
                        <div class="d-flex flex-column align-items-center text-center">
                            <i class="fa-solid fa-clock fa-2x mb-2"></i>
                            <span>Takes less than <br/><strong>2 minutes</strong></span>
                        </div>
                        <div class="d-flex flex-column align-items-center text-center">
                            <i class="fa-solid fa-lock fa-2x mb-2"></i>
                            <span><strong>Confidential</strong><br/>and secure</span>
                        </div>
                        <div class="d-flex flex-column align-items-center text-center">
                            <i class="fa-solid fa-cart-shopping fa-2x mb-2"></i>
                            <span><strong>Quick and easy</strong><br/>checkout</span>
                        </div>
                        <div class="d-flex flex-column align-items-center text-center">
                            <i class="fa-solid fa-users fa-2x mb-2"></i>
                            <span><strong>1.75 million+</strong><br/>customers</span>
                        </div>
                    </div>
                </div>

                <!-- Right Content -->
                <div class="col-md-4 text-center mt-5 mt-md-0">
                    <div class="p-2 bg-white rounded-circle d-inline-block"
                         style="width: 160px; height: 160px; overflow: hidden">
                        <img src="{{ asset('assets/Assets/doctor.jpg') }}" class="img-fluid" alt="Doctor"/>
                    </div>
                    <div class="fw-bold fs-5 mt-3">Ana Carolina Goncalves</div>
                    <div class="text-white-50">Superintendent Pharmacist</div>
                    <div class="text-white-50">GPhC Number 2088658</div>
                </div>
            </div>
        </div>
    </div>


    <div class="container bg-white shadow-large border-0 py-3 mx-3 mx-md-5 my-5 rounded">
        <div class="container my-5">
            <h1 class="fw-bold fs-3">Frequently Asked Questions About</h1>
            <p class="text-secondary fs-5">
                Find answers to the most common questions below.
            </p>
        </div>

        <!-- FAQ Accordion -->
        @if($sub_category && $sub_category->frequentlyAskedQuestions->count())
            <div class="container mb-5">
                <div class="accordion" id="faqAccordion">
                    @foreach($sub_category->frequentlyAskedQuestions as $index => $faq)
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="faq{{ $index }}">
                                <button class="accordion-button ques {{ $index !== 0 ? 'collapsed' : '' }}"
                                        type="button"
                                        data-bs-toggle="collapse"
                                        data-bs-target="#collapse{{ $index }}"
                                        aria-expanded="{{ $index === 0 ? 'true' : 'false' }}"
                                        aria-controls="collapse{{ $index }}">
                                    <i class="fa-solid fa-circle-question me-2"></i>
                                    {{ $faq->frequently_asked_questions_title }}
                                </button>
                            </h2>
                            <div id="collapse{{ $index }}"
                                 class="accordion-collapse collapse {{ $index === 0 ? 'show' : '' }}"
                                 aria-labelledby="faq{{ $index }}"
                                 data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    {!! $faq->frequently_asked_questions_description !!}
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @else
            <p class="text-center my-5">No FAQs available for this subcategory.</p>
    @endif

    <!-- ED Info -->
        <div class="container my-5">
            <h1 class="fs-3">What is Erectile Dysfunction?</h1>
            <p class="text-secondary">
                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-3">What causes Erectile Dysfunction?</h1>
            <p class="text-secondary">
                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></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><strong>Prices from<br><small>per pill</small></strong></td>
                        <td class="price">£0.99</td>
                        <td class="price">£6.87</td>
                        <td class="price">£1.19</td>
                        <td class="price">£2.38</td>
                        <td class="price">£5.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($sub_category && $sub_category->articles->count())
            <div class="container text-center my-5">
                <h1 class="fs-3">Related Articles</h1>
            </div>

            @foreach($sub_category->articles as $relatedArticle)
                <div class="container my-5">
                    <div class="row g-4 align-items-center">
                        <div class="col-md-9">
                            <a href="#" class="article-link fs-4 d-block mb-2">
                                {{ $relatedArticle->related_articles_title }}
                            </a>
                            <p class="text-secondary mb-2">
                                {!! $relatedArticle->related_articles_short_description  !!}
                            </p>
                            <a href="#" class="article-link">Read full article</a>
                        </div>
                        <div class="col-md-3 text-center">
                            <img src="{{$relatedArticle->relatedArticleImage('related_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 subcategory.</p>
        @endif

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