{!! Html::style('js/fileinput/fileinput.css') !!}
{!! Html::style('js/fileinput/themes/explorer/theme.css') !!}
{!! Html::script('js/fileinput/plugins/sortable.min.js') !!}
{!! Html::script('js/fileinput/fileinput.js') !!}
{!! Html::script('js/fileinput/themes/explorer/theme.js') !!}

{!! Html::script('js/ckeditor/ckeditor.js') !!}
{!! Html::script('js/cke_config.js') !!}

<link type="text/css" rel="stylesheet" href="https://rawgit.com/moxiecode/plupload/master/js/jquery.ui.plupload/css/jquery.ui.plupload.css" media="screen">
{{-- <link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.min.css" media="screen"> --}}

<!--.box-body Other-->
<div class="box-body">
  <div class="form-group">
    {!! Form::label("startDate", "Start Date", ['class' => 'col-sm-2 control-label','for'=>'startDate']) !!}
    <div class="col-sm-5">
      <div class="input-group date">
        <input type="text" id="startDate" value="{{@$startDate}}" name="startDate" class="form-control"
          {{ @$arr_data['disabled_data']?'disabled':"" }}>
      </div>
    </div>
  </div>

  <div class="form-group">
    {!! Form::label("endDate", "End Date", ['class' => 'col-sm-2 control-label','for'=>'endDate']) !!}
    <div class="col-sm-5">
      <div class="input-group date">
        <input type="text" id="endDate" name="endDate" value="{{@$endDate}}" class="form-control"
          {{ @$arr_data['disabled_data']?'disabled':"" }}>
      </div>
    </div>
  </div>

  <div class="form-group">
    {!! Form::label("status", "Status", ['class' => 'col-sm-2 control-label','for'=>'status']) !!}
    <div class="col-sm-5">
      @if (isset($action_page) && $action_page=="view")
      @if (isset($products->status))
      @if ($products->status=="Y")
      {!! Form::checkbox('status', 'Y', true, ['data-render' =>
      'switchery','data-theme'=>'primary','data-disabled'=>'true']); !!}
      @else
      {!! Form::checkbox('status', 'Y', false, ['data-render' =>
      'switchery','data-theme'=>'primary','data-disabled'=>'true']); !!}
      @endif
      @else
      {!! Form::checkbox('status', 'Y', true, ['data-render' =>
      'switchery','data-theme'=>'primary','data-disabled'=>'true']); !!}
      @endif
      @else
      @if (isset($products->status))
      @if ($products->status=="Y")
      {!! Form::checkbox('status', 'Y', true, ['data-render' => 'switchery','data-theme'=>'primary']); !!}
      @else
      {!! Form::checkbox('status', 'Y', false, ['data-render' => 'switchery','data-theme'=>'primary']); !!}
      @endif
      @else
      {!! Form::checkbox('status', 'Y', true, ['data-render' => 'switchery','data-theme'=>'primary']); !!}
      @endif
      @endif
    </div>
  </div>




  <div class="form-group">
    {!! Form::label("order_by", "Order", ['class' => 'col-sm-2 control-label','for'=>'order_by']) !!}
    <div class="col-sm-5">
      @if (isset($action_page) && $action_page=="view")
      {!! Form::text("order_by", null, ['class' => 'form-control','placeholder'=>"0",'readonly'=>true]) !!}
      @else
      {!! Form::text("order_by", $arr_data["order_by"], ['class' =>
      'form-control','placeholder'=>"0",'readonly'=>true])
      !!}
      @endif
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-12">
      <div class="panel">
        <div class="col-sm-5">
          <ul class="nav nav-tabs nav-tabs-primary nav-justified">
            <li class="active">
              <input type="checkbox" name="status_th" id="status_th" value="Y"
                style="position: absolute;top: 35%;z-index: 2;" checked disabled />
              <a href="#justified-tab-1" class="text-left" data-toggle="tab" aria-expanded="true">Thai</a>
            </li>
            <li class="col-sm-3">
              <input type="checkbox" name="status_en" id="status_en" value="Y"
                style="position: absolute;top: 35%;z-index: 2;" @if(!isset($products) ||
                @$products->status_en==="Y") checked @endif />
              <a href="#justified-tab-2" class="text-left" data-toggle="tab" aria-expanded="true">Eng</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="tab-content m-b-0" style="clear: both;">
        <div class="tab-pane fade active in" id="justified-tab-1">
          <div class="row">
            {{-- thumb --}}
            @if (isset($products->thumb_th))
            @if ($products->thumb_th!="")
            @if (file_exists(config('config.config_pathUpload').'/products/'.$pathDate.'/'.$products->thumb_th))
            <div id="thumb_th-{{ $products->id }}" class="form-group">
              <div class="col-sm-2"></div>
              <div class="col-sm-5">
                <img
                  src="{{ url(config('config.config_pathUpload').'/products/'.$pathDate.'/'.$products->thumb_th) }}"
                  height="200" class="img-responsive"><br>
                @if (isset($action_page) && $action_page!="view")
                <a href="javascript:void(0)"
                  onclick="js_removeFile('products','{{ $products->id }}','thumb_th')"><i
                    class="fa fa-fw fa-remove"></i>Remove</a>
                @endif
              </div>
            </div>
            @endif
            @endif
            @endif

            <div class="form-group">
              {!! Form::label("thumb_th", "Thumb", ['class' => 'col-sm-2 control-label','for'=>'thumb_th']) !!}
              <div class="col-sm-5">
                {!! Form::file('thumb_th', ['class' =>
                'form-control','accept'=>"image/jpeg,image/png,image/gif","disabled"=>@$arr_data['disabled_data']]) !!}
              </div>
            </div>
            {{-- thumb --}}


            {{-- logo --}}
            @if (isset($products->logo_th))
            @if ($products->logo_th!="")
            @if (file_exists(config('config.config_pathUpload').'/products/'.$pathDate.'/'.$products->logo_th))
            <div id="logo_th-{{ $products->id }}" class="form-group">
              <div class="col-sm-2"></div>
              <div class="col-sm-5">
                <img
                  src="{{ url(config('config.config_pathUpload').'/products/'.$pathDate.'/'.$products->logo_th) }}"
                  height="200" class="img-responsive"><br>
                @if (isset($action_page) && $action_page!="view")
                <a href="javascript:void(0)"
                  onclick="js_removeFile('products','{{ $products->id }}','logo_th')"><i
                    class="fa fa-fw fa-remove"></i>Remove</a>
                @endif
              </div>
            </div>
            @endif
            @endif
            @endif

            <div class="form-group">
              {!! Form::label("logo_th", "Logo", ['class' => 'col-sm-2 control-label','for'=>'logo_th']) !!}
              <div class="col-sm-5">
                {!! Form::file('logo_th', ['class' =>
                'form-control','accept'=>"image/jpeg,image/png,image/gif","disabled"=>@$arr_data['disabled_data']]) !!}
              </div>
            </div>
            {{-- logo --}}

            <div class="form-group">
              {!! HTML::decode(Form::label("title_th", "ชื่อ <em style='color:red'>*</em>", ['class' => 'col-sm-2
              control-label','for'=>'title_th'])) !!}
              <div class="col-sm-5">
                {!! Form::text("title_th", null, ['class'
                =>'form-control','placeholder'=>"",'id'=>'title_th',"isRequired"=>"กรุณาใส่ชื่อภาษาไทย","disabled"=>@$arr_data['disabled_data']])
                !!}
              </div>
            </div>

            <div class="form-group">
              {!! Form::label("content_th", "รายละเอียด", ['class' => 'col-sm-2 control-label','for'=>'content_th']) !!}
              <div class="col-sm-5">
                {!! Form::textarea("content_th", null, ['class' =>'form-control class_ckeditor','size' =>
                '50x7','placeholder'=>"",'id'=>'content_th',"disabled"=>@$arr_data['disabled_data']]) !!}
              </div>
            </div>

            
            <div style="margin-bottom: 15px;" style="margin-b"><input type="button" name="btnAddImgTh" id="btnAddImgTh" lang="th" value="Add More"></div>
            <div class="form-group classAlbumGallery" id="galleryTh">
              @if (isset($products->gallery_th) && $products->gallery_th!="")
                @foreach ($products->gallery_th as $product)
                <div class="col-md-3" id="divImage-th-{!! $product->index !!}" style="border:1px solid;padding:15px;margin:15px">
                    <img id="image-th-{!! $product->index !!}" src="{{ url(config('config.config_pathUpload').'/products/'.$pathDate.'/'.$product->filename) }}" class="img-fluid classImageGallery-th" data-lang="th" data-loop="{!! $product->index !!}" width="180" height="auto" alt="your image"><br /><br />
                    <input type="text" name="titleImage-th[]" id="titleImage-th-{!! $product->index !!}" value="{{ $product->title }}" /><br /><br />
                    <input type="file" id="fileImage-th-{!! $product->index !!}" name="inputImage-th-{!! $product->index !!}" accept="image/*" onchange="js_changeFile(this,'th','{!! $product->index !!}')" /><br />
                    <input type="button" class="btn-danger classRemoveItemGallery" name="btnRemove-th-{!! $product->index !!}" id="btnRemove-th-{!! $product->index !!}" data-lang="th" data-loop="{!! $product->index !!}" value="Remove">
                    <input type="hidden" id="baseimage-th-{!! $product->index !!}" name="baseimage-th[]" value="">
                    <input type="hidden" id="filenameImageOld-th-{!! $product->index !!}" name="filenameImageOld-th[]" value="{{ $product->filename }}">
                    <input type="hidden" id="processimage-th-{!! $product->index !!}" name="processimage-th[]" value="edit">
                </div>
                @endforeach
              @endif
            </div>


          </div>
        </div>
        <div class="tab-pane fade" id="justified-tab-2">
          <div class="row">
            {{-- Thumb --}}
            @if (isset($products->thumb_en))
            @if ($products->thumb_en!="")
            @if (file_exists(config('config.config_pathUpload').'/products/'.$pathDate.'/'.$products->thumb_en))
            <div id="thumb_en-{{ $products->id }}" class="form-group">
              <div class="col-sm-2"></div>
              <div class="col-sm-5">
                <img
                  src="{{ url(config('config.config_pathUpload').'/products/'.$pathDate.'/'.$products->thumb_en) }}"
                  height="200" class="img-responsive"><br>
                @if (isset($action_page) && $action_page!="view")
                <a href="javascript:void(0)"
                  onclick="js_removeFile('products','{{ $products->id }}','thumb_en')"><i
                    class="fa fa-fw fa-remove"></i>Remove</a>
                @endif
              </div>
            </div>
            @endif
            @endif
            @endif

            <div class="form-group">
              {!! Form::label("thumb_en", "Thumb", ['class' => 'col-sm-2 control-label','for'=>'thumb_en']) !!}
              <div class="col-sm-5">
                {!! Form::file('thumb_en', ['class' =>
                'form-control','accept'=>"image/jpeg,image/png,image/gif","disabled"=>@$arr_data['disabled_data']]) !!}
              </div>
            </div>
            {{-- Thumb --}}


            {{-- logo --}}
            @if (isset($products->logo_en))
            @if ($products->logo_en!="")
            @if (file_exists(config('config.config_pathUpload').'/products/'.$pathDate.'/'.$products->logo_en))
            <div id="logo_en-{{ $products->id }}" class="form-group">
              <div class="col-sm-2"></div>
              <div class="col-sm-5">
                <img
                  src="{{ url(config('config.config_pathUpload').'/products/'.$pathDate.'/'.$products->logo_en) }}"
                  height="200" class="img-responsive"><br>
                @if (isset($action_page) && $action_page!="view")
                <a href="javascript:void(0)"
                  onclick="js_removeFile('products','{{ $products->id }}','logo_en')"><i
                    class="fa fa-fw fa-remove"></i>Remove</a>
                @endif
              </div>
            </div>
            @endif
            @endif
            @endif

            <div class="form-group">
              {!! Form::label("logo_en", "Logo", ['class' => 'col-sm-2 control-label','for'=>'logo_en']) !!}
              <div class="col-sm-5">
                {!! Form::file('logo_en', ['class' =>
                'form-control','accept'=>"image/jpeg,image/png,image/gif","disabled"=>@$arr_data['disabled_data']]) !!}
              </div>
            </div>
            {{-- logo --}}


            <div class="form-group">
              {!! Form::label("title_en", "ชื่อ", ['class' => 'col-sm-2 control-label','for'=>'title_en']) !!}
              <div class="col-sm-5">
                {!! Form::text("title_en", null, ['class'
                =>'form-control','placeholder'=>"",'id'=>'title_en',"disabled"=>@$arr_data['disabled_data']]) !!}
              </div>
            </div>


            <div class="form-group">
              {!! Form::label("content_en", "รายละเอียด", ['class' => 'col-sm-2 control-label','for'=>'content_en']) !!}
              <div class="col-sm-5">
                {!! Form::textarea("content_en", null, ['class' =>'form-control class_ckeditor','size' =>
                '50x7','placeholder'=>"",'id'=>'content_en',"disabled"=>@$arr_data['disabled_data']]) !!}
              </div>
            </div>


            <div style="margin-bottom: 15px;" style="margin-b"><input type="button" name="btnAddImgEn" id="btnAddImgEn" lang="en" value="Add More"></div>
            <div class="form-group classAlbumGallery" id="galleryEn">
              @if (isset($products->gallery_en) && $products->gallery_en!="")
                @foreach ($products->gallery_en as $product)
                <div class="col-md-3" id="divImage-en-{!! $product->index !!}" style="border:1px solid;padding:15px;margin:15px">
                    <img id="image-en-{!! $product->index !!}" src="{{ url(config('config.config_pathUpload').'/products/'.$pathDate.'/'.$product->filename) }}" class="img-fluid classImageGallery-en" data-lang="th" data-loop="{!! $product->index !!}" width="180" height="auto" alt="your image"><br /><br />
                    <input type="text" name="titleImage-en[]" id="titleImage-en-{!! $product->index !!}" value="{{ $product->title }}" /><br /><br />
                    <input type="file" id="fileImage-en-{!! $product->index !!}" name="inputImage-en-{!! $product->index !!}" accept="image/*" onchange="js_changeFile(this,'th','{!! $product->index !!}')" /><br />
                    <input type="button" class="btn-danger classRemoveItemGallery" name="btnRemove-en-{!! $product->index !!}" id="btnRemove-en-{!! $product->index !!}" data-lang="th" data-loop="{!! $product->index !!}" value="Remove">
                    <input type="hidden" id="baseimage-en-{!! $product->index !!}" name="baseimage-en[]" value="">
                    <input type="hidden" id="filenameImageOld-en-{!! $product->index !!}" name="filenameImageOld-en[]" value="{{ $product->filename }}">
                    <input type="hidden" id="processimage-en-{!! $product->index !!}" name="processimage-en[]" value="edit">
                </div>
                @endforeach
              @endif
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

</div>
<!-- /.box-body Other-->

<div class="box-footer">
  <div class="form-group">
    <div class="col-sm-2">&nbsp;</div>
    <div class="col-sm-7">
      @if (isset($action_page) && $action_page=="view")
      <button type="button" onclick="location='{{ url(config('config.config_pathCms').'/products') }}'"
        class="btn btn-primary width-100 m-r-5">
        << Back</button> @else {!! Form::submit($submitButtonText, ['class'=>'btn btn-success width-100 m-r-5']) !!}
          <button type="button" onclick="location='{{ url(config('config.config_pathCms').'/products') }}'"
            class="btn btn-default width-100 m-r-5">Cancel</button>
          @endif
    </div>
  </div>
</div>
<!-- /.box-footer -->


<div id="templateBlockImage" class="templateBlockImage" style="display:none">
  <div class="col-md-3" id="divImage-{LANG}-{INDEX}" style="border:1px solid;padding:15px;margin:15px">
      <img id="image-{LANG}-{INDEX}" src="http://placehold.it/180" class="img-fluid classImageGallery-{LANG}" data-lang="{LANG}" data-loop="{INDEX}" width="180" height="auto" alt="your image"><br /><br />
      <input type="text" name="titleImage-{LANG}[]" id="titleImage-{LANG}-{INDEX}" value="" /><br /><br />
      <input type="file" id="fileImage-{LANG}-{INDEX}" name="inputImage-{LANG}-{INDEX}" accept="image/*" onchange="js_changeFile(this,'{LANG}','{INDEX}')" /><br />
      <input type="button" class="btn-danger classRemoveItemGallery" name="btnRemove-{LANG}-{INDEX}" id="btnRemove-{LANG}-{INDEX}" data-lang="{LANG}" data-loop="{INDEX}" value="Remove">
      <input type="hidden" id="baseimage-{LANG}-{INDEX}" name="baseimage-{LANG}[]" value="">
      <input type="hidden" id="filenameImageOld-{LANG}-{INDEX}" name="filenameImageOld-{LANG}[]" value="">
      <input type="hidden" id="processimage-{LANG}-{INDEX}" name="processimage-{LANG}[]" value="add">
  </div>
</div>

<script>
  $( function() {
        var config_dateFormat = "dd/mm/yy",
        from = $( "#startDate" )
          .datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: "1920:2028",
            dateFormat: config_dateFormat,
            numberOfMonths: 1,
            showOn: "both",//button
            buttonText: '<i class="fa fa-calendar"></i>'
          })
          .on( "change", function() {
            to.datepicker( "option", "minDate", getDate( this ) );
          }),
        to = $( "#endDate" ).datepicker({
          changeMonth: true,
          changeYear: true,
          yearRange: "1920:2028",
          dateFormat: config_dateFormat,
          numberOfMonths: 1,
          showOn: "both",//button
          buttonText: '<i class="fa fa-calendar"></i>'
        })
        .on( "change", function() {
          from.datepicker( "option", "maxDate", getDate( this ) );
        });
   
      function getDate( element ) {
        var date;
        try {
          date = $.datepicker.parseDate( config_dateFormat, element.value );
        } catch( error ) {
          date = null;
        }
   
        return date;
      }
  });
</script>

<script type="text/javascript">
  var submitted = false;
  $(document).ready(function(){
      $("#frmProducts").on("submit",function()
      {
        var hasError = false;
        if (!$("#msgError").hasClass("hidden"))
        {
          $("#msgError").addClass("hidden");
        }

        var response = jsValidInput();
        var html = "";
        if (response.isError)
        {
          var msg = response.msg;
          $.each(msg,function(index,data){
            html += "<li>"+data+"</li>";
          })

          $("#msgError").html(html);
          $("#msgError").removeClass("hidden");

          $('html,body').animate({
            scrollTop: 0
          }, 700);

          hasError = true;
        }

        return !hasError;
      })


      $(window).on("load resize",(function() {
        /* Act on the event */
          setTimeout(function(){
                $('.class_ckeditor').each(function(index, el) {
                  CKEDITOR.replace($('.class_ckeditor:eq('+index+')').attr('id'),cke_config);
                });
            },200);
        })
      );

      //Remove item
      $(".classRemoveItemGallery").live("click",function(){
        var lang = $(this).data("lang");
        var index = $(this).data("loop");
        $("#divImage-"+lang+"-"+index).remove();
      });
      //Remove item


      //TH
      $("#btnAddImgTh").click(function(){
        var lang = $(this).attr("lang");
        var index = $(".classImageGallery-"+lang).length+1;
        var getHtml = $("#templateBlockImage").html();
        getHtml = getHtml.replace(/{LANG}/gi,lang);
        getHtml = getHtml.replace(/{INDEX}/gi,index);
        $("#galleryTh").append(getHtml);        
      });

      $('#galleryTh').sortable({
        items: '.col-md-3',
        tolerance: 'pointer',
        placeholder: 'ui-state-highlight',
        update: function(event, ui) {
        }
      });
      //TH


      //EN
      $("#btnAddImgEn").click(function(){
        var lang = $(this).attr("lang");
        var index = $(".classImageGallery-"+lang).length+1;
        var getHtml = $("#templateBlockImage").html();
        getHtml = getHtml.replace(/{LANG}/gi,lang);
        getHtml = getHtml.replace(/{INDEX}/gi,index);
        $("#galleryEn").append(getHtml);        
      });

      $('#galleryEn').sortable({
        items: '.col-md-3',
        tolerance: 'pointer',
        placeholder: 'ui-state-highlight',
        update: function(event, ui) {
        }
      });
      //EN
  })

    function js_changeFile(input,lang,index){
      readURL(input,lang,index);
    }


    function readURL(input,lang,index) {
    //console.log(input["files"]);
    //console.log(lang,index);
    //console.log(input["files"][0]);
        var input_id = input["id"];
        var split_input_id = input_id.split("-");

        if (input["files"] && input["files"][0]) {
          var reader = new FileReader();

          reader.onload = function(e) {
            //console.log(e.target.result);
            $("#image-"+lang+"-"+index).attr('src', e.target.result);
            $("#baseimage-"+lang+"-"+index).val(e.target.result);
            //$("#image_profile").attr('src', e.target.result);
          }

          reader.readAsDataURL(input["files"][0]);
        }
    }

</script>