@extends('layouts.manage')

@section('title', isset($title) ? $title : __('manage.add-new-product'))

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

@section('content')

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

  		<div class="col-xs-12">
				<section id="message-banner" class="panel">

				<div class="panel-body">

          <form action="{{ $route or route('manage.product.store') }}" method="POST" enctype="multipart/form-data" class="form-horizontal image-form">
            <input type="hidden" name="code" value="{{ $code or '' }}">

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

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

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

              {{-- category --}}
              <div class="col-lg-6 col-lg-offset-3">
                 <div class="form-group">
                    @isset($method)
                      <label for="owner" class="control-label">@lang('manage.category')</label>
                    @endisset

                    <select class="selectpicker" title="@lang('manage.category')" data-width="100%" name="category">
                    @isset($categories)
                      @foreach($categories as $category)

                        <option value="{{ $category->id }}"
                          @isset($product)
                            @if($category->id == $product->product_category) selected @endif
                          @endisset >
                          {{ $category->category_name }}
                        </option>

                      @endforeach
                    @endisset
                  </select>

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

              {{-- images --}}
              <div class="col-lg-6 col-lg-offset-3">
                <div class="form-group">

                  <div class="upload-drop-zone" id="drop-zone">
                    <div class="caption-wrapper">
                      <img id="thumbnail" src="" class="img-responsive" onerror="this.src='/images/img-error.png';">
                      <p id="caption" class=""></p>
                    </div>
                    <input type="file" name="image" id="photo">
                  </div>

                  <div class="progress" id="progress">
                    <div class="progress-bar bg-danger"
                      role="progressbar" style="width: 0%"
                      aria-valuenow="0" aria-valuemin="0"
                      aria-valuemax="100">
                    </div>
                  </div>

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

              {{-- thumbnails --}}
              <div class="col-lg-6 col-lg-offset-3">
                <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">
                            <a href="{{ route('manage.product.delete-image', $detail->id) }}" class="btn-rounded ajax-delete">
                              <i class="fa fa-trash"></i>
                            </a>
                          </div>

                        </div>
                      @endforeach
                    @endif
                  @endisset


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

              {{-- Language tab --}}
              @if (config('corepackage.locales.activate'))
              <div class="row">
                <div class="col-lg-6 col-lg-offset-3">
                  <div class="form-group">

                  <ul class="nav nav-tabs m-t-20">
                    @foreach(config('translatable.locales') as $lang => $language)
                      <li class="@if($loop->first) active @endif">
                        <a href="#product{{ $lang }}" data-toggle="tab">{{ $language }}</a>
                      </li>
                    @endforeach
                  </ul>

                  </div>
                </div>
              </div>
              @endif
              {{-- Language tab --}}

              {{-- Tab content --}}
              <section class="tab-content">

                @foreach(config('translatable.locales') as $lang => $language)

                  <div class="tab-pane @if($loop->first) active @endif" id="product{{ $lang }}">
                  <br>

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

                      {{-- name --}}
                      <div class="col-lg-6 col-lg-offset-3">
                        <div class="form-group">
                          @isset($method)
                            <label for="name" class="control-label">@lang('manage.name')</label>
                          @endisset
                          <input type="text" name="name[{{ $lang }}]"
                            class="form-control" placeholder="@lang('manage.name')"
                            value="{{ isset($product) ? $product->hasTranslation($lang) ? $product->translate($lang)->product_name : old('name.'.$lang) : old('name.'.$lang) }}">
                        </div>
                      </div>
                      {{-- /. name --}}

                      {{-- description --}}
                      <div class="col-lg-6 col-lg-offset-3">
                        <div class="form-group">
                          @isset($method)
                            <label for="content" class="control-label">@lang('manage.description')</label>
                          @endisset
                          <textarea name="content[{{ $lang }}]"
                            class="form-control editor"
                            placeholder="@lang('manage.description')" rows="10">{{ isset($product) ? $product->hasTranslation($lang) ? $product->translate($lang)->product_content : old('content.'.$lang) : old('content.'.$lang) }}</textarea>
                        </div>
                      </div>
                      {{-- /. description --}}

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

                  </div>

                @endforeach

              </section>
              {{-- /. Tab content --}}

              {{-- weight --}}
              <div class="col-lg-6 col-lg-offset-3">
                <div class="form-group">
                  @isset($method)
                    <label for="weight" class="control-label">@lang('manage.weight')</label>
                  @endisset
                  <input type="number" name="weight"
                    class="form-control" placeholder="@lang('manage.weight')"
                    value="{{ $product->product_weight or old('weight') }}">
                </div>
              </div>
              {{-- /. weight --}}

              <div class="col-lg-6 col-lg-offset-3">
                <div class="row">

                    {{-- price --}}
                    <div class="col-lg-6">
                      <div class="form-group" style="margin-right: -10px">
                        @isset($method)
                          <label for="price" class="control-label">@lang('manage.price')</label>
                        @endisset
                        <input type="number" name="price"
                          class="form-control" placeholder="@lang('manage.price')"
                          value="{{ $product->product_price or old('price') }}">
                      </div>
                    </div>
                    {{-- /. price --}}

                    {{-- cost --}}
                    <div class="col-lg-6">
                      <div class="form-group" style="margin-left: -10px">
                        @isset($method)
                          <label for="cost" class="control-label">@lang('manage.cost')</label>
                        @endisset
                        <input type="number" name="cost"
                          class="form-control" placeholder="@lang('manage.cost')"
                          value="{{ $product->product_cost or old('cost') }}">
                      </div>
                    </div>
                    {{-- /. cost --}}

                </div>
              </div>

              {{-- min quantity --}}
              <div class="col-lg-6 col-lg-offset-3">
                <div class="form-group">
                  @isset($method)
                    <label for="minQuantity" class="control-label">@lang('manage.min-quantity-in-stock')</label>
                  @endisset
                  <input type="number" name="minQuantity"
                    class="form-control" placeholder="@lang('manage.min-quantity-in-stock')"
                    value="{{ $product->product_min_quantity or old('minQuantity') }}">
                </div>
              </div>
              {{-- /. min quantity --}}

              {{-- buttons --}}
              <div class="col-lg-6 col-lg-offset-3">
                <div class="form-group">
                  <button class="btn btn-primary btn-sm is-full-width" type="submit">@lang('manage.save')</button>
                </div>
              </div>
              {{-- /. buttons --}}


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

          </form>
        </div>
				</section>

			</div>
		</div>

	</div>
@endsection

@section('script')
  <script>
    @parent

    $('#photo').fileupload({
      url: '{{ route("manage.upload") }}',
      dataType: 'json',
      formData: {code: '{{ $code or '' }}'},
      headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
      },
      error: function(msg) {
        console.log(msg)
        if( msg.status === 401 ) {
          $(location).prop('pathname', 'auth/login');
        }
        if ( msg.status === 422 ) {
          var errors = msg.responseJSON;
          $.each( errors.code, function(key, value) {
              toastr.error(value);
          });
        }
        if ( msg.status === 500 ) {
          toastr.error(msg.statusText);
        }
        else {
          toastr.error(msg.statusText);
        }
      },
      success: function (data) {
        if(data.status == 1) {
          toastr.success(data.message);
          $('#progress .progress-bar').css(
              'width', '0%'
          );
          $(".thumbnail-wrapper").append(data.newItem)
        } else if(data.status == 0) {
          toastr.error(data.message)
          $('#progress .progress-bar').css(
            'width', '0%'
          );
        }
      },
      progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .progress-bar').css(
          'width',
          progress + '%'
        );
      }
    }).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');
  </script>
@endsection
