@extends('home')
@section('styles')
  {!! Html::style(Theme::current()->assetPath.'/global/plugins/bootstrap-colorpicker/css/colorpicker.css') !!}
@endsection
@section('content')
  <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>
        <span>{{ __('Edit Product') }}</span>
      </li>
    </ul>
    <div class="page-toolbar">
      <div class="btn-group pull-left">
        <div class="actions">
          <a href="{!! URL::route('admin.product.index') !!}" class="btn btn-sm green">
            <i class="fa fa-newspaper-o"></i> {{ __('All Products') }}
          </a>
          <a href="{{ URL('dashboard') }}" class="btn btn-sm grey-cascade">
            <i class="fa fa-home"></i> {{ __('Home') }}
          </a>
        </div>
      </div>
    </div>
  </div>
  {{-- ==================================================== --}}
  {!! Form::open(array('route' => ['admin.product.update',$product->id],'method' => 'put' ,'files' => true ,'class' => 'form-horizontal','id' => 'form_new_company')) !!}
  <h1 class="page-title">{{ __('Edit Product') }}
    <small></small>
  </h1>

  <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="block full">
            <div class="form-group">
              <label class="col-md-2 " for="product-category">{{ __('Category') }}</label>
              <div class="col-md-10">
                <select class="select-chosen" data-placeholder="{{ __('Select') }}" name="category_id" id="category_id" style="width: 100%;" >
                  <option value="">{{ __('Select') }}</option>
                  @foreach ($parents as $item)
                    @if ($loop->first)
                      <option value='{{ $item->id }}'  @if ($item->id == $product->category_id)
                        selected="selected"
                      @endif>
                        {{ __('Select') }}
                      </option>
                    @else
                      <option value='{{ $item->id }}'  @if ($item->id == $product->category_id)
                        selected="selected"
                      @endif>
                        @if ($item->depth > 1)
                          {!! str_repeat('-',$item->depth) !!}<i class="fa fa-angle-right" aria-hidden="true"></i>
                        @endif
                        {{ $item->title }}
                      </option>
                    @endif
                  @endforeach
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-2 " for="pid">{{ __('Product ID') }}</label>
              <div class="col-md-10">
                <input type="text" id="pid" name="pid" class="form-control" value="{{ $product->pid }}">
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-2 " for="warranty">{{ __('Warranty') }}</label>
              <div class="col-md-10">
                <input type="text" id="warranty" name="warranty" class="form-control" value="{{ $product->warranty }}">
              </div>
            </div>
          </div>
          <hr>
          <div class="block-title">
            @if (multLang())
              <ul class="nav nav-tabs" data-toggle="tabs">
                @foreach (config('translatable.locales') as $lang => $language)
                  <li @if ($loop->first) class="active" @endif>
                    <a href="#tab_1_{{$lang}}" data-toggle="tab">
                      <img src="{{ asset('images/'.$language.'.png')}}" />
                      {{$language}}
                    </a>
                  </li>
                @endforeach
              </ul>
            @endif
          </div>
          <div class="tab-content">
            @foreach (config('translatable.locales') as $lang => $language)
              <div class="tab-pane @if ($loop->first) active @endif" id="tab_1_{{$lang}}" >
                <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="{{ @$product->translate($language)->title }}" class="form-control" name="title[{{$language}}]" required />
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-md-2 " for="short">
                      {{ __('Search Keywords') }}
                    </label>
                    <div class="col-md-10">
                      <textarea placeholder="Keyword1, Keyword2, Keyword3,.... " id="search" name="search[{{$language}}]" class="form-control" rows="1">{{ @$product->translate($language)->search }}</textarea>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-md-2">
                      {{ __('Description') }}
                    </div>
                    <div class="col-md-10">
                      <div class="input-icon right">
                        <textarea name="content[{{$language}}]" rows="10" class="form-control" id="my-editor-{{$language}}">{{ @$product->translate($language)->content }}</textarea>
                      </div>
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-md-2">
                      {{ __('Technical') }}
                    </div>
                    <div class="col-md-10">
                      <div class="input-icon right">
                        <textarea name="technical[{{$language}}]" rows="10" class="form-control" id="my-technical-{{$language}}">{{ @$product->translate($language)->technical }}</textarea>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-md-2">
                      {{ __('Other') }}
                    </div>
                    <div class="col-md-10">
                      <div class="input-icon right">
                        <textarea name="other[{{$language}}]" rows="10" class="form-control" id="my-other-{{$language}}">{{ @$product->translate($language)->other }}</textarea>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            @endforeach
          </div>
          <hr>
        </div>
      </div>
      <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"> {{ __('Google Metadata') }}</span>
          </div>
          <div class="actions">
          </div>
        </div>
        <div class="portlet-body form">
          <div class="block-title">
            @if (multLang())
              <ul class="nav nav-tabs" data-toggle="tabs">
                @foreach (config('translatable.locales') as $lang => $language)
                  <li @if ($loop->first) class="active" @endif>
                    <a href="#tab_1_{{$lang}}" data-toggle="tab">
                      <img src="{{ asset('images/'.$language.'.png')}}" />
                      {{$language}}
                    </a>
                  </li>
                @endforeach
              </ul>
            @endif
          </div>
          <div class="tab-content">
            @foreach (config('translatable.locales') as $lang => $language)
              <div class="tab-pane @if ($loop->first) active @endif" id="tab_1_{{$lang}}" >
                <div class="block-section">
                  <div class="form-group">
                    <label class="col-md-12" for="product-meta-keywords">{{ __('Meta Keywords') }}
                      @if (multLang())
                        ({{ $language }}) <img src="{{ asset(theme_url('images/flags/'.$language.'.png')) }}" />
                      @endif
                    </label>
                    <div class="col-md-12">
                      <input type="text" id="meta-keywords-{{ $language }}" name="meta_keywords[{{ $language }}]" class="form-control" value="{{ @$product->translate($language)->meta_keywords }}" data-role="tagsinput" placeholder="keyword1, keyword2, keyword3..">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-md-12" for="product-meta-description">{{ __('Meta Description') }}
                      @if (multLang())
                        ({{ $language }}) <img src="{{ asset(theme_url('images/flags/'.$language.'.png')) }}" />
                      @endif
                    </label>
                    <div class="col-md-12">
                      <textarea name="meta_description[{{ $language }}]" rows="4" class="form-control" id="my-meta_description-{{ $language }}" placeholder="Enter meta description..">{{ @$product->translate($language)->meta_description }}</textarea>
                      <div class="help-block">115 {{ __('Characters Max') }}</div>
                    </div>
                  </div>
                </div>
              </div>
            @endforeach
          </div>
          <hr>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="portlet box blue">
        <div class="portlet-title">
          <div class="caption">
            <i class="fa fa-gift"></i>{{ __('Media') }}</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">
                  @if ($product->image_url)
                    <img id="holder" style="max-width: 100%;" src="{{ asset($product->image_url) }}" />
                  @else
                    <img id="holder" style="max-width: 100%;" src="{{ asset(theme_url('images/no-image.png')) }}" />
                  @endif
                  <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="{{ $product->image_url }}" class="form-control" type="text" name="photo">
                  </div>
                </div>
              </div>
              <div class="tab-pane" id="portlet_tab2">
                <div class="form-group">
                  <iframe src="https://www.youtube.com/embed/{{ $product->video }}" style="background:url('{{ asset(theme_url('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="{{ $product->video }}" >
                  </div>
                  <div class="clearfix margin-bottom-10"> </div>
                </div>
              </div>
              <div class="tab-pane" id="portlet_tab3">
                <div class="row media-filter-items no-padding">
                  @foreach ($product->images as $key => $image)
                    <div class="col-md-6 col-lg-4" id="blk-imge-{{ $image->id }}">
                      <div class="media-items animation-fadeInQuickInv" data-category="music">
                        <div class="media-items-options ">
                          <a data-id="{{ $image->id }}" data-toggle="del-confirmation"
                            data-btn-ok-label="{{ __('Yes') }}"
                            data-btn-cancel-label="{{ __('No') }}"
                            data-content="{{ __('Sure Remove') }}"
                            href="#" class="btn btn-xs btn-primary">  <i class="fa fa-trash-o"></i>
                          </a>
                        </div>
                        <div class="media-items-content">
                          <img src="{{ asset($image->small) }}" style="max-width:100%">
                        </div>
                      </div>
                    </div>
                @endforeach
              </div>
                <input type="file" name="files[]" id="filer_input2" multiple="multiple">
              </div>
            </div>
          </div>
        </div>
        <div class="portlet light bordered">
          <div class="portlet-title">
            <div class="caption">
              <i class="icon-settings font-dark"></i>
              <span class="caption-subject font-dark sbold uppercase">{{ __('Price') }}</span>
            </div>
            <div class="actions">
            </div>
          </div>
          <div class="portlet-body form">
            <div class="form-group no-padding">
              <label class="col-md-4 " for="product-price">{{ __('Balance') }}</label>
              <div class="col-md-8">
                <div class="input-group">
                  <input value="{{ $product->price }}" type="number" id="product-price" name="price" 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="{{ $product->offer }}" type="number" 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="number" 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 class="portlet light bordered">
          <div class="portlet-title">
            <div class="caption">
              <i class="icon-settings font-dark"></i>
              <span class="caption-subject font-dark sbold uppercase">{{ __('Product Colors ') }}</span>
            </div>
            <div class="actions">
            </div>
          </div>
          <div class="portlet-body form">
            <div class="form-group">
              <div class="repeater">
                <div data-repeater-list="color-list">
                  @if ($product->color->count())
                    @foreach ($product->color as $key => $color)
                      <div data-repeater-item>
                        <div class="form-group">
                          <div class="col-md-6 ">
                            <div class="input-group color colorpicker-default" data-color="{{ $color->color }}" data-color-format="hex">
                              <input type="text" name="color" class="form-control" value="{{ $color->color }}" >
                              <span class="input-group-btn">
                                <button class="btn default" type="button">
                                  <i style="background-color: {{ $color->color }}"></i>&nbsp;</button>
                                </span>
                              </div>
                            </div>
                            <div class="col-md-6 ">
                              <span data-repeater-delete class="btn btn-danger btn-sm">
                                <span class="glyphicon glyphicon-remove"></span> Delete
                              </span>
                            </div>
                          </div>
                        </div>
                      @endforeach
                    @else
                      <div data-repeater-item>
                        <div class="form-group">
                          <label class="col-md-3 ">{{ __('color') }}</label>
                          <div class="col-md-6 ">
                            <div class="input-group input-colorpicker">
                              <input type="text"  name="color" class="form-control color-picker" value="#ddd">
                              <span class="input-group-addon"><i></i></span>
                            </div>
                          </div>
                          <div class="col-md-3 ">
                            <span data-repeater-delete class="btn btn-danger btn-sm">
                              <span class="glyphicon glyphicon-remove"></span> Delete
                            </span>
                          </div>
                        </div>
                      </div>
                    @endif
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-1 col-sm-11">
                      <span data-repeater-create class="btn btn-info btn-md">
                        <span class="glyphicon glyphicon-plus"></span> Add
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- BEGIN SAMPLE FORM PORTLET-->
          <div class="portlet light bordered">
            <div class="portlet-title">
              <div class="caption">
                <i class="icon-settings font-dark"></i>
                <span class="caption-subject font-dark sbold uppercase">{{ __('Status') }}</span>
              </div>
              <div class="actions">
              </div>
            </div>
            <div class="portlet-body form">
              <div class="block-content">
                <table class="table table-borderless table-striped table-vcenter">
                  <tbody>
                    <tr>
                      <td>
                        <div class="form-group">
                          <label class="control-label col-md-6">{{ __('Published') }}
                            <span class="required"> * </span>
                          </label>
                          <div class="col-md-6">
                            <div class="input-icon right">
                              <i class="fa"></i>
                              <input name="publish" value="1" type="checkbox" class="make-switch" @if ($product->publish)
                                checked
                              @endif data-on-text="<i class='fa fa-check'></i>" data-off-text="<i class='fa fa-times'></i>">
                            </div>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <div class="form-group">
                          <label class="control-label col-md-6">{{ __('Available') }}
                            <span class="required"> * </span>
                          </label>
                          <div class="col-md-6">
                            <div class="input-icon right">
                              <i class="fa"></i>
                              <input name="available" value="1" type="checkbox" class="make-switch"  data-on-text="<i class='fa fa-check'></i>" data-off-text="<i class='fa fa-times'></i>" @if ($product->available)
                                checked
                              @endif>
                            </div>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <div class="form-group">
                          <label class="control-label col-md-6">{{ __('Special Offer') }}
                            <span class="required"> * </span>
                          </label>
                          <div class="col-md-6">
                            <div class="input-icon right">
                              <i class="fa"></i>
                              <input name="featured" value="1" type="checkbox" class="make-switch"  data-on-text="<i class='fa fa-check'></i>" data-off-text="<i class='fa fa-times'></i>" @if ($product->featured)
                                checked
                              @endif>
                            </div>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <div class="form-group">
                          <label class="control-label col-md-6">{{ __('Hot deals') }}
                            <span class="required"> * </span>
                          </label>
                          <div class="col-md-6">
                            <div class="input-icon right">
                              <i class="fa"></i>
                              <input name="deal" value="1" type="checkbox" class="make-switch"  data-on-text="<i class='fa fa-check'></i>" data-off-text="<i class='fa fa-times'></i>" @if ($product->deal)
                                checked
                              @endif>
                            </div>
                          </div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </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('product.show',[$product->slug]) !!}" target="_blank" class="btn btn-primary tooltips" data-container="body" data-placement="left" data-original-title="{{ __('Preview') }}"><i class="fa fa-external-link"></i></a>
        </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.'/global/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js') !!}
      {!! Html::script(Theme::current()->assetPath.'/jquery.filer/js/jquery.filer.js') !!}
      {!! Html::script(Theme::current()->assetPath.'/jquery.filer/js/custom.js') !!}
      {{-- ==================================================== --}}
      <script>
        jQuery(document).ready(function($){
          $.ajaxSetup({
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
          });
          $('[data-toggle=del-confirmation]').confirmation({
            onConfirm: function( e ) {
              var delete_url = $(this).data("id");
              $.ajax({
                data: {id:delete_url,pid:{!! $product->id !!}},
                type: 'POST',
                url: '{{ Route('ProductFileDestroy') }}'
              });
              $('#blk-imge-'+delete_url).hide(1000).delay(500).fadeOut(350);
            },
            btnOkClass: 'btn btn-sm btn-success', btnCancelClass: 'btn btn-sm btn-danger'});
          $("select").select2();
          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));
          }
          $(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));
            }
          });
          /************************/
          $('#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");
          });
          $(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));
            }
          });
          if (!$().colorpicker) {
            return;
          }
          $('.colorpicker-default').colorpicker({
            format: 'hex'
          });
          $('.repeater').repeater({
            show: function () {
              $(this).find('.colorpicker-default').colorpicker({format: 'hex',color:'#3a95ac'});
              $(this).slideDown();
            },
            hide: function (deleteElement) {
              // if(confirm('Are you sure you want to delete this element?')) {
              $(this).slideUp(deleteElement);
              // }
            },
            ready: function (setIndexes) {
            }
          });

        });
      </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);
          CKEDITOR.replace('my-other-{{$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