@include('links.header')

@if(isset($product_data))
<b>Edit Product</b>
@else
<b>Create New Product</b>
@endif

<a href="{{url('seedmagic/products')}}" class="btn btn-primary pull-right" >Back</a>

<br><br>

@if (Session::has('msg'))

<div class="alert bg-green alert-dismissible" role="alert"><strong>Success! </strong>

    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>

    {!! session('msg') !!}

</div>

  @endif

  @if (Session::has('msg_e'))

  <div class="alert bg-red alert-dismissible" role="alert"><strong>Danger! </strong>

      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>

      {!! session('msg_e') !!}

  </div>

 @endif



<form method="POST" action="{{ isset($product_data) ? route('products.update',$product_data->id) : route('products.store') }}" enctype="multipart/form-data"    >

    @csrf

    @if(isset($product_data))

        @method('PATCH')

    @endif

    <div class="row clearfix">

      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

        <div class="card">

            <div class="header">

                <h2>Common Page Configuration</h2>

            </div>

            <div class="body">

                <div class="row clearfix">

                    @if(isset($product_data))

                        <div class="col-md-6 col-sm-6">

                                <label class="form-label">SEO Keyword </label>

                                <div class="form-group form-float">

                                    <div class="form-line">

                                        <input type="text" name="url_alias" id="url_alias" class="form-control" value="{{ $product_data->url_alias }}" required>

                                    </div>
                                    <label class="form-label text-danger error_dup">SEO Keyword already exits. </label>

                                </div>

                                @error('url_alias')

                                    <span class="invalid-feedback" role="alert">

                                        <i style='color:red'>{{ $message }}</i>

                                    </span>

                                @enderror

                        </div>

                        <div class="col-md-6 col-sm-6">

                                <label class="form-label">Meta Title  </label>

                                <div class="form-group form-float">

                                    <div class="form-line">

                                        <input type="text" name="meta_title" id="meta_title" class="form-control"  value="{{ $product_data->meta_title }}" required>

                                    </div>

                                </div>

                                @error('meta_title')

                                    <span class="invalid-feedback" role="alert">

                                        <i style='color:red'>{{ $message }}</i>

                                    </span>

                                @enderror

                        </div>

                        <div class="col-md-12 col-sm-12">

                                <label class="form-label">Meta Description  </label>

                                <div class="form-group form-float">

                                    <div class="form-line">

                                        <input type="text" name="meta_description" id="meta_description" class="form-control" value="{{ $product_data->meta_description }}" required>

                                    </div>

                                </div>

                                @error('meta_description')

                                    <span class="invalid-feedback" role="alert">

                                        <i style='color:red'>{{ $message }}</i>

                                    </span>

                                @enderror

                        </div>

                        <div class="col-md-6 col-sm-6">

                                <label class="form-label">Meta Tags  </label>

                                <div class="form-group form-float">

                                    <div class="form-line">

                                        <input type="text" name="meta_tags" id="meta_tags" class="form-control"  value="{{ $product_data->meta_tags }}" >

                                    </div>

                                </div>

                                @error('meta_tags')

                                    <span class="invalid-feedback" role="alert">

                                        <i style='color:red'>{{ $message }}</i>

                                    </span>

                                @enderror

                        </div>

                        <div class="col-md-6 col-sm-6">

                                <label class="form-label">OG Tags  </label>

                                <div class="form-group form-float">

                                    <div class="form-line">

                                        <input type="text" name="og_tags" id="og_tags" class="form-control" value="{{ $product_data->og_tags }}">

                                    </div>

                                </div>

                                @error('og_tags')

                                    <span class="invalid-feedback" role="alert">

                                        <i style='color:red'>{{ $message }}</i>

                                    </span>

                                @enderror

                        </div>
                        <div class="col-md-4 col-sm-4">
                        
                            <div class='file-input'>
                                <input type='file' name="image" id="file-input">
                                <span class='button'>Choose</span>
                                <span class='label' data-js-label>No file selected</label>
                            </div>
                            <span class='button rm-btn' onclick="resetFile()"> Remove </span>

                        </div>
                        <div class="col-md-4 col-sm-4">

                                <label class="form-label">Status</label>

                                <div class="form-group form-float">

                                    <div class="form-line form-control">

                                        

                                        <input type='radio' name='status' value="1" required {{ $product_data->status == 1? 'checked' : '' }}> Active

                                        <input type='radio' name='status' value="0" required {{ $product_data->status == 0? 'checked' : '' }}> Inactive

                                    </div>

                                </div>

                                @error('status')

                                    <span class="invalid-feedback" role="alert">

                                        <i style='color:red'>{{ $message }}</i>

                                    </span>

                                @enderror

                        </div>

                        <div class="col-md-4 col-sm-4">

                                <label class="form-label">State</label>

                                <div class="form-group form-float">

                                    <div class="form-line">
                                        <select name="state_id" class="form-control states" id="states" required>
                                            <option value="">Select State</option>
                                            @foreach($all_states as $value)
                                                <option value="{{ $value->id }}" {{$product_data->state_id == $value->id ? 'selected' : ''}}>{{ $value->name }}</option>
                                            @endforeach
                                        </select>

                                    </div>

                                </div>

                                @error('state_id')

                                    <span class="invalid-feedback" role="alert">

                                        <i style='color:red'>{{ $message }}</i>

                                    </span>

                                @enderror
                        </div>
                        
                        <div class="col-md-4 col-sm-4">

                            <label class="form-label">Area</label>

                            <div class="form-group form-float">

                            <div class="form-line">
                                <select name="area_id" class="form-control areas" id="areas">
                                    @if(!empty($areas))
                                        @foreach($areas as $key=>$value)
                                            <option value="{{$value->id}}" {{$product_data->area_id == $value->id ? 'selected': ''}}> {{$value->area_name}} </option>
                                        @endforeach
                                    @else
                                        <option value="" >Select Area</option>
                                    @endif
                                </select>

                            </div>

                            </div>

                            @error('state_id')

                            <span class="invalid-feedback" role="alert">

                                <i style='color:red'>{{ $message }}</i>

                            </span>

                            @enderror
                        </div>

                        <div class="col-md-4 col-sm-4">

                                <label class="form-label">Category</label>

                                <div class="form-group form-float">

                                    <div class="form-line">
                                        
                                        
                                        <select name="category_id" class="form-control show-tick">
                                            @foreach($all_categories as $value)
                                               
                                                    <option value="{{ $value->id }}" {{$product_data->category_id == $value->id ? 'selected' : ''}}>{{ $value->category_descriptions[0]->title }}</option>
                                               
                                                @if(count($value->childs) > 0)
                                                   
                                                            @foreach($value->childs as $k=>$childValue)
                                                                <option value="{{ $childValue->id }}" style="padding-right: 20px" {{$product_data->category_id == $childValue->id ? 'selected' : ''}}> &nbsp;&nbsp;&nbsp;&nbsp;{{ $value->category_descriptions[0]->title }} &nbsp;>>&nbsp;{{ $childValue->category_descriptions[0]->title }} </option>
                                                            @endforeach
                                                   
                                                @endif
                                            @endforeach
                                        </select>

                                    </div>

                                </div>

                                @error('category_id')

                                    <span class="invalid-feedback" role="alert">

                                        <i style='color:red'>{{ $message }}</i>

                                    </span>

                                @enderror
                        </div>
                        
                        <div class="col-md-4 col-sm-4">

                                <label class="form-label">Price</label>

                                <div class="form-group form-float">

                                    <div class="form-line">
                                        <input type="number" name="price" id="price" class="form-control"  value="{{ $product_data->price }}" required>
                                    </div>

                                </div>

                                @error('price')

                                    <span class="invalid-feedback" role="alert">

                                        <i style='color:red'>{{ $message }}</i>

                                    </span>

                                @enderror
                        </div>
                        
                        <div class="col-md-3 col-sm-3">

                                <label class="form-label">Special Price</label>

                                <div class="form-group form-float">

                                    <div class="form-line">
                                        <input type="number" name="special_price" id="special_price" class="form-control" value="{{ $product_data->special_price }}">

                                    </div>

                                </div>

                                @error('special_price')

                                    <span class="invalid-feedback" role="alert">

                                        <i style='color:red'>{{ $message }}</i>

                                    </span>

                                @enderror
                        </div>
                        <div class="col-md-3 col-sm-3">

                                <label class="form-label">Is Featured</label>

                                <div class="form-group form-float">
                                    <div class="form-line form-control">

                                        

                                        <input type='radio' name='is_featured' value="1"   {{ $product_data->is_featured == 1 ? 'checked' :'' }} required> Yes

                                        <input type='radio' name='is_featured' value="0"  {{ $product_data->is_featured == 0 ? 'checked' :'' }} required> No

                                    </div>
                                </div>

                                @error('special_price')

                                    <span class="invalid-feedback" role="alert">

                                        <i style='color:red'>{{ $message }}</i>

                                    </span>

                                @enderror
                        </div>
                        @if(!empty($product_data->image))
                            <div class="col-md-6 col-sm-6" id="image_div">
                                <img src="{{ url('storage/upload/products_images/'.$product_data->image) }}" width="100" />
                                <br/><br/>
                                <div><input type="button" class="btn btn-defualt" onclick="removeImage({{$product_data->id}})"  value="Remove"> </div>
                            </div>
                        @endif

                    @else

                        <div class="col-md-6 col-sm-6">

                                <label class="form-label">SEO Keyword </label>

                                <div class="form-group form-float">

                                    <div class="form-line">

                                        <input type="text" name="url_alias" id="url_alias" class="form-control"  required>

                                    </div>
                                    <label class="form-label text-danger error_dup">SEO Keyword already exits. </label>


                                </div>

                                @error('url_alias')

                                    <span class="invalid-feedback" role="alert">

                                        <i style='color:red'>{{ $message }}</i>

                                    </span>

                                @enderror

                        </div>

                        <div class="col-md-6 col-sm-6">

                                <label class="form-label">Meta Title  </label>

                                <div class="form-group form-float">

                                    <div class="form-line">

                                        <input type="text" name="meta_title" id="meta_title" class="form-control"  required>

                                    </div>

                                </div>

                                @error('meta_title')

                                    <span class="invalid-feedback" role="alert">

                                        <i style='color:red'>{{ $message }}</i>

                                    </span>

                                @enderror

                        </div>

                        <div class="col-md-12 col-sm-12">

                                <label class="form-label">Meta Description  </label>

                                <div class="form-group form-float">

                                    <div class="form-line">

                                        <input type="text" name="meta_description" id="meta_description" class="form-control"  required>

                                    </div>

                                </div>

                                @error('meta_description')

                                    <span class="invalid-feedback" role="alert">

                                        <i style='color:red'>{{ $message }}</i>

                                    </span>

                                @enderror

                        </div>

                        <div class="col-md-6 col-sm-6">

                                <label class="form-label">Meta Tags  </label>

                                <div class="form-group form-float">

                                    <div class="form-line">

                                        <input type="text" name="meta_tags" id="meta_tags" class="form-control"  >

                                    </div>

                                </div>

                                @error('meta_tags')

                                    <span class="invalid-feedback" role="alert">

                                        <i style='color:red'>{{ $message }}</i>

                                    </span>

                                @enderror

                        </div>

                        <div class="col-md-6 col-sm-6">

                                <label class="form-label">OG Tags  </label>

                                <div class="form-group form-float">

                                    <div class="form-line">

                                        <input type="text" name="og_tags" id="og_tags" class="form-control" >

                                    </div>

                                </div>

                                @error('og_tags')

                                    <span class="invalid-feedback" role="alert">

                                        <i style='color:red'>{{ $message }}</i>

                                    </span>

                                @enderror

                        </div>
                        <div class="col-md-4 col-sm-4">
                        
                        <div class='file-input'>
                            <input type='file' name="image" id="file-input">
                            <span class='button'>Choose</span>
                            <span class='label' data-js-label>No file selected</label>
                        </div>
                        <span class='button rm-btn' onclick="resetFile()"> Remove </span>

                    </div>
                        <div class="col-md-4 col-sm-4">

                                <label class="form-label">Status</label>

                                <div class="form-group form-float">

                                    <div class="form-line form-control">

                                        

                                        <input type='radio' name='status' value="1"  required> Active

                                        <input type='radio' name='status' value="0"  required> Inactive

                                    </div>

                                </div>

                                @error('status')

                                    <span class="invalid-feedback" role="alert">

                                        <i style='color:red'>{{ $message }}</i>

                                    </span>

                                @enderror
                        </div>
                        
                        <div class="col-md-4 col-sm-4">

                                <label class="form-label">State</label>

                                <div class="form-group form-float">

                                    <div class="form-line">
                                        <select name="state_id" class="form-control states" id="states" required>
                                            <option value="">Select State</option>
                                            @foreach($all_states as $value)
                                                <option value="{{ $value->id }}">{{ $value->name }}</option>
                                            @endforeach
                                        </select>

                                    </div>

                                </div>

                                @error('state_id')

                                    <span class="invalid-feedback" role="alert">

                                        <i style='color:red'>{{ $message }}</i>

                                    </span>

                                @enderror
                        </div>
                        
                        <div class="col-md-4 col-sm-4">

                            <label class="form-label">Area</label>

                            <div class="form-group form-float">

                            <div class="form-line">
                                <select name="area_id" class="form-control areas" id="areas">
                                </select>

                            </div>

                            </div>

                            @error('state_id')

                            <span class="invalid-feedback" role="alert">

                                <i style='color:red'>{{ $message }}</i>

                            </span>

                            @enderror
                        </div>

                        <div class="col-md-4 col-sm-4">

                                <label class="form-label">Category</label>

                                <div class="form-group form-float">

                                    <div class="form-line">
                                        
                                    <select name="category_id" class="form-control show-tick">
                                            @foreach($all_categories as $value)
                                               
                                                    <option value="{{ $value->id }}" >{{ $value->category_descriptions[0]->title }}</option>
                                               
                                                @if(count($value->childs) > 0)
                                                   
                                                            @foreach($value->childs as $k=>$childValue)
                                                                <option value="{{ $childValue->id }}" style="padding-right: 20px"> &nbsp;&nbsp;&nbsp;&nbsp;{{ $value->category_descriptions[0]->title }} &nbsp;>>&nbsp;{{ $childValue->category_descriptions[0]->title }} </option>
                                                            @endforeach
                                                   
                                                @endif
                                            @endforeach
                                        </select>

                                    </div>

                                </div>

                                @error('category_id')

                                    <span class="invalid-feedback" role="alert">

                                        <i style='color:red'>{{ $message }}</i>

                                    </span>

                                @enderror
                        </div>
                        
                        <div class="col-md-4 col-sm-4">

                                <label class="form-label">Price</label>

                                <div class="form-group form-float">

                                    <div class="form-line">
                                        <input type="number" name="price" id="price" class="form-control"  required>
                                    </div>

                                </div>

                                @error('price')

                                    <span class="invalid-feedback" role="alert">

                                        <i style='color:red'>{{ $message }}</i>

                                    </span>

                                @enderror
                        </div>
                        
                        <div class="col-md-3 col-sm-3">

                                <label class="form-label">Special Price</label>

                                <div class="form-group form-float">

                                    <div class="form-line">
                                        <input type="number" name="special_price" id="special_price" class="form-control" value=0>

                                    </div>

                                </div>

                                @error('special_price')

                                    <span class="invalid-feedback" role="alert">

                                        <i style='color:red'>{{ $message }}</i>

                                    </span>

                                @enderror
                        </div>
                        <div class="col-md-3 col-sm-3">

                                <label class="form-label">Is Featured</label>

                                <div class="form-group form-float">
                                    <div class="form-line form-control">

                                        

                                        <input type='radio' name='is_featured' value="1"  required> Yes

                                        <input type='radio' name='is_featured' value="0"  required> No

                                    </div>
                                </div>

                                @error('special_price')

                                    <span class="invalid-feedback" role="alert">

                                        <i style='color:red'>{{ $message }}</i>

                                    </span>

                                @enderror
                        </div>

                    @endif

                </div>

            </div>

        </div>

        <div class="card">

            <div class="header">

                <h2>Language Based Page Configuration</h2>

            </div>

            <div class="body">

                <div class="row clearfix" >

                <div class="alert bg-red alert-dismissible" role="alert"><strong>Alert! </strong>

                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                    Please make sure that you fill all information for all languages. Unless All information is not filled up form will not be able to proceed.

                </div>

                @if(isset($product_desp_data))

                    @component('admin.components.tabs.edit_products_lang_tabs',['all_languages' =>$all_languages, 'product_desp_data'=>$product_desp_data ])

                    @endcomponent 

                @else

                    @component('admin.components.tabs.products_lang_tabs',['all_languages' =>$all_languages ])

                    @endcomponent 

                @endif

                           

                </div>

            </div>

        </div>        

        

      

        <div class="row clearfix cform">

                <div class="button-demo" style="text-align:center;">

                    <button type="submit" id="submitUser" class="btn btn-primary waves-effect">

                        

                        @if(isset($product_desp_data))

                            Update

                        @else

                            Submit

                        @endif

                    </button>

                </div>

            </div>

    </div>





