@extends('layouts.manage')

@section('title', __('manage.up-quantity'))

@section('header')
  <a href="{{ route('manage.product.quantity') }}" class="{{ Nav::isRoute('manage.product.quantity') }}">
    <span class="menu-icon">
      <img src="{{ asset($storage_url.'img/manage-icons/quantity.jpg') }}" alt="">
    </span><span class="menu-text">
      @lang('manage.quantity-manager')
    </span>
  </a>
@endsection

@section('content')

  <div class="container-fluid">
		<div class="row">

  		<div class="col-xs-12">

          <form action="{{ route('manage.product.quantity.up', $product->id) }}" method="POST" enctype="multipart/form-data" class="form-horizontal image-form">

            {{ csrf_field() }}
            {{ $method or method_field('POST') }}

            {{-- row --}}
            <div class="row">

              <div class="col-lg-12">
                <div class="form-group">
                  @include('backend.errors')
                </div>
              </div>

              {{-- left column for images thumbnails --}}
              <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">

                {{-- category --}}
                <div class="form-group">

                  <input type="text" class="form-control" readonly="true" value="{{ $product->category->category_name }}">

                </div>
                {{-- /. category --}}

                {{-- images --}}
                <div class="form-group">

                  <div class="upload-drop-zone" id="drop-zone">
                    <div class="caption-wrapper">
                      @php
                        if(count($product->details)) {
                          $detail = $product->details->first();
                        }
                      @endphp
                      @if (count($product->details))
                        <img id="thumbnail" src="{{ asset($storage_url.'img/products/'.$detail->detail_code.'/'.$detail->detail_image)}}"
                          class="img-responsive"
                          onerror="this.src='/images/img-error.png';">
                      @endif
                    </div>
                  </div>

                </div>
                {{-- /. images --}}

                {{-- thumbnails --}}
                <div class="row thumbnail-wrapper">

                  @isset ($product)
                    @if (count($product->details))
                      @foreach ($product->details as $detail)

                          <div class="col-lg-4 thumbnail-card">
                            <div class="card">
                              <img src="{{asset($storage_url.'img/products/'.$detail->detail_code.'/'.$detail->detail_image)}}" class="img-responsive">
                            </div>

                          </div>

                      @endforeach
                    @endif
                  @endisset

                </div>
                {{-- /. thumbnails --}}

              </div>
              {{-- /. left column for image thumbnails --}}

              {{-- right coulmn for input --}}
              <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 md-p-r-0">
                <div class="row">

                  {{-- product name --}}
                  <div class="col-lg-12">
                    <h2 class="m-t-0">{{ $product->product_name or '' }}</h2>
                  </div>
                  {{-- /. product name --}}

                  {{-- current in stock & up quantity --}}
                  <div class="col-lg-8">

                    <div class="row">
                      <div class="col-lg-9">
                        <h4>@lang('manage.current-quantity-in-stock')</h4>
                      </div>
                      <div class="col-lg-3 text-right">
                        <p id="stock">{{ $product->product_stock or '' }}</p>
                      </div>
                      <div class="col-lg-9">
                        <h4>@lang('manage.input-unit')</h4>
                      </div>
                      <div class="col-lg-3 text-right">
                        <input id="input" name="inputUnit" type="number" style="width: 100%" min="1">
                      </div>
                    </div>

                  </div>
                  {{-- /. current in stock & up quantity --}}

                  {{-- manual sales --}}
                  <div class="col-lg-4">
                    <select name="reason" class="selectpicker" data-width="100%">
                      <option value="production">@lang('manage.production')</option>
                      <option value="supplier">@lang('manage.supplier')</option>
                      <option value="adjustment">@lang('manage.stock-adjustment')</option>
                    </select>
                  </div>
                  {{-- /. manual sales --}}

                  {{-- new in stock --}}
                  <div class="col-lg-8">
                    <div class="row">
                      <div class="col-lg-9">
                        <h4>@lang('manage.new-quantity-in-stock')</h4>
                      </div>
                      <div class="col-lg-3">
                        <input id="total" type="number" style="width: 100%" readonly>
                      </div>
                    </div>
                  </div>
                  {{-- /. new instock --}}

                  {{-- validate --}}
                  <div class="col-lg-4">
                    <button type="submit" class="btn btn-sm btn-primary is-block">
                      @lang('manage.validate')
                    </button>
                  </div>
                  {{-- /. validate --}}

                </div>

                <center class="m-t-50">
                  {!! $chartStock->html() !!}
                </center>

              </div>
              {{-- /. right column for input --}}

            </div>
            {{-- /. row --}}

          </form>

			</div>
		</div>

	</div>
@endsection

@section('script')
  @parent

  {!! $chartStock->script() !!}
  <script>
    var stock = $("#stock").text()
    $("#input").bind("input propertychange", function() {
      var input = $(this).val()
      var total = parseInt(stock) + parseInt(input)
      $("#total").val(total)
    })
  </script>
@endsection
