@extends('tema.layout.home_master')


@section('title')
    <title>{{$urundata->baslik}}</title>
    <meta name="description" content="{{ $urundata->description }}">
    <meta name="keywords" content="{{ $urundata->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>
@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>{{$urundata->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 style="" class="col-lg-8 col-12">
                    <!--scriptresim-->
                    <img class="border bg-white" style="width: 100%;margin: 0 auto" src="{{asset($urundata->resimyol)}}">


                    <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->urun_ust_sekme}}</span></a></li>

                            </ul><!-- /.service-details__tab-title -->
                            <div class="tab-content">
                                    <div class="service-details__tab-content">
                                        {!! $urundata->icerik !!}

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





                            </div><!-- /.tab-content -->
                        </div><!-- /.service-details__tab -->
                    </div><!-- /.service-details__content -->
                </div><!-- /.col-lg-9 -->
                <div class="col-lg-4 col-12 sepetalani">
                    <aside class=" item-details-sidebar">
                        <div class="vendor-profile-sidebar">
                            <h3 class="vendor-wrap-title">{{$urundata->baslik}}</h3>
                            <div class="item-sidebar-action">




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

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

                                    <livewire:urunlerdetay :urundata="$urundata" />
                                </div>




                            </div>
                        </div>





                    </aside>
                </div>

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



@endsection

@section('jsler')



@endsection
