@extends('admin.layout.layout')

@section('page-level-css')
<link href="{{asset('admin/assets/css/filepond.css')}}" rel="stylesheet" type="text/css" media="screen">
<script src="{{asset('admin/assets/js/filepond.js')}}"></script>
@endsection

@section('content')
{{-- csrf token --}}
<meta name="csrf-token" content="{{ csrf_token() }}">
{{-- csrf token --}}
<!-- START PAGE-CONTAINER -->
<div class="page-container ">
  <!-- START HEADER -->
  @include('admin.partials.header')
  <!-- END HEADER -->
  <!-- START PAGE CONTENT WRAPPER -->
  <div class="page-content-wrapper ">
    <!-- START PAGE CONTENT -->
    <div class="content sm-gutter">
      <!-- START JUMBOTRON -->
      <div data-pages="parallax">
        <div class="container-fluid p-l-25 p-r-25 sm-p-l-0 sm-p-r-0">
          <div class="inner">
            <!-- START BREADCRUMB -->
            <ol class="breadcrumb sm-p-b-5">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Create Product</li>
            </ol>
          </div>
        </div>
      </div>
      <!-- END JUMBOTRON -->
      <!-- START CONTAINER FLUID -->
      <div class="container-fluid container-fixed-lg">
        <!-- START ROW -->
        <div class="col-md-12">
          @if ($errors->any())
          <div class="alert alert-danger">
            <button class="close" data-dismiss="alert"></button>
            <ul>
              @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
              @endforeach
            </ul>
          </div>
          @endif
          @if(Session::has('success'))
          <div class="alert alert-success">
            <button class="close" data-dismiss="alert"></button>
            {{Session::get('success')}}
          </div>
          @endif
        </div>

        <div class="card card-default">
          <div class="card-header ">
            <div class="card-title">
              Create User Information
            </div>
            <div class="tools">
              <a href="javascript:;" class="collapse"></a>
              <a href="#grid-config" data-toggle="modal" class="config"></a>
              <a href="javascript:;" class="reload"></a>
              <a href="javascript:;" class="remove"></a>
            </div>
            {{-- current company image --}}
            {{-- <div class="row-xs-height pull-right">
                <div class="social-user-profile col-xs-height text-center col-top">
                  <div class="thumbnail-wrapper dcustom95 circular bordered b-white">
                    <img src="{{asset('storage/users/default_company.png')}}"
            data-src-retina="{{asset('storage/users/default_company.png')}}"
            data-src="{{asset('storage/users/default_company.png')}}">
          </div>
        </div>
        <p class="hint-text m-t-5 small">Current Company logo</p>
      </div> --}}
      {{-- current company image --}}
    </div>
    <div class="card-body">
      <form data-parsley-validate method="post" action="{{route('products.store')}}" enctype="multipart/form-data"
        id="createUserForm">
        @csrf
        <div class="card-title">
          <h4><strong>Product Information</strong></h4>
        </div>
        <hr>
        <div class="row">
          <div class="col-md-4">
            <p>Tilte</p>
            <div class="form-group form-group-default required">
              <input class="typeahead form-control sample-typehead" type="text" placeholder="Title"
                value="{{ old('title') }}" name="title" required="required">
            </div>
          </div>
          {{-- <div class="col-md-4">
            <p>SKU</p>
            <div class="form-group form-group-default required">
              <input class="typeahead form-control sample-typehead" type="text" placeholder="SKU"
                value="{{ old('sku') }}" name="sku" required="required">
            </div>
          </div> --}}
          <div class="col-md-4">
            <p>Quantity</p>
            <div class="form-group form-group-default required">
              <input class="typeahead form-control sample-typehead" type="text" placeholder="Quantity"
                value="{{ old('quantity') }}" name="quantity" required="required">
            </div>
          </div>
          <div class="col-md-4">
            <p>Zone 1 Price</p>
            <div class="form-group form-group-default required">
              <input class="typeahead form-control sample-typehead allownumericwithoutdecimal" type="text"
                placeholder="Price" value="{{ old('price') }}" name="price" required="required">
            </div>
          </div>
          <div class="col-md-4">
            <p>Zone 1 Discount Price</p>
            <div class="form-group form-group-default">
              <input class="typeahead form-control sample-typehead" type="text" name="discount_price"
                placeholder="Discount Price" value="{{ old('discount_price') }}">
            </div>
          </div>
          <div class="col-md-4">
            <p>Zone 2 Price</p>
            <div class="form-group form-group-default required">
              <input class="typeahead form-control sample-typehead allownumericwithoutdecimal" type="text"
                placeholder="Zone 2 Price" value="{{ old('zone_2_price') }}" name="zone_2_price" required="required">
            </div>
          </div>
          <div class="col-md-4">
            <p>Zone 2 Discount Price</p>
            <div class="form-group form-group-default">
              <input class="typeahead form-control sample-typehead" type="text" name="zone_2_dis_price"
                placeholder="Zone 2 Discount Price" value="{{ old('zone_2_dis_price') }}">
            </div>
          </div>
          {{-- <div class="col-md-4">
            <p>Size Text</p>
            <div class="form-group form-group-default">
              <input class="typeahead form-control sample-typehead" type="text" name="size_text" placeholder="Size Text"
                value="{{ old('size_text') }}">
            </div>
          </div> --}}
          <div class="col-md-4">
            <p>Motion Transfer</p>
            <div class="form-group form-group-default">
              <input class="typeahead form-control sample-typehead" type="text" name="cover_text"
                placeholder="Motion Transfer" value="{{ old('cover_text') }}">
            </div>
          </div>
          <div class="col-md-4">
            <p>Top Layer</p>
            <div class="form-group form-group-default">
              <input class="typeahead form-control sample-typehead" type="text" name="top_layer"
                placeholder="Top Layer" value="{{ old('top_layer') }}">
            </div>
          </div>
          <div class="col-md-4">
            <p>Foam Layer</p>
            <div class="form-group form-group-default">
              <input class="typeahead form-control sample-typehead" type="text" name="foam_layer"
                placeholder="Foam Layer" value="{{ old('foam_layer') }}">
            </div>
          </div>
          <div class="col-md-4">
            <p>Layer 3</p>
            <div class="form-group form-group-default">
              <input class="typeahead form-control sample-typehead" type="text" name="layer_3"
                placeholder="Layer 3" value="{{ old('layer_3') }}">
            </div>
          </div>
          <div class="col-md-4">
            <p>Firmness</p>
            <div class="form-group form-group-default">
              <input class="typeahead form-control sample-typehead" type="text" name="layer_4"
                placeholder="Firmness" value="{{ old('layer_4') }}">
            </div>
          </div>
          <div class="col-md-4">
            <p>Core</p>
            <div class="form-group form-group-default">
              <input class="typeahead form-control sample-typehead" type="text" name="core"
                placeholder="Core" value="{{ old('core') }}">
            </div>
          </div>
          <div class="col-md-4">
            <p>Basic Care</p>
            <div class="form-group form-group-default">
              <input class="typeahead form-control sample-typehead" type="text" name="basic_care"
                placeholder="Basic Care" value="{{ old('basic_care') }}">
            </div>
          </div>
          <div class="col-md-4">
            <p>Warranty</p>
            <div class="form-group form-group-default">
              <input class="typeahead form-control sample-typehead" type="text" name="warranty"
                placeholder="Warranty" value="{{ old('warranty') }}">
            </div>
          </div>
          <div class="col-md-4">
            <p>Video Link</p>
            <div class="form-group form-group-default">
              <input class="typeahead form-control sample-typehead" type="text" name="video_link"
                placeholder="Video Link" value="{{ old('video_link') }}">
            </div>
          </div>
          <div class="col-md-4">
            <p>Video Slider Link</p>
            <div class="form-group form-group-default">
              <input class="typeahead form-control sample-typehead" type="text" name="video_slider_link"
                placeholder="Video Slider Link" value="{{ old('video_slider_link') }}">
            </div>
          </div>
          <div class="col-md-12">
            <p>Animation Link</p>
            <div class="form-group form-group-default">
              <input class="typeahead form-control sample-typehead" type="text" name="animation_html"
                placeholder="Animation Link" value="{{ old('animation_html') }}">
            </div>
          </div>
          {{-- <div class="col-md-4">
                  <p>Images</p>
                  <div class="form-group form-group-default required">
                    <input type="file" class="form-control" name="images[]" multiple="multiple">
                  </div>
                </div> --}}
          <div class="col-md-12">
            <p>Images</p>
            <input type="file" class="filepond fileupload" name="images[]" multiple data-allow-reorder="true"
              data-max-file-size="3MB" data-max-files="5" />
          </div>

          <div class="col-md-12">
            <div class="form-group">
              <p>Description</p>
              <textarea class="typeahead form-control sample-typehead" type="text" name="description"
                placeholder="Description">{{ old('description') }}</textarea>
            </div>
          </div>
          <div class="col-md-12">
            <div class="form-group">
              <p>Why Choose Description</p>
              <textarea class="typeahead form-control sample-typehead" type="text" name="why_choose_description"
                placeholder="Why Choose Description">{{ old('why_choose_description') }}</textarea>
            </div>
          </div>
          <div class="col-md-12">
            <div class="form-group">
              <p>Suggested Choice</p>
              <textarea class="typeahead form-control wyswyg sample-typehead" type="text" name="suggested_choice"
                placeholder="Suggested Choice">{{ old('suggested_choice') }}</textarea>
            </div>
          </div>

        </div>

        <div class="card-title">
          <h4><strong>Other Details</strong></h4>
        </div>
        <hr>
        <div class="row">
          <div class="col-md-4">
            <p>Is Variant</p>
            <div class="form-group">
              <select class="full-width" data-init-plugin="select2" name="is_variant">
                <option value="2" @if(old('is_variant')==2) selected="selected" @endif>No</option>
                <option value="1" @if(old('is_variant')==1) selected="selected" @endif>Yes</option>
              </select>
            </div>
          </div>
          <div class="col-md-4">
            <p>Is new</p>
            <div class="form-group">
              <select class="full-width" data-init-plugin="select2" name="is_new">
                <option value="1" @if(old('is_new')==1) selected="selected" @endif>Active</option>
                <option value="2" @if(old('is_new')==2) selected="selected" @endif>Inactive</option>
              </select>
            </div>
          </div>
          <div class="col-md-4">
            <p>Is in sale</p>
            <div class="form-group">
              <select class="full-width" data-init-plugin="select2" name="is_in_sale">
                <option value="1" @if(old('is_in_sale')==1) selected="selected" @endif>Active</option>
                <option value="2" @if(old('is_in_sale')==2) selected="selected" @endif>Inactive</option>
              </select>
            </div>
          </div>
          <div class="col-md-4">
            <p>Is in Week Sale</p>
            <div class="form-group">
              <select class="full-width" data-init-plugin="select2" name="is_in_week_sale">
                <option value="1" @if(old('is_in_week_sale')==1) selected="selected" @endif>Active</option>
                <option value="2" @if(old('is_in_week_sale')==2) selected="selected" @endif>Inactive</option>
              </select>
            </div>
          </div>
          <div class="col-md-4">
            <p>Is featured</p>
            <div class="form-group">
              <select class="full-width" data-init-plugin="select2" name="is_featured">
                <option value="1" @if(old('is_featured')==1) selected="selected" @endif>Active</option>
                <option value="2" @if(old('is_featured')==2) selected="selected" @endif>Inactive</option>
              </select>
            </div>
          </div>
          <div class="col-md-4">
            <p>Is Trending</p>
            <div class="form-group">
              <select class="full-width" data-init-plugin="select2" name="is_trending">
                <option value="1" @if(old('is_trending')==1) selected="selected" @endif>Active</option>
                <option value="2" @if(old('is_trending')==2) selected="selected" @endif>Inactive</option>
              </select>
            </div>
          </div>
          <div class="col-md-4">
            <p>Is Bestseller</p>
            <div class="form-group">
              <select class="full-width" data-init-plugin="select2" name="is_best_seller">
                <option value="1" @if(old('is_best_seller')==1) selected="selected" @endif>Yes</option>
                <option value="2" @if(old('is_best_seller')==2) selected="selected" @endif>No</option>
              </select>
            </div>
          </div>
        </div>

        <div class="card-title">
          <h4><strong>Super Admin Details</strong></h4>
        </div>
        <hr>
        <div class="row">
          <div class="col-md-4">
            <div class="form-group">
              <p>Category <span class="text-danger">*</span></p>
              <select class="full-width" data-init-plugin="select2" name="category_id" id="categories"
                required="required">
                @if(count($categories) != 0)
                <option value="">Select Category</option>
                @foreach( $categories as $category )
                <option value="{{$category->id}}" @if(old('category_id')) @if(old('category_id')==$category->id)
                  selected="selected"
                  @endif
                  @endif
                  >{{$category->category}}</option>
                @endforeach
                @endif
              </select>
            </div>
          </div>
          {{-- <div class="col-md-4">
            <div class="form-group">
              <p>Sub Category <span class="text-danger">*</span></p>
              <select @if(!old('state')) disabled="disabled" @endif class="full-width" data-init-plugin="select2"
                name="sub_category_id" id="subCategories" required="required">
                @if(count($states) != 0)
                              <option value = "">Select State</option>
                              @foreach( $states as $state )
                                  <option value="{{$state->id}}"
                @if(old('state'))
                @if(old('state') == $state->id)
                selected="selected"
                @endif
                @endif
                >{{$state->name}}</option>
                @endforeach
                @endif
              </select>
            </div>
          </div> --}}
          <div class="col-md-4">
            <div class="form-group">
              <p>Product Variants</p>
              <select @if(!old('product_variants')) disabled="disabled" @endif class="full-width pro-variants"
                data-init-plugin="select2" name="product_variants[]" id="product_variants" multiple>
                {{-- @if(count($states) != 0)
                              <option value = "">Select State</option>
                              @foreach( $states as $state )
                                  <option value="{{$state->id}}"
                @if(old('state'))
                @if(old('state') == $state->id)
                selected="selected"
                @endif
                @endif
                >{{$state->name}}</option>
                @endforeach
                @endif --}}
              </select>
            </div>
          </div>
          {{-- <div class="col-md-4">
                  <div class="form-group">
                    <p>Color <span class="text-danger">*</span></p>
                      <select class="full-width" data-init-plugin="select2" name="color_id" id="userCity" required="required">
                        @if(count($colors) != 0)
                            <option value>Select City</option>
                            @foreach( $colors as $color )
                              <option value="{{$color->id}}"
          @if(old('color_id'))
          @if(old('color_id') == $color->id)
          selected="selected"
          @endif
          @endif
          >{{$color->color}}</option>
          @endforeach
          @endif
          </select>
        </div>
    </div> --}}
    <div class="col-md-4">
      <div class="form-group">
        <p>Color</p>
        <select class="full-width" data-init-plugin="select2" name="color_id[]" multiple="multiple">
          <option value>Select Color</option>
          @if(count($colors) != 0)
          @foreach( $colors as $color )
          <option value="{{$color->id}}" @if(old('color_id')) @php $oldcolors=old('color_id'); @endphp @foreach(
            $oldcolors as $oldcolor ) @if($oldcolor==$color->id)
            selected="selected"
            @endif
            @endforeach
            @endif
            >{{$color->color}}</option>
          @endforeach
          @endif
        </select>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <p>Discount</p>
        <select class="full-width" data-init-plugin="select2" name="discount_id">
          @if(count($discounts) != 0)

          @foreach( $discounts as $discount )
          <option value="{{$discount->id}}" @if(old('discount_id')) @if(old('discount_id')==$discount->id)
            selected="selected"
            @endif
            @endif
            >{{$discount->discount_percentage}}</option>
          @endforeach
          @endif
        </select>
      </div>
    </div>
    <div class="col-md-4">
                  <div class="form-group">
                    <p>Fabric</p>
                    <select class="full-width" data-init-plugin="select2" name="fabric_id" required="required">
                      @if(count($fabrics) != 0)
                          
                          @foreach( $fabrics as $fabric )
                            <option value="{{$fabric->id}}"
    @if(old('fabric_id'))
    @if(old('fabric_id') == $fabric->id)
    selected="selected"
    @endif
    @endif
    >{{$fabric->fabric}}</option>
    @endforeach
    @endif
    </select>
  </div>
