@extends('frontend::layouts.app')

@section('content')
    <!-- Page title -->
    <x-frontend::breadcrumb title="{{ end($breadcrumb)['name'] ?? '' }}" :breadcrumbs="$breadcrumb" />
    <!-- end: Page title -->

    <!-- Page Content -->
    <section class="p-t-60 p-b-60 page-article-detail">
        <div class="container">
            <div class="row">
                <!-- content -->
                <div class="content col-lg-12">
                    <!-- product -->
                    <div class="service-detail">
                        <div class="row m-b-40">
                            <div class="col-lg-12">
                                <div class="product-title">
                                    <h3>{!! $detail['name'] ?? '' !!}</h3>
                                </div>
                                <div class="post-date">
                                    <!-- <p class="m-b-0"><a href="/service-category" class="category-link"><i class="icon-link"></i> Smart Solutions</a></p> -->
                                    <span class="post-meta-date"><i class="icon-calendar"></i>{!! $detail['publish_at'] ?? '' !!}</span>
                                    <!-- <div class="post-share">
                                        <a href="#" id="share-button" class="btn-share"><i class="fa fa-share-alt"></i> Share</a>
                                    </div> -->
                                </div>
                                <div class="product-image m-b-40">
                                    @if (!empty($detail['image']))
                                        <img src="{{ asset($detail['image']) }}" alt="Service Image" class="img-fluid">
                                    @else
                                        <img src="{{ asset('assets/frontend/images/1920x720.jpg') }}" alt="Service Image" class="img-fluid">
                                    @endif
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="product-description">
                                    {!! $detail['detail'] ?? '' !!}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end: product -->
                </div>
                <!-- end: content -->
            </div>
        </div>
    </section>
    <!-- end: Page Content -->

    <!-- Share Modal -->
    <div id="share-modal" class="modal-wrapper">
        <div class="modal-content">
            <span class="close-modal-btn">&times;</span>
            <h4>Share this Service</h4>
            <p>Share this link via</p>
            <div class="share-options">
                <a id="share-facebook" href="#" class="share-btn facebook-btn" target="_blank"><i class="fab fa-facebook-f"></i> Facebook</a>
                <!-- Additional share options would go here -->
            </div>
        </div>
    </div>
@endsection