</div>

</div>

</form>
<style> 
.file-input {
  display: inline-block;
  text-align: left;
  background: #fff;
  padding: 16px;
 position: relative;
  border-radius: 3px;
}

.file-input > [type='file'] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;
  cursor: pointer;
}

.file-input > .button {
  display: inline-block;
  cursor: pointer;
  background: #eee;
  padding: 8px 16px;
  border-radius: 2px;
  margin-right: 8px;
}

.file-input:hover > .button {
  background: dodgerblue;
  color: white;
}

.file-input > .label {
  color: #333;
  white-space: nowrap;
  opacity: .3;
}

.file-input.-chosen > .label {
  opacity: 1;
}
</style>    
@section('extra-script')

<script>
$(".error_dup").hide();

    $('document').ready(function(){
         $.ajaxSetup({

            headers: {

                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

            }

        });
        $("#states").on('change',function(){

            var state_id = $(this).val();
        
            $.ajax({

                type:'POST',

                url:'/seedmagic/get_areas_from_state',

                data:{state_id:state_id},

                success:function(result){

                    if(result.status == true){
                        var optionString = '';
                        if(result.data.length>0){
                            $('#areas').empty();
                            $.each(result.data, function(key, value) {   
                                optionString += '<option value='+value.id+'>'+value.area_name+'</option>'
                                $('#areas').append('<option value='+value.id+'>'+value.area_name+'</option>').selectpicker('refresh');
                            });
                            // $('#areas').replaceAll(optionString).selectpicker('refresh');
                            
                            
                        }else{
                            $('#areas').empty();
                            $('#areas').append("<option value=''></option>").selectpicker('refresh');
                            
                        }
                    }

                }

            });
        });


    })

    // Also see: https://www.quirksmode.org/dom/inputfile.html

