@extends('front.layout.app')
@section('custom-styles')
    <style>

    </style>
@endsection
@section('content')
  <div class="container">
      <div class="row">
          <div class="col-12">
              <nav aria-label="breadcrumb">
                  <ol class="breadcrumb">
                      @if($prod->category)
                      <li class="breadcrumb-item"><a href="{{route('get-prod-by-category',$prod->category->id)}}"
                                                     class="breadcrumb-link">{{$prod->category->{'name_'.app()->getLocale()} }}</a></li>
                      @endif
                      @if($prod->subCategory)
                      <li class="breadcrumb-item"><a href="{{route('get-prod-by-category',$prod->subCategory->id)}}"
                                                     class="breadcrumb-link">{{$prod->subCategory->{'name_'.app()->getLocale()} }}</a></li>
                      @endif
                      <li class="breadcrumb-item"><a href="#"  class="breadcrumb-link">{{$prod->name}}</a></li>
                  </ol>
              </nav>
          </div>
      </div>

      <div class="row prod-details">
          <div class="col-xxl-5 col-xl-5 col-lg-5 col-md-5 col-sm-12 ">
              <!--Slider-->
              <div id="slider">
                  <a href="#" class="control_next"><</a>
                  <a href="#" class="control_prev">></a>

                      <a href="{{route('add-fav',$prod->id)}}" class="fav-icon">
                           <i class="fa-regular fa-heart primary-color1 fa-xl"></i>
                      </a>
                      <a href="#" class="share-icon">
                           <i class="fa-solid fa-share primary-color1 fa-xl"></i>
                      </a>
                  <ul style="width: 100% !important; max-width: 100% !important;" class="gallery">

                      <li>
                          <img src="{{asset('image'.'/'.$prod->image)}}"  onerror="this.src='{{asset('assets/images/no-image.jpg')}}'" style="width: 100% !important;
                      max-width: 100% !important; height: 100% !important; max-height: 100% !important;">
                      </li>
                      @foreach($prod->prodImage as $item)
                          <li><img src="{{asset($item->image)}}" onerror="this.src='{{asset('assets/images/no-image.jpg')}}'"   style="width: 100% !important;
                      max-width: 100% !important; height: 100% !important; max-height: 100% !important;"></li>
                      @endforeach
                  </ul>
              </div>
          </div>

          <div class="col-xxl-7 col-xl-7 col-lg-7 col-md-7 col-sm-12">
              <div class="products-card m-5 d-flex border-radius-5px">
                  <div class="d-block full-width">
                      <div class="card-body margin-bottom-0 padding-bottom-0 border-bottom-gray pb-5">
                          <div class="text-section">
                              <h5 class="card-title fw-bold primary-color1 prod-name">{{$prod->name}}</h5>

                              <div class="d-flex justify-content-space">
                                  <span class="bg-gray-light border-radius-5px p-1">{{\Carbon\Carbon::parse($prod->created_at)->toDateTimeString()}}</span>

                                  <div class="prod-price">{{$prod->price}} <span>{{__('word.KWD')}}</span></div>
                              </div>

                              <div class="d-flex justify-content-space">
                                  @if(isset($prod->user->name))
                                  <p class="primary-color1 fw-bold mt-3 mb-3 ">
                                         <i class="fa-regular fa-user  mr-1 ml-1 "></i>

                                         <span>{!!\Illuminate\Support\Str::limit($prod->user->name, 25, '..')!!}</span>

                                         <i class="fa-solid fa-check bx border-radius-circle p-1 white" style='background-color:#25D366'></i>
                                     </p>
                                  @endif
                                     <p class="black-color  mt-3"><i class="fa-solid fa-location-dot "></i> {{$prod->getFullLocation()}}</p>
                                 </div>

                          </div>
                      </div>

                      <div class="card-body mt-3 padding-top-0 border-bottom">

                              <h5 class="d-block">الوصف</h5>
                              <p class="dark-gray">{{$prod->descr}} </p>
                      </div>
                      <div class="card-body mt-3 pt-0 d-flex border-bottom justify-content-space">

                          @if($prod->has_wts || $prod->has_phone)
                              @if($prod->has_wts)
                                  <a class="w-45 btn btn-primary-color1 d-flex justify-content-center fw-bold" href="https://api.whatsapp.com/send?phone={{$prod->wts}}" >
                                      <i class='bx bxl-whatsapp border-radius-5px'></i>
                                      @lang('word.conversation')
                                  </a>
                              @endif
                              @if($prod->has_phone)
                                  <a class="w-45 btn btn-secondary-color d-flex justify-content-center fw-bold" href="tel:{{$prod->phone}}">
                                      <i class='bx bx-phone'></i>
                                      @lang('word.call_now')
                                  </a>
                              @endif
                          @endif
                      </div>
                  </div>

              </div>          </div>
      </div>
  </div>
  <div   id="fullpage" onclick="this.style.display='none';">
      <a class=" " id="fullpage_close_btn" onclick="closeFullScree()">
          <i class='bx bx-exit-fullscreen'></i>
      </a>
  </div>

@endsection
@section('scripts')
    <script>
        function getPics() {} //just for this demo
        const imgs = document.querySelectorAll('.gallery img');
        const fullPage = document.querySelector('#fullpage');

        imgs.forEach(img => {
          img.addEventListener('click', function() {
            fullPage.style.backgroundImage = 'url(' + img.src + ')';
            fullPage.style.display = 'block';
          });
        });

       function closeFullScreen(){
         fullPage.style.display = 'none';
        }
    </script>
  <script>
jQuery(document).ready(function ($) {
 setInterval(function () {
        moveRight();
    }, 3000);

	var slideCount = $('#slider ul li').length;
	var slideWidth = $('#slider ul li').width();
	var slideHeight = $('#slider ul li').height();
	var sliderUlWidth = slideCount * slideWidth;

	$('#slider').css({ width: slideWidth, height: slideHeight });

	$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});



  </script>
@endsection