</div>
{{-- <div class="col-md-4">
  <div class="form-group">
    <p>Fabric</p>
    <select class="full-width" data-init-plugin="select2" name="fabric_id[]" multiple="multiple">

      @if(count($fabrics) != 0)
      @foreach( $fabrics as $fabric )
      <option value="{{$fabric->id}}" @if(old('fabric_id')) @php $oldfabrics=old('fabric_id'); @endphp @foreach(
        $oldfabrics as $oldfabric ) @if($oldfabric==$fabric->id)
        selected="selected"
        @endif
        @endforeach
        @endif
        >{{$fabric->fabric}}</option>
      @endforeach
      @endif
    </select>
  </div>
</div> --}}
{{-- <div class="col-md-4">
                  <div class="form-group">
                    <p>Sizes</p>
                    <select class="full-width" data-init-plugin="select2" name="size_id" required="required">
                      @if(count($sizes) != 0)
                          
                          @foreach( $sizes as $size )
                            <option value="{{$size->id}}"
@if(old('size_id'))
@if(old('size_id') == $size->id)
selected="selected"
@endif
@endif
>{{$size->size}}</option>
@endforeach
@endif
</select>
</div>
</div> --}}
<div class="col-md-4">
  <div class="form-group">
    <p>Sizes</p>
    <select class="full-width" data-init-plugin="select2" name="size_id[]" multiple="multiple">
      @if(count($sizes) != 0)
      @foreach( $sizes as $size )
      <option value="{{$size->id}}" @if(old('size_id')) @php $oldSizes=old('size_id'); @endphp @foreach( $oldSizes as
        $oldSize ) @if($oldSize==$size->id)
        selected="selected"
        @endif
        @endforeach
        @endif
        >{{$size->size}}</option>
      @endforeach
      @endif
    </select>
  </div>
