@extends('adminlte::page')

@section('title_postfix', ' - Novo Artigo')
  <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
 
@section('content_header')
<h1>Blog</h1>
@stop

@section('content')

<div class="box box-primary" style="margin-top: 2px">
<!--  <div class="box-header with-border">
    <h3 class="box-title">Novo Artigo</h3>
  </div>-->

  <div class="box-body">
    <ul class="nav nav-tabs">
      @foreach($locales as $locale)
      <li class="{{ $locale == $locales[0] ? 'active' : ''}}" ><a data-toggle="tab" href="#locale_{{ $locale->lang }}">{{ $locale->name }}</a></li>
      @endforeach
    </ul>

    <form action="{{ env('APP_URL') }}/post" method="POST" enctype="multipart/form-data" style="margin-top: 20px">
      @csrf
      <div class="tab-content">
          <div class="form-group col-12 col-md-6 col-lg-2 ">
    <label for="inputCategory">Categoria <span style="color: indianred">*</span>
<button type="button" class="btn btn-sm btn-success ms-2" id="addCategoryBtn">
    <i class="fa fa-plus"></i>
</button> 

<button type="button" class="btn btn-sm btn-warning ms-2" id="upCategoryBtn">
    <i class="fa fa-pencil"></i>
</button>
        
        <button type="button" class="btn btn-sm btn-danger ms-2" id="delCategoryBtn">
    <i class="fa fa-trash"></i>
</button>
    </label>
    
    <div class="d-flex ">
        <select class="form-control" id="inputCategory" name="category" required>
            <option value="">-- Selecione uma Categoria --</option> <!-- Default placeholder -->
            @foreach($categories as $category)
                <option value="{{ $category->id }}">{{ $category->description }}</option>
            @endforeach
        </select>
      
    </div>
    
    <!-- Category Modal -->
    <div class="modal fade" id="addCategoryModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h5 class="modal-title">Criar Nova Categoria</h5>
                   
                </div>
                <div class="modal-body">
                    <input type="text" id="newCategoryName" class="form-control" placeholder="Nome da Categoria">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" id="saveCategoryBtn">Salvar</button>
                </div>
            </div>
        </div>
    </div>

          
    <!-- Category Modal -->
    <div class="modal fade" id="updateCategoryModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h5 class="modal-title">Editar Categoria</h5>
                  
                </div>
                <div class="modal-body">
                    <input type="text" id="newCategoryNameToUpdate" class="form-control" placeholder="Nome da Categoria">
                     <input type="hidden" id="newCategoryIdToUpdate" class="form-control" placeholder="Id da Categoria">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" id="updateCategoryBtn">Salvar</button>
                </div>
            </div>
        </div>
    </div>
</div>          
          
          

    @foreach(range(1, 5) as $tagIndex)
    <div class="form-group col-12 col-md-6 col-lg-2">
        <label for="inputTag{{ $tagIndex }}">Tag{{ $tagIndex }} @if($tagIndex == 1) <span style="color: indianred">*</span>
            
            <button type="button" class="btn btn-sm btn-success ms-2" id="addTagBtn">
    <i class="fa fa-plus"></i>
</button> 

<button type="button" class="btn btn-sm btn-warning ms-2" id="upTagBtn">
    <i class="fa fa-pencil"></i>
</button>
        
        <button type="button" class="btn btn-sm btn-danger ms-2" id="delTagBtn">
    <i class="fa fa-trash"></i>
</button>
            
            
            
            
            
            @endif
            @if($tagIndex > 1)
        
                  <button type="button" class="btn btn-sm btn-link ms-2">
    <i class="fa fa-minus"></i>
</button>
                   <button type="button" class="btn btn-sm btn-link ms-2">
    <i class="fa fa-minus"></i>
</button>
                          <button type="button" class="btn btn-sm btn-link ms-2">
    <i class="fa fa-minus"></i>
</button>
          
               @endif
        </label>
        
        <select class="form-control" id="inputTag{{ $tagIndex }}" name="tag{{ $tagIndex }}" @if($tagIndex == 1) required @endif>
            <option value="">-- Selecione uma Tag --</option> <!-- Default placeholder -->

            @foreach($tags as $tag)
                <option value="{{ $tag->id }}" >
                    {{ $tag->description }}
                </option>
            @endforeach
        </select>
        
        
        <!-- Category Modal -->
    <div class="modal fade" id="addTagModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h5 class="modal-title">Criar Nova Tag</h5>
                  
                </div>
                <div class="modal-body">
                    <input type="text" id="newTagName" class="form-control" placeholder="Nome da Tag">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" id="saveTagBtn">Salvar</button>
                </div>
            </div>
        </div>
    </div>

          
    <!-- Category Modal -->
    <div class="modal fade" id="updateTagModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h5 class="modal-title">Editar Tag</h5>
                 
                </div>
                <div class="modal-body">
                    <input type="text" id="newTagNameToUpdate" class="form-control" placeholder="Nome da Tag">
                     <input type="hidden" id="newTagIdToUpdate" class="form-control" placeholder="Id da Tag">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" id="updateTagBtn">Salvar</button>
                </div>
            </div>
        </div>
    </div> 
        
        
        
        <br>
    </div>
