@extends('masterpage')
@section('title',  $ayarlar["site_adi"]." Ürünler"  )
@section('keywords', @$urunDetayi->keywords)
@section('description', @$urunDetayi->description)


@section('active_page')
    <!-- Breadcrump için sayfa -->
    <a href="{{ Url_('urunler') }}"> @lang("lang.urunler")  </a> 
        @if(@$kategori_agaci)
        @foreach (@$kategori_agaci as $kat)
             @if ($loop->first)
               <a>></a>
             @endif
                        <a href="{{ Url_('urunler').SeoUrl($url) }}"> {{ $kat->code_name }} @if (!$loop->last) > @endif</a>
        @endforeach
    @endif
@endsection


@section('modul_name')
<!-- sayfa üstü sayfa açıklaması için -->
    @if(empty($id) & !isset($urun_id))
        @lang("lang.urunler")
    @elseif(!empty($id) & !isset($urun_id))
        {{ @$urun_kat->kat }}
    @elseif(!empty($urun_id))
        {{ $urunDetayi->name }}
    @endif
@endsection
@section('bread')
    @include("breadcrump")
@endsection

@section('page_top')
@include("page_menu_bottom")
@endsection
@section('content')
<!--  Ürün Kategori listesi  -->
@if(empty($id) & empty($urun_id))
@foreach($urun_kategorisi as $urun_kat)
<div class="pro-box-wrapper">
    <div class="pro-box kombi">
        <div class="pro-img">
            <a href="{{ Url_('urunler').'/'.SeoUrl($urun_kat->name) }}">  <img src="{{ dosyaUrl() }}{{ $urun_kat->picture_path }}" alt="#" /></a>
        </div>
        <div class="pro-box-desc">
            <div class="pro-title">
                <div class="box-icon"></div>
                <p>{{ $urun_kat->name }}</p>
            </div>
            <div class="pro-min-desc">
                <p>{{ $urun_kat->description }}</p>
            </div>
            <a href="{{ Url_('urunler').'/'.SeoUrl($urun_kat->name) }}" title="Listele">@lang('lang.urunleri_goster')</a>
        </div>
    </div>
</div>
@endforeach
@php

@endphp



@endif
@if(!empty($urun_alt_kategorileri))
@foreach($urun_alt_kategorileri as $urun_kat)
<div class="pro-box-wrapper">

            <a href="{{ Url_('urunler').'/'.SeoUrl($urun_kat->name) }}"> 
            <!-- <img src="{{ dosyaUrl() }}{{ $urun_kat->picture_path }}" alt="#" /> -->
             <p>{{ $urun_kat->name }}</p>
         
        </a>
   
</div>
@endforeach
@endif




<!--  eğer ürün detayı varsa göster -->
@if(!empty($id) & empty($urun_id) )

@foreach($urunler as $urn)
<div class="pro-box-wrapper">
    <div class="pro-box kombi">
        <div class="pro-img">
            <a href="{{ Url_('urunler').'/'.SeoUrl(@$urunler->first()->kat).'/'.SeoUrl($urn->name).'.'.$urn->id }}">  <img src="{{ dosyaUrl() }}{{ $urn->picture }}" alt="#" /></a>
        </div>
        <div class="pro-box-desc">
            <div class="pro-title">
                <div class="box-icon"></div>
                <p>{{ $urn->name }}</p>
            </div>
            <div class="pro-min-desc">
                <p>{{ $urn->description }}</p>
            </div>
            <a href="{{ Url_('urunler').'/'.SeoUrl(@$urunler->first()->kat).'/'.SeoUrl($urn->name).'.'.$urn->id }}" title="Listele">@lang('lang.urunleri_goster')</a>
        </div>
    </div>
</div>

@endforeach




@else


