@include('links.header')

@if(isset($help_center_data))
<b>Edit Help Center</b>

@else
<b>Create New Help Center</b>

@endif

<a href="{{url('seedmagic/help-centers')}}" 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($help_center_data) ? route('help-centers.update',$help_center_data->id) : route('help-centers.store') }}" enctype="multipart/form-data">

    @csrf

    @if(isset($help_center_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($help_center_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="{{$help_center_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">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)
                                            <optgroup label="{{ $value->category_descriptions[0]->title }}">
                                                <option value="{{ $value->id }}" {{$help_center_data->category_id == $value->id ? 'selected' : ''}}>{{ $value->category_descriptions[0]->title }}</option>
                                            </optgroup>
                                            @if(count($value->childs) > 0)
                                                <optgroup label="{{ $value->category_descriptions[0]->title }}">
                                                    
                                                        @foreach($value->childs as $k=>$childValue)
                                                            <option value="{{ $childValue->id }}" {{$help_center_data->category_id == $childValue->id ? 'selected' : ''}}>{{ $childValue->category_descriptions[0]->title }}</option>
                                                        @endforeach
                                                </optgroup>
                                            @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-6 col-sm-6">
                        
                            <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 {{ $help_center_data->status == 1? 'checked' : '' }}> Active

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

                                    </div>

                                </div>

                                @error('status')

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

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

                                    </span>

                                @enderror

                        </div>
                        @if(!empty($help_center_data->image))
                            <div class="col-md-6 col-sm-6" id="image_div">
                                <img src="{{ url('storage/upload/helpcenters_images/'.$help_center_data->image) }}" width="100" />
                                <br/><br/>
                                <div><input type="button" class="btn btn-defualt" onclick="removeImage({{$help_center_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">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-6 col-sm-6">
                        
                            <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> 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>
                    @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($help_center_desp_data))

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

                    @endcomponent 

                @else

                    @component('admin.components.tabs.help_center_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($help_center_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();
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(helpcenter_id){
    $.ajaxSetup({

        headers: {

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

        }

    });
    $.ajax({

        type:'POST',

        url:'/seedmagic/removeImage/help_centers',

        data:{id:helpcenter_id},

        success:function(result){

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

        }

    });
   
}

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

}

$(".error_dup").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/help_centers',

            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')