@endforeach



        @foreach($locales as $locale)
        <div id="locale_{{ $locale->lang }}" class="tab-pane fade {{ $locale == $locales[0] ? 'in active' : ''}}" >
            
<br><br>
          <div class="form-group">
            <label for="inputTitle_{{ $locale->lang }}">Titulo  {!! $locale == $locales[0] ? '<span style="color: indianred">*</span>' : '' !!}</label>
            <input type="text" class="form-control" id="inputTitle_{{ $locale->lang }}" name="title_{{ $locale->lang }}" {{ $locale == $locales[0] ? 'required' : ''}}>
          </div>
     <div class="form-group">
            <label for="inputSmallbody_{{ $locale->lang }}">Breve Descrição ( max 400 palavras) {!! $locale == $locales[0] ? '<span style="color: indianred">*</span>' : '' !!}</label>
            <textarea class="limitedsummernote" id="inputSmallbody_{{ $locale->lang }}" name="smallbody_{{ $locale->lang }}" {{ $locale == $locales[0] ? 'required' : ''}}></textarea>
          </div>
          <div class="form-group">
            <label for="inputBody_{{ $locale->lang }}">Texto  {!! $locale == $locales[0] ? '<span style="color: indianred">*</span>' : '' !!}</label>
            <textarea class="summernote" id="inputBody_{{ $locale->lang }}" name="body_{{ $locale->lang }}" {{ $locale == $locales[0] ? 'required' : ''}}></textarea>
          </div>
        </div>
        @endforeach
      

      <div class="form-group">
        <label for="inputFile">Imagem Fora</label>
        <input type="file" id="inputFile" name="image">
      </div>
       <div class="form-group">
        <label for="inputFileInside">Imagem Dentro</label>
        <input type="file" id="inputFileInside" name="image_inside">
      </div>
 <div class="form-group">
            <input type="radio" id="css" name="commentsvalidate" value="1">
  <label for="css">Ativar Comentários</label><br>
  <input type="radio" id="javascript" name="commentsvalidate" value="0">
  <label for="radio">Não Ativar Comentários</label>
      </div>
       <div class="form-group">
            <input type="radio" id="css2" name="draftvalidate" value="1">
  <label for="css2">Pronto a publicar</label><br>
  <input type="radio" id="radio2" checked name="draftvalidate" value="0">
  <label for="radio2">É Rascunho</label>
      </div>
      
      <button type="submit" class="btn btn-success"><i class="fa fa-check"></i>&nbsp;Submeter</button>
      </div>
    </form>
  
</div>
</div>
@stop

@section('css')
<!--<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">-->
@endsection

@section('js')

<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>