@endif
<!--  eğer ürün detayı varsa göster -->
@if(!empty($urun_id) &  !empty($urunDetayi))
<section id="listeleme">
    <div class="container">
        
        <article class="slogan">
            <p class="slogan-title urun">{{ $urunDetayi->name }}</p>
        </article>
        <div class="safirShare3">
            <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
                <a class="addthis_button_preferred_1"></a>
                <a class="addthis_button_preferred_2"></a>
                <a class="addthis_button_preferred_3"></a>
                <a class="addthis_button_preferred_4"></a>
                <a class="addthis_button_compact"></a>
            </div>
            <script type="text/javascript">
            var addthis_config = { "data_track_clickback": true };
            </script>
            <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4d7221b914a01a3c"></script>
            <div id="fb-root"></div>
            <script>
            (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/tr_TR/sdk.js#xfbml=1&version=v2.8";
            fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));
            </script>
            <div class="fb-like" data-href="https://www.facebook.com/pages/Ilgin-Yapi/1657676801120572" data-layout="button_count" data-action="like"
            data-show-faces="false" data-share="false"></div>
        </div>
        <div class="gedik2">
            <div class="urun-foto3">
                <a class="fancybox" rel="group" href="{{ dosyaUrl() }}{{ $urunDetayi->picture }}"><img style="width: 665px;float:right;   margin-left: 10px;    height: 428px;" src="{{ dosyaUrl() }}{{ $urunDetayi->picture }}"  /></a>
                <script>
                $(".fancybox")
                .fancybox({
                openEffect: 'none',
                closeEffect: 'none'
                });
                </script>
            </div>
        </div>
        <div class="maddeler-height" style="float:left;">
            <div class="center">
                <div class="hizala">
                    <div class="maddeler-box">
                        <div class="maddeler-col">
                            <div class="arrows">
                                <p>Teknik &#214;zellikler</p>
                                <div class="circle"></div>
                                <div class="line"></div>
                            </div>
                            <ul class="urun-maddeler">
                                <li>
                                    <div class="pro-detail-comp">
                                        <div class="pro-detail-desc">
                                            <p>
                                            {{ $urunDetayi->content }}   </p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mobile-product-detail">
            <div class="container">
                <div id="teknik-1" class="teknik" o-id="1">
                    <a href="javascript:;">Teknik &#214;zellikler</a>
                </div>
                <ul class="urun-maddeler-mobile" id="urun-maddeler-mobile-1">
                    <li>
                        <div class="pro-detail-comp-mobile">
                            <div class="pro-detail-desc-mobile">
                                <p>
                                    {!! $urunDetayi->content !!}
                                </p>
                            </div>
                        </div>
                    </li>
                </ul>
                <script>
                $("#teknik-" + 1 + " a").click(function () {
                $("#urun-maddeler-mobile-" + 1).slideToggle(500);
                });
                </script>
                <script>
                $("#teknik-" + 4 + " a").click(function () {
                $("#urun-maddeler-mobile-" + 4).slideToggle(500);
                });
                </script>
                <script>
                $("#teknik-" + 3 + " a").click(function () {
                $("#urun-maddeler-mobile-" + 3).slideToggle(500);
                });
                </script>
            </div>
        </div>
        
        <div class="seperator">
            <div class="center-others">
                <div class="line"></div>
                <a>Ürün Galerisi
                </a>
                <div class="line"></div>
            </div>
        </div>
        <ul class="basin-gazete">
            @foreach($urun_galerisi as $galeri)
            
            <li>
                <a class="fancybox" rel="group" href="{{ dosyaUrl() }}{{ $galeri->path }}"><img style="width: 150px; height: 150px !important" src="{{ dosyaUrl() }}{{ $galeri->path }}"></a>
                <div class="basin-detay">
                    <a href="#">
                        <p class="basin-title">{{  $galeri->pic_descriptions }}</p>
                    </a>
                </div>
            </li>
            @endforeach
        </ul>

<p style="clear:both"></p>


<!-- URUN TABLARI -->

