@extends('tema.layout.home_master')


@section('title')
    <title>{{$scriptdata->baslik}}</title>
    <meta name="description" content="{{ $scriptdata->description }}">
    <meta name="keywords" content="{{ $scriptdata->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;
            }
        }


        .vendor-profile-sidebar {
            box-shadow: 0px 0px 27px 0px rgb(149 149 149 / 9%);
            background: #fff;
            border-radius: 5px;
        }
        h3.vendor-wrap-title {
            margin-bottom: 0;
            background: var(--bg-anarenk-2);
            color: #fff;
            text-transform: uppercase;
            font-size: 23px;
            padding: 20px;
            text-align: center;
        }
        .item-sidebar-action {
            padding: 40px 45px;
            border-bottom: 1px solid #ededed;
        }
        .sepetalani .btn {
            -moz-user-select: none;
            background: var(--bg-anarenk-2) none repeat scroll 0 0;
            border: 3px solid #fff;
            border-radius: 50px;
            color: #fff;
            cursor: pointer;
            display: inline-block;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 0;
            padding: 12px 30px;
            text-align: center;
            text-transform: unset;
            touch-action: manipulation;
            transition: all 0.3s ease 0s;
            vertical-align: middle;
            white-space: nowrap;
            box-shadow: 0px 0px 24px 0px rgb(93 87 171 / 32%);
        }

        .sepetalani .btn:hover {
            background: #264afe none repeat scroll 0 0;
        }

        .sepetalani .item-prev-btn2{
            background-color: #fa5719;
        }

        .sepetalani .item-prev-btn3{
            background-color: var(--thm-base);
        }




        .item-price-count h4 {
            font-size: 26px;
            color: #fa5719;
            margin-bottom: 0;
        }

        .sidebar-item-info ul li {
            margin-bottom: 15px;
            overflow: hidden;
            display: block;
        }
        .sidebar-item-info ul li span {
            float: right;
        }
        .sidebar-item-info {
            padding: 40px 10px;
            border-top: 1px solid #ededed;
            border-bottom: 1px solid #ededed;
        }




    </style>


    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
    <style>
        .main-image {
            width: 100%;
            max-width: 100%;
            height: auto;
            cursor: pointer;
        }

        .thumbnail {
            width: 125px;
            height: 105px;
            cursor: pointer;
            margin: 5px;
            border: 1px solid #ccc;
        }

        .thumbnail-container {
            display: flex;
            justify-content: center;
        }
    </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>{{$scriptdata->baslik}}</h2>
            <ul class="list-unstyled thm-breadcrumb">
                <li><a href="{{route('home')}}">Anasayfa</a></li>
            </ul><!-- /.list-unstyled thm-breadcrumb -->
        </div><!-- /.container -->
    </section><!-- /.page-header -->







    <section style="background-color: #f4f7fa" class="service-details">
        <div class="container">
            <div class="row">

                <div class="col-lg-8">


                    @if($resimler->count()>=1)
                        <div class="swiper-container">
                            <div class="swiper-wrapper">

                                <a class="swiper-slide" data-fancybox="gallery" href="{{asset($scriptdata->resimyol)}}">
                                    <img class="main-image" src="{{asset($scriptdata->resimyol)}}" alt="Yazılım Görselleri">
                                </a>
                                @foreach($resimler as $resim)


                                    <a style="display: none" class="swiper-slide" data-fancybox="gallery" href="{{asset($resim->resimyol)}}">
                                        <img class="main-image" src="{{asset($resim->resimyol)}}" alt="Yazılım Görselleri">
                                    </a>
                                @endforeach

                                <!-- Diğer ek resimler buraya eklenir -->
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                        <div class="thumbnail-container">

                            <img class="thumbnail" src="{{asset($scriptdata->resimyol)}}" alt="Küçük Resim {{$scriptdata->id}}">

                            @foreach($resimler as $resim)
                                <img class="thumbnail" src="{{asset($resim->resimyol)}}" alt="Küçük Resim {{$resim->id}}">
                            @endforeach


                        </div>

                    @else

                        <img class="border bg-white" style="width: 100%;margin: 0 auto" src="{{asset($scriptdata->resimyol)}}" alt="{{$scriptdata->resimyol_alt}}">


                    @endif





                    <div class="d-block d-md-none sepetalani mt-3">
                        <div class="vendor-profile-sidebar">
                            <h3 class="vendor-wrap-title">{{$scriptdata->baslik}}</h3>
                            <div class="item-sidebar-action">

                                @if($sabitalanlar->domain_durum==1)
                                    <div>
                                        <livewire:domainsorgula />
                                    </div>
                                @endif




                                <div class="item-price-count mb-3 text-center">
                                    <div class="item-price-count mb-3 text-center">
                                        <h3>{{$scriptdata->fiyat}}₺ @if($ayarcek->kdv>0) + KDV(%{{$ayarcek->kdv}}) @else @endif </h3>
                                        <br>

                                    </div>

                                </div>
                                <div class="item-sidebar-btn mb-3 mt-3 text-center">

                                    <livewire:scriptdetay :slug="$slugal" />
                                </div>




                            </div>
                        </div>
                        <aside class=" item-details-sidebar">


                            <div style="padding-top: 0;padding-left: 0;padding-right: 0" class="vendor-profile-sidebar sidebar-item-info mt-3">
                                <h3 class="vendor-wrap-title">{{$sabitalanlar->script_detay_demobilgi}}</h3>

                                @if(!$scriptdata->linkyol=="")
                                    <div class="item-sidebar-btn mb-3 mt-3 text-center">
                                        <a target="_blank" href="{{$scriptdata->linkyol}}" class="btn item-prev-btn2">{{$sabitalanlar->script_detay_demosite}}</a>
                                    </div>
                                @endif

                                @if(!$scriptdata->linkadmin=="")
                                    <div class="item-sidebar-btn mb-3 mt-3 text-center">
                                        <a target="_blank" href="{{$scriptdata->linkadmin}}" class="btn item-prev-btn3">{{$sabitalanlar->script_detay_demopanel}}</a>
                                    </div>
                                @endif

                                <p class="text-center font-weight-bold">{{$sabitalanlar->script_detay_demobilgiler}}</p>

                                <div class="row">
                                    <div class="col-md-10 mx-auto col-12">


                                        @if(!$scriptdata->demokulad=="")
                                            <div class="row">
                                                <div class="col-md-6 col-6">
                                                    <span style="float: right;">Kullanıcı Adı : </span>
                                                </div>
                                                <div class="col-md-6 col-6">
                                                    <span class="font-weight-bold">{{$scriptdata->demokulad}}</span>
                                                </div>
                                            </div>

                                        @endif



                                        @if(!$scriptdata->demosifre=="")
                                            <div class="row">

                                                <div class="col-md-6 col-6">
                                                    <span style="float: right;">Şifre :</span>
                                                </div>
                                                <div class="col-md-6 col-6">
                                                    <span class="font-weight-bold">{{$scriptdata->demosifre}}</span>
                                                </div>
                                            </div>

                                        @endif



                                    </div>
                                </div>






                            </div>


                            <div style="padding-top: 0;padding-left: 0;padding-right: 0" class="vendor-profile-sidebar sidebar-item-info mt-3">
                                <h5 class="font-weight-bold text-center mb-3 mt-3">{{$sabitalanlar->yazilim_ozellikleri}}</h5>

                                <div class="row">
                                    <div class="col-md-10 mx-auto col-12">

                                        @if(!$scriptdata->yazilimdili=="")
                                            <div class="row">
                                                <div class="col-md-6 col-6">
                                                    <span style="float: right;">Yazılım Dili : </span>
                                                </div>
                                                <div class="col-md-6 col-6">
                                                    <span class="font-weight-bold">{{$scriptdata->yazilimdili}}</span>
                                                </div>
                                            </div>
                                        @endif


                                        <div class="row">
                                            <div class="col-md-6 col-6">
                                                <span style="float: right;">Eklenme Tarihi :</span>
                                            </div>
                                            <div class="col-md-6 col-6">
                                                <span class="font-weight-bold">{{date('d/m/Y', strtotime($scriptdata->created_at))}}</span>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6 col-6">
                                                <span style="float: right;">Son Güncelleme :</span>
                                            </div>
                                            <div class="col-md-6 col-6">
                                                <span class="font-weight-bold">{{date('d/m/Y', strtotime($scriptdata->updated_at))}}</span>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                            </div>


                        </aside>
                    </div>

                    <div style="background-color: #ffffff;border-radius: 5px;padding: 10px 20px;padding-bottom: 50px" class="service-details__content">

                        <div class="service-details__tab">
                            <ul class="service-details__tab-title nav-tabs nav list-unstyled">
                                <li><a class="active" href="#content" data-toggle="tab"><span>{{$sabitalanlar->script_detay_tab1}}</span></a></li>
                                <li><a href="#logo" data-toggle="tab"><span>{{$sabitalanlar->script_detay_tab2}}</span></a></li>
                                <li><a href="#moduller" data-toggle="tab"><span>{{$sabitalanlar->script_detay_tab3}}</span></a></li>

                            </ul><!-- /.service-details__tab-title -->
                            <div class="tab-content">
                                <div class="tab-pane animated fadeInUp show active" id="content">
                                    <div class="service-details__tab-content">
                                        {!! $scriptdata->aciklama !!}

                                    </div><!-- /.service-details__tab-content -->

                                </div><!-- /#content.tab-pane fade in active -->
                                <div class="tab-pane animated fadeInUp " id="logo">
                                    <div class="service-details__tab-content">
                                        <div class="accordion">

                                            @foreach($scriptsss as $scriptss)
                                                <div class="accordion-item">
                                                    <div class="accordion-item-header">
                                                        {{$scriptss->baslik}}
                                                    </div>
                                                    <div class="accordion-item-body">
                                                        <div class="accordion-item-body-content">
                                                            {{$scriptss->icerik}}
                                                        </div>
                                                    </div>
                                                </div>

                                            @endforeach


                                            @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
                                            <br><br>

                                        </div>

                                    </div><!-- /.service-details__tab-content -->

                                </div><!-- /#content.tab-pane fade in active -->

                                <div class="tab-pane animated fadeInUp " id="moduller">
                                    <div class="service-details__tab-content">

                                        <livewire:scriptdetayeklenti :idsi="$scriptdata->id" />

                                        <livewire:scriptdetayeklentigenel />


                                    </div><!-- /.service-details__tab-content -->

                                </div><!-- /#content.tab-pane fade in active -->



                            </div><!-- /.tab-content -->
                        </div><!-- /.service-details__tab -->
                    </div><!-- /.service-details__content -->


                </div>

                <div class="col-lg-4 sepetalani d-none d-md-block">
                    <div class="vendor-profile-sidebar">
                        <h3 class="vendor-wrap-title">{{$scriptdata->baslik}}</h3>
                        <div class="item-sidebar-action">

                            @if($sabitalanlar->domain_durum==1)
                                <div>
                                    <livewire:domainsorgula />
                                </div>
                            @endif




                            <div class="item-price-count mb-3 text-center">
                                <div class="item-price-count mb-3 text-center">
                                    <h3>{{$scriptdata->fiyat}}₺ @if($ayarcek->kdv>0) + KDV(%{{$ayarcek->kdv}}) @else @endif </h3>
                                    <br>

                                </div>

                            </div>
                            <div class="item-sidebar-btn mb-3 mt-3 text-center">

                                <livewire:scriptdetay :slug="$slugal" />
                            </div>




                        </div>
                    </div>
                    <aside class=" item-details-sidebar">


                        <div style="padding-top: 0;padding-left: 0;padding-right: 0" class="vendor-profile-sidebar sidebar-item-info mt-3">
                            <h3 class="vendor-wrap-title">{{$sabitalanlar->script_detay_demobilgi}}</h3>

                            @if(!$scriptdata->linkyol=="")
                                <div class="item-sidebar-btn mb-3 mt-3 text-center">
                                    <a target="_blank" href="{{$scriptdata->linkyol}}" class="btn item-prev-btn2">{{$sabitalanlar->script_detay_demosite}}</a>
                                </div>
                            @endif

                            @if(!$scriptdata->linkadmin=="")
                                <div class="item-sidebar-btn mb-3 mt-3 text-center">
                                    <a target="_blank" href="{{$scriptdata->linkadmin}}" class="btn item-prev-btn3">{{$sabitalanlar->script_detay_demopanel}}</a>
                                </div>
                            @endif

                            <p class="text-center font-weight-bold">{{$sabitalanlar->script_detay_demobilgiler}}</p>

                            <div class="row">
                                <div class="col-md-10 mx-auto col-12">


                                    @if(!$scriptdata->demokulad=="")
                                        <div class="row">
                                            <div class="col-md-6 col-6">
                                                <span style="float: right;">Kullanıcı Adı : </span>
                                            </div>
                                            <div class="col-md-6 col-6">
                                                <span class="font-weight-bold">{{$scriptdata->demokulad}}</span>
                                            </div>
                                        </div>

                                    @endif



                                    @if(!$scriptdata->demosifre=="")
                                        <div class="row">

                                            <div class="col-md-6 col-6">
                                                <span style="float: right;">Şifre :</span>
                                            </div>
                                            <div class="col-md-6 col-6">
                                                <span class="font-weight-bold">{{$scriptdata->demosifre}}</span>
                                            </div>
                                        </div>

                                    @endif



                                </div>
                            </div>






                        </div>


                        <div style="padding-top: 0;padding-left: 0;padding-right: 0" class="vendor-profile-sidebar sidebar-item-info mt-3">
                            <h5 class="font-weight-bold text-center mb-3 mt-3">{{$sabitalanlar->yazilim_ozellikleri}}</h5>

                            <div class="row">
                                <div class="col-md-10 mx-auto col-12">

                                    @if(!$scriptdata->yazilimdili=="")
                                        <div class="row">
                                            <div class="col-md-6 col-6">
                                                <span style="float: right;">Yazılım Dili : </span>
                                            </div>
                                            <div class="col-md-6 col-6">
                                                <span class="font-weight-bold">{{$scriptdata->yazilimdili}}</span>
                                            </div>
                                        </div>
                                    @endif


                                    <div class="row">
                                        <div class="col-md-6 col-6">
                                            <span style="float: right;">Eklenme Tarihi :</span>
                                        </div>
                                        <div class="col-md-6 col-6">
                                            <span class="font-weight-bold">{{date('d/m/Y', strtotime($scriptdata->created_at))}}</span>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6 col-6">
                                            <span style="float: right;">Son Güncelleme :</span>
                                        </div>
                                        <div class="col-md-6 col-6">
                                            <span class="font-weight-bold">{{date('d/m/Y', strtotime($scriptdata->updated_at))}}</span>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>


                    </aside>


                </div>




            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.service-details -->



@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>


    <script>
        const mainImage = document.querySelector('.main-image');
        const thumbnails = document.querySelectorAll('.thumbnail');

        // Ana resmi değiştirme işlemi
        function changeMainImage(event) {
            const clickedThumbnail = event.target;
            mainImage.src = clickedThumbnail.src;
        }

        // Tüm küçük resimlere click event ekleme
        thumbnails.forEach(thumbnail => {
            thumbnail.addEventListener('click', changeMainImage);
        });
    </script>


    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
    <script>
        const mainImage = document.querySelector('.main-image');
        const thumbnails = document.querySelectorAll('.thumbnail');

        const swiper = new Swiper('.swiper-container', {
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });

        // Tüm küçük resimlere click event ekleme
        thumbnails.forEach(thumbnail => {
            thumbnail.addEventListener('click', changeMainImage);
        });

        // Ana resmi değiştirme işlemi
        function changeMainImage(event) {
            const clickedThumbnail = event.target;
            mainImage.src = clickedThumbnail.src;
        }

        // Fancybox ayarları
        $(document).ready(function() {
            $('[data-fancybox="gallery"]').fancybox({
                buttons: ['zoom', 'fullScreen', 'close'],
                loop: true,
            });
        });
    </script>


@endsection
