@include('links.header')
@if(isset($category_data))
<b> Edit Category</b>
@else
<b>Create New Category</b>
@endif

<a href="{{url('seedmagic/categories')}}" 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($category_data) ? route('categories.update',$category_data->id) : route('categories.store') }}" enctype="multipart/form-data">
    @csrf
    @if(isset($category_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($category_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="{{ $category_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="{{ $category_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="{{ $category_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-4 col-sm-4">
                                <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="{{ $category_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-4 col-sm-4">
                                <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="{{ $category_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-6 col-sm-6">
                                <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 {{ $category_data->status == 1? 'checked' : '' }}> Active
                                        <input type='radio' name='status' value="0" required {{ $category_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-6 col-sm-6">
                                <label class="form-label">Select Parent Category</label>
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <select class="form-control show-tick" name="parent_category">
                                            <option value="0">Select Parent Category</option>
                                            @foreach($parent_categories as $categories)
                                                @foreach($categories->category_descriptions as $desp)
                                                    @if($category_data->id != $categories->id)
                                                        <option value="{{ $categories->id }}"  {{ $category_data->parent_id == $desp->category_id ? "selected" : ''}} > {{ $desp->title }}  </option>
                                                    @endif
                                                @endforeach
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                @error('status')
                                    <span class="invalid-feedback" role="alert">
                                        <i style='color:red'>{{ $message }}</i>
                                    </span>
                                @enderror
                        </div>
                        @if(!empty($category_data->image))
                            <div class="col-md-6 col-sm-6" id="image_div">
                                <img src="{{ url('storage/upload/categories_images/'.$category_data->image) }}" width="100" />
                                <br/><br/>
                                <div><input type="button" class="btn btn-defualt" onclick="removeImage({{$category_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-4 col-sm-4">
                                <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-4 col-sm-4">
                                <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>

                        </div>
                        <div class="col-md-6 col-sm-6">
                                <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-6 col-sm-6">
                                <label class="form-label">Select Parent Category</label>
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <select class="form-control show-tick" name="parent_category">
                                            <option value="0">Select Parent Category</option>
                                           @foreach($parent_categories as $categories)
                                                @foreach($categories->category_descriptions as $desp)
                                                    <option value="{{ $categories->id }}"> {{ $desp->title }} </option>
                                                @endforeach
                                           @endforeach
                                        </select>
                                    </div>
                                </div>
                                @error('status')
                                    <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($categories_desp_data))
                    @component('admin.components.tabs.edit_categories_lang_tabs',['all_languages' =>$all_languages, 'categories_desp_data'=>$categories_desp_data ])
                    @endcomponent 
                @else
                    @component('admin.components.tabs.categories_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($categories_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>
    // Also see: https://www.quirksmode.org/dom/inputfile.html

var inputs = document.querySelectorAll('.file-input')
$('.rm-btn').hide();
$(".error_dup").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 Uplod Valid File with jpeg,jpg and png less than 5MB.",
            text: "",
            type: "warning",
            showCancelButton: false,
            closeOnConfirm: false
        }, function () {
            swal("Please Uplod Valid File wiht jpeg,jpg and png.", "success");
        });
      
    
    }

  }
}

function removeImage(cat_id){
    $.ajaxSetup({

        headers: {

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

        }

    });
    $.ajax({

        type:'POST',

        url:'/seedmagic/removeImage/categories',

        data:{id:cat_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/categories',

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

            success:function(result){

                console.log(result);
                if(result.status==true){
                    $(".error_dup").hide();
                }else{
                    if(isNaN('{{Request::segment(3) }}')){
                        $('#url_alias').val(' ');
                    }
                    $(".error_dup").show();
                }
                
            

            }

        });
    }
   
});
</script>
@endsection

@include('links.footer')