</div>

<div class="col-md-4">
  <div class="form-group">
    <p>Dimensions not to be shown</p>
    <select class="full-width" data-init-plugin="select2" name="dimension_id[]" multiple="multiple">

      @if(count($dimensions) != 0)
      @foreach( $dimensions as $dimension )
      <option value="{{$dimension->id}}" @if(old('dimension_id')) @php $olddimensions=old('dimension_id'); @endphp @foreach(
        $olddimensions as $olddimension ) @if($olddimension==$dimension->id)
        selected="selected"
        @endif
        @endforeach
        @endif
        >{{$dimension->title}}</option>
      @endforeach
      @endif
    </select>
  </div>
</div>

<div class="col-md-4">
  <div class="form-group">
    <p>Thickness</p>
    <select class="full-width" data-init-plugin="select2" name="thickness_id[]" multiple="multiple">

      @if(count($thickness) != 0)
      @foreach( $thickness as $thickness )
      <option value="{{$thickness->id}}" @if(old('thickness_id')) @php $oldthicknesses=old('thickness_id'); @endphp @foreach(
        $oldthicknesses as $oldthickness ) @if(old('thickness_id')==$thickness->id)
        selected="selected"
        @endif
        @endforeach
        @endif
        >{{$thickness->title}}</option>
      @endforeach
      @endif
    </select>
  </div>
