@extends('home')
@section('title')
  {{ __('Edit') }}
@endsection
@section('styles')
@endsection
@php
$data         = $product->data;
$attributes   = @$data['attributes'];
$extra        = @$data['extra'];
@endphp
@php
$data_product = get_setting('product');
@endphp
@section('content')
  {!! Form::open(array('route' => ['admin.product.update',$product->id],'method' => 'put' ,'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>{{ __('Update') }}</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-md green-meadow tooltips" data-container="body" data-placement="bottom" data-original-title="{!! __('Save') !!}">
            <i class="fa fa-floppy-o"></i> {!! __('Save') !!}
          </button>
          <button name="submit" value="save" type="submit" class="btn btn-md btn-primary tooltips" data-container="body" data-placement="bottom" data-original-title="{!! __('Save & Close') !!}">
            <i class="fa fa-clipboard"></i> {!! __('Save & Close') !!}
          </button>
          <a href="{!! URL::Route('product.show',[@$product->category->slug,$product->slug]) !!}" target="_blank" class="btn btn-md grey-salt tooltips" data-container="body" data-placement="bottom" data-original-title="{{ __('Preview product') }}"> <i class="fa fa-external-link"></i> {{ __('Preview') }}</a>
          <a href="{!! URL::route('admin.product.index') !!}" class="btn btn-md ">
            <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">
          @include('blocks.product.partial.top-tabs')
          <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="{{ @$product->translate($language)->title }}" class="form-control" name="title[{{$language}}]" required />
                      </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}}">{{ @$product->translate($language)->content }}</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="({!! @$data['details_title'][$language] ?? __('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}}">{{ @$product->translate($language)->technical }}</textarea>
                        </div>
                      </div>
                    </div>
                  @endif
                </div>
                @if (@$data_product['attributes'] == 1)
                  @include('blocks.product.partial.meta-option',['language' => $language])
                @endif
              </div>
            @endforeach
          </div>
          <hr>
        </div>
        @if (@$data_product['seo'] == 1)
          @include('partials.google-meta',['item' => $product])
        @endif
      </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>
            @if (@$data_product['video'] == 1)
              <li>
                <a href="#portlet_tab2" data-toggle="tab">{{ __('Video') }}</a>
              </li>
            @endif
            @if (@$data_product['gallary'] == 1)
              <li>
                <a href="#portlet_tab3" data-toggle="tab">{{ __('Gallery') }}</a>
              </li>
            @endif
          </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('images/no-image.png') }}" />
                @endif
                <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="{{ $product->image_url }}" class="form-control" type="text" name="photo">
                </div>
              </div>
            </div>
            @if (@$data_product['video'] == 1)
              <div class="tab-pane" id="portlet_tab2">
                <div class="form-group">
                  <iframe  @if ($product->video)
                    src="https://www.youtube.com/embed/{{ $product->video }}"
                  @else
                  @endif 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="{{ $product->video }}" >
                  </div>
                  <div class="clearfix margin-bottom-10"> </div>
                </div>
              </div>
            @endif
            @if (@$data_product['gallary'] == 1)
              <div class="tab-pane" id="portlet_tab3">
                <div class="row media-filter-items no-padding">
                  @if ($product->hasMedia('gallery'))
                    @foreach ($product->getMedia('gallery') as $key => $image)
                      @php
                        // dump($image);
                      @endphp
                      <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 text-left">
                            <a data-toggle="confirmation-delete" data-id="{{ $image->id }}"
                              data-btn-ok-label="{{ __('Yes') }}"
                              data-btn-cancel-label="{{ __('No') }}"
                              data-content="{{ __('Sure Remove') }}"
                              type="submit" class="btn btn-xs btn-primary">  <i class="fa fa-trash-o"></i>
                            </a>
                          </div>
                          <div class="media-items-content">
                            <img height="80" src="{{ path_img('uploads/'.$image->getDiskPath(),120,80,0) }}" style="max-width:100%">
                          </div>
                        </div>
                      </div>
                    @endforeach
                  @endif
                </div>
                <input type="file" name="files[]" id="filer_input2" multiple="multiple">
              </div>
            @endif
          </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">
                {{ $product->created_at->format('d M Y - H:i:s') }}
              </span>
            </li>
            <li class="list-group-item">{!! __('Modified date') !!}
              <span class="badge badge-info">
                {{ $product->updated_at->format('d M Y - H:i:s') }}
              </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" @if ($product->publish)
                  checked="checked"
                @endif 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="{!! __('Save') !!}">
        <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->category->slug,$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-confirmation/bootstrap-confirmation.min.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') }}";
      $('.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) {
          }
        });
        // $('#tab_top_pp select').on("change",function(){
        //
        //   alert($(this).next().val());
        // });
        $("#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';
        $.ajaxSetup({
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
        });
        $("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 (!$().confirmation) {
          return;
        }
        $('[data-toggle=confirmation-delete]').confirmation({
          btnOkClass: 'btn btn-sm btn-success',
          btnCancelClass: 'btn btn-sm btn-danger',
          onConfirm: function() {
            var id_delete = $(this).data("id");
            $.ajax({
              data: {id:id_delete},
              type: 'POST',
              url: '{{ Route('ProductFileDestroy') }}'
            });
            $('#blk-imge-'+id_delete).hide(1000).delay(500).fadeOut(350);
          },
          onCancel: function() {
          }
        });
        /************************/
      });
    </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