<script>
$(document).ready(function() {
   $('.limitedsummernote').summernote({
        fontSizes: ['8', '9', '10', '11', '12', '14','16', '18','20','22', '24','26', '28','30','32', '34', '36','38','40','42', '44','46', '48' , '50','64', '82', '150'],
         spellCheck: false,
         lang: 'en-US', // default: 'en-US'
         disableGrammar: false,
        toolbar: [
	// [groupName, [list of button]]
	['font', ['fontname']],
        ['font', ['fontsize', 'color','fontsizeunit']],
                ['style', ['style']],
	['font', ['bold', 'italic', 'underline','superscript','subscript', 'strikethrough','clear']],
	
	['table', ['table']],
	['para', ['ul','ol','paragraph','height']],
	['insert', ['link','image', 'doc','picture']], // image and doc are customized buttons
	['misc', ['codeview', 'fullscreen','undo','redo',]],
],
    placeholder: 'Pequena descrição',
    height: 400,
     tabsize: 2,
                callbacks: {
                    onKeydown: function (e) { 
                        var t = e.currentTarget.innerText; 
                        if (t.trim().length >= 400) {
                            //delete keys, arrow keys, copy, cut, select all
                            if (e.keyCode != 8 && !(e.keyCode >=37 && e.keyCode <=40) && e.keyCode != 46 && !(e.keyCode == 88 && e.ctrlKey) && !(e.keyCode == 67 && e.ctrlKey) && !(e.keyCode == 65 && e.ctrlKey))
                            e.preventDefault(); 
                        } 
                    },
                    onKeyup: function (e) {
                        var t = e.currentTarget.innerText;
                        $('#maxContentPost').text(400 - t.trim().length);
                    },
                    onPaste: function (e) {
                        var t = e.currentTarget.innerText;
                        var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
                        e.preventDefault();
                        var maxPaste = bufferText.length;
                        if(t.length + bufferText.length > 400){
                            maxPaste = 400 - t.length;
                        }
                        if(maxPaste > 0){
                            document.execCommand('insertText', false, bufferText.substring(0, maxPaste));
                        }
                        $('#maxContentPost').text(400 - t.length);
                    }
                }
            });
 
  $('.summernote').summernote({
      fontSizes: ['8', '9', '10', '11', '12', '14','16', '18','20','22', '24','26', '28','30','32', '34', '36','38','40','42', '44','46', '48' , '50','64', '82', '150'],
         spellCheck: false,
         lang: 'en-US', // default: 'en-US'
         disableGrammar: false,
        toolbar: [
	// [groupName, [list of button]]
	['font', ['fontname']],
        ['font', ['fontsize', 'color','fontsizeunit']],
                ['style', ['style']],
	['font', ['bold', 'italic', 'underline','superscript','subscript', 'strikethrough','clear']],
	
	['table', ['table']],
	['para', ['ul','ol','paragraph','height']],
	['insert', ['link','image', 'doc','picture']], // image and doc are customized buttons
	['misc', ['codeview', 'fullscreen','undo','redo',]]],
             height: 400,
        tabsize: 2
        });
}); 
     
