<div>
    <!-- Page Title -->
    <section class="page-title-wrap">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="page-title">
                        <h1 class="heading">{{ $service->title }}</h1>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                                <li class="breadcrumb-item"><a href="{{ url('/services') }}">Services</a></li>
                                @if($service->category)
                                    <li class="breadcrumb-item">
                                        <a href="{{ url('/services/category/' . $service->category->slug) }}">
                                            {{ $service->category->name }}
                                        </a>
                                    </li>
                                @endif
                                <li class="breadcrumb-item active" aria-current="page">{{ $service->title }}</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Service Detail -->
    <section class="service-detail-section py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    @if($service->image)
                        <div class="service-featured-image mb-4">
                            <img src="{{ url('/storage/' . $service->image) }}" 
                                 alt="{{ $service->title }}" 
                                 class="img-fluid rounded">
                        </div>
                    @endif

                    <div class="service-content">
                        @if($service->category)
                            <span class="badge bg-primary mb-3">{{ $service->category->name }}</span>
                        @endif

                        @if($service->description)
                            <div class="service-description mb-4">
                                <p class="lead">{{ $service->description }}</p>
                            </div>
                        @endif

                        @if($service->content)
                            <div class="service-full-content">
                                {!! $service->content !!}
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-lg-4">
                    <div class="sidebar">
                        <!-- Service Info -->
                        <div class="widget mb-4">
                            <h5 class="widget-title">Service Information</h5>
                            <ul class="list-unstyled">
                                @if($service->category)
                                    <li class="mb-2">
                                        <strong>Category:</strong> {{ $service->category->name }}
                                    </li>
                                @endif
                                @if($service->is_featured)
                                    <li class="mb-2">
                                        <span class="badge bg-warning">Featured Service</span>
                                    </li>
                                @endif
                            </ul>
                        </div>

                        <!-- Contact CTA -->
                        <div class="widget mb-4 bg-light p-4 rounded">
                            <h5 class="widget-title">Interested in this service?</h5>
                            <p>Contact us to learn more about how we can help you.</p>
                            <a href="{{ url('/contact') }}" class="btn btn-primary w-100">
                                Contact Us
                            </a>
                        </div>

                        <!-- Related Services -->
                        @if($relatedServices->count() > 0)
                            <div class="widget">
                                <h5 class="widget-title">Related Services</h5>
                                <ul class="list-unstyled">
                                    @foreach($relatedServices as $related)
                                        <li class="mb-3">
                                            <a href="{{ url('/services/detail/' . $related->slug) }}" 
                                               class="d-flex align-items-start">
                                                @if($related->image)
                                                    <img src="{{ url('/storage/' . $related->image) }}" 
                                                         alt="{{ $related->title }}" 
                                                         class="img-thumbnail me-3" 
                                                         style="width: 60px; height: 60px; object-fit: cover;">
                                                @endif
                                                <div>
                                                    <strong>{{ $related->title }}</strong>
                                                    <p class="small text-muted mb-0">
                                                        {{ Str::limit($related->description, 60) }}
                                                    </p>
                                                </div>
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
