@extends('layout.admin.master')

@section('meta-title', 'LEREVE - Update 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>Update</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.update', ['slug'=>$product->slug])}}">
        @csrf
        <h5 class="form-header">
          Update
        </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" value="{{$product->name_en}}" 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 )" value="{{$product->name_ar}}" 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;">{{$product->description_en}}</textarea>
          @error('description_en')
              <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;">{{$product->name_ar}}</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}}" {{($product->category_id == $category->id)?'selected':''}}>{{$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}}" {{($product->occasion_id == $occasion->id)?'selected':''}}>{{$occasion->name_en}}</option>
            @endforeach
          </select>
        </div>
        <div class="form-group">
          <label for=""> Preparation Time</label>
          <input class="form-control" name="preparation_time" placeholder="Preparation Time" value="{{$product->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" {{(in_array('250gm', json_decode($product->measurements, true)))?'selected':''}}>250gm</option>
            <option value="500gm" {{(in_array('500gm', json_decode($product->measurements, true)))?'selected':''}}>500gm</option>
            <option value="750gm" {{(in_array('750gm', json_decode($product->measurements, true)))?'selected':''}}>750gm</option>
            <option value="1kg" {{(in_array('1kg', json_decode($product->measurements, true)))?'selected':''}}>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>
          @php
            $sizes = json_decode($product->measurements, true);
            $prices = json_decode($product->price, true);
            $sale_prices = json_decode($product->sale_price, true);
            $quantities = json_decode($product->quantity, true);
          @endphp
          @foreach($sizes as $size)
            <div class="row main-row" data-size="{{$size}}">
              <div class="col-3">
                <div class="form-group">
                  <input type="text" id="size" name="size[{{$size}}]" value="{{$size}}" class="form-control" readonly>
                </div>
              </div>
              <div class="col-3">
                <div class="form-group">
                  <input class="form-control" id="price" name="price[{{$size}}]" value="{{$prices[$size]}}" placeholder="Price" required="required" type="number" step="0.100">                
                </div>
              </div>
              <div class="col-3">
                <div class="form-group">
                  <input class="form-control" name="sale_price[{{$size}}]" value="{{$sale_prices[$size]}}" 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" name="quantity[{{$size}}]" value="{{$quantities[$size]}}" id="quantity" placeholder="Quantity" required="required" type="number">
                </div>
              </div>
            </div>
          @endforeach
        </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">
            @if($product->thumbnail)
              <img src="/gallery/products/images/{{$product->thumbnail}}" class="" style="width: 150px; margin-top: 10px;">
            @endif
            @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> 
            @if($product->gallery)
              @php $gallery = explode(',', $product->gallery); @endphp
              @foreach($gallery as $img)
                <img src="/gallery/products/images/{{$img}}" class="" style="width: 150px; margin-top: 10px; margin-right: 10px;">
              @endforeach
            @endif             
          </div>
          <div class="form-group">
            <label for=""> Video</label>
            <input type="file" name="video" class="form-control">  
            @if($product->video)
            <video width="320" height="240" controls>
              <source src="/gallery/products/videos/{{$product->video}}" type="video/mp4">
            </video>
              <!-- <img src="/gallery/products/videos/{{$category->thumbnail}}" class="" style="width: 150px; margin-top: 10px;"> -->
            @endif            
          </div>
        </fieldset>
        <div class="form-check">
          <label for="" class="form-check-label"> 
            <input class="form-check-input" name="new" type="checkbox" value="1" {{($product->new==1)?'checked':''}}> New
          </label>
        </div>
        <div class="form-check">
          <label for="" class="form-check-label"> 
            <input class="form-check-input" name="preorder" type="checkbox" value="1" {{($product->preorder==1)?'checked':''}}> Preorder
          </label>
        </div>
        <div class="form-check">
          <label for="" class="form-check-label"> 
            <input class="form-check-input" name="visible" type="checkbox" value="1" {{($product->visible==1)?'checked':''}}> Active
          </label>
        </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