@extends('layout.admin.master')

@section('meta-title', 'LEREVE - Create Product')
@section('body-class', 'menu-position-side menu-side-left full-screen with-content-panel')

@section('breadcrumbs')
  <li class="breadcrumb-item">
    <a href="{{route(session('role').'.product.list')}}">Products</a>
  </li>
  <li class="breadcrumb-item">
    <span>Create</span>
  </li>
@endsection

@push('asset-top')
    
@endpush

@section('content')
  <div class="element-wrapper">
    <h6 class="element-header">
      Product
    </h6>
    <div class="element-box">
      <form method="post" enctype="multipart/form-data" action="{{route(session('role').'.product.store')}}">
        @csrf
        <h5 class="form-header">
          Create
        </h5>
        <div class="form-desc">
          <!-- Discharge best employed your phase each the of shine. Be met even reason consider logbook redesigns. Never a turned interfaces among asking -->
        </div>
        <div class="form-group">
          <label for=""> Name (English)</label>
          <input class="form-control" name="name_en" placeholder="Enter Product Name" required="required" type="text">
          @error('name_en')
              <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
          @enderror
        </div>
        <div class="form-group">
          <label for=""> Name (Arabic)</label>
          <input class="form-control" name="name_ar" placeholder="Enter Product Name ( Arabic )"  type="text">
          @error('name_ar')
              <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
          @enderror
        </div>        
        <div class="form-group">
          <label for=""> Description (English)</label>
          <textarea cols="80" class="ckeditor-text" name="description_en" rows="10" style="visibility: hidden; display: none;"></textarea>
          @error('description_ar')
              <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
          @enderror
        </div>
        <div class="form-group">
          <label for=""> Description (Arabic)</label>
          <textarea cols="80" class="ckeditor-text" name="description_ar" rows="10" style="visibility: hidden; display: none;"></textarea>
          @error('description_ar')
              <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
          @enderror
        </div>
        <div class="row">
          <div class="col-6">
            <div class="form-group">
              <label for=""> Category</label>
              <select name="category_id" class="form-control select2">
                <option value="0">Select</option>
                @foreach($categories as $category)
                  <option value="{{$category->id}}">{{$category->name_en}}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-6">            
            <div class="form-group">
              <label for=""> Occasion</label>
              <select name="occasion_id" class="form-control select2">
                <option value="0">Select</option>
                @foreach($occasions as $occasion)
                  <option value="{{$occasion->id}}">{{$occasion->name_en}}</option>
                @endforeach
              </select>
            </div>
          </div>
        </div>
        <!-- location and dimension -->
        <div class="row">
          <div class="col-6">
            <div class="form-group">
              <label for="">Placed Location</label>
              <input class="form-control" name="location" placeholder="Placed Location"  type="number">
              @error('location')
                  <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
              @enderror
            </div>
          </div>
          <div class="col-2">
            <div class="form-group">
              <label>Dimensions</label>
              <input type="text" name="length" class="form-control" placeholder="L">
            </div>
          </div>
          <div class="col-2">
            <div class="form-group">
              <label>&nbsp;</label>
              <input type="text" name="width" class="form-control" placeholder="W">
            </div>
          </div>
          <div class="col-2">
            <div class="form-group">
              <label>&nbsp;</label>
              <input type="text" name="height" class="form-control" placeholder="H">
            </div>
          </div>

        </div>
        <div class="row">
          <div class="col-4">
            <div class="form-group">
              <label>Price</label>
              <input required class="form-control" placeholder="Price*" type="number" step="0.0001" name="single_price">
            </div>
          </div>
          <div class="col-4">
            <div class="form-group">
              <label>Sale Price</label>
              <input class="form-control" placeholder="Sale Price" type="number" step="0.0001" name="single_sale_price">
            </div>
          </div>
          <div class="col-4">
            <div class="form-group">
              <label>Quantity</label>
              <input required class="form-control" placeholder="Quantity" type="number" name="single_quantity">
            </div>
          </div>
        </div>
        <!-- <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
            </div>
          </div>
          <div class="col-sm-6">
            
          </div>
        </div> -->
        <div class="form-check check-toggler" style="margin-bottom: 10px;">
          <label for="prepare_on" class="form-check-label"> 
            <div class="os-toggler-w">
              <div class="os-toggler-i">
                <div class="os-toggler-pill"></div>
              </div>
            </div>
            <input class="form-check-input" id="prepare_on" name="prepare_on" type="checkbox" value="1" style="display:none;"> Preparation Time
          </label>
          <!-- <label for="prepare_on" class="form-check-label"> 
            <input class="form-check-input" id="prepare_on" name="prepare_on" type="checkbox" value="1" > Preparation Time
          </label> -->
        </div>
        <div class="row prepare_on" style="display:none;">
          <div class="col-2">
            <div class="form-group">
              <!-- <label for=""> Preparation Time</label> -->
              <select class="form-control" name="units">
                <option value="minutes" >Minutes</option>
                <option value="hours" >Hours</option>
                <option value="days" >Days</option>
              </select>
            </div>
          </div>
          <div class="col-10">
            <div class="form-group">
              <!-- <label>&nbsp;</label> -->
              <input class="form-control" name="preparation_time" placeholder="Preparation Time" type="number" min="0">
              @error('preparation_time')
                <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
              @enderror
            </div>
          </div>
        </div>

        <div class="form-check check-toggler" style="margin-bottom: 10px;">
          <label for="addon" class="form-check-label"> 
            <div class="os-toggler-w">
              <div class="os-toggler-i">
                <div class="os-toggler-pill"></div>
              </div>
            </div>
            <input class="form-check-input" id="addon" name="addon" type="checkbox" value="1" style="display:none;"> Addons
          </label>
        </div>
        <fieldset class="form-group addon">
          <legend><span>Addons</span></legend>
          @if($addons)
            <div class="row ar-select-list addon-list">
              @foreach($addons as $addon)
                <div class="col-3">
                  <div class="form-check" style="margin-bottom: 10px;">
                    <label for="addon_val_{{$addon->id}}" class="form-check-label"> 
                      <div class="os-toggler-w">
                        <div class="os-toggler-i">
                          <div class="os-toggler-pill"></div>
                        </div>
                      </div>
                      <input class="form-check-input" id="addon_val_{{$addon->id}}" name="addon_val[]" type="checkbox" value="{{$addon->id}}" style="display:none;"> {{$addon->name_en}}
                    </label>
                  </div>
                </div>
              @endforeach
            </ul>
          @endif
          @error('addon_val')
            <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
          @enderror
        </fieldset>
        <div class="form-check check-toggler" style="margin-bottom: 10px;">
          <label for="variation" class="form-check-label"> 
            <div class="os-toggler-w">
              <div class="os-toggler-i">
                <div class="os-toggler-pill"></div>
              </div>
            </div>
            <input class="form-check-input" id="variation" name="variation" type="checkbox" value="1" style="display:none;"> Variation
          </label>
        </div>
        <fieldset class="form-group variation">
          <legend><span>Variations</span></legend>
          @if($variations)
            <div class="row ar-select-list variation-list">
              @foreach($variations as $variation)
                <div class="col-3">
                  <div class="form-check" style="margin-bottom: 10px;">
                    <label for="variation_val_{{$variation->id}}" class="form-check-label"> 
                      <div class="os-toggler-w">
                        <div class="os-toggler-i">
                          <div class="os-toggler-pill"></div>
                        </div>
                      </div>
                      <input class="form-check-input" id="variation_val_{{$variation->id}}" name="variation_val[]" type="checkbox" value="{{$variation->id}}" data-type="{{$variation->input_type}}" style="display:none;" data-qty="{{$variation->checkbox_qty}}" > {{$variation->name_en}}
                    </label>
                  </div>
                </div>
              @endforeach
            </div>
          @endif
          @error('variation_val')
            <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
          @enderror
        </fieldset>
        @if($varval)
          @foreach($variations as $variation)
            <fieldset class="form-group inner-variation-list variation-{{$variation->id}}" style="display:none;">
              <legend>
                <span class="variation-name">Variation : {{$variation->name_en}}</span>
              </legend>
              <div class="row variation-heads">
                @if($variation->input_type!='text')
                  <div class="col-3">
                    <div class="form-group">
                      <label>Value</label>
                    </div>
                  </div>
                  <div class="col-3">
                    <div class="form-group">
                      <label>Price</label>                
                    </div>
                  </div>
                  <div class="col-3">
                    <div class="form-group">
                      <label>Sale Price</label>                
                    </div>
                  </div>
                  <div class="col-3">
                    <div class="form-group">
                      <label>Quantity</label>                
                    </div>
                  </div>
                @else
                  <div class="col-4">
                    <div class="form-group">
                      <label>Value</label>
                    </div>
                  </div>
                  <div class="col-4">
                    <div class="form-group">
                      <label>Price</label>                
                    </div>
                  </div>
                  <div class="col-4">
                    <div class="form-group">
                      <label>Required</label>                
                    </div>
                  </div>
                @endif
              </div>
              @if($variation->input_type!='text')
                @foreach($varval[$variation->id] as $value)
                  <div class="row main-row">
                    <div class="col-3">
                      <div class="form-group">
                        <input type="text" name="varval[{{$variation->id}}][{{$value->id}}][name]" value="{{$value->name_en}}" id="varval" class="form-control" readonly>
                      </div>
                    </div>
                    <div class="col-3">
                      <div class="form-group">
                        <input class="form-control" name="varval[{{$variation->id}}][{{$value->id}}][price]" @if($variation->input_type=='checkbox') value="{{$value->price}}" @else value="0" @endif id="price" placeholder="Price" type="number" step="0.0001">
                      </div>
                    </div>
                    <div class="col-3">
                      <div class="form-group">
                        <input class="form-control" name="varval[{{$variation->id}}][{{$value->id}}][sale_price]" placeholder="Sale Price"  id="sale-price" type="number" step="0.0001">
                      </div>
                    </div>
                    <div class="col-3">
                      <div class="form-group">
                        <input class="form-control" id="quantity" name="varval[{{$variation->id}}][{{$value->id}}][quantity]" placeholder="Quantity*" type="number">
                      </div>
                    </div>
                  </div>
                @endforeach
              @else
                <div class="row">
                  <div class="col-4">
                    <div class="form-group">
                      <input type="text" name="varval[{{$variation->id}}][{{$variation->id}}][name]" value="{{$variation->name_en}}" id="varval" class="form-control" readonly>
                    </div>
                  </div>
                  <div class="col-4">
                    <div class="form-group">
                      <input class="form-control" name="varval[{{$variation->id}}][{{$variation->id}}][price]" value="{{$variation->textprice}}" id="price" placeholder="Price" type="number" step="0.0001">
                    </div>
                  </div>
                  <div class="col-4">
                    <div class="form-check check-toggler">
                      <label for="text_req" class="form-check-label"> 
                        <div class="os-toggler-w @if($variation->text_req==1) on @endif">
                          <div class="os-toggler-i">
                            <div class="os-toggler-pill"></div>
                          </div>
                        </div>
                        <input class="form-check-input" name="varval[{{$variation->id}}][{{$variation->id}}][text_req]" id="text_req" type="checkbox" value="1" @if($variation->text_req==1) checked @endif style="display: none;">
                      </label>
                    </div>
                  </div>
                </div>
              @endif
            </fieldset>
          @endforeach
        @endif
        <!-- <div class="form-group variation" >
          <label for=""> Weights</label>
          <select name="weights[]" id="weights" class="form-control select2" multiple>
            @foreach($weight as $weight)
            <option value="{{$weight->weight}}">{{$weight->weight}}</option>
            @endforeach
          </select>
        </div> -->
        <!-- <fieldset class="form-group sizes variation">
          <legend><span>Weights</span></legend>
          <div class="row">
            <div class="col-3">
              <div class="form-group">
                <label>Weight</label>                
              </div>
            </div>
            <div class="col-3">
              <div class="form-group">
                <label>Price</label>                
              </div>
            </div>
            <div class="col-3">
              <div class="form-group">
                <label>Sale Price</label>                
              </div>
            </div>
            <div class="col-3">
              <div class="form-group">
                <label>Quantity</label>                
              </div>
            </div>
          </div>
          <div class="row main-row" style="display:none;">
            <div class="col-3">
              <div class="form-group">
                <input type="text" id="size" class="form-control" readonly>
              </div>
            </div>
            <div class="col-3">
              <div class="form-group">
                <input class="form-control" id="price" placeholder="Price" type="number" step="0.0001">
              </div>
            </div>
            <div class="col-3">
              <div class="form-group">
                <input class="form-control" placeholder="Sale Price"  id="sale-price" type="number" step="0.0001">
              </div>
            </div>
            <div class="col-3">
              <div class="form-group">
                <input class="form-control" id="quantity" placeholder="Quantity" type="number">
              </div>
            </div>
          </div>
        </fieldset> -->
        <!-- Media -->
        <fieldset class="form-group media">
          <legend><span>Media</span></legend>
          <div class="form-group">
            <label for=""> Thumbnail</label>
            <input class="form-control" name="thumbnail" type="file">
            @error('thumbnail')
              <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
            @enderror
          </div>
          <div class="form-group">
            <label for=""> Gallery</label>
            <input class="form-control" name="gallery[]" type="file" multiple>              
          </div>
          <div class="form-group">
            <label for=""> Video</label>
            <input type="file" name="video" class="form-control">              
          </div>
        </fieldset>
        
        <div class="row" >
          <div class="col-4">
            <div class="form-check check-toggler">
              <label for="new" class="form-check-label"> 
                <div class="os-toggler-w on">
                  <div class="os-toggler-i">
                    <div class="os-toggler-pill"></div>
                  </div>
                </div>
                <input class="form-check-input" name="new" id="new" type="checkbox" value="1" checked style="display: none;"> New
              </label>
            </div>
          </div>
          <div class="col-4">
            <div class="form-check check-toggler">
              <label for="preorder" class="form-check-label"> 
                <div class="os-toggler-w">
                  <div class="os-toggler-i">
                    <div class="os-toggler-pill"></div>
                  </div>
                </div>
                <input class="form-check-input" id="preorder" name="preorder" type="checkbox" value="1" style="display:none;"> Preorder
              </label>
            </div>
          </div>
          <div class="col-4">
            <div class="form-check check-toggler">
              <label class="form-check-label"> 
                <div class="os-toggler-w on">
                  <div class="os-toggler-i">
                    <div class="os-toggler-pill"></div>
                  </div>
                </div>
                <input class="form-check-input" name="visible" type="checkbox" value="1" checked style="display:none;"> Active
              </label>
            </div>
          </div>
        </div>
        <div class="form-buttons-w">
          <button class="btn btn-primary" type="submit"> Submit</button>
        </div>
      </form>
    </div>
  </div>
