@extends('home')
@section('title')
{{ __('Add') }}
@endsection
@section('styles')
<style media="screen">
.select2-dropdown.select2-dropdown--above .select2-results{display: none}
</style>
@endsection
@section('content')
  @php
    $data_product = get_setting('product');
  @endphp
{!! Form::open(array('route' => ['admin.product.store'],'files' => true ,'class' => 'form-horizontal','id' => 'myform')) !!}
<div class="page-bar">
  <ul class="page-breadcrumb">
    <li>
      <a href="{{ route('dashboard.home.page') }}">{{ __('Home') }}</a>
      <i class="fa fa-circle"></i>
    </li>
    <li>
      <a href="{!! URL::route('admin.product.index') !!}">{{ __('Product management') }}</a>
      <i class="fa fa-circle"></i>
    </li>
    <li>
      <strong>{{ __('Add') }}</strong> ({{ __('Item') }})
    </li>
  </ul>
  <div class="page-toolbar">
    <div class="btn-group pull-left">
      <div class="actions">
        <button name="submit" value="apply" type="submit" class="btn btn-primary tooltips" data-container="body" data-placement="right" data-original-title="{!! __('Update') !!}">
          <i class="fa fa-floppy-o"></i>
        </button>
        <a href="{!! URL::route('admin.product.index') !!}" class="btn btn-sm ">
          <i class="fa fa-times"></i> {{ __('Cancel') }}
        </a>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-8">
    <div class="portlet light bordered">
      @include('blocks.product.partial.top-tabs')
      <div class="portlet-body form">
        <hr class="col-md-11">
        @include('partials.nav-lang')
        <div class="tab-content">
          @foreach (config('translatable.locales') as $lang => $language)
            <div class="tab-pane fade @if ($loop->first) active @endif in" id="tab_1_{{$language}}">
              <div class="block-section">
                <div class="form-group">
                  <div class="col-md-2">
                    {{ __('Item title') }}
                  </div>
                  <div class="col-md-10">
                    <div class="input-icon right">
                      <input type="text" value="" class="form-control" name="title[{{$language}}]" @if ($loop->first) required @endif />
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-md-12">
                      <div class="note note-info">
                        {{ __('Description') }}
                      </div>
                    </div>
                    <div class="col-md-12">
                      <div class="input-icon right">
                        <textarea name="content[{{$language}}]" rows="4" class="form-control" id="my-editor-{{$language}}" @if ($loop->first) required @endif></textarea>
                        </div>
                      </div>
                    </div>
                    @if (@$data_product['details'] == 1)
                      <div class="form-group">
                        <div class="col-md-12">
                          <div class="note note-info">
                            {{ __('Details') }}
                          </div>
                        </div>
                        <div class="col-md-12">
                          <div class="input-icon right">
                            <input type="text" value="{{ @$data['details_title'][$language] }}" class="form-control" name="data[details_title][{{ $language }}]" placeholder="({!! __('Custom title') !!})"  />
                          </div>
                        </div>
                        <div class="col-md-12">
                          <div class="input-icon right">
                            <textarea name="technical[{{$language}}]" rows="4" class="form-control" id="my-technical-{{$language}}" @if ($loop->first) required @endif></textarea>
                            </div>
                          </div>
                        </div>
                    @endif

                    </div>
                    @if (@$data_product['attributes'] == 1)
                      @include('blocks.product.partial.meta-option')
                    @endif
                  </div>
                @endforeach
              </div>
              <hr>
            </div>
            @if (@$data_product['seo'] == 1)
              @include('partials.google-meta',['item' => ''])
            @endif
          </div>
        </div>
        <div class="col-md-4">
          @include('blocks.product.partial.media')
          <div class="portlet light bg-grey-cararra bg-font-grey-cararra">
            <div class="portlet-title">
              <div class="caption font-red-sunglo">
                <i class="icon-share font-red-sunglo"></i>
                <span class="caption-subject bold uppercase">{!! __('Status') !!}</span>
                <span class="caption-helper"></span>
              </div>
              <div class="actions">
              </div>
            </div>
            <div class="portlet-body">
              <ul class="list-group">
                <li class="list-group-item">{!! __('Date created') !!}
                  <span class="badge badge-default">
                  </span>
                </li>
                <li class="list-group-item">{!! __('Modified date') !!}
                  <span class="badge badge-info">
                  </span>
                </li>
              </ul>
              <div class="form-group">
                <label class="col-md-4">{{ __('Published') }}
                </label>
                <div class="col-md-8">
                  <div class="input-icon right">
                    <input name="publish" value="1" type="checkbox" class="make-switch" checked="checked" data-on-text="<i class='fa fa-check'></i>" data-off-text="<i class='fa fa-times'></i>">
                  </div>
                </div>
              </div>
              <div class="form-group center">
                <div class="btn-group btn-group-devided">
                  <button type="submit" class="btn green"> <i class="fa fa-edit"></i> {{ __('Save') }}</button>
                  <a href="{!! URL::route('admin.product.index') !!}" class="btn red ">
                    {{ __('Cancel') }}
                    <i class="fa fa-times"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
