@extends('main')
@section('styles')
@endsection
@section('page-title')
@endsection
@section('content')
<div class="shop-header bg-color--grey fix-head">
 <div class="container space-y--15">
  <div class="row align-items-center">
   <div class="col-9">
    <h1 class="category-title text-right"> <a
      href="{!! Route('mobily.product.category',[$product->category->slug]) !!}">{!! $product->category->title !!}</a>
    </h1>
   </div>
   <div class="col-3 text-left">
    <a href="javascript:history.back()" class="back-link">{!! __('Back') !!} <i class="fa fa-long-arrow-left"></i> </a>
   </div>
  </div>
 </div>
</div>
<div class="product-content space-pt--10 space-pb--10">
 <div class="container">
  <div class="col-12">
   <div class="product-content-header">
    <div class="product-content-header__main-info">
     <h3 class="title">{!! $product->title !!}</h3>
    </div>
   </div>
  </div>
 </div>
</div>
<div class="product-image-slider-wrapper space-pb--10 space-mb--10  space-pr--5 space-pl--5">
 <div class="product-image-single">
  @if ($product->stock > 0)
  <p class="availability in-stock"><span>{!! __('Availability') !!}</span></p>
  @else
  <p class="availability out-of-stock"><span>{!! __('Not available') !!}</span></p>
  @endif
  @php
  // dump($data);
  @endphp
  @if ($product->offer)
  <div class="hot-label hot-top-right">
   <span class="product_discount">{!! $product->getPercentAttribute() !!}% </span>
  </div>
  @else
  @endif
  <img src="{!! asset($product->image_url) !!}" alt="{!! $product->title !!}" class="img-fluid">
 </div>
 @if ($product->hasMedia('gallery'))
 @foreach ($product->getMedia('gallery') as $key => $image)
 <img src="{{ asset('uploads/'.$image->getDiskPath()) }}" alt="{!! $product->title !!}" class="img-fluid">
 @endforeach
 @endif
</div>
<div class="product-content-header-area border-bottom space-pb--10">
 <div class="container">
  <div class="row">
   <div class="col-12">
    @livewire('mob-app.cart.product-item', ['product' => $product])
   </div>
  </div>
 </div>
</div>
@if ($product->technical)
<div class="product-content-description border-bottom space-pt--10 space-pb--10">
 <div class="container">
  <div class="row">
   <div class="col-12">
    <div class="product-content-header__main-info">
     <h3 class="title">{!! __('Quick overview') !!}</h3>
    </div>
    {!! @$product->technical !!}
   </div>
  </div>
 </div>
</div>
@endif
@widget('MobileApp\RelatedProducts',['cat_id' => $product->category_id])
@endsection
@section('scripts')
@endsection