</div>

{{-- <div class="col-md-4">
  <div class="form-group">
    <p>Prices</p>
    <select class="full-width" data-init-plugin="select2" name="price_id" required="required">
      @if(count($prices) != 0)

      @foreach( $prices as $price )
      <option value="{{$price->id}}" @if(old('price_id')) @if(old('price_id')==$price->id)
        selected="selected"
        @endif
        @endif
        >{{$price->lower_price}} - {{$price->higher_price}}</option>
      @endforeach
      @endif
    </select>
  </div>
</div> --}}
<div class="col-md-4">
  <div class="form-group">
    <p>Product Tags</p>
    <select class="full-width" data-init-plugin="select2" name="tags[]" multiple="multiple">
      @if(count($tags) != 0)
      @foreach( $tags as $tag )
      <option value="{{$tag->id}}" @if(old('tags')) @php $oldFVCS=old('tags'); @endphp @foreach( $oldFVCS as $oldTag )
        @if($oldTag==$tag->id)
        selected="selected"
        @endif
        @endforeach
        @endif
        >{{$tag->tag}}</option>
      @endforeach
      @endif
    </select>
  </div>
</div>

{{-- <div class="col-md-4">
  <div class="form-group">
    <p>Collection</p>
    <select class="full-width" data-init-plugin="select2" name="collections[]" multiple="multiple">
      @if(count($collections) != 0)
      @foreach( $collections as $collection )
      <option value="{{$collection->id}}" @if(old('collections')) @php $oldCollection=old('collections'); @endphp
        @foreach( $oldCollection as $oldCollection ) @if($oldCollection==$collection->id)
        selected="selected"
        @endif
        @endforeach
        @endif
        >{{$collection->collection}}</option>
      @endforeach
      @endif
    </select>
  </div>
</div> --}}
<div class="col-md-12">
  {{-- <div class="card-title">
    <h4><strong>Sizes</strong></h4>
  </div>
  <hr> --}}

  {{-- sizes new --}}
  {{-- <button class="btn btn-primary add_field_button">Add Sizes</button> --}}
  {{-- sizes new --}}
  {{-- <div class="input_fields_wrap"> --}}
    {{-- <div class="col-md-6">
      <p>Size</p>
      <input type="text" class="typeahead form-control sample-typehead" name="sizes[]" value="">
    </div>
    <div class="col-md-6">
      <p>SKU</p>
      <input type="text" class="typeahead form-control sample-typehead" name="skus[]" value="">
    </div>
    <div class="col-md-6">
      <p>Price</p>
      <input type="text" class="typeahead form-control sample-typehead" name="prices[]" value="">
    </div>
    <div class="col-md-6">
      <p>Discount Price</p>
      <input type="text" class="typeahead form-control sample-typehead" name="discountprices[]" value="">
    </div>
    <div class="col-md-6">
      <p>Stock</p>
      <input type="text" class="typeahead form-control sample-typehead" name="stocks[]" value="">
    </div> --}}
    {{-- <a href="#" class="btn btn-danger remove_field" data-image-key="{{$key}}" data-content-id =
    "{{$data->id}}">Remove</a> --}}
  {{-- </div> --}}