$(document).ready(function() {

    // Open modal on button click
    $('#addCategoryBtn').click(function() {
        $('#addCategoryModal').modal('show');
    });
      // Open modal on button click
       $('#upCategoryBtn').click(function() {
    let categoryId = $('#inputCategory').val(); // Get selected category ID
    let categoryName = $('#inputCategory option:selected').text().trim(); // Get selected category name

    // Check if categoryId is empty, "0", or null
    if (!categoryId || categoryId.trim() === "0") {
        alert('Por favor, selecione uma categoria para editar.');
        return;
    }

    // Populate the modal fields
    $('#newCategoryNameToUpdate').val(categoryName);
    $('#newCategoryIdToUpdate').val(categoryId);

    // Show the modal
    $('#updateCategoryModal').modal('show');
});


    // Open modal on button click
    $('#addTagBtn').click(function() {
        $('#addTagModal').modal('show');
    });
      // Open modal on button click
       $('#upTagBtn').click(function() {
    let tagId = $('#inputTag1').val(); // Get selected category ID
    let tagName = $('#inputTag1 option:selected').text().trim(); // Get selected category name

    // Check if categoryId is empty, "0", or null
    if (!tagId || tagId.trim() === "0") {
        alert('Por favor, selecione uma categoria para editar.');
        return;
    }

    // Populate the modal fields
    $('#newTagNameToUpdate').val(tagName);
    $('#newTagIdToUpdate').val(tagId);

    // Show the modal
    $('#updateTagModal').modal('show');
});






    // Save new category
    $('#saveCategoryBtn').click(function() {
        let categoryName = $('#newCategoryName').val().trim();
        if (categoryName === '') {
            alert('Por favor, insira um nome para a categoria.');
            return;
        }

        $.ajax({
            url: "{{ route('categories.store') }}",  // Update with your actual route
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                description: categoryName
            },
            success: function(response) {
                if (response.success) {
                    // Append new category to select
                    $('#inputCategory').append(`<option value="${response.category.id}" selected>${response.category.description}</option>`);

                    // Close modal and clear input
                    $('#addCategoryModal').modal('hide');
                    $('#newCategoryName').val('');
                } else {
                    alert('Erro ao criar categoria.');
                }
            },
            error: function() {
                alert('Ocorreu um erro ao processar sua solicitação.');
            }
        });
    });
    
    $('#updateCategoryBtn').click(function() { 
    let categoryId =   $('#newCategoryIdToUpdate').val().trim();  // Get selected category ID
    let updatedcategoryName = $('#newCategoryNameToUpdate').val().trim(); // Get selected category name

    if (!categoryId) {
        alert('Por favor, selecione uma categoria para editar.');
        return;
    }

    $.ajax({
        url: "{{ route('categories.updatecategory') }}",  // Ensure this route exists in your Laravel backend
        type: 'POST',  // Change to PUT if following RESTful convention
        data: {
            _token: '{{ csrf_token() }}',
            category_id: categoryId,
            description: updatedcategoryName
        },
        success: function(response) {
            if (response.success) {
                // Update the category name in the select dropdown
                $('#inputCategory option:selected').text(updatedcategoryName);
                $('#updateCategoryModal').modal('hide');
                    $('#newCategoryIdToUpdate').val('');
            
            } else {
                alert('Erro ao atualizar categoria.');
            }
        },
        error: function() {
            alert('Ocorreu um erro ao processar sua solicitação.');
        }
    });
});

$('#delCategoryBtn').click(function() {
    let categoryId = $('#inputCategory').val().trim();  // Get selected category ID

    if (!categoryId || categoryId === "0") {  
        alert('Por favor, selecione uma categoria antes de excluir.');
        return;
    }

    if (!confirm('Tem certeza de que deseja excluir esta categoria?')) {
        return;
    }

    $.ajax({
        url: "{{ route('categories.deletecategory') }}",  // Update with your actual route
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            category_id: categoryId
        },
        success: function(response) {
            if (response.success) {
                alert('Categoria excluída com sucesso!');
                
                // Remove the deleted category from the select options
                $('#inputCategory option[value="' + categoryId + '"]').remove();
            } else {
                alert('Erro ao excluir categoria.');
            }
        },
        error: function() {
            alert('Ocorreu um erro ao processar sua solicitação.');
        }
    });
});


    // Save new tag
    $('#saveTagBtn').click(function() {
        let tagName = $('#newTagName').val().trim();
        if (tagName === '') {
            alert('Por favor, insira um nome para a tag.');
            return;
        }

        $.ajax({
            url: "{{ route('tags.store') }}",  // Update with your actual route
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                description: tagName
            },
            success: function(response) {
                if (response.success) {
                    // Append new category to select
                    $('#inputTag1').append(`<option value="${response.tag.id}" >${response.tag.description}</option>`);
                    $('#inputTag2').append(`<option value="${response.tag.id}" >${response.tag.description}</option>`);
                    $('#inputTag3').append(`<option value="${response.tag.id}" >${response.tag.description}</option>`);
                    $('#inputTag4').append(`<option value="${response.tag.id}">${response.tag.description}</option>`);
                    $('#inputTag5').append(`<option value="${response.tag.id}" >${response.tag.description}</option>`);
                    // Close modal and clear input
                    $('#addTagModal').modal('hide');
                    $('#newTagName').val('');
                } else {
                    alert('Erro ao criar tag.');
                }
            },
            error: function() {
                alert('Ocorreu um erro ao processar sua solicitação.');
            }
        });
    });
    
    $('#updateTagBtn').click(function() { 
    let tagId =   $('#newTagIdToUpdate').val().trim();  // Get selected category ID
    let updatedtagName = $('#newTagNameToUpdate').val().trim(); // Get selected category name

    if (!tagId) {
        alert('Por favor, selecione uma tag para editar.');
        return;
    }

    $.ajax({
        url: "{{ route('tags.updatetag') }}",  // Ensure this route exists in your Laravel backend
        type: 'POST',  // Change to PUT if following RESTful convention
        data: {
            _token: '{{ csrf_token() }}',
            tag_id: tagId,
            description: updatedtagName
        },
        success: function(response) {
            if (response.success) {
                // Update the category name in the select dropdown
                $('#inputTag1 option:selected').text(updatedtagName);
                $('#updateTagModal').modal('hide');
                    $('#newTagIdToUpdate').val('');
            
            } else {
                alert('Erro ao atualizar tag.');
            }
        },
        error: function() {
            alert('Ocorreu um erro ao processar sua solicitação.');
        }
    });
});

$('#delTagBtn').click(function() {
    let tagId = $('#inputTag1').val().trim();  // Get selected category ID

    if (!tagId || tagId === "0") {  
        alert('Por favor, selecione uma tag antes de excluir.');
        return;
    }

    if (!confirm('Tem certeza de que deseja excluir esta tag?')) {
        return;
    }

    $.ajax({
        url: "{{ route('tags.deletetag') }}",  // Update with your actual route
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            tag_id: tagId
        },
        success: function(response) {
            if (response.success) {
                alert('Tag excluída com sucesso!');
                
                // Remove the deleted category from the select options
                $('#inputTag1 option[value="' + tagId + '"]').remove();
            } else {
                alert('Erro ao excluir tag.');
            }
        },
        error: function() {
            alert('Ocorreu um erro ao processar sua solicitação.');
        }
    });
});








});
</script>
@endsection