@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="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}}" {{($product->category_id == $category->id)?'selected':''}}>{{$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}}" {{($product->occasion_id == $occasion->id)?'selected':''}}>{{$occasion->name_en}}</option>
                @endforeach
              </select>
            </div>
          </div>
        </div>
        <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" value="{{$product->location}}"  type="text">
              @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" value="{{$product->length}}">
            </div>
          </div>
          <div class="col-2">
            <div class="form-group">
              <label>&nbsp;</label>
              <input type="text" name="width" class="form-control" placeholder="W" value="{{$product->width}}">
            </div>
          </div>
          <div class="col-2">
            <div class="form-group">
              <label>&nbsp;</label>
              <input type="text" name="height" class="form-control" placeholder="H" value="{{$product->height}}">
            </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" value="{{$product->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"  value="{{$product->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" value="{{$product->single_quantity}}">
            </div>
          </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 @if($product->preparation_time) on @endif">
              <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" @if($product->preparation_time) checked @endif 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" @if($product->preparation_time) checked @endif> Preparation Time
          </label> -->
        </div>
        <div class="row prepare_on" @if($product->preparation_time) @else style="display:none;" @endif>
          <div class="col-2">
            <div class="form-group">
              <!-- <label for=""> Preparation Time</label> -->
              <select class="form-control" name="units">
                <option value="minutes" @if($product->units=='minutes') selected @endif>Minutes</option>
                <option value="hours" @if($product->units=='hours') selected @endif>Hours</option>
                <option value="days" @if($product->units=='days') selected @endif>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" value="{{$product->preparation_time}}"type="number" step="1" 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 @if($product->show_addon) on @endif">
              <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;" @if($product->show_addon) checked @endif> Addons
          </label>
        </div>

        <fieldset class="form-group addon" @if($product->show_addon) style="display:block;" @endif>
          <legend><span>Addons</span></legend>
          @if($addons)
            @php
              $vals = ($product->addon_val!='null')?json_decode($product->addon_val, true):[];
            @endphp
            <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 @if(in_array($addon->id,$vals)) on @endif">
                        <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;" @if(in_array($addon->id,$vals)) checked @endif> {{$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 @if($product->show_variation) on @endif">
              <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" @if($product->show_variation) checked @endif style="display:none;"> Variation
          </label>
        </div>

        <fieldset class="form-group variation" @if($product->show_variation) style="display:block;" @endif>
          <legend><span>Variations</span></legend>
          @if($variations)
            @php 
              $proVar = ($product->variation!=null) ? json_decode($product->variation, true):[];
              if($proVar==null){
                $proVar = [];
              }
            @endphp
            <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 @if(in_array($variation->id, $proVar)) on @endif">
                        <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}}" @if(in_array($variation->id, $proVar)) checked @endif> {{$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)
          @php
            $vardata = ($product->var_data)?json_decode($product->var_data, true):[];
          @endphp
          @foreach($variations as $variation)
            <fieldset class="form-group inner-variation-list variation-{{$variation->id}}" @if(!in_array($variation->id, $proVar)) style="display:none;" @endif >
              <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]" @if(array_key_exists($variation->id, $vardata) && array_key_exists($value->id, $vardata[$variation->id])) value="{{$vardata[$variation->id][$value->id]['name']}}" @else value="{{$value->name_en}}" @endif 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(array_key_exists($variation->id, $vardata) && array_key_exists($value->id, $vardata[$variation->id])) 
                          value="{{$vardata[$variation->id][$value->id]['price']}}" 
                        @else 
                          @if($variation->input_type=='checkbox') 
                            value="{{$value->price}}" 
                          @else
                            value="0"
                          @endif 
                        @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" @if(array_key_exists($variation->id, $vardata) && array_key_exists($value->id, $vardata[$variation->id])) value="{{$vardata[$variation->id][$value->id]['sale_price']}}" @endif >
                      </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" @if(array_key_exists($variation->id, $vardata) && array_key_exists($value->id, $vardata[$variation->id])) value="{{$vardata[$variation->id][$value->id]['quantity']}}" @endif>
                      </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]" 
                      @if(array_key_exists($variation->id, $vardata) && array_key_exists($variation->id, $vardata[$variation->id])) 
                        value="{{$vardata[$variation->id][$variation->id]['price']}}" 
                      @else 
                        value="{{$variation->textprice}}"
                      @endif 
                      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 || ((array_key_exists($variation->id, $vardata) && array_key_exists($variation->id, $vardata[$variation->id])) && array_key_exists('text_req', $vardata[$variation->id][$variation->id]))) 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 || ((array_key_exists($variation->id, $vardata) && array_key_exists($variation->id, $vardata[$variation->id])) && array_key_exists('text_req', $vardata[$variation->id][$variation->id]) )) checked @endif style="display: none;">
                      </label>
                    </div>
                  </div>
                </div>
              @endif
            </fieldset>
          @endforeach
        @endif
        <!-- Weights -->
        <!--<div class="form-group">
          <label for=""> Weights</label>
            @php
                // Decode the measurements if it's not null, otherwise initialize an empty array
                $measurements = ($product->measurements!='null' && $product->measurements!=NULL) ? json_decode($product->measurements, true) : [];                
            @endphp
            
          <select name="weights[]" id="weights" class="form-control select2" multiple>         
            @foreach($weights as $weight)
              <option value="{{$weight->weight}}" {{ in_array($weight->weight, $measurements) ? 'selected' : '' }}>{{$weight->weight}}</option>
            @endforeach
          </select>
          @if($errors->has('weights'))
            <div class="help-block form-text with-errors form-control-feedback">{{ $errors->first('weights') }}</div>
          @enderror
        </div> -->
        
        <!-- Weights -->
        <!-- 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=""> Gallery</label>
              <input class="form-control" name="gallery[]" type="file" multiple> 
              @if($product->gallery)
                  @php $gallery = explode(',', $product->gallery); @endphp
                  @foreach($gallery as $img)
                      <div style="display: inline-block; position: relative; margin: 10px;">
                          <img src="/gallery/products/images/{{$img}}" class="" style="width: 150px;">
                          <button class="btn btn-danger btn-sm delete-image" style="position: absolute; top: 0; right: 0; background: transparent; border: none; color: red; cursor: pointer;" 
                              data-slug="{{ $product->slug }}" 
                              data-image="{{ $img }}">
                              &times;
                          </button>
                      </div>
                  @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="row" >
          <div class="col-4">
            <div class="form-check check-toggler">
              <label for="new" class="form-check-label"> 
                <div class="os-toggler-w @if($product->new==1) on @endif">
                  <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" {{($product->new==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 @if($product->preorder==1) on @endif">
                  <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" {{($product->preorder==1)?'checked':''}} 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 @if($product->visible==1) on @endif">
                  <div class="os-toggler-i">
                    <div class="os-toggler-pill"></div>
                  </div>
                </div>
                <input class="form-check-input" name="visible" type="checkbox" value="1" {{($product->visible==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){
    //     dataSize = jQuery(this).data('size');
    //     if(index !== 0 && jQuery.inArray(dataSize, sizes)<0){
    //       jQuery(this).remove();
    //     }
    //   });
    // });

    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('.inner-variation-list input').removeAttr('required');
      }
    });

    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');
      }
    });
    
    document.addEventListener('DOMContentLoaded', function () {
        const deleteButtons = document.querySelectorAll('.delete-image');

        deleteButtons.forEach(button => {
            button.addEventListener('click', function () {
              event.preventDefault();
                const slug = this.getAttribute('data-slug');
                const image = this.getAttribute('data-image');

                // Confirm the deletion action
                if (confirm('Are you sure you want to delete this image?')) {
                    fetch(`/admin/product/gallery/delete/${slug}/${image}`, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}', // Include CSRF token for security
                            'Content-Type': 'application/json'
                        }
                    })
                    .then(response => response.json()) // Parse JSON response
                    .then(data => {
                        if (data.success) {
                            // Remove the image from the DOM
                            this.closest('div').remove(); // Assuming the image is wrapped in a div
                            alert(data.message); // Show success message
                        } else {
                            alert(data.message); // Show error message
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('An error occurred while deleting the image.');
                    });
                }
            });
        });
    });


  </script>
@endpush