@extends('views.layouts.master')

<link rel="stylesheet" href="{{ csset('/themes/pro/modunawa/resources/css/product-details.css') }}">


@section('content')

@php
    $itemThmMedia[0] = array_merge($listType1Book['Book'][1]['Page'][0] ?? [], [ 'MediaId' => $itemDetails['C1'] ]);
    $preItem = $listType1Book['Book'][3]['Page'];
    $nextItem = $listType1Book['Book'][4]['Page'];
    $refund = $listType1Book['Book'][6]['Page'][0];

@endphp


@push('meta')
    <x-seo-meta-component :metas="$itemDetails['C10']" />
@endpush

<!--=====================================
                    BANNER PART START
        =======================================-->
<section class="single-banner inner-section">
  <div class="container">
    <h2>{{ $itemDetails['C3'] }}</h2>
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="/">Home</a></li>
      <li class="breadcrumb-item active" aria-current="page">{{ $itemDetails['C3'] }}</li>
    </ol>
  </div>
</section>
<!--=====================================
                    BANNER PART END
        =======================================-->

<!--=====================================
                PRODUCT DETAILS PART START
        =======================================-->
<section class="inner-section shop detail">
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <div class="details-gallery">
          <div class="details-label-group">
            <label class="details-label new">new</label>
            <!--<label class="details-label off">-10%</label>-->
          </div>
          <ul class="details-preview">
          @forelse ($itemThmMedia ?? [] as $itemThm)
              @foreach(['MediaId', 'C1', 'C2', 'C3', 'C4', 'C5'] as $key)
                  @if(isset($itemThm[$key]) && $itemThm[$key] !== '')
                    <li><img src="{{ env('MEDIA_URL') . $itemThm[$key] }}" alt="product"></li>
                  @endif
              @endforeach
          @empty
          @endforelse
          </ul>
          <ul class="details-thumb">
              @forelse ($itemThmMedia ?? [] as $itemThm)
                  @foreach(['MediaId', 'C1', 'C2', 'C3', 'C4', 'C5'] as $key)
                      @if(isset($itemThm[$key]) && $itemThm[$key] !== '')
                          <li><img src="{{ env('MEDIA_URL') . $itemThm[$key] }}" alt="product"></li>
                      @endif
                  @endforeach
              @empty
              @endforelse
          </ul>
        </div>
      </div>
      <div class="col-lg-6">
        <ul class="product-navigation">
          <li class="product-nav-prev">
            @if ($preItem)
              <a href="{{ route('item-details', $preItem[0]['C7'] ?: $preItem[0]['Id']) }}">
                  <i class="icofont-arrow-left"></i> prev product <span class="product-nav-popup">
                      <img src="{{ env('MEDIA_URL') . $preItem[0]['C1'] }}" alt="product">
                      <small>{{ $preItem[0]['C5'] }}</small> </span>
              </a>
            @endif
          </li>
          <li class="product-nav-next">
            @if ($nextItem)
              <a href="{{ route('item-details', $nextItem[0]['C7'] ?: $nextItem[0]['Id']) }}"> next product <i class="icofont-arrow-right"></i> <span class="product-nav-popup">
                      <img src="{{ env('MEDIA_URL') . $nextItem[0]['C1'] }}" alt="product">
                      <small>{{ $nextItem[0]['C5'] }}</small> </span>
              </a>
            @endif
          </li>
        </ul>
        <div class="details-content">
          <h3 class="details-name"><a href="#">{{ $itemDetails['C5'] }}</a></h3>
          <div class="details-meta">
            <p>SKU:<span>{{ $itemDetails['C4'] }}</span></p>
            <p>BRAND:<a href="#">{{ $itemDetails['C6'] }}</a></p>
          </div>
          <h3 class="details-price">
            <span>{{ number_format($itemDetails['C7']) }} 원</span> </h3>
            <div class="cre_box">
            	<table>
                	<tr>
                    	<th>결제계획</th>
                        <th>사용가능 P2UP</th>
                        <th>잔액결제</th>
                        <th>단위</th>
                    </tr>
                    @if($shopPayMethodSetup['IsCrypto1'])
                        <tr>
                            <td class="td_head">A Type</td>
                            <td>{{ number_format($pointPayrate['crypto1']['p2up']) }}({{ $pointPayrate['crypto1']['p2up_percent'] }}%)</td>
                            <td>{{ number_format($pointPayrate['crypto1']['msqxp']) }}</td>
                            <td>MSQXP</td>
                        </tr>
                    @endif
                    @if($shopPayMethodSetup['IsCrypto2'])
                        <tr>
                            <td class="td_head">B Type</td>
                            <td>{{ number_format($pointPayrate['crypto2']['p2up']) }}({{ $pointPayrate['crypto2']['p2up_percent'] }}%)</td>
                            <td>{{ number_format($pointPayrate['crypto2']['cash']) }}</td>
                            <td>원</td>
                        </tr>
                    @endif
                </table>
            </div>
            <form class="details-action-group form-prevent-multiple-submits mb-3" id="wish-list-form" action="{{ route('wish-list.favorite') }}" method="POST">
                @csrf
                <input type="hidden" name="item_id" value="{{ $itemDetails['Id'] }}">
                @if (empty($itemDetails['BdPage']))
                    <button type="submit" class="button-prevent-multiple-submits details-wish wish w-100">
                        <i class="far fa-heart mr-2"></i>
                        찜하기
                    </button>
                @else
                    <button type="submit" class="button-prevent-multiple-submits details-wish wish w-100">
                        <input type="hidden" name="_method" value="delete" />
                        <i class="fas fa-heart mr-2"></i>
                        찜삭제
                    </button>
                @endif
            </form>
{{--          <p class="details-desc mb-3">{{ $itemDetails['C6'] }}</p>--}}
          <form class="btn_group form-prevent-multiple-submits" id="cart-form" action="{{ route('cart.store') }}" method="POST">
              @csrf
              <input type="hidden" name="item_id" value="{{ $itemDetails['Id'] }}">
{{--              <div class="details-action-group">--}}
{{--                <a class="details-wish wish" href="/wish-list" title="Add Your Wishlist">--}}
{{--                    <i class="icofont-heart"></i> <span>찜하기</span>--}}
{{--                </a>--}}
{{--              </div>--}}
              <div class="product-action">
                  <button type="button" class="action-minus" title="Quantity Minus"><i class="icofont-minus"></i></button>
                  <input class="action-input" id="item-qty-txt" title="Quantity Number" type="text" name="cart_qty" value="1">
                  <button type="button"  class="action-plus" title="Quantity Plus"><i class="icofont-plus"></i></button>
              </div>
            <div class="details-add-group">
              <button type="submit" class="product-add button-prevent-multiple-submits" title="Add to Cart"> <i class="fas fa-shopping-basket"></i>
                  <span>
                      장바구니 담기
                  </span>
              </button>
            </div>
              <button type="button" onclick="click_buy_btn(this)" class="details-buy buy button-prevent-multiple-submits" title="구매하기"> <i class="fas fa-check"></i>
                  <span>구매하기</span>
              </button>
          </form>

        </div>
      </div>
    </div>
  </div>