@if(!empty($urun_tablari))
    @if(count($urun_tablari)>0)


        TABLAR

        <div class="w3-bar w3-black">
            @foreach($urun_tablari as $index=>$tab)
                 <button class="w3-bar-item w3-button" onclick="openTab('{{$tab->tab_title}}')">{{$tab->tab_title}}</button>
            @endforeach
        </div>


        @foreach($urun_tablari as $index=>$tab)
            <div id="{{$tab->tab_title}}" class="w3-container tab " @if($index!=0)  style="display:none"   @endif>
                <h3>{{$tab->tab_title}}</h3>
                <p>{{$tab->tab_descriptions}}</p>
                
             
                <!--- TAB SLİERİ -->
                @if(!empty($tab->tab_galeri))
                TAB GALERİSİ
                <ul class="basin-gazete">
                    @foreach($tab->tab_galeri as $galeri)
                        <li>
                            <a class="fancybox" rel="group" href="{{ dosyaUrl() }}{{ $galeri->path }}"><img style="width: 150px; height: 150px !important" src="{{ dosyaUrl() }}{{ $galeri->path }}"></a>
                            <div class="basin-detay">
                                <a href="#">
                                    <p class="basin-title">{{  $galeri->pic_descriptions }}</p>
                                </a>
                            </div>
                        </li>
                    @endforeach
                </ul>
                @endif

                
     <!-- URUN SLDERİ -->    
                @if(!empty($tab->tab_slideri))
                <p style="clear:both"></p>
               TAB SLİDER (javascripte sorun var sadece biri çalışıyor)


               
                        <div id="slide22">
                        <ul class="bxslider_tab{{$tab->id}}">
                            @foreach($tab->tab_slideri as $slider)
                                <li>  <img src="{{ dosyaUrl() }}{{ $slider->tab_slider_picture_path }}" alt="Chania"> </li>                            
                            @endforeach   
                        </ul><!--slider end-->

                        <script>
                            $(document).ready(function () {
                                $('.bxslider_tab{{$tab->id}}').bxSlider({
                                    auto: true,
                                    pause: 2000,
                                    autoStart: true,
                                    autoDirection: 'next',
                                    autoHover: true,
                                    autoDelay: 0,
                                    pager: false,
                                    slideWidth:200,
                                    autoSlideForOnePage: true,
                                });
                            });
                        </script>
                        </div>
                @endif

            </div>
        @endforeach   
        


        <script>
        function openTab(tabName) {
            var i;
            var x = document.getElementsByClassName("tab");
            for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";  
            }
            document.getElementById(tabName).style.display = "block";  
        }
        </script>

    @endif
@endif

<p style="clear:both"></p>

<!-- URUN SLDERİ -->    
@if(!empty($urun_slideri))
    @if(count($urun_slideri)>0)
   ÜRÜN SLİDER <hr/>
        <div id="slide1">

        <ul class="bxslider">
            @foreach($urun_slideri as $slider)

                <li>  <img src="{{ dosyaUrl() }}{{ $slider->slider_path }}" alt="Chania"> </li>
            <!--  <div class="carousel-caption">
            <h3>deneme</h3>
            <p>deneme</p>
            </div> -->
            
            @endforeach   
        </ul><!--slider end-->

        <script>
            $(document).ready(function () {
            $('.bxslider').bxSlider({
            auto: true,
            pause: 2000,
            autoStart: true,
            autoDirection: 'next',
            autoHover: true,
            autoDelay: 0,
            pager: false,
            slideWidth:400,
            autoSlideForOnePage: true,
            });
            });
        </script>
    @endif
@endif



<!--  KATEGORİUYE AİT DİĞER ÜRÜNLER  -->
@if($digerUrunler)
@foreach($digerUrunler as $urn)
DİĞER ÜRÜNLER
<div class="pro-box-wrapper">
    <div class="pro-box kombi">
        <div class="pro-img">
            <a href="{{ Url_('urunler').'/'.SeoUrl(@$digerUrunler->first()->kat).'/'.SeoUrl($urn->name).'.'.$urn->id }}">  <img src="{{ dosyaUrl() }}{{ $urn->picture }}" alt="#" /></a>
        </div>
        <div class="pro-box-desc">
            <div class="pro-title">
                <div class="box-icon"></div>
                <p>{{ $urn->name }}</p>
            </div>
            <div class="pro-min-desc">
                <p>{{ $urn->description }}</p>
            </div>
            <a href="{{ Url_('urunler').'/'.SeoUrl(@$digerUrunler->first()->kat).'/'.SeoUrl($urn->name).'.'.$urn->id }}" title="Listele">@lang('lang.urunleri_goster')</a>
        </div>
    </div>
</div>
@endforeach
@endif

    </div>
</div>

</section>

@endif <!-- ürün detay if -->


<!--  eğer ürün detayı varsa göster -->
@if(!empty($urun_id) &  !empty($urunDetayi))
<p style="clear:both"></p>
    @include("modules.yorumlar.yorumlar")
@endif <!-- ürün detay if -->

@endsection