@extends('layouts.portal')

@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
    
    /* ================= NEW PREMIUM DESIGN ================= */
    .premium-wrapper {
        font-family: 'Outfit', sans-serif;
        color: #F3F4F6;
        padding-bottom: 5rem;
    }

    /* 1. Hero Section */
    .premium-hero {
        position: relative;
        padding: 6rem 2rem 4rem;
        text-align: center;
        background: radial-gradient(circle at top, rgba(99, 102, 241, 0.15) 0%, transparent 60%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        margin-bottom: 4rem;
        overflow: hidden;
    }
    .premium-hero h1 {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 3.5rem;
        font-weight: 800;
        background: linear-gradient(to right, #ffffff, #a5b4fc);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 1rem;
        letter-spacing: -1px;
    }
    .premium-breadcrumb {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        background: rgba(255, 255, 255, 0.03);
        padding: 8px 24px;
        border-radius: 50px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        font-size: 0.9rem;
    }
    .premium-breadcrumb a {
        color: #818CF8;
        text-decoration: none;
        font-weight: 500;
    }

    /* 2. Main Content Area */
    .premium-content-area {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1.5rem;
    }

    /* Section Titles */
    .premium-title-wrapper {
        margin-bottom: 2.5rem;
        text-align: center;
    }
    .premium-subtitle {
        color: #10B981;
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 3px;
        display: block;
        margin-bottom: 8px;
    }
    .premium-title {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 2.2rem;
        font-weight: 700;
        color: #fff;
    }

    /* 3. Description Block (No box, sleek text) */
    .premium-description {
        list-style: none;
        padding: 0;
        margin: 0 0 5rem 0;
    }
    .premium-description li {
        position: relative;
        padding-left: 2rem;
        margin-bottom: 1rem;
        font-size: 1.15rem;
        line-height: 1.8;
        color: #D1D5DB;
    }
    .premium-description li::before {
        content: '\f058'; /* fa-check-circle */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        left: 0;
        top: 2px;
        color: #10B981; /* Green color for positive check */
        font-size: 1.2rem;
    }

    /* 4. Symptoms Grid */
    .symptom-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
        margin-bottom: 5rem;
    }
    .symptom-item {
        background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.7));
        border: 1px solid rgba(99, 102, 241, 0.2);
        border-radius: 20px;
        padding: 1.5rem;
        text-align: center;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        backdrop-filter: blur(10px);
    }
    .symptom-item:hover {
        transform: translateY(-8px);
        border-color: #6366f1;
        box-shadow: 0 15px 30px rgba(99, 102, 241, 0.15);
    }
    .symptom-icon {
        width: 50px;
        height: 50px;
        background: rgba(16, 185, 129, 0.1);
        color: #10B981;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin: 0 auto 1rem;
    }
    .symptom-text {
        font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        font-weight: 600;
        color: #fff;
    }

    /* 5. Questions List */
    .question-list {
        background: rgba(17, 24, 39, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 24px;
        padding: 2.5rem;
    }
    .question-item {
        display: flex;
        align-items: flex-start;
        gap: 1.2rem;
        padding: 1.2rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .question-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    .question-item:first-child {
        padding-top: 0;
    }
    .q-icon {
        color: #6366f1;
        font-size: 1.4rem;
        margin-top: 2px;
        filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.5));
    }
    .q-text {
        font-size: 1.1rem;
        color: #E5E7EB;
        font-weight: 400;
        line-height: 1.6;
    }
</style>

<div class="premium-wrapper">
    <!-- Hero Section -->
    <div class="premium-hero">
        <h1>{{ $service->name }}</h1>
        <div class="premium-breadcrumb">
            <a href="{{ route('home') }}">Home</a>
            <span style="color: #6B7280;">/</span>
            <span style="color: #9CA3AF;">{{ $service->name }}</span>
        </div>
    </div>

    <div class="premium-content-area">
        @if($type === 'cat')
            <div class="text-center" style="padding: 4rem 0;">
                <h3 style="color: #fff; font-family: 'Space Grotesk', sans-serif;">Main Category</h3>
                <p style="color: #9CA3AF; margin-top: 1rem;">Please select a subcategory from the dropdown menu to view detailed clinical information.</p>
            </div>
        @else

            <!-- Description -->
            @if($service->description)
                <ul class="premium-description">
                    @foreach(explode("\n", $service->description) as $desc_line)
                        @if(trim($desc_line) != '')
                            <li class="text">{!! trim($desc_line) !!}</li>
                        @endif
                    @endforeach
                </ul>
            @endif

            <!-- Symptoms -->
            @if($service->heading1)
                <div class="premium-title-wrapper">
                    <span class="premium-subtitle">Symptoms</span>
                    <h2 class="premium-title">{{ $service->heading1 }}</h2>
                </div>
                
                <div class="symptom-grid">
                    @foreach(['dec1', 'dec2', 'dec3', 'dec4'] as $decField)
                        @if($service->$decField)
                            <div class="symptom-item">
                                <div class="symptom-icon">
                                    <span class="icon fa fa-check-circle" style="font-size: 2rem;"></span>
                                </div>
                                <div class="symptom-text">{!! $service->$decField !!}</div>
                            </div>
                        @endif
                    @endforeach
                </div>
            @endif

            <!-- Questions -->
            @if($service->heading2)
                <div class="premium-title-wrapper">
                    <span class="premium-subtitle">{{ $service->title ?? 'Questions' }}</span>
                    <h2 class="premium-title">{{ $service->heading2 }}</h2>
                </div>

                <div class="question-list">
                    @if($service->dec)
                        @foreach(explode("\n", $service->dec) as $question_line)
                            @if(trim($question_line) != '')
                                <div class="question-item">
                                    <span class="q-icon">&rarr;</span>
                                    <div class="q-text">{!! trim($question_line) !!}</div>
                                </div>
                            @endif
                        @endforeach
                    @else
                        <div class="question-item">
                            <span class="q-icon">&rarr;</span>
                            <div class="q-text">Discover more about {{ $service->name }}.</div>
                        </div>
                    @endif
                </div>
            @endif

        @endif
    </div>
</div>
@endsection