<ul class="m-nav-sticky">
<li class="m-nav-sticky__item " >
  <button name="submit" value="apply" type="submit" class="btn btn-primary tooltips" data-container="body" data-placement="left" data-original-title="Apply">
    <i class="fa fa-floppy-o"></i>
  </button>
</li>
<li class="m-nav-sticky__item " >
  <button name="submit" value="save" type="submit" class="btn btn-primary tooltips" data-container="body" data-placement="left" data-original-title="{!! __('Save & Close') !!}">
    <i class="fa fa-clipboard"></i>
  </button>
</li>
<li class="m-nav-sticky__item">
  <a  href="{!! URL::route('admin.product.index') !!}"  class="btn btn-primary tooltips" data-container="body" data-placement="left" data-original-title="{!! __('Cancel') !!}"><i class="fa fa-times"></i></a>
</li>
</ul>
{!! Form::close() !!}
<div class="modal fade bs-modal-lg" id="favoritesModal" tabindex="-1" role="dialog" aria-labelledby="favoritesModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span></button>
          <div class="well">
            {!! __('Related Pages') !!}
            <span class="badge badge-danger out-length" style="display:none"></span>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-2">
              <div class="form-group ">
                <label for="multi-prepend" class="control-label">
                  <i class=" icon-layers font-green"></i>
                  <span class="caption-subject font-green bold "></span>
                  <span class="caption-subject bold font-purple-plum ">{{ __('Category') }}</span>
                  <span class="caption-helper"></span>
                </label>
              </div>
            </div>
            <div class="col-md-4">
              <select class="form-control select2 " data-placeholder="{{ __('Select') }}" name="cate_id" id="cate_id" style="width: 100%;">
                <option value="0" >{!! __('All') !!}</option>
                @foreach ($categories as $item)
                  <option value="{{ $item->id }}" @if (@$item->children()->count()) disabled="disabled" @endif> @if ($item->depth > 1) {!! str_repeat('-',$item->depth) !!}<i class="fa fa-angle-right" aria-hidden="true"></i> @endif {{ $item->title }}
                  </option>
                @endforeach
              </select>
            </div>
            <div class="col-md-3">
              <div class="form-group ">
                <input type="text" id="tagSearch" name="tagSearch" value=""  class="form-control">
              </div>
            </div>
            <div class="col-md-1">
              <div class="form-group ">
                <a id="tag-search" href="javascript:;" class="btn btn purple-sharp"><i class="icon-magnifier"></i></a>
              </div>
            </div>
            <div class="col-md-1">
              <div class="">
                <span >
                </span>
              </div>
            </div>
          </div>
          <div >
            <div class="go-spinner">
              <div class="note note-info">
                <h4 class="block center" style="text-align: center;">
                  {!! __('Searching') !!} <img src="{!! asset('images/spinner.gif') !!}" alt="" width="50"></h4>
                  <p>  </p>
                </div>
              </div>
              <ul class="list-group" id="related-outer">
              </ul>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">{!! __('Close') !!}</button>
          </div>
        </div>
      </div>
    </div>
