@extends('tema.layout.home_master')



@section('title')
    <title>{{ $seodata->title }}</title>
    <meta name="description" content="{{ $seodata->description }}">
    <meta name="keywords" content="{{ $seodata->keywords }}">
@endsection

@section('cssler')
    <style>
        .accordion {
            width: 90%;
            max-width: 1000px;
            margin: 2rem auto;
        }
        .accordion-item {
            background-color: #fff;
            color: #111;
            margin: 1rem 0;
            border-radius: 0.5rem;
            box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
        }
        .accordion-item-header {
            padding: 0.5rem 3rem 0.5rem 1rem;
            min-height: 3.5rem;
            line-height: 1.25rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            position: relative;
            cursor: pointer;
            border-radius: 5px 5px 0 0;
        }
        .accordion-item-header::after {
            content: "\002B";
            font-size: 2rem;
            position: absolute;
            right: 1rem;
        }
        .accordion-item-header.active::after {
            content: "\2212";
        }

        .accordion-item-header.active {
            background-color: #162172;
            color: white;

        }


        .accordion-item-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
        }
        .accordion-item-body-content {
            padding: 1rem;
            line-height: 1.5rem;
            border-top: 1px solid;
            border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
        }

        @media(max-width:767px) {
            html {
                font-size: 14px;
            }
        }
    </style>
@endsection


@section('main')


    <section class="page-header">
        <div style="background-image: url({{asset($bannerdata->resimyol)}});" class="background-image-banner"></div>
        <div class="container bannerdetay">
            <h2>{{ $seodata->title }}</h2>
            <ul class="list-unstyled thm-breadcrumb">
                <li><a href="{{route('home')}}">Anasayfa</a></li>
                <li><span>{{ $seodata->title }}</span></li>
            </ul><!-- /.list-unstyled thm-breadcrumb -->
        </div><!-- /.container -->
    </section><!-- /.page-header -->



    <section style="margin: 50px 0">
        <div class="container">
            <div class="row">
                <div class="col-md-10">
                    <img src="{{asset('assets/images/shapes/contact-info-shape-1-1.png')}}" class="contact-info-one__bg-shape-1" alt="">
                    <div class="block-title text-center">
                        <div class="block-title__line"></div><!-- /.block-title__line -->
                        <h3>{{$sabitalanlar->sssbaslik}}</h3>
                        <p>{{$sabitalanlar->sssalticerik}}</p>

                    </div><!-- /.block-title text-center -->
                    <div class="accordion">
                        @foreach($sssdata as $sss)
                            <div class="accordion-item">
                                <div class="accordion-item-header">
                                    {{$sss->baslik}}
                                </div>
                                <div class="accordion-item-body">
                                    <div class="accordion-item-body-content">
                                        {{$sss->icerik}}
                                    </div>
                                </div>
                            </div>

                        @endforeach

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



@endsection


@section('jsler')
    <script>
        const accordionItemHeaders = document.querySelectorAll(".accordion-item-header");

        accordionItemHeaders.forEach(accordionItemHeader => {
            accordionItemHeader.addEventListener("click", event => {

                // Uncomment in case you only want to allow for the display of only one collapsed item at a time!

                const currentlyActiveAccordionItemHeader = document.querySelector(".accordion-item-header.active");
                if(currentlyActiveAccordionItemHeader && currentlyActiveAccordionItemHeader!==accordionItemHeader) {
                    currentlyActiveAccordionItemHeader.classList.toggle("active");
                    currentlyActiveAccordionItemHeader.nextElementSibling.style.maxHeight = 0;
                }

                accordionItemHeader.classList.toggle("active");
                const accordionItemBody = accordionItemHeader.nextElementSibling;
                if(accordionItemHeader.classList.contains("active")) {
                    accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
                }
                else {
                    accordionItemBody.style.maxHeight = 0;
                }

            });
        });
    </script>
@endsection
