@extends('masterpage')
@section('title')
    {{-- $ayarlar["site_adi"] --}}
    @if(!empty($urun_id) &  !empty($urunDetayi))
        {{  $urunDetayi->name  }}
    @else
        @if(@$urun_kat->code_name)
            {{ @$urun_kat->code_name }}
        @else
            {{ @$modul_adi_dil->urunler }}
        @endif
    @endif
@endsection
@section('keywords',@$keywords)
@section('description',@$descriptions)


@section('active_page')
    <!-- Breadcrump için sayfa -->
    <a href="{{ Url_('urunler') }}"> {{ $modul_adi_dil->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($urun_id) &  !empty($urunDetayi))
        {{  $urunDetayi->name  }}
    @else
        @if(@$urun_kat->code_name)
            {{ @$urun_kat->code_name }}
        @else
            {{ @$modul_adi_dil->urunler }}
        @endif
    @endif
@endsection

@section('bread')
    @include("breadcrump")
@endsection


@section('page_top')
    @include("page_menu_bottom")
@endsection

@section('content')
<div style="margin-bottom:30px;margin-top:30px"class="project-area">
	<div class="container">
		<div class="row">	
			<div class="project-content">		
				    <!--  Ürün Kategori listesi  -->
				

                    <!--  Ürün Alt Kategori Listesi  -->
				@if(!empty($urun_alt_kategorileri))
					@foreach($urun_alt_kategorileri->sortBy("order") as $urun_kat)
						<div class="col-md-3 col-sm-6 col-xs-12 ">
                            <div class="single-awesome-project">
                               
							   <div class="awesome-img">
                                    <a href="{{ Url_('urunler').'/'.SeoUrl($urun_kat->page_url) }}">
                                        <img src="{{ dosyaUrl() }}{{ $urun_kat->picture_path }}" alt="" />
                                    </a>
                                   
                                </div>
                                <div class="project-dec">
                                   <a href="{{ Url_('urunler').'/'.SeoUrl($urun_kat->page_url) }}"> 
								   <h4 style="text-align:center">{{ $urun_kat->name }}</a></h4>
                                    <p style="height:70px">{{ $urun_kat->short_desc }}</p>
                                </div>
                            </div>
                        </div>

						@endforeach
					@endif

					<!--  Kategori Ürünleri -->
					@if(!empty($id) & empty($urun_id) )
						@foreach($urunler->sortBy("order") as $urn)
							<div class="col-md-4 col-sm-4 col-xs-12">
								<div class="single-awesome-project">
									
									<div class="awesome-img">
										<a href="{{ app('url')->current().'/'.SeoUrl($urn->name).'.'.$urn->id }}">
                                        <img src="{{ dosyaUrl() }}{{ $urn->picture }}" alt=""/>
										</a>
									</div>
                               
									
								
								<div class="project-dec">
                                   <a href="{{ app('url')->current().'/'.SeoUrl($urn->name).'.'.$urn->id }}"> 
								   <h4 style="text-align:center">{{ $urn->name }}</a></h4>
                                    <p style="height:70px">{{ $urn->short_content }}</p>
                                </div>
								</div>
							</div>
						@endforeach
						@else
					@endif

					<!--  eğer ürün detayı varsa göster -->
					@if(!empty($urun_id) &  !empty($urunDetayi))
						<div style="margin-bottom:20px"class="col-md-12">
							<div class="video-area">
								<div style="padding-left:0px;padding-right:0px"class="col-md-6 col-sm-6 col-xs-12">
									<div class="single-blog">
										<div class="blog-image">
											<a class="venobox image-scale" data-gall="myGallery" href="{{ dosyaUrl() }}{{ $urunDetayi->picture }}">
												<img src="{{ dosyaUrl() }}{{ $urunDetayi->picture }}" alt="">
											</a>
										</div>	
									</div>
								</div>
                    
								<div style="padding-left:0px; padding-right:0px" class="col-md-6 col-sm-6 col-xs-12">
									<div style="margin-top: 13px;padding-left: 15px;"class="video-text">
										<h4>{{ $urunDetayi->name }}</h4>
											<p style="text-align:text-align:justify;">
											   {!! $urunDetayi->content !!}
											</p>
									</div>
									
								</div>
								
							</div>
							
						</div>
						<div style="padding-left:0px; padding-right:0px"class="col-md-12">
															
																@if(!empty($urun_galerisi))
																@foreach($urun_galerisi as $galeri)
																	<div class="gdk col-md-3">
																		<a class="venobox" data-gall="myGallery" href="{{ dosyaUrl() }}{{ $galeri->path }}">
																		<img style="width: 100%;
    height: 175px;
    object-fit: cover;
    padding-bottom: 18px;"src="{{ dosyaUrl() }}{{ $galeri->path }}" alt="">
	<div style="width: 100%; text-align: center; padding-bottom: 10px;height:50px">{{  $galeri->pic_descriptions }}</div>
																		</a>
																	</div>
																@endforeach
																@endif
															</div>

						@if(!empty($urun_tablari))
							@if(count($urun_tablari)>0)
								<style>
									.w3-container, .w3-panel {
										padding: 0.01em 16px;
										border: 1px solid #8c8989;
									}
									.w3-bar .w3-bar-item {
										padding: 12px 16px!important;
										float: left;
										width: auto;
										border: none;
										display: block;
										outline: 0;
									}									
								</style>
								<link rel="stylesheet" href="http://serkanural.com/css/w3.css">
									<div class="col-md-12 " style="top:0px!important">
										<div class="w3-bar w3-black" style=" height: 44px; padding: 0px;     background-color: #06396a!important; ">
											@foreach($urun_tablari as $index=>$tab)
												<button class="w3-bar-item w3-button   " id="tab_btn{{$index}}" onclick="openTab('{{$tab->tab_title}}','{{$index}}')">{{$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>
												<p>{!!$tab->tab_descriptions!!}</p>
												@if(!empty($tab->tab_galeri))
													<div style="padding-left:0px; padding-right:0px"class="col-md-12">
															
																@foreach($tab->tab_galeri as $galeri)
																	<div class="gdk col-md-2"> 
																		<a class="venobox" data-gall="myGallery" href="{{ dosyaUrl() }}{{ $galeri->path }}">
																		<img style="width: 100%;
    height: 311px;
    object-fit: cover;
    padding-bottom: 18px;"src="{{ dosyaUrl() }}{{ $galeri->path }}" alt="">
	<div style="width: 100%; text-align: center; padding-bottom: 10px;height:50px">{{  $galeri->pic_descriptions }}</div>
																		</a>
																	</div>
																@endforeach
															</div>	
														
												@endif
											</div>
										@endforeach   
										<script>
											function openTab(tabName,index) {
												
												var i;
												var x = document.getElementsByClassName("tab");
												var x_ = document.getElementsByClassName("w3-button");
												for (i = 0; i < x.length; i++) {
													x[i].style.display = "none"; 
													x_[i].style.backgroundColor = "#06396a"; 										
												}
												document.getElementById(tabName).style.display = "block";  
												document.getElementById("tab_btn"+index).style.backgroundColor = "#f5af25"; 
											}
											
											var x_ = document.getElementsByClassName("w3-button");
											x_[0].style.backgroundColor = "#f5af25"; 
										</script>
									</div>	
								@endif
							
							@endif
							<div class="col-md-12">
							@include("modules.yorumlar.yorumlar")
															</div>
						@endif
						
			</div> 
																	
		</div>
	</div>
</div>

@endsection