@extends('home')
@section('title')
  {{ __('Add') }}
@endsection
@section('styles')
@endsection
@section('content')
  {!! 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">
        <div class="portlet-title">
          <div class="caption font-red-sunglo">
            <i class="icon-settings font-red-sunglo"></i>
            <span class="caption-subject bold uppercase"> {{ __('Product Data') }}</span>
          </div>
          <div class="actions">
          </div>
        </div>
        <div class="portlet-body form">
          <div class="row">
            <div class="col-md-6">
              <div class="portlet light bordered">
                <div class="portlet-body form">
                  <div class="form-group no-padding">
                    <label class="col-md-4 " for="category_id">{{ __('Category') }}</label>
                    <div class="col-md-8">
                      <div class="input-group">
                        <select class="select-chosen required" data-placeholder="{{ __('Select') }}" name="category_id" id="category_id" style="width: 100%;" >
                          <option value="">{{ __('Select') }}</option>
                          @foreach ($categories as $item)
                            <option value='{{ $item->id }}'>
                            @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 class="input-group-addon input-circle-right"></div>
                    </div>
                  </div>
                </div>
                <div class="form-group no-padding">
                  <label class="col-md-4 " for="unit_id">{{ __('Product brand') }}</label>
                  <div class="col-md-8">
                    <div class="input-group">
                      <select class="select-chosen required" data-placeholder="{{ __('Select') }}" name="unit_id" id="unit_id" style="width: 100%;" >
                        <option value="">{{ __('Select') }}</option>
                        @foreach ($units as $unit)
                          <option value='{{ $unit->id }}'>
                          {{ $unit->title }}
                        </option>
                      @endforeach
                    </select>
                    <div class="input-group-addon input-circle-right"></div>
                  </div>
                </div>
              </div>
              <div class="form-group no-padding">
                <label class="col-md-4 " for="product-stock">{{ __('Quantity') }}</label>
                <div class="col-md-8">
                  <div class="input-group">
                    <input value="" type="digits" id="product-stock" name="stock" class="form-control" placeholder="0,00" required>
                    <div class="input-group-addon input-circle-right"></div>
                  </div>
                </div>
              </div>
              <div class="form-group no-padding">
                <label class="col-md-4 " for="product-stock_min">{{ __('Minimum') }}</label>
                <div class="col-md-8">
                  <div class="input-group">
                    <input value="" type="digits" id="product-stock_min" name="stock_min" class="form-control" placeholder="0,00">
                    <div class="input-group-addon input-circle-right"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="portlet light bordered">
            <div class="portlet-body form">
              <div class="form-group no-padding">
                <label class="col-md-4 " for="product-price">{{ __('Selling price') }}</label>
                <div class="col-md-8">
                  <div class="input-group">
                    <input value="" type="digits" id="product-price" name="price" class="form-control" placeholder="0,00" required>
                    <div class="input-group-addon input-circle-right">{!! __('EGP') !!}</div>
                  </div>
                </div>
              </div>
              <div class="form-group no-padding">
                <label class="col-md-4 " for="price_cost">{{ __('Cost price') }}</label>
                <div class="col-md-8">
                  <div class="input-group">
                    <input value="" type="digits" id="price_cost" name="price_cost" class="form-control" placeholder="0,00">
                    <div class="input-group-addon input-circle-right">{!! __('EGP') !!}</div>
                  </div>
                </div>
              </div>
              <div class="form-group no-padding">
                <label class="col-md-4 " for="product-price">{{ __('Discount') }}</label>
                <div class="col-md-8">
                  <div class="input-group">
                    <input value="" type="digits" id="product-offer" name="offer" class="form-control" placeholder="0,00">
                    <div class="input-group-addon input-circle-right">{!! __('EGP') !!}</div>
                  </div>
                </div>
              </div>
              <div class="form-group no-padding">
                <label class="col-md-4 " for="product-price">{{ __('Percent') }}</label>
                <div class="col-md-8">
                  <div class="input-group">
                    <input type="digits" id="product-percent" name="percent" class="form-control" placeholder="0">
                    <div class="input-group-addon input-circle-right"> &nbsp;&nbsp;%&nbsp;&nbsp; </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        @role(['Administrator','Root'])
        <div class="col-md-12">
          <div class="portlet light bordered">
            <div class="portlet-body form">
              <div class="form-group {{ $errors->has('country_id') ? ' has-error' : '' }}">
                <label for="country_id" class="col-md-4 ">{!! __('Country') !!}</label>
                <div class="col-md-6">
                  <select style="width: 100%;" class="form-control required @error('country_id') error @enderror" id="country_id" name="country_id"  style="width:100%">
                    <option value="">{!! __('Select') !!}</option>
                    @foreach ($countries as $key => $country)
                      <option value="{!! $country->id !!}">{!! $country->name !!}
                    </option>
                  @endforeach
                </select>
              </div>
            </div>
            </div>
          </div>
        </div>
        @endrole



      </div>
      <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>
              <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">
                    <textarea name="technical[{{$language}}]" rows="4" class="form-control" id="my-technical-{{$language}}" @if ($loop->first) required @endif></textarea>
                  </div>
                </div>
              </div>
            </div>
          </div>
        @endforeach
      </div>
      <hr>
    </div>
    @include('partials.google-meta',['item' => ''])
  </div>
</div>
<div class="col-md-4">
  <div class="portlet box blue">
    <div class="portlet-title">
      <div class="caption" style="padding
      :2px"></div>
      <ul class="nav nav-tabs">
        <li class="active">
          <a href="#portlet_tab1" data-toggle="tab">{{ __('Image') }}</a>
        </li>
        <li>
          <a href="#portlet_tab2" data-toggle="tab">{{ __('Video') }}</a>
        </li>
        <li>
          <a href="#portlet_tab3" data-toggle="tab">{{ __('Gallery') }}</a>
        </li>
      </ul>
    </div>
    <div class="portlet-body">
      <div class="tab-content">
        <div class="tab-pane active" id="portlet_tab1">
          <div class="form-group">
            <img id="holder" style="max-width: 100%;" src="{{ asset('images/no-image.png') }}" />
            <p class="legend"> {!! __('Image size') !!} (500×500) {!! __('px') !!}</p>
            <div class="input-group">
              <span class="input-group-btn">
                <a id="lfm" data-input="thumbnail" data-preview="holder" class="btn btn-primary">
                  <i class="fa fa-picture-o"></i> {{ __('Choose Image') }}
                </a>
              </span>
              <input readonly id="thumbnail" value="" class="form-control" type="text" name="photo">
            </div>
          </div>
        </div>
        <div class="tab-pane" id="portlet_tab2">
          <div class="form-group">
            <iframe  style="background:url('{{ asset('images/no-image.png') }}')"  id="youtube_iframe" width="100%" height="200"  frameborder="0" allowfullscreen></iframe>
          </div>
          <div class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <a class="btn btn-primary">
                  <i class="fa fa-youtube-square"></i> {{ __('Youtube URL') }}
                </a>
              </span>
              <input id="video-url" class="form-control" type="text" name="video" value="" >
            </div>
            <div class="clearfix margin-bottom-10"> </div>
          </div>
        </div>
        <div class="tab-pane" id="portlet_tab3">
          <input type="file" name="files[]" id="filer_input2" multiple="multiple">
        </div>
      </div>
    </div>
  </div>
  <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() !!}
@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">
    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') }}";
      $("#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';
      $("select").select2();
      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 = {
      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)
      CKEDITOR.replace('my-editor-{{$language}}', options);
      CKEDITOR.replace('my-technical-{{$language}}', options);
    @endforeach
  </script>
  <script>
    {!! \File::get(base_path('vendor/unisharp/laravel-filemanager/public/js/lfm.js')) !!}
    $('#lfm').filemanager('image', {prefix: route_prefix});
  </script>
@endsection