</section>
<!--=====================================
                PRODUCT DETAILS PART END
        =======================================-->

<!--=====================================
                  PRODUCT TAB PART START
        =======================================-->
<section class="item_detail inner-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <ul class="nav nav-tabs">
            <li><a href="#tab-desc" class="tab-link active" data-bs-toggle="tab">상품상세</a></li>
            <li><a href="#tab-refund" class="tab-link" data-bs-toggle="tab">배송/교환/반품 안내</a></li>
{{--          <li><a href="#tab-spec" class="tab-link" data-bs-toggle="tab">Specifications</a></li>--}}
{{--          <li><a href="#tab-reve" class="tab-link" data-bs-toggle="tab">reviews (2)</a></li>--}}
        </ul>
      </div>
    </div>
    <div class="tab-pane fade show active" id="tab-desc">
      <div class="row">
        <div class="col-lg-12">
          <div class="product-details-frame">
            <div class="tab-descrip">
                {!! $itemDetails['C8'] !!}
            </div>
          </div>
        </div>
      </div>
    </div>
      <div class="tab-pane fade" id="tab-refund">
          <div class="row">
              <div class="col-lg-12">
                  <div class="product-details-frame">
                      {!! $refund['C2'] ?? '' !!}
                  </div>
              </div>
          </div>
      </div>
    <div class="tab-pane fade" id="tab-spec">
      <div class="row">
        <div class="col-lg-12">
          <div class="product-details-frame">
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <th scope="row">Product code</th>
                  <td>SKU: 101783</td>
                </tr>
                <tr>
                  <th scope="row">Weight</th>
                  <td>1kg, 2kg</td>
                </tr>
                <tr>
                  <th scope="row">Styles</th>
                  <td>@Girly</td>
                </tr>
                <tr>
                  <th scope="row">Properties</th>
                  <td>Short Dress</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="tab-pane fade" id="tab-reve">
      <div class="row">
        <div class="col-lg-12">
          <div class="product-details-frame">
            <ul class="review-list">
              <li class="review-item">
                <div class="review-media"> <a class="review-avatar" href="#"> <img src="{{ '/themes/pro/modunawa/resources/images/avatar/01.jpg'}}" alt="review"> </a>
                  <h5 class="review-meta"> <a href="#">miron mahmud</a> <span>June 02, 2020</span> </h5>
                </div>
                <ul class="review-rating">
                  <li class="icofont-ui-rating"></li>
                  <li class="icofont-ui-rating"></li>
                  <li class="icofont-ui-rating"></li>
                  <li class="icofont-ui-rating"></li>
                  <li class="icofont-ui-rate-blank"></li>
                </ul>
                <p class="review-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus hic amet qui velit, molestiae suscipit perferendis, autem doloremque blanditiis dolores nulla excepturi ea nobis!</p>
                <form class="review-reply">
                  <input type="text" placeholder="reply your thoughts">
                  <button type="button"><i class="icofont-reply"></i>reply</button>
                </form>
                <ul class="review-reply-list">
                  <li class="review-reply-item">
                    <div class="review-media"> <a class="review-avatar" href="#"> <img src="{{ '/themes/pro/modunawa/resources/images/avatar/02.jpg'}}" alt="review"> </a>
                      <h5 class="review-meta"> <a href="#">labonno khan</a> <span><b>author -</b> June 02, 2020</span> </h5>
                    </div>
                    <p class="review-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus hic amet qui velit, molestiae suscipit perferendis, autem doloremque blanditiis dolores nulla excepturi ea nobis!</p>
                    <form class="review-reply">
                      <input type="text" placeholder="reply your thoughts">
                      <button type="button"><i class="icofont-reply"></i>reply</button>
                    </form>
                  </li>
                  <li class="review-reply-item">
                    <div class="review-media"> <a class="review-avatar" href="#"> <img src="{{ '/themes/pro/modunawa/resources/images/avatar/03.jpg'}}" alt="review"> </a>
                      <h5 class="review-meta"> <a href="#">tahmina bonny</a> <span>June 02, 2020</span> </h5>
                    </div>
                    <p class="review-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus hic amet qui velit, molestiae suscipit perferendis, autem doloremque blanditiis dolores nulla excepturi ea nobis!</p>
                    <form class="review-reply">
                      <input type="text" placeholder="reply your thoughts">
                      <button type="button"><i class="icofont-reply"></i>reply</button>
                    </form>
                  </li>
                </ul>
              </li>
              <li class="review-item">
                <div class="review-media"> <a class="review-avatar" href="#"> <img src="{{ '/themes/pro/modunawa/resources/images/avatar/04.jpg'}}" alt="review"> </a>
                  <h5 class="review-meta"> <a href="#">shipu shikdar</a> <span>June 02, 2020</span> </h5>
                </div>
                <ul class="review-rating">
                  <li class="icofont-ui-rating"></li>
                  <li class="icofont-ui-rating"></li>
                  <li class="icofont-ui-rating"></li>
                  <li class="icofont-ui-rating"></li>
                  <li class="icofont-ui-rate-blank"></li>
                </ul>
                <p class="review-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus hic amet qui velit, molestiae suscipit perferendis, autem doloremque blanditiis dolores nulla excepturi ea nobis!</p>
                <form class="review-reply">
                  <input type="text" placeholder="reply your thoughts">
                  <button type="button"><i class="icofont-reply"></i>reply</button>
                </form>
              </li>
            </ul>
          </div>
          <div class="product-details-frame">
            <h3 class="frame-title">add your review</h3>
            <form class="review-form">
              <div class="row">
                <div class="col-lg-12">
                  <div class="star-rating">
                    <input type="radio" name="rating" id="star-1">
                    <label for="star-1"></label>
                    <input type="radio" name="rating" id="star-2">
                    <label for="star-2"></label>
                    <input type="radio" name="rating" id="star-3">
                    <label for="star-3"></label>
                    <input type="radio" name="rating" id="star-4">
                    <label for="star-4"></label>
                    <input type="radio" name="rating" id="star-5">
                    <label for="star-5"></label>
                  </div>
                </div>
                <div class="col-lg-12">
                  <div class="form-group">
                    <textarea class="form-control" placeholder="Describe"></textarea>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="form-group">
                    <input type="text" class="form-control" placeholder="Name">
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="form-group">
                    <input type="email" class="form-control" placeholder="Email">
                  </div>
                </div>
                <div class="col-lg-12">
                  <button type="button" class="btn btn-inline"> <i class="icofont-water-drop"></i> <span>drop your review</span> </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!--=====================================
                    PRODUCT TAB PART END
        =======================================-->

