@extends('layout.admin.master')

@section('meta-title', 'LEREVE - Update Variation')
@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').'.variation.list')}}">Variations</a>
  </li>
  <li class="breadcrumb-item">
    <span>Update</span>
  </li>
@endsection

@push('asset-top')
  <style type="text/css">
    .checkbox, .text{
      display: none;
    }
  </style>
@endpush

@section('content')
  <div class="element-wrapper">
    <h6 class="element-header">
      Variation
    </h6>
    <div class="element-box">
      <form method="post" enctype="multipart/form-data" action="{{route(session('role').'.variation.update', ['id'=>$variation->id])}}">
        @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="row">
          <div class="col-sm-4">
            <div class="form-group">
              <label for=""> Option Name EN <em>*</em></label>
              <input class="form-control" name="name_en" placeholder="Name" required="required" type="text" value="{{$variation->name_en}}">
              @error('name_en')
                  <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
              @enderror
            </div>
          </div>
          <div class="col-sm-4">
            <div class="form-group">
              <label for=""> Option Name AR</label>
              <input class="form-control" name="name_ar" placeholder="Name (Arabic)"  type="text" value="{{$variation->name_ar}}">
              @error('name_ar')
                  <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
              @enderror
            </div>
          </div>
          <div class="col-sm-4">
            <div class="form-group">
              <label for=""> Input Type</label>
              <select class="form-control" name="input_type">
                <option value="radio" {{($variation->input_type=='radio')?'selected':''}}>Radio</option>
                <option value="checkbox" {{($variation->input_type=='checkbox')?'selected':''}}>Checkbox</option>
                <option value="text" {{($variation->input_type=='text')?'selected':''}}>Textbox</option>
              </select>
              @error('input_type')
                  <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
              @enderror
            </div>
          </div>
        </div>
        <div class="row text" @if($variation->input_type=='text') style="display: block;" @endif>
          <div class="col-12">
            <div class="form-group">
              <label>Price</label>
              <input type="number" name="textprice" placeholder="Price" class="form-control" step="0.0001" value="{{$variation->textprice}}">
            </div>
          </div>
          <div class="col-12">
            <div class="form-check check-toggler" style="margin-bottom: 10px;" >
              <label for="textbox" class="form-check-label"> 
                <div class="os-toggler-w @if($variation->text_req) on @endif">
                  <div class="os-toggler-i">
                    <div class="os-toggler-pill"></div>
                  </div>
                </div>
                <input class="form-check-input" id="textbox" name="text_req" type="checkbox" value="1" style="display:none;" @if($variation->text_req) checked @endif> Required
              </label>
            </div>
          </div>

        </div>

        <div class="row ar-row">
          <div class="col-sm-12">
            <a class="btn btn-sm btn-info add-new-val" href="#"><i class="os-icon os-icon-common-03"></i> Add New Value</a>
          </div>
        </div>
        <!-- Media -->
        <fieldset class="form-group custom-rows ar-row">
          <legend><span>Values</span></legend>
          <div class="row">
            <div class="col-sm-1" style="max-width: 4.5%;">
              <div class="form-group">
                <label>Show</label>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="form-group">
                <label for=""> Option Value</label>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="form-group">
                <label for="">&nbsp;</label>
              </div>
            </div>
            <div class="col-sm-3 checkbox" @if($variation->input_type=='checkbox') style="display: block;" @endif>
              <div class="form-group">
                <label for="" class="text-center"> Price Modifier</label>
              </div>
            </div>
            <div class="col-sm-2">
              <div class="form-group">
                <label for="" class="text-center"> &nbsp;</label>
              </div>
            </div>
          </div>
          @if(count($values))
            @foreach($values as $key=>$value)
              <div class="row option_val">
                <input type="hidden" name="ids[]" value="{{$value->id}}">

                <div class="col-sm-1" style="max-width: 4.5%;">
                  <div class="form-group">
                    <div class="form-check">
                      <label class="form-check-label"><input type="checkbox" name="show[{{$key}}]" class="form-check-input" value="1"  {{($value->visible == 1)?'checked':''}}></label>
                    </div>
                  </div>
                </div>
                <div class="col-sm-3">
                  <div class="form-group">
                    <input class="form-control" name="value_en[]" type="text" placeholder="English" value="{{$value->name_en}}">
                    @error('value_en')
                      <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
                    @enderror
                  </div>
                </div>
                <div class="col-sm-3">
                  <div class="form-group">
                    <input class="form-control" name="value_ar[]" type="text" placeholder="Arabic" value="{{$value->name_ar}}">
                  </div>
                </div>
                <div class="col-sm-3 checkbox" @if($variation->input_type=='checkbox') style="display: block;" @endif>
                  <div class="form-group">
                    <div class="row">
                      <div class="col-sm-4 ">
                        <select name="operand[]" class="form-control selectpicker">
                          <option value="">Select</option>
                          <option value="plus" {{($value->operand=='plus')?'selected':''}}><strong>+</strong></option>
                          <option value="minus" {{($value->operand=='minus')?'selected':''}}><strong>-</strong></option>
                        </select>                    
                      </div>
                      <div class="col-sm-4 px-0">
                        <select name="price_type[]" class="form-control">
                          <option value="">Select</option>
                          <option value="fixed" {{($value->price_type=='fixed')?'selected':''}}>Fixed</option>
                          <option value="percentage" {{($value->price_type=='percentage')?'selected':''}}>Percentage</option>
                        </select>
                      </div>
                      <div class="col-sm-4 pr-0">
                        <input class="form-control" name="price[]" type="number" step="0.0001" placeholder="Price" value="{{$value->price}}">
                      </div>
                    </div>
                  </div> 
                  
                </div>
                <div class="col-sm-2">
                  <div class="form-group">
                    <a href="#" class="text-danger del-val-row"><i class="os-icon os-icon-ui-15"></i></a>
                  </div>
                </div>
              </div>

            @endforeach
          @else
            <div class="row option_val">
              <div class="col-sm-1" style="max-width: 4.5%;">
                <div class="form-group">
                  <div class="form-check">
                    <label class="form-check-label"><input type="checkbox" name="show[0]" class="form-check-input" value="1" checked ></label>                    
                  </div>
                </div>                
              </div>
              <div class="col-sm-3">
                <div class="form-group">
                  <input class="form-control" name="value_en[]" type="text" placeholder="English*" required>
                  @error('value_en')
                    <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
                  @enderror
                </div>
              </div>
              <div class="col-sm-3">
                <div class="form-group">
                  <input class="form-control" name="value_ar[]" type="text" placeholder="Arabic">
                </div>
              </div>
              <div class="col-sm-3 checkbox">
                <div class="form-group">
                  <div class="row">
                    <div class="col-sm-4">
                      <select name="operand[]" class="form-control selectpicker">
                        <option value="">Select</option>
                        <option value="plus"><strong>+</strong></option>
                        <option value="minus"><strong>-</strong></option>
                      </select>                    
                    </div>
                    <div class="col-sm-4 px-0">
                      <select name="price_type[]" class="form-control">
                        <option value="">Select</option>
                        <option value="fixed">Fixed</option>
                        <option value="percentage">Percentage</option>
                      </select>
                    </div>
                    <div class="col-sm-4 pr-0">
                      <input class="form-control" name="price[]" type="number" step="0.0001" placeholder="Price">
                    </div>
                  </div>
                </div>          
              </div>
              <div class="col-sm-2">
                <div class="form-group">
                  <a href="#" class="text-danger del-val-row"><i class="os-icon os-icon-ui-15"></i></a>
                </div>
              </div>
            </div>
          @endif
        </fieldset>
        <div class="row ar-row">
          <div class="col-sm-6 checkbox" @if($variation->input_type=='checkbox') style="display: block;" @endif>
            <div class="form-group">
              <label>Allow the customer to choose</label>
              <input type="number" name="minimum" placeholder="Minimum" class="form-control" value="{{$variation->minimum}}">              
            </div>
          </div>
          <div class="col-sm-6 checkbox" @if($variation->input_type=='checkbox') style="display: block;" @endif>
            <div class="form-group">
              <label>&nbsp;</label>
              <input type="number" name="maximum" placeholder="Maximum" class="form-control" value="{{$variation->maximum}}">
            </div>
          </div>
        </div>
        <fieldset class="form-group checkbox ar-row" @if($variation->input_type=='checkbox') style="display: block;" @endif>
          <legend><span>Product checkbox option</span></legend>
          <div class="form-check">
            <label><input type="radio" @if($variation->checkbox_qty=='on' || $variation->checkbox_qty=='') checked @endif name="checkbox_qty" value="on" class="form-check-input">Apply on quantity</label><br>
            <label><input type="radio" @if($variation->checkbox_qty=='off') checked @endif name="checkbox_qty" value="off" class="form-check-input">Apply on number of selected quantity</label>
          </div>
        </fieldset>
        <div class="form-buttons-w">
          <button class="btn btn-primary" type="submit"> Submit</button>
        </div>
      </form>
    </div>
  </div>
@endsection
@push('asset-bottom')
  @if($variation->input_type=='text') 
    <script type="text/javascript">
      jQuery('.ar-row').hide();
    </script>
  @endif
  <script>
    jQuery('body').on('change', 'input[type="file"]', function(){
      val = jQuery(this)[0].files[0].name;
      jQuery(this).closest('.form-group').append('<span class="sel-file">'+val+'</span>');
    });

    jQuery('body').on('change', 'select[name="input_type"]', function(){
      type = jQuery(this).val();
      if(type=='text'){
        jQuery('.text').show(500);
        jQuery('.ar-row').hide(500);
        jQuery('.ar-row').find('input[name="value_en[]"]').removeAttr('required');
      }else if(type=='checkbox'){
        jQuery('.ar-row').show(500);
        jQuery('.checkbox').show(500);
        jQuery('.text').hide(500);
        jQuery('.ar-row').find('input[name="value_en[]"]').attr('required','required');
      } else { //radio
        jQuery('.ar-row').show(500);
        jQuery('.text').hide(500);
        jQuery('.checkbox').hide(500);
        jQuery('.ar-row').find('input[name="value_en[]"]').attr('required','required');
      }
    });
  </script>
@endpush