@extends('layout.master1')
@section('title',$title)
@section('description',$description)
@section('og:locale',app()->getLocale())
@section('og:type',$og_type)
@section('og:title',$og_title)
@section('og:description',$og_description)
@section('og:url',$og_url)
@section('og:site_name',$og_sitename)
@section('twitter:title',$twitter_title)
@section('twitter:description',$twitter_desc)
@section('content')

  <div class="breadcrumb-wrap">
        <div class="container">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">
                <a href="{{ route('home')}}">
                  @if( App::getLocale() == 'tr')
                    Anasayfa
                   @elseif( App::getLocale() == 'en')
                    Home
                    @else
                     الصفحة الرئيسية
                    @endif
                </a>
              </li>
              <li class="breadcrumb-item">
                <a href="{{ route('category.detail', ['url' => $productDetail->category->url]) }}">
                  @if( App::getLocale() == 'tr')
                    {{ $productDetail->category->name}}
                  @elseif( App::getLocale() == 'en')
                    {{ $productDetail->category->name_en}}
                  @else
                     {{ $productDetail->category->name_arabic}}
                  @endif

                </a>
              </li>
            </ol>
          </nav>
        </div>
      </div>

      <section class="single-listing-wrap1">
        <div class="container">
          <div class="single-property">
            <div class="content-wrapper">
              <div class="property-heading">

                <div class="row align-items-center">
                  <div class="col-lg-8 col-md-12">
                    <div class="single-verified-area">
                      <div class="item-title">
                        <h3>
                            {{ $productDetail->post_name }}
                        </h3>
                      </div>
                    </div>
                    <div class="single-item-address">
                      <ul>
                        <li>
                          <i class="fas fa-map-marker-alt"></i>
                          {{ $productDetail->location}}
                        </li>
                        <li><i class="fas fa-clock"></i>{{$productDetail->created_at}}</li>
                        <li><i class="fas fa-eye"></i>{{ $productDetail->views}} @lang('general.views')</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-lg-8">
                  <div class="featured-thumb-slider-area wow fadeInUp" data-wow-delay=".4s">
                    <div class="feature-box3 swiper-container">
                      <div class="swiper-wrapper">
                        @foreach($productDetail->productsImage as $sub_image)
                          <div class="swiper-slide">
                            <div class="feature-img1 zoom-image-hover">
                              <img
                                src="{{ asset('assets/assets/img/projects/sub_project_img/'.$sub_image->image) }}" alt="feature" width="798" height="420"/>
                            </div>
                          </div>
                        @endforeach
                      </div>
                    </div>
                    <div class="featured-thum-slider2 swiper-container">
                      <div class="swiper-wrapper">

                        @foreach($productDetail->productsImage as $sub_image)
                        <div class="swiper-slide">
                            <div class="item-img">
                            <img
                              src="{{ asset('assets/assets/img/projects/sub_project_img/'.$sub_image->image) }}"
                              alt="feature"
                              width="154"
                              height="100"/>
                          </div>
                        </div>
                        @endforeach
                      </div>
                    </div>
                  </div>
                  <div class="single-listing-box1">

                    <div class="overview-area listing-area">
                      <h3 class="item-title">@lang('general.projectAbout')</h3>
                      <p>
                        {!! $productDetail->content !!}

                      </p>
                    </div>
                    <div class="overview-area single-details-box table-responsive">
                      <h3 class="item-title">@lang('general.details')</h3>
                      <table class="table-box1">
                        <tr>
                          <td class="item-bold">@lang('general.project_id')</td>
                          <td>#{{ $productDetail->id}}</td>
                          <td class="item-bold">@lang('general.project_type')</td>
                          @if( App::getLocale() == 'tr')
                            <td>{{ $productDetail->category->name}}</td>
                          @elseif( App::getLocale() == 'en')
                            <td>{{ $productDetail->category->name_en}}</td>
                            @else
                             <td>{{ $productDetail->category->name_arabic}}</td>
                            @endif
                        </tr>
                        <tr>
                          <td class="item-bold">@lang('general.project_location')</td>
                          <td>{{ $productDetail->location}}</td>
                          <td class="item-bold">@lang('general.project_squareMeters')</td>
                          <td>{{ $productDetail->m2}}</td>
                        </tr>
                      </table>
                    </div>
                    @if(!empty($productDetail->attributes->count() >0))
                    <div class="overview-area floor-plan-box">
                      <h3 class="item-title">Projeye ait çizimler</h3>
                      <div id="accordion" class="accordion">
                        @foreach($productDetail->attributes as $attr)
                        <div class="card">
                          <div class="card-header">
                            <div class="heading-title" data-bs-toggle="collapse" data-bs-target="#collapse{{$attr->id}}" aria-expanded="true" role="button">
                              <span>{{ $attr->title }}</span>
                              <div class="card-list">
                                <ul>
                                  <li>
                                    <i class="flaticon-bed"></i><span>Beds: 03</span>
                                  </li>
                                  <li>
                                    <i class="flaticon-shower"></i><span>Baths: 02</span>
                                  </li>
                                  <li>
                                    <i class="flaticon-two-overlapping-square"></i><span>931Sqft</span>
                                  </li>
                                </ul>
                              </div>
                            </div>
                          </div>
                          <div id="collapse{{$attr->id}}" class="collapse show" data-bs-parent="#accordion">
                            <div class="card-body">
                              <div class="item-img">
                                <img src="{{ asset('assets/assets/img/projects/project_attr_img/floor_plan.jpg')}}" alt="shape">
                              </div>
                            </div>
                          </div>
                        </div>
                        @endforeach
                      </div>
                    </div>
                    @endif
                <!--    <div class="overview-area ameniting-box">
                      <h3 class="item-title">Features & Amenities</h3>
                      <div class="row">
                        <div class="col-lg-4">
                          <ul class="ameniting-list">
                            <li><i class="fas fa-check-circle"></i>TV Cable</li>
                            <li>
                              <i class="fas fa-check-circle"></i>Air
                              Conditioning
                            </li>
                            <li><i class="fas fa-check-circle"></i>Barbeque</li>
                            <li><i class="fas fa-check-circle"></i>Gym</li>
                          </ul>
                        </div>
                        <div class="col-lg-4">
                          <ul class="ameniting-list">
                            <li>
                              <i class="fas fa-check-circle"></i>Swimming Pool
                            </li>
                            <li><i class="fas fa-check-circle"></i>Laundry</li>
                            <li>
                              <i class="fas fa-check-circle"></i>Microwave
                            </li>
                            <li><i class="fas fa-check-circle"></i>Lawn</li>
                          </ul>
                        </div>
                        <div class="col-lg-4">
                          <ul class="ameniting-list">
                            <li><i class="fas fa-check-circle"></i>Sauna</li>
                            <li>
                              <i class="fas fa-check-circle"></i>Window
                              Coverings
                            </li>
                            <li>
                              <i class="fas fa-check-circle"></i>CC Camera
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>-->
                    @if(!empty($productDetail->project_video))
                    <div class="overview-area video-box1">
                      <h3 class="item-title">@lang('general.project_video')</h3>
                      <div class="item-img">
                        <img
                          src="{{asset('assets/assets/img/blog/listing1.jpg')}}"
                          width="731"
                          height="349"
                        />
                        <div class="play-button">
                          <div class="item-icon">
                            <a  href="http://www.youtube.com/watch?v=1iIZeIy7TqM" class="play-btn play-btn-big">
                              <span class="play-icon style-2">
                                <i class="fas fa-play"></i>
                              </span>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                    @endif

                    @if(!empty($productDetail->video))
                    <div class="overview-area video-box1">
                      <h3 class="item-title">@lang('general.360_virtual_tour')</h3>
                      <div class="item-img">
                        <img src="{{ asset('assets/assets/img/projects/'.$productDetail->image) }}" width="731" height="349"/>
                        <div class="play-button">
                          <div class="item-icon">
                            <a  href="{{ $productDetail->video }}" class="play-btn play-btn-big">
                              <span class="play-icon style-2">
                                <i class="fas fa-play"></i>
                              </span>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                    @endif

                  </div>
                </div>




                <div class="col-lg-4 widget-break-lg sidebar-widget">

                  <div class="widget widget-post">
                    <div class="item-img">
                        <img src="{{ asset('assets/assets/img/projects/project_attr_img/planlar.jpeg')}}" alt="widget" width="369px" height="489px">
                    </div>
                    <div class="item-content">
                        <div class="post-button"><a href="#" class="item-btn">360 İzle</a></div>
                    </div>
                  </div>
                  <div class="widget widget-contact-box">
                    <form class="contact-box rt-contact-form" autocomplete="off">
                      <div class="row">
                        <div class="form-group col-lg-12">
                          <input
                            type="text"
                            class="form-control"
                            name="fname"
                            placeholder="@lang('general.name')"
                            data-error="First Name is required"
                            required
                          />
                        </div>
                        <div class="form-group col-lg-12">
                          <input
                            type="text"
                            class="form-control"
                            name="phone"
                            placeholder="@lang('general.phone')"
                            data-error="Phone is required"
                            required
                          />
                        </div>
                        <div class="form-group col-lg-12">
                          <input
                            type="text"
                            class="form-control"
                            name="phone"
                            placeholder="@lang('general.email')"
                            data-error="Phone is required"
                            required
                          />
                        </div>
                        <div class="form-group col-lg-12">
                          <textarea
                            name="comment"
                            id="message"
                            class="form-text"
                            placeholder="@lang('general.message')"
                            cols="30"
                            rows="4"
                            data-error="Message Name is required"
                            required
                          ></textarea>
                        </div>
                        <div class="form-group col-lg-12">
                          <div class="advanced-button">
                            <button type="submit" class="item-btn">
                              @lang('general.submit')
                            </button>
                          </div>
                        </div>
                      </div>
                      <div class="form-response"></div>
                    </form>
                  </div>
                  <div class="widget widget-taglist">
                      <h3 class="widget-subtitle">@lang('general.popular_tag')</h3>
                      <ul class="tag-list">
                          @foreach(explode(',', $productDetail->tags) as $info)
                                <li>{!! $info !!}</li>
                          @endforeach
                      </ul>
                  </div>
                  <div class="widget widget-listing-box1">
                    <h3 class="widget-subtitle">@lang('general.latest_projects')</h3>
                    <div class="item-img">
                      <a href="#"
                        ><img
                          src="/assets/assets/img/blog/Detail_55813.jpg"
                          alt="widget"
                          width="540"
                          height="360"
                      /></a>

                    </div>
                    <div class="widget-content">
                      <div class="item-category10">
                        <a href="#">Konut iç mimari</a>
                      </div>
                      <h4 class="item-title">
                        <a href="#">H.O. Konut Projesi</a>
                      </h4>
                      <div class="location-area">
                        <i class="flaticon-maps-and-flags"></i>Nişantaşı, İstanbul</div>
                    </div>
                    <div class="widget-listing">
                      <div class="item-img">
                        <a href="#"
                          ><img
                            src="/assets/assets/img/blog/Detail_55813.jpg"
                            alt="widget"
                            width="120"
                            height="102"
                        /></a>
                      </div>
                      <div class="item-content">
                        <h5 class="item-title">
                          <a href="#">Deneme proje</a>
                        </h5>
                        <div class="location-area">
                          <i class="flaticon-maps-and-flags"></i>ßla Blaa, istanbul
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="newsletter-wrap1">
        <div class="container">
          <div class="row align-items-center">
            <div class="col-lg-5">
              <div class="newsletter-layout1">
                <div class="item-heading">
                  <h2 class="item-title">@lang('general.sign_up_for_newsletter')</h2>
                  <h3 class="item-subtitle">@lang('general.get_latest_news_and_update')</h3>
                </div>
              </div>
            </div>
            <div class="col-lg-7">
              <form action="javascript:void(0);" class="searchform" type="post" autocomplete="off">
                {{ csrf_field() }}
                  <div class="newsletter-form">
                    <div class="input-group">
                      <input pattern="[^@\s]+@[^@\s]+\.[^@\s]+" type="email"  name="subscriber_email" id="subscriber_email" placeholder="@lang('general.email')" class="form-control" onfocus="enableSubscriber();" onfocusout="checkSubscriber();"    required="" />
                      <div class="input-group-append">
                        <button onclick="addSubscriber();" id="btnSubmit" type="submit" class="btn btn-outline-secondary">
                          <i class="fa fa-arrow-circle-o-right"> @lang('general.subscribe')</i>
                        </button>
                          <div id="statusSubscribe" style="display: none;"></div>
                      </div>
                    </div>
                  </div>
              </form>
            </div>
          </div>
        </div>
      </section>
    @endsection

    @section('javascript')
    <script type="text/javascript">

    function addSubscriber(){
        var subscriber_email = $("#subscriber_email").val();
        var _token = $('meta[name="csrf-token"]').attr('content');
        var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if (regex.test(subscriber_email) ==false) {
          alert("Uygun email adresi girmeniz gerekmektedir!");
          return false;
        }
        $.ajax({
          type:'post',
          url:'{{ route('addSub') }}',
          data:{subscriber_email:subscriber_email, _token:_token},
          success:function(resp){
            if(resp=="subMevcut")
            {
              alert("Bülten aboneliğiniz bulunmaktadır!");
            }
            else if(resp=="subEklendi")
            {
              alert("Bülten aboneliğiniz gerçekleşti");
            }
          }
        });
      }
    </script>

    <script type="text/javascript">
    function onClickShare() {
    if(navigator.share) {
         navigator.share({
           title: 'ETRE MİMARLIK!',
           text: 'TASARIM | DEKORASYON | MİMARLIK',
           url: ''
         })
         .then(() => console.log('Hacker News Shared! Yay!'))
         .catch((error) => console.log('Share Error', error));
        }
        }
    </script>

    @endsection