<!--=====================================
                 PRODUCT RELATED PART START
        =======================================-->
<section class="detail_rel inner-section">
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="section-heading">
          <h2>연관상품</h2>
        </div>
      </div>
    </div>
    <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5">
    @forelse ($relatedItemGallery ?? [] as $item)
      <div class="col">
        <form class="product-card" action="{{ route('wish-list.favorite') }}" method="POST">
            @csrf
          <input type="hidden" name="item_id" value="{{ $item['Id'] }}">
          <div class="product-media">
            <div class="product-label">
{{--              <label class="label-text sale">sale</label>--}}
              <label class="label-text new">new</label>
            </div>
              @if (empty($item['BdPage']))
                  <button type="submit" class="product-wish wish">
                      <i class="far fa-heart"></i>
                  </button>
              @else
                  <button type="submit" class="product-wish wish">
                      <input type="hidden" name="_method" value="delete" />
                      <i class="fas fa-heart"></i>
                  </button>
              @endif
            <a class="product-image" href="{{ route('item-details', $item['C9'] ?: $item['Id']) }}"> <img src="{{ env('MEDIA_URL') . $item['C1'] }}" alt="product" onerror="this.src='/images/folder.jpg'"> </a>
          </div>
          <div class="product-content">
            <h6 class="product-name"> <a href="{{ route('item-details', $item['C9'] ?: $item['Id']) }}">{{ $item['C5'] }}</a> </h6>
            <h6 class="product-price">
              <span>{{ number_format($item['C7']) }} 원</span> </h6>
{{--            <button class="product-add" title="Add to Cart"> <i class="fas fa-shopping-basket"></i> <span>장바구니 담기</span> </button>--}}
          </div>
        </form>
      </div>
    @empty
    @endforelse
{{--      <div class="col">--}}
{{--        <div class="product-card product-disable">--}}
{{--          <div class="product-media">--}}
{{--            <div class="product-label">--}}
{{--              <label class="label-text sale">sale</label>--}}
{{--            </div>--}}
{{--            <button class="product-wish wish"> <i class="far fa-heart"></i> </button>--}}
{{--            <a class="product-image" href="item-detail.html"> <img src="{{ '/themes/pro/modunawa/resources/images/product/pic8.jpg'}}" alt="product"> </a>--}}
{{--          </div>--}}
{{--          <div class="product-content">--}}
{{--            <h6 class="product-name"> <a href="item-detail.html">fresh green chilis</a> </h6>--}}
{{--            <h6 class="product-price">--}}
{{--              <span>000,000,000 원</span> </h6>--}}
{{--            <button class="product-add" title="Add to Cart"> <i class="fas fa-shopping-basket"></i> <span>장바구니 담기</span> </button>--}}
{{--            <div class="product-action">--}}
{{--              <button class="action-minus" title="Quantity Minus"><i class="icofont-minus"></i></button>--}}
{{--              <input class="action-input" title="Quantity Number" type="text" name="quantity" value="1">--}}
{{--              <button class="action-plus" title="Quantity Plus"><i class="icofont-plus"></i></button>--}}
{{--            </div>--}}
{{--          </div>--}}
{{--        </div>--}}
{{--      </div>--}}
    </div>
{{--    <div class="row">--}}
{{--      <div class="col-lg-12">--}}
{{--        <div class="section-btn-25"> <a href="http://point2u.daboryhost.com/item-gallery" class="btn_more btn btn-outline"> <span>더보기 <img src="{{ '/themes/pro/modunawa/resources/images/home/icn_arrow.png'}}"></span> </a> </div>--}}
{{--      </div>--}}
{{--    </div>--}}
  </div>