</div>

<div class="card-title">
  <h4><strong>SEO</strong></h4>
</div>
<hr>
<div class="col-md-4">
  <p>Meta Title</p>
  <div class="form-group form-group-default  txtOnly">
    <input class="typeahead form-control sample-typehead" type="text" placeholder="Meta Title"
      value="{{ old('meta_title') }}" name="meta_title">
  </div>
</div>

<div class="col-md-12">
  <p>Meta Description</p>
  <div class="form-group form-group-default  txtOnly">
    <input class="typeahead form-control sample-typehead" type="text" placeholder="Meta Description"
      value="{{ old('meta_description') }}" name="meta_description">
  </div>
</div>

<div class="col-md-12">
  <p>Key Words</p>
  <div class="form-group form-group-default  txtOnly">
    <input class="typeahead form-control sample-typehead" type="text" placeholder="Key Words"
      value="{{ old('keywords') }}" name="keywords">
  </div>
</div>

</div>

<div class="card-title">
  <h4><strong>Status</strong></h4>
</div>
<hr>
<div class="row">
  <div class="col-md-4">
    <div class="form-group">
      <select class="full-width" data-init-plugin="select2" name="status">
        <option value="1" @if(old('status')==1) selected="selected" @endif>Active</option>
        <option value="2" @if(old('status')==2) selected="selected" @endif>Inactive</option>
      </select>
    </div>
  </div>
  <div class="col-md-8">
    <button class="btn btn-success pull-right" type="submit">Create a product</button>
  </div>