@endsection
@section('scripts')
  {!! Html::script(Theme::current()->assetPath.'/jquery-repeater/jquery.repeater.js') !!}
  {!! Html::script(Theme::current()->assetPath.'/jquery.filer/js/jquery.filer.js') !!}
  {!! Html::script(Theme::current()->assetPath.'/jquery.filer/js/custom.js') !!}
  {!! Html::script(Theme::current()->assetPath.'/global/plugins/jquery-validation/js/jquery.validate.min.js') !!}
  {!! Html::script(Theme::current()->assetPath.'/global/plugins/jquery-validation/js/additional-methods.min.js') !!}
  <script type="text/javascript">
    (function($) {
      $.fn.inputFilter = function(inputFilter) {
        return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
          if (inputFilter(this.value)) {
            this.oldValue = this.value;
            this.oldSelectionStart = this.selectionStart;
            this.oldSelectionEnd = this.selectionEnd;
          } else if (this.hasOwnProperty("oldValue")) {
            this.value = this.oldValue;
            this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
          } else {
            this.value = "";
          }
        });
      };
    }(jQuery));
    jQuery(document).ready(function($){
      $.validator.messages.required = "{{ __('This field is required.') }}";
      $.validator.messages.digits = "{{ __('Please enter only digits') }}";
      $.validator.messages.email = "{{ __('Please enter a valid email address.') }}";
      $.validator.messages.equalTo = "{{ __('Passwords do not match') }}";

      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });
      $('.repeater').repeater({
              defaultValues: {
              },
              show: function () {
                $(this).slideDown();
              },
              hide: function (deleteElement) {
                // if(confirm('Are you sure you want to delete this element?')) {
                //     $(this).slideUp(deleteElement);
                // }
                $(this).slideUp(deleteElement);
              },
              ready: function (setIndexes) {
              }
            });
      $("select").select2();
      $(".intTextBox").inputFilter(function(value) {
        return /^-?\d*$/.test(value); });
        $(".uintTextBox").inputFilter(function(value) {
          return /^\d*$/.test(value); });
          /************************/
          $('.go-spinner').hide();
          $('#tagSearch').keypress(function(e){
            if(e.which == 13){//Enter key pressed
              $('#tag-search').click();//Trigger search button click event
            }
          });
          $(document).on('click','#go-modal',function() {
            var related = $('#related');
            related.find('option').not(':selected').remove();
            var length = related.children('option').length;
            if (length > 5) {
              toastr.warning('{!! __('News related not more than 6 only') !!}', '{!! __('Warning') !!}', {timeOut: 5000});
            }else {
              $('#favoritesModal').modal('show');
            }
            return false;
          });
          $(document).on('shown.bs.modal','#favoritesModal',function() {
            $('#tagSearch').val('');
            $('#related-outer').empty();
            var related = $('#related');
            related.find('option').not(':selected').remove();
            var length = related.children('option').length;
            $('.out-length').text(length);
            if (length > 5) {
              $('#favoritesModal').modal('hide');
            }
          });
          $(document).on('click','.add-tag',function() {
            var tag_id = $(this).data('id');
            var tag_value = $(this).data('value');
            var related = $('#related');
            related.append("<option value='"+ tag_id +"'>" + tag_value + "</option>");
            related.find('option').prop("selected",true);
            related.trigger('change');
            var length = related.children('option').length;
            $('.out-length').show();
            $('.out-length').text(length);
            $('.tag-row-'+tag_id).remove();
            if (length > 5) {
              $('#favoritesModal').modal('hide');
              $('#related-outer').empty();
            }
          });
          $('#tag-search').on('click', function() {
            var serch = $('#tagSearch').val();
            if (serch.length < 3) {
              return false;
            }
            $('#related-outer').empty();
            $('.go-spinner').show();
            var cate_id = $('#cate_id').val();
            var length = $('#related').children('option').length;
            if (length > 5) {
              $('#favoritesModal').modal('hide');
            }
            $.ajax({
              data: {serch:serch,cate_id:cate_id},
              type: 'POST',
              url: '{!! route('product.autocomplete.ajax') !!}',
              success:function(data){
                var related = $('#related-outer');
                related.empty();
                $.each(data, function(index, element) {
                  related.append('<li class="list-group-item tag-row-'+ element.id +'">'+ element.id +'< - >' + element.title + '<span class="badge badge-success"><a class="add-tag" data-id="'+ element.id +'"  data-value="'+ element.title.replace('"', "") +'" > {!! __("Add") !!} </a></span></li>');
                });
                $('.go-spinner').hide();
                $('#tagSearch').attr("placeholder", serch);
                $('#tagSearch').val('');
              }
            });
          });
          /************************/
          $('#related').select2();
          $("#myform").validate({
            rules: {
            },
            highlight: function (element, errorClass, validClass) {
              if (element.type === "radio") {
                this.findByName(element.name).addClass(errorClass).removeClass(validClass);
              } else {
                $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
                $(element).closest('.form-group').find('i.fa').remove();
              }
            },
            unhighlight: function (element, errorClass, validClass) {
              if (element.type === "radio") {
                this.findByName(element.name).removeClass(errorClass).addClass(validClass);
              } else {
                $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
                $(element).closest('.form-group').find('i.fa').remove();
              }
            },
            errorElement: 'span',
            errorClass: 'help-block',
            errorPlacement: function (error, element) {
              if (element.parent('.input-group').length) {
                error.insertAfter(element.parent());
              } else {
                error.insertAfter(element.parent());
              }
            },
            invalidHandler: function(event, validator) {
              // 'this' refers to the form
              var errors = validator.numberOfInvalids();
              if (errors) {
                var message = errors == 1
                ? 'You missed 1 field. It has been highlighted'
                : 'You missed ' + errors + ' fields. They have been highlighted';
                $("div.error span").html(message);
                $("div.error").show();
              } else {
                $("div.error").hide();
              }
            }
          });
        });
      </script>
      <script>
        jQuery(document).ready(function($){
          'use strict';
          var price = $('#product-price').val();
          var offer = $('#product-offer').val();
          var out = (offer*100/price); //its convert 10 into 0.10
          if (price < 1) {
            out = 0;
          }
          else {
            if (offer != '' && price != '') {
              $('#product-percent').val(100-parseInt(out));
            }else{
              $('#product-percent').val(100-parseInt(out));
            }
          }
          $(document).on("change keyup blur", "#product-percent", function() {
            var price = $('#product-price').val();
            var percent = $('#product-percent').val();
            var out = (percent*price/100); //its convert 10 into 0.10
            if (percent != '' && price != '') {
              $('#product-offer').val((parseInt(price)) - (parseInt(out)));
            }else{
              $('#product-offer').val(parseInt(out));
            }
          });
          $(document).on("change keyup blur", "#product-offer", function() {
            var price = $('#product-price').val();
            var offer = $('#product-offer').val();
            var out = (offer*100/price); //its convert 10 into 0.10
            if (offer != '' && price != '') {
              $('#product-percent').val(100-parseInt(out));
            }else{
              $('#product-percent').val(100-parseInt(out));
            }
          });
          /************************/
          $('#video-url').keyup(function () {
          }).keyup();
          $('#video-url').on('blur', function () {
            var video_url = $(this).val();
            var videoid = video_url.match(/(?:https?:\/{2})?(?:w{3}\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\?v=|\/)([^\s&]+)/);
            if(videoid != null) {
              $(this).val(videoid[1])
            }
            var frm_url = $(this).val();
            $('#youtube_iframe').attr('src', 'https://www.youtube.com/embed/' + frm_url);
            $('#youtube_iframe').css("display","block");
          });
          if (!$().confirmation) {
            return;
          }
          $('[data-toggle=confirmation]').confirmation({ btnOkClass: 'btn btn-sm btn-success', btnCancelClass: 'btn btn-sm btn-danger'});
        });
      </script>
      {!! Html::script( asset('vendor/unisharp/laravel-ckeditor/ckeditor.js') ) !!}
      <script type="text/javascript" charset="utf-8">
      var route_prefix = "{{ url(config('lfm.url_prefix')) }}";
      var options_ar = {
        contentsLangDirection : 'rtl',
        dialog_buttonsOrder : 'rtl',
        language : 'ar',
        filebrowserImageBrowseUrl: route_prefix + '?type=Images',
        filebrowserImageUploadUrl: route_prefix + '/upload?type=Images&_token={{ csrf_token() }}',
        filebrowserBrowseUrl: route_prefix + '?type=Files',
        filebrowserUploadUrl: route_prefix + '/upload?type=Files&_token={{ csrf_token() }}'
      };
      var options_en = {
        filebrowserImageBrowseUrl: route_prefix + '?type=Images',
        filebrowserImageUploadUrl: route_prefix + '/upload?type=Images&_token={{ csrf_token() }}',
        filebrowserBrowseUrl: route_prefix + '?type=Files',
        filebrowserUploadUrl: route_prefix + '/upload?type=Files&_token={{ csrf_token() }}'
      };
      @foreach (config('translatable.locales') as $lang => $language)
      @if ($language == 'ar')
      CKEDITOR.replace('my-editor-{{ $language }}', options_ar);
      CKEDITOR.replace('my-technical-{{ $language }}', options_ar);
      @else
      CKEDITOR.replace('my-editor-{{ $language }}', options_en);
      CKEDITOR.replace('my-technical-{{ $language }}', options_en);
      @endif
      @endforeach
      </script>
      <script>
        {!! \File::get(base_path('vendor/unisharp/laravel-filemanager/public/js/lfm.js')) !!}
        $('#lfm').filemanager('image', {prefix: route_prefix});
      </script>
    @endsection