@include('layout.header')

<section id="content">
  <section class="bgGrey py-4">

    @foreach ($souvenir as $item)
    <div id="listProduk">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="designStandar mb-3">
              <div class="listboxProduk">
                <div class="row">
                  <div class="col-12 col-lg-12 p-2">
                    <div class="souvenir">
                      <div class="boxContentProduk">
                        <div class="row">
                          <div class="col-4 col-lg-4 p-0">
                            <!-- Primary carousel image -->

                            <div class="show" href="{{$item->images[0]->image}}">
                              <img src="{{$item->images[0]->image}}" id="show-img">
                            </div>

                            <!-- Secondary carousel image thumbnail gallery -->

                            <div class="small-img">
                              <img src="{{asset('assets')}}/jquery-zoom-image-carousel/images/next-icon.png" class="icon-left" alt="" id="prev-img">
                              <div class="small-container">
                                <div id="small-img-roll">
                                  @foreach ($item->images as $image)
                                  <img src="{{$image->image}}" class="show-small-img" alt="">
                                  @endforeach
                                </div>
                              </div>
                              <img src="{{asset('assets')}}/jquery-zoom-image-carousel/images/next-icon.png" class="icon-right" alt="" id="next-img">
                            </div>
                          </div>
                          <div class="col-8 col-lg-8 p-0 pl-5">
                            @if (\Session::has('success'))
                              <div class="alert alert-success">
                                <ul class="m-0 pl-3">
                                  <li>{!! \Session::get('success') !!}</li>
                                </ul>
                              </div>
                            @endif
                            @if($errors->any())
                              <div class="alert alert-danger">
                                <ul class="m-0 pl-3">
                                  <li>{{$errors->first()}}</li>
                                </ul>
                              </div>
                            @endif
                            <form id="order" action="{{url('/souvenir/order')}}" method="post">
                              <div class="row m-0 p-0 pr-5">
                                {{ csrf_field() }}
                                <input type="hidden" name="souvenir_id" value="{{$item->id}}">
                                <div class="col-8 col-lg-8 p-0 pr-4">
                                  <h5>{{$item->name}}</h5>
                                  <div class="w-100" style="border-bottom: 1px solid #d0d0d0;padding-top: 10px;padding-bottom: 13px;">
                                    <span class="text-bold" style="border-bottom: 2px solid #004662;padding-bottom: 15px;">Description</span>
                                  </div>
                                  <div class="description-news-detail pt-4">
                                    {!! $item->description !!}
                                  </div>
                                </div>
                                <div class="col-4 col-lg-4 p-0">
                                  <div style="border: 1px solid #e5eaf4;padding: 15px;">
                                    <table style="width: 100%;">
                                      <tr style="border-bottom: 1px solid #e5eaf4;">
                                        <td class="text-left pb-2">
                                          <span style="font-size: 14px;color: #9a9a9a;">Price</span>
                                        </td>
                                        <td class="text-right pb-2">
                                          <span style="font-size: 20px;font-weight: bold;">Rp {{number_format($item->price,0,",",".")}}</span>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td class="text-left pt-3 pb-2">
                                          <span style="font-size: 14px;color: #9a9a9a;">Total</span>
                                        </td>
                                        <td class="text-right pt-3 pb-2">
                                          <span style="font-size: 14px;">Limited Stock < {{$item->stock}}</span>
                                          <input type="hidden" id="limited_stock" value="{{$item->stock}}">
                                        </td>
                                      </tr>
                                      <tr>
                                        <td class="text-left pt-2 pb-2">&nbsp;</td>
                                        <td class="text-right pt-2 pb-2">
                                          <div class="input-group mb-2">
                                            <div class="input-group-prepend">
                                              <button class="btn btn-outline-secondary" type="button" id="button-addon1">-</button>
                                            </div>
                                            <input type="text" name="qty" id="qty" class="form-control text-center" value="{{old('qty') ?? 1}}">
                                            <div class="input-group-append">
                                              <button class="btn btn-outline-secondary" type="button" id="button-addon2">+</button>
                                            </div>
                                          </div>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td colspan="2">
                                          <div class="form-group">
                                            <textarea class="form-control" name="purpose" id="purpose" rows="4" placeholder="Tujuan (Contoh: Memberikan penghargaan kepada best karyawan cabang)" required>{{old('purpose')}}</textarea>
                                          </div>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td colspan="2">
                                          <input type="date" class="form-control" id="deadline" name="deadline" required value="{{old('description')}}">
                                        </td>
                                      </tr>
                                      <tr>
                                        <td colspan="2" class="pt-2 pb-2">
                                          <button type="button" class="btn btn-danger w-100" data-toggle="modal" data-target="#confirm">Order</button>
                                        </td>
                                      </tr>
                                    </table>
                                  </div>
                                </div>
                              </div>
                            </form>
                          </div>
                        </div>
                        
                      </div>
                    </div>
                  </div>
                </div>

              </div>

              {{-- RELATED SOUVENIR --}}
              <div class="container mt-4">
                <div class="row" id="souvenir">
                  <div class="col-lg-12">
                    <div class="heading mb-3">
                      <h2>Related Product List</h2>
                    </div>
                  </div>
                  <div class="col-lg-12">
                    <div id="carousel-2" class="owl-carousel owl-theme">
                      @foreach ($others as $souvenir_item)
                      <div class="item">
                        <div class="boxProduk">
                          @if (count($souvenir_item->images) > 0)
                            <div class="boxImg" style="height: 220px;width: 200px;background-color: white;border-radius: 8px;">
                              <img src="{{$souvenir_item->images[0]->image}}" alt="{{$souvenir_item->name}}">
                            </div>
                          @endif
                          <div class="descProduk">
                            <div class="titleProduk">
                              <a href="{{url('/souvenir/'.$souvenir_item->id.'/'.str_slug($souvenir_item->name,'-'))}}">
                                <span>{{$souvenir_item->name}}</span>
                              </a>
                            </div>
                            <div class="stock">
                              <span>Stock : {{$souvenir_item->stock}} Item</span>
                            </div>
                            <div class="price">
                              <span>Rp {{number_format($souvenir_item->price,0,",",".")}}</span>
                            </div>
                          </div>
                          <div class="boxCart">
                            <a href="{{url('/souvenir/'.$souvenir_item->id.'/'.str_slug($souvenir_item->name,'-'))}}">
                              <img src="{{asset('assets')}}/img/iconCart.png">
                            </a>
                          </div>
                          <div class="boxLove">
                            <a href="javascript:void(0)">
                              <div class="bgLove">
                                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-heart" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                                </svg>
                              </div>
                            </a>
                          </div>
                        </div>
                      </div>
                      @endforeach
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {{-- MODAL CONFIRM --}}
        <div class="modal fade" id="confirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width: 100%;height: 100%;">
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                Order Confirmation
              </div>
              <div class="modal-body">
                Are you sure want to order souvenir <b>{{$item->name}}</b> ?  
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button class="btn btn-danger btn-ok text-white" onclick="submit()">Order</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    @endforeach

  </section>
