@extends('layouts.adminlayouts.app')
@section('title')
<title>Product Add | {{ env('APP_NAME') }}</title>
@endsection
@push('css')
<style type="text/css">
      ul.catagorymenulist li{
    list-style: none;
  }
</style>
@endpush
@section('contents')

<div class="row">
    <div class="col-lg-12">

@include('alerts.alerts')

@foreach($errors->all() as $error)
<p>{{ $error }}</p>
@endforeach
              
 
        <div class="ibox ">
            <div class="ibox-title">
                <h5>Product Create</h5>
            </div>
            <div class="ibox-content">
                <div class="row">
                    <div class="col-lg-12">

        <form action="{{ route('admin.productUpdate', $product) }}" method="post" enctype="multipart/form-data">

                        @csrf
                        
 
                        <div class="tabs-container">
                            <ul class="nav nav-tabs">
                                <li><a class="nav-link active" data-toggle="tab" href="#tab-1">General</a></li>
                                <li><a class="nav-link" data-toggle="tab" href="#tab-2">Price & Inventory</a></li>
                                <li><a class="nav-link" data-toggle="tab" href="#tab-3">Attribute</a></li>
                                <li><a class="nav-link" data-toggle="tab" href="#tab-4">Images & Others</a></li>
                            </ul>
                            <div class="tab-content">
                                <div id="tab-1" class="tab-pane active">
                                    <div class="panel-body">
                                        @include('admin.products.includes.productCreate_general')
                                    </div>
                                </div>
                                <div id="tab-2" class="tab-pane">
                                    <div class="panel-body">
                                      @include('admin.products.includes.productCreate_price_inventory')
                                    </div>
                                </div>
                                <div id="tab-3" class="tab-pane">
                                    <div class="panel-body">
                                      @include('admin.products.includes.productCreate_attribute')
                                    </div>
                                </div>
                                <div id="tab-4" class="tab-pane">
                                    <div class="panel-body">
                                      @include('admin.products.includes.productCreate_images_others')
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="margin: 10px;">
                          <button class="btn btn-primary" type="submit"><strong>Publish</strong></button>
                        </div>
      </form>

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



    </div>
</div>


@endsection
@push('js')
<script type="text/javascript">