</section>
<!--=====================================
                 PRODUCT RELATED PART END
        =======================================-->

@endsection

@push('js')
    <script>
        $(document).ready(function() {
            gtag("event",  "view_item",  {
                "items": [{
                    "item_id": "9bdd2",
                    "item_name": "Compton T-Shirt",
                    "price": "44.00",
                    "item_brand": "Compton",
                    "item_category": "T-Shirts",
                    "index": 0
                }],
                "currency": "USD"
            });
        });

        $('#cart-form').on('submit', function (event) {
            event.preventDefault()

            gtag("event",  "add_to_cart",  {
                "currency": "USD",
                "value": 25000,
                "items": [{
                    "item_id": "9bdd2",
                    "item_name": "Compton T-Shirt",
                    "price": "25000.00",
                    "quantity": 1,
                    "item_brand": "Compton",
                    "item_category": "T-Shirts",
                    "item_variant": "red",
                    "index": 0,
                    "size": "M"
                }]
            });

            this.submit()
        });

        $('#wish-list-form').on('submit', function (event) {
            event.preventDefault()

            $(this).append($('<input>', { 'type': 'hidden', 'name': 'wish_qty', 'value': $('#cart-form').find('#item-qty-txt').val() }))

            this.submit()
        });

        function click_buy_btn($this) {
            const $form = $this.closest('form')
            $($form).find('.button-prevent-multiple-submits').attr('disabled', true)
            $($form).append($('<input>', { 'type': 'hidden', 'name': 'purchase', 'value': true }))
            $form.submit()
        }
    </script>
@endpush