@endsection
@push('asset-bottom')
<script type="text/javascript">
  // jQuery('body').on('change', '#weights', function(){
  //   sizes = jQuery(this).val();
  //   jQuery.each(sizes, function(i){
  //     if(!jQuery('input[name="size['+sizes[i]+']"]').length){
  //       cloned = jQuery('fieldset .main-row:first').clone();
  //       cloned.find('#size').val(sizes[i]);
  //       cloned.find('#size').attr('name','size['+sizes[i]+']');
  //       cloned.find('#price').attr('name','price['+sizes[i]+']');
  //       cloned.find('#sale-price').attr('name','sale_price['+sizes[i]+']');
  //       cloned.find('#quantity').attr('name','quantity['+sizes[i]+']');
  //       cloned.attr('data-size',sizes[i]);
  //       cloned.show();
  //       cloned.appendTo('fieldset.sizes');
  //     }
  //   });
    
  //   jQuery('fieldset.sizes .main-row').each(function(index) {
  //     var dataSize = jQuery(this).data('size');

  //     // Check if this row is the first row (index 0)
  //     if (index !== 0 && jQuery.inArray(dataSize, sizes) < 0) {
  //         jQuery(this).remove(); // Remove rows that are not the first and not in sizes
  //     }
  //   });
  // });

  jQuery('body').on('click', 'input[name="prepare_on"]', function(){
    if(jQuery(this).is(':checked')){
      jQuery('.prepare_on').show(500);
    } else {
      jQuery('.prepare_on').hide(500);
    }
  });

  jQuery('body').on('click', 'input[name="addon"]', function(){
    if(jQuery(this).is(':checked')){
      jQuery('.addon').show(500);
    } else {
      jQuery('.addon').hide(500);
    }
  });

  jQuery('body').on('click', 'input[name="variation"]', function(){
    if(jQuery(this).is(':checked')){
      jQuery('.variation').show(500);
    } else {
      jQuery('.variation').hide(600);
      jQuery('.inner-variation-list').hide(500);
      jQuery('.variation-list input').attr('checked', false);
      jQuery('.variation-list .os-toggler-w').removeClass('on');
    }
  });

  jQuery('body').on('click', '.variation-list input', function(){
    // var variations = {!! str_replace("'", "\'", json_encode($varval)) !!};
    val = jQuery(this).val();
    if(jQuery(this).is(':checked')){
      // jQuery('.variation-'+val+' #price').attr('required', 'required');
      jQuery('.variation-'+val+' #quantity').attr('required', 'required');
      jQuery('.inner-variation-list.variation-'+val).show(500);
    } else {
      jQuery('.inner-variation-list.variation-'+val).hide(500);
      // jQuery('.variation-'+val+' #price').removeAttr('required');
      jQuery('.variation-'+val+' #quantity').removeAttr('required');
    }
  });

</script>
@endpush