@extends("website.layouts.layout")
@section('title', "Project Location")
@section("body")

<section class="banner-services">
    <img class="banner-background-ellipse" src="{{asset('webAssets/assets/images/banner-bg-img.png')}}" alt="">
</section>

<section class="services-breadcrumb-section dashboard-breadcrumb">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('homepage')}}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Support</li>
                <li class="breadcrumb-item active" aria-current="page">Terms of Service</li>
                <li class="breadcrumb-item active" aria-current="page">Global Terms of Service</li>
            </ol>
        </nav>
    </div>
</section>

<section class="dashboard-main">
    <div class="container">
        <div class="row">
            @include("website.support.sidebar-support")

            <div class="sidebar">
                <div class="accordion accordion-flush terms-service" id="termsService">
                    <div class="accordion-item terms-service-accordion-item terms-services-controller">
                        <h2 class="terms-service-accordion-header">
                            <button class="accordion-button grey-color"  >
                                Terms of Service
                            </button>
                        </h2>

                        <div id="termsServiceOne">
                            <div class="accordion-body terms-service-accordion-body">
                                <div class="terms-service-body-items d-flex flex-column gap-3">
                                    @foreach($contentManage as $item)
                                        <a href="#bodyItem{{ $item['id'] }}" class="grey-color">{{ $item['title'] }}</a> 
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <!-- <div id="termsServiceOne" class="accordion-collapse collapse show"
                            data-bs-parent="#termsService">
                            <div class="accordion-body terms-service-accordion-body">
                                <div class="terms-service-body-items d-flex flex-column gap-3">
                                    @foreach($contentManage as $item)
                                        <a href="#bodyItem{{ $item['id'] }}" class="grey-color">{{ $item['title'] }}</a> 
                                    @endforeach
                                </div>
                            </div>
                        </div> -->
                    </div>
                </div>
            </div>

            <div class="main-content">
                <div class="terms-service-main-body">
                    <div class="terms-service-header-items d-flex flex-column gap-4">
                        <div class="terms-service-top-item">
                            <h3 class="head font-size-24">Skillram Global Terms of Service</h3>
                        </div>

                        <!-- Dynamic Terms List -->
                        <div class="terms-service-linking-lists">
                            <ol class="grey-color">
                                @foreach($contentManage as $item)
                                    <li><a href="#bodyItem{{ $item['id'] }}" class="grey-color">{{ $item['title'] }}</a></li>
                                @endforeach
                            </ol>
                        </div>

                        <!-- Dynamic Terms Content -->
                        <div class="terms-service-link-bodies d-flex flex-column gap-6">
                            @foreach($contentManage as $item)
                                <div class="terms-service-body-items" id="bodyItem{{ $item['id'] }}">
                                    <h4 class="head font-size-18">{{ $item['title'] }}</h4>
                                    {!! $item['description'] !!}
                                </div>
                            @endforeach
                        </div>

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

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

@endsection

@section('footerItems')
@endsection