var subcats =  null;
var subsubcats =  null
        $(document).ready(function(){

        $('#editor').summernote({
            placeholder: 'Write description of the product here...',
            minHeight: 160,
        });

        $('.input-group.date').datepicker({
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true
        });



    $(document).on("change", ".cat-select", function(e){
    // e.preventDefault();

    var that = $( this );
    var q = that.val();

    $(".subsubcat-select").empty().append($('<option>',{
            value: '',
            text: 'Sub Sub Category Select'
          }));

    $(".subcat-select").empty().append($('<option>',{
            value: '',
            text: 'Sub Category Select'
          }));

    $.each(subcats, function (i, item) {
      if(item.category_id == q)
      {
        $(".subcat-select").append("<option value='"+ item.id +"'>"+ item.title +"</option>");             
      }              
    });

    $.each(subsubcats, function (i, item) {
      if(item.category_id == q)
      {
        $(".subsubcat-select").append("<option value='"+ item.id +"'>"+ item.title +"</option>");             
      }              
    });  
    
  });


  $(document).on("change", ".subcat-select", function(e){
    // e.preventDefault();

    var that = $( this );
    var q = that.val();

    $(".subsubcat-select").empty().append($('<option>',{
            value: '',
            text: 'Sub Sub Category Select'
          }));

    $.each(subsubcats, function (i, item) {
      if(item.subcategory_id == q)
      {
        $(".subsubcat-select").append("<option value='"+ item.id +"'>"+ item.title +"</option>");             
      }              
    });  
    
  });


  ////////////////////////////////////////


      $(document).on('click','.btn-attr-add',function(s){
      s.preventDefault();
      var  that = $( this ),
      url = that.attr('data-url'),
      key = $(".input-feature-key").val(),
      value = $(".input-feature-value").val();



      $(".help-block").remove();
      $.ajax({
        url: url + "?feature_name=" + key + "&feature_value=" + value,
        type: 'GET',
        contentType: false,
        cache: false,
        processData:false,
 
 
      }).done(function(response){

        if(response.success == true)
        {
          $(".attr-container").empty().append(response.page);
          $('.input-feature-key').val('').focus();
          $('.input-feature-value').val('');
 
        }
        else
        {
          $.each( response.errors, function( key, value ) {
            $("[name~='"+key+"']").after( "<span class='help-block text-red'><strong>"+value+"</strong></span>" );
          });

          
        }
      
      }).fail(function(){
          alert('error');
      });
  });



////////////////////////////////////

  
  $(document).on('click', '.attr-list-delete', function(e){
    e.preventDefault();
    var that = $(this),
        url = that.attr('data-url');
        // alert(url);
        $.ajax({
          url: url,
          type: 'GET',
          dataType: 'json',
 
        })
          .done(function(response) {

 
              $(".attr-container").empty().append(response.page);
           

          })
          .fail(function() {
            alert("error");
        });



  });

  /////////////////////////////////////


      $(document).on('keypress','.input-color', function(e) {
          if(e.which == 13) {

            var that = $(this),
            url = that.attr('data-url'),
            color = that.val();

             $(".help-block").remove();
              $.ajax({
              url: url,
              type: 'GET',
              data: {color: color},
       
            }).done(function(response){

              if(response.success == true)
              {
                $('tbody.add-tr-color').empty().append(response.page);
                $('.input-color').val('').focus();
       

              }
              else
              {
                $('.input-color').after( "<span class='help-block text-red'><strong>"+response.error+"</strong></span>" );
              }
            
            }).fail(function(){
                alert('error');
            });

              return false;
          }
      });


  //     $(document).on('click','.btn-color-add',function(s){
  //     s.preventDefault();
  //     var  that = $( this ),
  //     url = that.attr('data-url'),
  //     color = $(".input-color").val();
  //     $(".help-block").remove();
  //     $.ajax({
  //       url: url,
  //       type: 'GET',
  //       // dataType: 'json',
  //       data: {color: color},
 
  //     }).done(function(response){

  //       if(response.success == true)
  //       {
  //         $('tbody.add-tr-color').empty().append(response.page);
  //         $('.input-color').val('').focus();
  //       }
  //       else
  //       {
  //         $('.input-color').after( "<span class='help-block text-red'><strong>"+response.error+"</strong></span>" );
  //       }
      
  //     }).fail(function(){
  //         alert('error');
  //     });
  // });


  $(document).on('click','.btn-color-add',function(s){
      s.preventDefault();

      // var conceptVal = $("#aioConceptName option").filter(":selected").val();

      var  that = $( this ),
      url = that.attr('data-url'),
      color = $("#color option").filter(":selected").val();

      $(".help-block").remove();
      $.ajax({
        url: url,
        type: 'GET',
        // dataType: 'json',
        data: {color: color},
 
      }).done(function(response){

        if(response.success == true)
        {
          $('tbody.add-tr-color').empty().append(response.page);
          $('.sku-container').empty().append(response.sku);
          // $('.input-color').val('').focus();
        }
        else
        {
          $('.input-color').after( "<span class='help-block text-red'><strong>"+response.error+"</strong></span>" );
        }
      
      }).fail(function(){
          alert('error');
      });
  });
      ///////////////////////////////////////////////
      

      $(document).on('click', '.color-list-delete', function(e){
    e.preventDefault();
    var that = $(this),
        url = that.attr('data-url');
        // alert(url);
        $.ajax({
          url: url,
          type: 'GET',
          dataType: 'json',
          // beforeSend: function()
          // {
          //     // $(".modal-feed").show();
          // },
          // complete: function()
          // {
          //     // $(".modal-feed").hide();
          // },
        })
          .done(function(response) {

 
             $('tbody.add-tr-color').empty().append(response.page);
           

          })
          .fail(function() {
            alert("error");
        });



  });

        ///////////////////////////////////////////////
      

      $(document).on('click', '.sku-list-delete', function(e){
    e.preventDefault();
    var that = $(this),
        url = that.attr('data-url');
        // alert(url);
        $.ajax({
          url: url,
          type: 'GET',
          dataType: 'json',
          // beforeSend: function()
          // {
          //     // $(".modal-feed").show();
          // },
          // complete: function()
          // {
          //     // $(".modal-feed").hide();
          // },
        })
          .done(function(response) {

 
             $('.sku-container').empty().append(response.sku);
           

          })
          .fail(function() {
            alert("error");
        });



  });

  
 
 

      $(document).on('keypress','.input-size', function(e) {
          if(e.which == 13) {

            var that = $(this),
            url = that.attr('data-url'),
            size = that.val();

             $(".help-block").remove();
              $.ajax({
              url: url,
              type: 'GET',
              data: {size: size},
       
            }).done(function(response){

              if(response.success == true)
              {
                $('tbody.add-tr-size').empty().append(response.page);
                $('.input-size').val('').focus();
       

              }
              else
              {
                $('.input-size').after( "<span class='help-block text-red'><strong>"+response.error+"</strong></span>" );
              }
            
            }).fail(function(){
                alert('error');
            });

              return false;
          }
      });


      $(document).on('click','.btn-size-add',function(s){
      s.preventDefault();
      var  that = $( this ),
      url = that.attr('data-url'),
      // size = $(".input-size").val();
      size = $("#size option").filter(":selected").val();

      
      $(".help-block").remove();
      $.ajax({
        url: url,
        type: 'GET',
        // dataType: 'json',
        data: {size: size},

      }).done(function(response){

        if(response.success == true)
        {
          $('tbody.add-tr-size').empty().append(response.page);
          $('.sku-container').empty().append(response.sku);
          // $('.input-size').val('').focus();
 

        }
        else
        {
          $('.input-size').after( "<span class='help-block text-red'><strong>"+response.error+"</strong></span>" );
        }
      
      }).fail(function(){
          alert('error');
      });
  });
      ///////////////////////////////////////////////

  //     $(document).on('click','.btn-size-add',function(s){
  //     s.preventDefault();
  //     var  that = $( this ),
  //     url = that.attr('data-url'),
  //     size = $(".input-size").val();

      
  //     $(".help-block").remove();
  //     $.ajax({
  //       url: url,
  //       type: 'GET',
  //       // dataType: 'json',
  //       data: {size: size},
  //       // mimeType:"multipart/form-data",
  //       // contentType: false,
  //       // cache: false,
  //       // processData:false,
  //       // beforeSend: function()
  //       // {

  //       // },
  //       // complete: function()
  //       // {

  //       // },
  //     }).done(function(response){

  //       if(response.success == true)
  //       {
  //         $('tbody.add-tr-size').empty().append(response.page);
  //         $('.input-size').val('').focus();
 

  //       }
  //       else
  //       {
  //         $('.input-size').after( "<span class='help-block text-red'><strong>"+response.error+"</strong></span>" );
  //       }
      
  //     }).fail(function(){
  //         alert('error');
  //     });
  // });
      ///////////////////////////////////////////////
      

      $(document).on('click', '.size-list-delete', function(e){
    e.preventDefault();
    var that = $(this),
        url = that.attr('data-url');
        // alert(url);
        $.ajax({
          url: url,
          type: 'GET',
          dataType: 'json',
 
        })
          .done(function(response) {

 
             $('tbody.add-tr-size').empty().append(response.page);
           

          })
          .fail(function() {
            alert("error");
        });



  });

      ///////////////////////////


/////////// delay start ////////////////
var delay = (function(){
var timer = 0;
return function(callback, ms){
  clearTimeout (timer);
  timer = setTimeout(callback, ms);
};
})();
/////////// delay end /////////////////

/////////////////////////
$(document).on("change keyup mouseup", ".sku-quantity-update", function(e){

                var that = $( this );
                var val = that.val();
                var url = that.attr("data-url");

                var urls = url + '?qty=' + val;


                // alert(url);
   delay(function(){  
                $.ajax({
                    url: urls,
                    type: 'GET',
                    cache: false,
                    dataType: 'json',
                    success: function(response)
                    {
                        if(response.success)
                        {
                         
                            
                        }

                    },
                    error: function(){}
                });
                }, 250);
            });
   
/////////////////////////////////////

/////////////////////////
$(document).on("change keyup mouseup", ".sku-price-update", function(e){

                var that = $( this );
                var val = that.val();
                var url = that.attr("data-url");

                var urls = url + '?price=' + val;


                // alert(url);
   delay(function(){  
                $.ajax({
                    url: urls,
                    type: 'GET',
                    cache: false,
                    dataType: 'json',
                    success: function(response)
                    {
                        if(response.success)
                        {
                         
                            
                        }

                    },
                    error: function(){}
                });
                }, 250);
            });
   
///////////////////////////////


/////////////////////////
$(document).on("keypress change keyup mouseup", ".pro-input-update", function(e){

                var that = $( this );
                var val = that.val();
                var url = that.attr("data-url");

                var urls = url + '?q=' + val;


                // alert(url);
   delay(function(){  
                $.ajax({
                    url: urls,
                    type: 'GET',
                    cache: false,
                    dataType: 'json',
                    success: function(response)
                    {
                        if(response.success)
                        {
                         
                            
                        }

                    },
                    error: function(){}
                });
                }, 250);
            });
   
/////////////////////////////////////


    });
</script>

@endpush