</div>
</form>
</div>
</div>
<!-- END ROW -->
</div>
<!-- END CONTAINER FLUID -->
</div>
<!-- END PAGE CONTENT -->
@include('admin.partials.footer')
<!-- END COPYRIGHT -->
</div>
<!-- END PAGE CONTENT WRAPPER -->
</div>
<!-- END PAGE CONTAINER -->
@endsection

@section('page-level-js')
<script type="text/javascript">
  $(document).on('change', '#categories', function(event) {
        var categoryId = $(this).val(); 
        // $.ajax({
        //         url: "{{route('subcategories.get')}}",
        //         type: "get",
        //         data: {'categoryId' : categoryId},
        //         success: function(response) {
        //             console.log(response);
        //             var output = JSON.parse(response);
        //             $('#subCategories').removeAttr('disabled');
        //             $('#subCategories').html(output);
        //         }
        //     })
        $.ajax({
                url: "{{route('productvariants.get')}}",
                type: "get",
                data: {'categoryId' : categoryId},
                success: function(response) {
                    // console.log(response);
                    var output = JSON.parse(response);
                    $('#product_variants').removeAttr('disabled');
                    $('#product_variants').html(output);
                }
            })
    });
    // $(document).on('change', '#subCategories', function(event) {
    //     var subCategoryId = $(this).val(); 
    //     $.ajax({
    //             url: "{{route('productvariants.get')}}",
    //             type: "get",
    //             data: {'subCategoryId' : subCategoryId},
    //             success: function(response) {
    //                 // console.log(response);
    //                 var output = JSON.parse(response);
    //                 $('#product_variants').removeAttr('disabled');
    //                 $('#product_variants').html(output);
    //             }
    //         })
    // });
    $(".pro-variants").select2({
    templateResult: formatState,
    templateSelection: formatState
    });

    function formatState (opt) {
        if (!opt.id) {
            return opt.text.toUpperCase();
        } 

        var optimage = $(opt.element).attr('data-image'); 
        console.log(optimage)
        if(!optimage){
          return opt.text.toUpperCase();
        } else {                    
            var $opt = $(
              '<span><img src="' + optimage + '" width="60px" /> ' + opt.text.toUpperCase() + '</span>'
            );
            return $opt;
        }
    };
