@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="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 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 class="row">
          <div class="col-sm-6">
            <div class="form-group">
            </div>
          </div>
          <div class="col-sm-6">
            
          </div>
        </div> -->
        <div class="form-group">
          <label for=""> Preparation Time</label>
          <input class="form-control" name="preparation_time" placeholder="Preparation Time" type="text">
          @error('preparation_time')
              <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
          @enderror
        </div>

        <div class="form-group">
          <label for=""> Weights</label>
          <select name="weights[]" id="weights" class="form-control select2" multiple>
            <option>Select</option>
            <option value="250gm">250gm</option>
            <option value="500gm">500gm</option>
            <option value="750gm">750gm</option>
            <option value="1kg">1kg</option>
          </select>
        </div>
        <fieldset class="form-group sizes">
          <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.100">                
              </div>
            </div>
            <div class="col-3">
              <div class="form-group">
                <input class="form-control" placeholder="Sale Price" id="sale-price" type="number" step="0.100">               
              </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">
          <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">
              <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">
              <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">
              <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(){
      dataSize = jQuery(this).data('size');
      if(jQuery.inArray(dataSize, sizes)<0){
        jQuery(this).remove();
      }
    });
  });
</script>
@endpush