</section>
<script>

  let btnMinQty = document.getElementById("button-addon1")
  let btnMaxQty = document.getElementById("button-addon2")
  let elQty = document.getElementById("qty")
  let elLimitedStock = document.getElementById("limited_stock")

  elQty.addEventListener("change", function(e) {
    if(parseInt(e.target.value) <= 0) {
      this.value = 1
    } else if(hasMaxValue(e.target.value, elLimitedStock.value)) {
      this.value = elLimitedStock.value
    }
  })

  btnMinQty.addEventListener("click", function(e) {
    if(!hasMinValue(elQty.value, 1)) {
      elQty.value = parseInt(elQty.value) - 1
      return
    }

    alert("Minimum Qty 1");
  })

  btnMaxQty.addEventListener("click", function(e) {
    if(!hasMaxValue(elQty.value, elLimitedStock.value)) {
      elQty.value = parseInt(elQty.value) + 1
      return
    }

    alert("Maximum Qty " + elLimitedStock.value);
  })

  function hasMinValue(value, min) {
    if(parseInt(value) <= parseInt(min)) {
      return true;
    }

    return false;
  }

  function hasMaxValue(value, max) {
    if(parseInt(value) >= parseInt(max)) {
      return true;
    }

    return false;
  }

function submit(){
  $("#order").submit()
}
</script>
<style>
.modal-backdrop {
  height: 100%;
  width: 100%;
}
</style>

@include('layout.footer')