</script>

<script>
  /*
    We want to preview images, so we need to register the Image Preview plugin
    */
    FilePond.registerPlugin(
      
      // encodes the file as base64 data
      FilePondPluginFileEncode,
      
      // validates the size of the file
      FilePondPluginFileValidateSize,
      
      // corrects mobile image orientation
      FilePondPluginImageExifOrientation,
      
      // previews dropped images
      FilePondPluginImagePreview
    );

    // Select the file input and use create() to turn it into a pond
    FilePond.create(
      document.querySelector('input.fileupload')
    );

  $(document).ready(function() {
	var max_fields      = 10; //maximum input boxes allowed
	var wrapper   		= $(".input_fields_wrap"); //Fields wrapper
	var add_button      = $(".add_field_button"); //Add button ID
	
	var x = 1; //initlal text box count
	$(add_button).click(function(e){ //on add input button click
		e.preventDefault();
		if(x < max_fields){ //max input box allowed
			x++; //text box increment
			$(wrapper).append('<div class="col-md-6"><h5>Size Data</h5><hr><p>Size</p><input type="text" class="typeahead form-control sample-typehead" name="sizes[]" value=""><p>SKU</p><input type="text" class="typeahead form-control sample-typehead" name="skus[]" value=""><p>Price</p>  <input type="text" class="typeahead form-control sample-typehead" name="prices[]" value=""><p>Discount Price</p><input type="text" class="typeahead form-control sample-typehead" name="discountprices[]" value=""><p>Stock</p><input type="text" class="typeahead form-control sample-typehead" name="stocks[]" value=""><a href="#" class="btn btn-danger remove_deal_field">Remove</a></div>'); 
		}
	});

  $(wrapper).on("click",".remove_deal_field", function(e){ //user click on remove text
  e.preventDefault(); $(this).parent('div').remove(); x--;
  
  });

});

tinymce.init({
      selector: '.wyswyg',
      height: 470,
      menubar: true,
      plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks fullscreen',
        'insertdatetime media table contextmenu ',
        'wordcount',
        'code'
      ],
      relative_urls : false,
      remove_script_host : false,
      convert_urls : true,
      toolbar: 'code | undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code ',
      toolbar_drawer: 'sliding',
      permanentpen_properties: {
        fontname: 'arial,helvetica,sans-serif',
        forecolor: '#FF0000',
        fontsize: '18pt',
        hilitecolor: '',
        bold: true,
        italic: false,
        strikethrough: false,
        underline: false
      },
      table_toolbar: "tableprops cellprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol",
        file_picker_callback: function (callback, value, meta) {
                if (meta.filetype == 'image') {
                    $('#upload').trigger('click');
                    $('#upload').on('change', function () {
                        var file = this.files[0];
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            callback(e.target.result, {
                                alt: ''
                            });
                        };
                        reader.readAsDataURL(file);
                    });
                }
            },
    });


</script>

@endsection