@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>Edit Category</h5>
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{{url('categories')}}">Manage Catagories</a></li>
                                    <li class="breadcrumb-item"><a class="active" href="#">Edit Categories</a></li>
                                </ol>
                        </div>
                    </div>
                </div>
            </div>

            <div class="edit_category">
                <div class="category_type">
                    <img  src= "{{$model->image}}"   class="img-rounded"/>
                    <h5>{{$model->title}}</h5>
                  </div>

                <div class="category">
                    <div class="subcategory">
                        <img src="{{asset('frontend/img/menuBar.svg')}}" class="img-fluid" alt="...">
                        <h5>Subcategories</h5>
                    </div>
                    <div class="actionbtn_ float-right">
                      <a id="tool-btn-manage" class="btn btn_ active text-right" href="{{route('category.createForm',['id' => $model->id])}}" title="Back"> Add SubCategory</a>


                </div>

                    <div class="subcategory_box">
                    @foreach($model->getSubCategory() as $main)

                    <div class="category_about">
                            <div class="category_main active">
                                <div class="category_heading">
                                    <img src="{{asset('frontend/img/menuBar.svg')}}" class="img-fluid" alt="...">
                                    <h5>{{$main->title}}</h5>
                                </div>
                                <div class="category_icons">
                                    <a href="#" class="deleteMain" data-id="{{$main->id}}" data-text = "Subcatergory ”{{$main->title}}” ?" data-item="{{$main->item_count}}"><img src="{{asset('frontend/img/delete.svg')}}" class="img-fluid" alt="..."></a>
                                    <a href="{{route('category.subCategoryForm',['id' => encrypt($main->id)])}}"><img src="{{asset('frontend/img/editIcon.svg')}}" class="img-fluid" alt="..."></a>
                                </div>
                            </div>
                            @foreach($main->getSubCategory() as $subCategory)
                            <p class="btn_rent">{{$subCategory->title}}<span><a href="#" class="btn btn-secondary deleteMain closeMain"
                                data-text = "Sub Subcatergory ”{{$subCategory->title}}” ?"
                                data-item="{{$subCategory->item_count}}" data-id="{{$subCategory->id}}"><i class="fa-solid fa-xmark"></i></a></span></p>
                            @endforeach
                            <div id="subCategoryField{{$main->id}}"></div>
                            <a class="add_subcategory d-block" data-id="{{$main->id}}">+ Add Sub Subcategory</a>
                        </div>
                    @endforeach
                    </div>
                </div>

            </div>

    </section>

    <div class="modal modalCustom fade" id="rejectModal" aria-hidden="true"
    aria-labelledby="exampleModalToggleLabel" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <a href="#" onclick = "$('#rejectModal').modal('hide')" class="cancel-model" data-bs-dismiss="modal" aria-label="Close">
                <img src="{{asset('frontend/img/Cancel.svg')}}"class="img-fluid" ></a>

                <div class="modal-body">
                <img src="{{asset('frontend/img/Rejet.svg')}}" class="img-fluid">
                    <h6>Are you sure you want to delete the <span class="headingText"></span></h6>
                    <p class="adsNote d-none"><span class="categoryItemCount"></span> ads listed in this Subcategory by the user. if you delete this subcategories all ads will be deleted.</p>

                    <form id="deleteCategory_form"  method="POST" action="{{route('category.deleteMultiple')}}">
                      @csrf
                      <input type="hidden" name="category_id" id="categoryId">
                      <div class="group_btn">
                            <input type="submit" class="btn btn_ submitRejetform" value="Yes, Delete" />
                            <a href="javascript:void(0);" class="btn btn_ Rejetform" onClick="$('#rejectModal').modal('hide');">No, Cancel</a>
                      </div>
                    </div>
                    </form>

                </div>
        </div>
    </div>
</div>

    @push('page_script')

     <!-- bs-custom-file-input -->
    <script src="{{ asset('plugins/bs-custom-file-input/bs-custom-file-input.min.js') }}"></script>

   <script>

        $(function () {
            bsCustomFileInput.init();
        });
function template(name){
var html =`<div class="fileUploaded">
                                <figure><img src="${site_url}/frontend/img/uploadfile.png" class="img-fluid" alt="..."></figure>
                                <article><p>${name}</p></article>
                                <img src="${site_url}/frontend/img/closefile.png" class="img-fluid closeIcon" alt="...">
                            </div>`;

return html;
}

