@extends('layouts.admin')

@section('title') Update Category @endsection

@section('page_title') Edit Category @endsection

@section('content')


    <!-- Basic multiple Column Form section start -->
    <section>
            <div class="row breadcrumbs-top">
                <div class="col-12">
                    <div class="user_nav">
                        <div class="breadcrumb-wrapper">
                                <h5>Add New Categories</h5>
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{{url('categories')}}">Manage Categories</a></li>
                                    <li class="breadcrumb-item"><a class="active" href="#">Add New Categories</a></li>
                                </ol>
                        </div>
                    </div>
                </div>     
            </div>

            <div class="edit_category">
                <form class="category_name" action="{{route('category.storeSubCategory',['id' => isset($modelCategory) ? $modelCategory->id : ''])}}" method="POST" enctype="multipart/form-data">
                @csrf
                    <div class="form-group mb-2 col-md-6">
                        <label class="categoryLabel_txt" for="categoryName">Category Name <span class="text-danger asteric-sign">&#42;</span></label>
                        <input class="form-control {{ $errors->has('title') ? ' is-invalid' : '' }}" type="text" name="title" value="{{ old('title') ? old('title') : (isset($modelCategory) ? $modelCategory->title : '') }}">
                        <span class="text-danger error-text title_err"></span>

                    </div>
                    <input type="hidden" value="{{ isset($model) ? $model->id : (isset($modelCategory) ? $modelCategory->parent_id : '')}}" name="parent_id">
                     
                    

                <div class="category">
                    <div class="subcategory">
                        <img src="{{asset('frontend/img/menuBar.svg')}}" class="img-fluid" alt="...">
                        <h5>Have Subcategories?</h5>
                    </div>
                    
                    @if(isset($subCategories) && $subCategories->count() > 0)
                    @foreach($subCategories as $subCategory)
                    <div class="subCategoryname mt-2" id="inputElement{{$subCategory->id}}" data-id="{{$subCategory->id}}">
                         <input class="form-control " type="text" name="sub_title[{{$subCategory->id}}]" value="{{$subCategory->title}}"  data-id="{{$subCategory->id}}" placeholder="Subcategory Name">
                         <span class="invalid-feedback d-none" role="alert" id="feedback{{$subCategory->id}}"></span>
                         <div class="adddiscardbtn"> 
                            <a href="javascript:void(0);" class="addbtn {{($subCategories->last()->id != $subCategory->id) ?  'd-none': ''}}" id="addButton{{$subCategory->id}}" data-id="{{$subCategory->id}}">+ Add </a>
                            <a href="javascript:void(0);" class="discarbtn deleteCategory" data-id="{{encrypt($subCategory->id)}}" data-value = "{{$subCategory->id}}">Discard</a>
                        </div>
                    </div>
                    @endforeach
                    @else
                    <div class="subCategoryname" id="inputElement0" data-id="0">
                         <input class="form-control " type="text" name="sub_title[0]"  data-id="0" placeholder="Subcategory Name">
                         <span class="text-danger errorCategory error-text sub_title_0_err"></span>

                         <div class="adddiscardbtn">
                            <a href="javascript:void(0);" class="addbtn" id="addButton0" data-id="0">+ Add </a>
                            <a href="javascript:void(0);" class="discarbtn removeCatgeory" data-id="0">Discard</a>
                        </div>
                    </div>
                    @endif
                               
                </div>
                <button type="Submit" class="update_btn mt-5 subCatgeory" >Save Category</button>
                 </form> 
            </div>
          
    </section> 
    @push('page_script')

   
   <script> 

   function inputTemplate(id){
    var html = ` <div class="subCategoryname mt-4" id="inputElement${id}" data-id="${id}">
                         <input class="form-control " type="text" name="sub_title[${id}]" data-id="${id}" placeholder="Subcategory Name">
                         <span class="text-danger errorCategory error-text sub_title_${id}_err"></span>

                         <div class="adddiscardbtn">
                            <a href="javascript:void(0);" class="addbtn" id="addButton${id}" data-id="${id}">+ Add </a>
                            <a href="javascript:void(0);" class="discarbtn removeCatgeory" data-id="${id}">Discard</a>
                        </div>
                     </div>`;
       return html;
   }
    $(document).on('click','.addbtn',function(e){
        let id = $(this).attr('data-id');
        $('#addButton'+id).addClass('d-none'); 
        
        let counter = $('.category div.subCategoryname:last').attr('data-id');
        //let counter = $('.subCategoryname').length;
        counter++;
     $('.category').append(inputTemplate(counter));
    });

    $(document).on('click','.removeCatgeory',function(e){
        let id = $(this).attr('data-id');
        $('#inputElement'+id).remove();
    });

    $(document).on('click','.deleteCategory',function(e){
        let id = $(this).attr('data-id');
        let idInput = $(this).attr('data-value');
         $.ajax( {
            url : "{{url('category/delete/')}}"+'/'+id,
            type : 'DELETE',
            data : {'id' : id},
            success : function ( data ) {
                $('#inputElement'+idInput).remove();
                window.location.reload();
            },
            error : function ( jqXhr, textStatus, errorMessage ) { 
                window.location.reload();
            }
        });
    });

    $(document).on('click','.subCatgeory',function(e){
        e.preventDefault();
    
       let url = $('.category_name').attr('action');
       $.ajax( {
            url : url,
            type : 'POST',
            data : $('.category_name').serialize(),
            success : function ( data ) {
                if($.isEmptyObject(data.error)){ 
                  //  window.location.assign(data.success);
                  window.location.reload(data.success);
                  
                }else{
                    printErrorMsg(data.error);
                }
            },
            error : function ( jqXhr, textStatus, errorMessage ) {
             //   window.location.reload();
            }
        });

    });



  function printErrorMsg (msg) {
      $.each(msg, function( key, value ) {
       let nKey =  key.replace('.','_');
       
        $('.'+nKey+'_err').text(value);
      });

  }

    </script>
@endpush
   

  
 

@endsection