@extends('main')
@section('styles')
  <style media="screen">
    .availability {
      color: green
    }
    .availability.stock2 {
      color: blue
    }
    .availability.out-of-stock {
      color: red
    }
  </style>
@endsection
@section('page-title')
@endsection
@section('content')
  <div class="segments-page">
    <div class="product-details">
      <div class="contents">
        <div class="product-d-slide owl-carousel owl-theme">
          <div class="row">
            <div class="col s10 offset-s1 grid-example">
              <img src="{!! asset($product->image_url) !!}" alt="{!! $product->title !!}">
            </div>
          </div>
        </div>
        <div class="desc-short">
          <form action="{{ url('/cart') }}" method="POST" >
            {!! csrf_field() !!}
            <div class="container">
            <div class="row">
              <div class="col s4">
                <div class="contents">
                  <b>{!! __('Item title') !!}</b>
                </div>
              </div>
              <div class="col s8">
                <div class="contents">
                  <h4>{!! $product->title !!}</h4>
                </div>
              </div>
              <div class="col s4">
                <div class="contents">
                  <b>{{ __('Product status') }}</b>
                </div>
              </div>
              <div class="col s8">
                <div class="contents">
                  @if ($product->stock > 0)
                    <span class="availability in-stock"><span>{!! __('Availability') !!}</span></span>
                  @else
                    <span class="availability out-of-stock"><span>{!! __('Not available') !!}</span></span>
                  @endif
                </div>
              </div>
              <div class="col s4">
                <div class="contents">
                  <b>{!! __('The Price') !!}</b>
                </div>
              </div>
              <div class="col s8">
                <div class="contents">
                  <p class="price">
                    @if ($product->offer)
                      <div class="price-box">
                        <span class="price">{!! $product->offer !!} <span></span> </span>
                        <span class="special-price"><span class="old-price"><span class="price">{!! $product->price2 !!}</span>{!! __('EGP') !!}</span><br><span class="tag">{!! optional($product->unit)->title !!}</span></span>
                      </div>
                    @else
                      <div class="price-box"><span class="regular-price"><span class="price">{!! $product->price2 !!}</span> <span></span>{!! __('EGP') !!}</span><br><span class="tag">{!! optional($product->unit)->title !!}</span></div>
                    @endif
                  </p>
                </div>
              </div>
              <div class="col s4">
                <div class="contents">
                  <b>{!! __('Quantity') !!}</b>
                </div>
              </div>
              <div class="col s3">
                <div class="box-quantity2 ">
                  <select class="browser-default quantitty" maxlength="12" id="qty" name="quantity">
                    @for ($i=1; $i < 10; $i++)
                      <option value="{!! $i !!}">{!! $i !!}</option>
                    @endfor
                  </select>
                </div>
              </div>
              <div class="col s5">
                <div class="contents">
                  <button type="button" name="button" data-id="{{ $product->id }}" class="add-cart button btn-cart">{!! __('Order Now') !!}</button>
                </div>
              </div>
            </div>
            </div>
            <input type="hidden" name="id" value="{{ $product->id }}">
            <input type="hidden" name="name" value="{{ $product->title }}">
            <input type="hidden" name="price" value="{{ $product->price2 }}">
          </form>
        </div>
        @widget('MobileApp\RelatedProducts',['cat_id' => $product->category_id])
        <div class="share-media">
          {{ Widget::run('PageShareMobile', ['url' => Route('mobily.product.show',[$product->category->slug,$product->slug]) ] ) }}
        </div>
        @section('show-qr_code')
          {!! QrCode::size(200)->backgroundColor(239, 242, 247)->generate(route('go.product.qrcode',[$product->id])); !!}
        @endsection
        @section('qr_product')
          <li class="toolbar-item">
            <a href="#slide-out-qr_code" data-activates="slide-out-qr_code" class="toolbar-link sidebar-qrcode">
              <i class="fa fa-qrcode"></i>
              <b>{!! __('QR code') !!}</b>
            </a>
          </li>
        @endsection
      </div>
    </div>
  </div>
@endsection
@section('toolbar2')
  <div class="toolbar2">
    <div class="toolbar2-bottom toolbar2-wrap">
      <form action="{{ url('/cart') }}" method="POST" class="form">
        {!! csrf_field() !!}
        <div class="row sticky-order">
          <div class="col s5">
            <div class="small">
              {!! $product->title !!}
            </div>
          </div>
          <div class="col s3">
            <div class="box-price">
              @if ($product->offer)
                <span class="price">{!! $product->offer !!}</span> <span>{!! __('Pound') !!}</span>
              @else
                <span class="price">{!! $product->price2 !!}</span> <span>{!! __('Pound') !!}</span>
              @endif
            </div>
          </div>
          <div class="col s2">
            <div class="box-quantity ">
              <select class="browser-default quantitty" maxlength="12" id="qty" name="quantity">
                @for ($i=1; $i <= 10; $i++)
                  <option value="{!! $i !!}">{!! $i !!}</option>
                @endfor
              </select>
            </div>
          </div>
          <div class="col s1">
            <div class="contents">
              <button type="submit" name="button" class="toolbar-button button btn-cart">{!! __('Demand') !!}</button>
            </div>
          </div>
        </div>
        <input type="hidden" name="id" value="{{ $product->id }}">
        <input type="hidden" name="name" value="{{ $product->title }}">
        <input type="hidden" name="price" value="{{ $product->price2 }}">
      </form>
    </div>
  </div>
@endsection
@section('scripts')
@endsection