function browseUpload(){
    var html = ` <label for="file">
                            <span id="file-name" class="file-box d-none">Choose File</span>
                            <img src="${site_url}/frontend/img/uploadsel.png" class="img-fluid" alt="..." class="d-none">
                            <p class="uploadcontent">Choose File. <span>Browse</span></p>
                            </label>`;

   return html;
}

$(document).on('change', "#file", function(event){
   var extArr = ['jpeg','jpg','png'];
    var ext = $('#file').val().split('.').pop().toLowerCase();

  if($.inArray(ext,extArr) != '-1'){
    if(this.files[0]){
        let fileSize = this.files[0].size;
        let fileSizeInKb = fileSize / 1024;
        let fileSizeLimit = 2048; // In KB

        if (fileSizeInKb > fileSizeLimit) {
            $(this).val('');
            toastr.error("File may not be greater than 2048 KB.", 'Error!', {closeButton: true, tapToDismiss: false});
            $('#profileImagePreview').attr('src', '');
            $('#profileImagePreview').addClass('d-none');
            return false;
        } else {
            let imgSrc = URL.createObjectURL(event.target.files[0]);
            $('#imageName').val(event.target.files[0].name);
            html = template(event.target.files[0].name)
            $('.uploadFile').html(html);
        }
    }

  }else{
    toastr.error("Image file should be in jpeg,jpg,png,pdf,docx,doc.", 'Error!', {closeButton: true, tapToDismiss: false});

  }


});

    $(document).on('change', "#parent_id", function(event){
        var idCountry = this.value;
            $("#sub_category_id").html('');
            $.ajax({
                url: "{{route('category.fetchSubCategory')}}",
                type: "POST",
                data: {
                    category_id: idCountry,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (result) {
                    $('#sub_category_id').html('<option value="">-- Select Sub Category --</option>');

                    $.each(result.category, function (key, value) {
                        $("#sub_category_id").append('<option value="' + value
                            .id + '">' + value.title + '</option>');
                    });

                }

            });

    });

    function inputTemplate(id){
        var formHtml = `<form method="POST" id="subCategoryInput_form${id}">
        @csrf
                <div class="subCategoryname mt-2" id="inputElement0">
                         <input class="form-control" type="text" name="sub_sub_title" data-id="0" placeholder="Subcategory Name">
                         <input type="hidden" name="parent_id" id="subCategoryParent" value="${id}">
                         <span class="text-danger error-text sub_sub_title_err"></span>
                         <div class="adddiscardbtn">
                            <a href="javascript:void(0);" class="addbtn submitSubCategory" id="addButton0" data-id="${id}">+ Add </a>
                            <a href="#" onclick="window.location.reload()" class="discarbtn removeCatgeory" data-id="${id}">Discard</a>
                        </div>
                    </div>
        </form>`;
        return formHtml;
    }

    $(document).on('click','.add_subcategory',function(){

        let id = $(this).attr('data-id')
        $(this).remove();
            $('#subCategoryField'+id).html(inputTemplate(id));
            let url = "{{route('category.storeSubSubCategory')}}";
            $('#subCategoryInput_form'+id).attr('action',url);
     });
    $( "#customCategory" ).submit(function( event ) {
    event.preventDefault();

    let url =  $( "#customCategory").attr('action');
        $.post( url, $('#customCategory').serialize()).done(function( data ) {
            if($.isEmptyObject(data.error)){
                window.location.reload();
            }else{
                printErrorMsg(data.error);
            }
        });
    });

    function printErrorMsg (msg) {
        $.each( msg, function( key, value ) {
            $('.'+key+'_err').text(value);
        });
    }

    $(document).on('click','.closeIcon',function(e){
        var html = browseUpload();
        $('.uploadFile').html(html);
   });

   $(document).on('click','.deleteMain',function(e){
        let id = $(this).data('id');
        let item = $(this).data('item');
        $('.headingText').text($(this).data('text'))
        if(item != '0'){
            $('.adsNote').removeClass('d-none');
            $('.categoryItemCount').text(item);

        }
        $('#categoryId').val(id);
        let url = "{{url('category/get-detail/')}}";

        $.getJSON(url+'/'+id, function(data) {
            //    console.log(data);
         });
        $('#rejectModal').modal('show');
   });


   $(document).on('click','.submitSubCategory',function(e){
        let id = $(this).data('id');

        $.ajax({
                url: $('#subCategoryInput_form'+id).attr('action'),
                type: "POST",
                data: $('#subCategoryInput_form'+id).serialize(),
                success: function (result) {
                    if($.isEmptyObject(result.error)){
                        window.location.reload();
                    }else{
                        printErrorMsg(result.error);
                    }

                },

            });

   });



    </script>
@endpush





@endsection