var inputs = document.querySelectorAll('.file-input')
$('.rm-btn').hide();
for (var i = 0, len = inputs.length; i < len; i++) {
  customInput(inputs[i])
}

function customInput (el) {
  const fileInput = el.querySelector('[type="file"]')
  const label = el.querySelector('[data-js-label]')
  
  fileInput.onchange =
  fileInput.onmouseout = function () {
    if (!fileInput.value) return
    
    var value = fileInput.value.replace(/^.*[\\\/]/, '')
    el.className += ' -chosen'
    label.innerText = value;
    extension = fileInput.value.split('.')[1];
    $('.rm-btn').show();
    var file_size = $("#file-input")[0].files[0].size/1024/1024;
    if((extension != 'jpg' && extension != 'jpeg' && extension != 'png') || file_size.toFixed(2)>5){
        $("#file-input").val("");
        $('.rm-btn').hide();

        label.innerText="No File Selected";
        swal({
            title: "Invalid File.Please Upload Valid File with jpeg,jpg and png less than 5MB.",
            text: "",
            type: "warning",
            showCancelButton: false,
            closeOnConfirm: false
        }, function () {
            swal("Please Uplood Valid File wiht jpeg,jpg and png.", "success");
        });
      
    
    }

  }
}

function removeImage(product_id){
    $.ajaxSetup({

        headers: {

            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

        }

    });
    $.ajax({

        type:'POST',

        url:'/seedmagic/removeImage/products',

        data:{id:product_id},

        success:function(result){

          
            if(result.status==true){
                $("#image_div").hide();
            }
            
           

        }

    });
   
}

function resetFile(){
    $("#fle-input").val('');
    $(".file-input .label").html("");
    $('.rm-btn').hide();

}

// valldate seo keyword
$('#url_alias').on('keyup',function(){
    var edit_id = 0;
    $.ajaxSetup({

        headers: {

            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

        }

    });
    var validateSeoKeyword = $(this).val();
    if(!isNaN('{{Request::segment(3) }}')){
        edit_id = {{Request::segment(3) }};
    }
    if(validateSeoKeyword){
        $.ajax({

            type:'POST',

            url:'/seedmagic/validateSeoKeyword/products',

            data:{seo_keyword:validateSeoKeyword,edit_id:edit_id},

            success:function(result){

                console.log(result);
                if(result.status==true){
                    $(".error_dup").hide();
                }else{
                    $(".error_dup").show();
                }
                
            

            }

        });
    }
   
});
</script>

@endsection

@include('links.footer')