@extends('layouts.app')
@push('style')
  


<link rel="stylesheet" type="text/css" href="{{ asset('/css/ns-window.css') }}">
<style>
    .full-page {
    
    height:calc(100vh - 225px);
}

<style>.ui-sortable {
  --icon-size: .8em;
  --gutter: .5em;
  padding: 0 0 0 var(--icon-size);
}

.ui-sortable li {
  padding-left: var(--gutter);
}

.ui-sortable  li::before {
    padding-right: 0.3em;
    padding-top:10px;
  font-family: "FontAwesome";
  content: "\f0c9";
  vertical-align: middle;
}
</style>
    </style>
@endpush
@section('content')
    @if (session('error'))
        <div class="container my-5">
            <div class="px-4 my-2">
                <div class="mr-4 alert alert-danger" role="alert">
                    {{ session('error') }}
                </div>
            </div>
        </div>
    @endif

 
    <div class="full-page col p-4 pb-0  mx-0  rounded-3 border shadow-lg text-left">
            <div class="row  " >
                <div class="d-flex flex-col bd-light justify-content-center mb-2">    
                    <div id="info-message" class="mr-4 alert alert-danger " hidden> </div>
                    <h4 class="text-dark text-uppercase ps-2"> {{ __('menu.messageCustomization') }}</h4>  
                </div>
            </div>
            <div class="row">
                <div class="d-flex flex-col bd-light justify-content-center ">
                    <div class="card p-4 h-100" style="width: 18rem;">
                        <div id="submenu0" class="card-body"> 
                            <strong class="card-title">{{ __('applabels.DefaultMessages') }}</strong>
                            <p class="card-text" style="height: 6.5rem">{{ __('applabels.DefaultMessagesText') }}</p>
                            <button a class="btn btn-primary" name="btnReplies" id="btnReplies"><i class="fa-solid fa-comment  px-1"></i>  {{ __('applabels.Messages') }}</button >  
                        </div>                       
                    </div>
                    <div class="card p-4 h-100" style="width: 18rem;">
                        <div  id="submenu1" class="card-body"> 
                            <strong class="card-title">{{ __('applabels.SocialMedia') }}</strong>
                            <p class="card-text" style="height: 6.5rem">{{ __('applabels.SocialMediaText') }}</p>
                            <button a class="btn btn-primary" name="btnRS" id="btnRS"><i class= "fa-solid fa-share-nodes  px-1"></i>{{ __('applabels.SocialMedia') }}</button >
                        </div>                       
                    </div>
                    <div class="card p-4 h-100" style="width: 18rem;">
                        <div id="submenu2" class="card-body"> 
                            <strong class="card-title">{{ __('applabels.Notifications') }}</strong>
                            <p class="card-text" style="height: 6.5rem">{{ __('applabels.NotificationsText') }}</p>
                            <button  class="btn btn-primary" name="btnNOTIF" id="btnNOTIF"   ><i class="fa-regular fa-bell  px-1"></i>{{ __('applabels.Notifications') }}</button >
                        </div>                       
                    </div>
                    <div class="card p-4 h-100" style="width: 18rem;">                        
                        <div id="submenu3" class="card-body"> 
                                <strong class="card-title">{{ __('applabels.Blocking') }}</strong>
                            <p class="card-text" style="height: 6.5rem">{{ __('applabels.BlockingText') }}</p>
                            <button  class="btn btn-primary" name="btnBLOCK" id="btnBLOCK"   ><i class="fa-solid fa-user-slash px-1"></i> {{ __('applabels.Blocking') }}</button > 
                        </div>                       
                    </div>
                   <!--  <div  class="p2 text-center m-auto"> <h4 class="text-dark"> <button a class="btn btn-primary" name="btnReplies" id="btnReplies">{{ __('applabels.DefaultMessages') }}</button ></h4></div> 
                    <div class="p2 text-center m-auto"> <h4 class="text-dark"> </h4></div> 
                    <div   class="p2 text-center m-auto"> <h4 class="text-dark"></h4>  </div> 
                    <div   class="p2 text-center m-auto"> <h4 class="text-dark"></h4>  </div> -->
                </div>
            </div>    
            
  
              
    </div> 



@include('replyMessages.modalpopups.listedit')
@include('statusReasons.modalpopups.listedit')

@push('scripts') 

<!-- Bootstrap --> 

      

<script type="text/javascript" src="{{ asset('/js/ns-window.js') }}"></script>
<script type="text/javascript">  

        // Custom filtering function which will search data in column four between two values
   
    $(document).ready(function($) {
       // $.noConflict();
       /* var token = '';
        var modal = $('.modal')
        var form = $('.form')*/
        var btnRS = $('#btnRS'),
            btnNOTIF = $('#btnNOTIF'),
            btnBLOCK = $('#btnBLOCK'),
            btnReplies = $('#btnReplies');

        let btnDelete = $('.dynamic-delete');
        const nswindowHeigth = window.outerHeight*(3/5);
        const nswindowWidth = (document.body.scrollWidth > document.body.offsetWidth) ? document.body.scrollWidth*(3/5): document.body.offsetWidth*(3/5);
        
      /* btnReplies.click(function(e){
            e.preventDefault();
            let pageurl = "{{ url('/replyMessage/list/')}}";
             
            $.nsWindow.open({                        
                title:"{{ __('applabels.DefaultMessages' ) }}",                      
                height: nswindowHeigth,                    
                width: nswindowWidth,                       
                dataUrl: pageurl,                                      
                theme:'black'                        
                });                 
             
        });
        btnNOTIF.click(function(e){
            e.preventDefault();
            let pageurl = "{{ url('/blockStatus/list')}}/NOTIF";
           
            $.nsWindow.open({                        
                title:"{{ __('applabels.Notifications' ) }}",                      
                height: nswindowHeigth,                    
                width: nswindowWidth,                       
                dataUrl: pageurl,                                      
                theme:'black'                        
                });                 
             
        });
        btnBLOCK.click(function(e){
            e.preventDefault();
            let pageurl = "{{ url('/blockStatus/list')}}/BLOCK";
            
            $.nsWindow.open({                        
                title:"{{ __('applabels.Blocking' ) }}",                        
                height: nswindowHeigth,                    
                width: nswindowWidth,                          
                dataUrl: pageurl,                                      
                theme:'black'                        
                });                 
             
        });*/
      /*  btnRS.click(function(e){
            e.preventDefault();
            let pageurl = "{{ url('/blockStatus/list')}}/RS";
             
            $.nsWindow.open({                        
                title:"{{ __('applabels.SocialMedia' ) }}",                        
                height: nswindowHeigth,                    
                width: nswindowWidth,                    
                dataUrl: pageurl,                                      
                theme:'black'                        
                });                 
             
        });*//*
        $(document).on('click','.btn-edit',function(e){
            e.preventDefault();
            var rowid = $(this).data('rowid')
            var el = $(this);
            console.log(el);
            if(!rowid) return;
            
            let pageurl = "{{ url('/authors/edit/') }}/"+rowid;
            nswindowHeigth =  window.outerWidth > 1200 ? (window.outerWidth > 2400 ? 680 : 600 ) : 430 ;
            nswindowWidth =   window.outerWidth > 1200 ? (window.outerWidth > 2400 ? 1280 : 1040 )  : 880 ;     
                $.nsWindow.open({                        
                    title:'Author',                        
                    height: nswindowHeigth,                    
                    width: nswindowWidth,                                               
                    dataUrl: pageurl,                                      
                    theme:'black'                        
                    });         

        });
        $(document).on('click','.btn-delete',function(e){
            e.preventDefault();
            if(!confirm(" {{ __('applabels.ALERT DELETE author' ) }}")) return;

            var rowid = $(this).data('rowid')
            var el = $(this)
            if(!rowid) return;
            console.log(el);
            
            $.ajax({
                type: "delete",
                dataType: 'JSON',
                url: "{{ url('/authors/delete/') }}/" + rowid,
                data: rowid,
                success: function (data) {
                    if (data.success) {
                        console.log(data);
                        table.row(el.parents('tr'))
                            .remove()
                            .draw();
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                        console.error(textStatus, errorThrown);
                    }
             }); //end ajax
        }) */

        /**
         * functions for modal window 
         */
       /* var i = 0;
        $(document).on("click", ".dynamic-edit", function (e) {
            e.preventDefault();
            var thisClass = $(this).attr('class');
            let thisDiv = $(this);
            $.fn.editField (thisClass, thisDiv);
        
        });*/
/*
        $(document).on("click","#dynamic-add-BLOCK", function () {
                    ++i;
                    $("#dynamicAddRemove").append(' <div class="d-flex flex-row bd-highlight justify-content-start mb-2 mt-4"><div class="flex-grow-1 pe-4 me-4"><input type="text" name="addMoreInputFields[' + i +
                        ']" placeholder="Enter subject" class="form-control" /><input type="hidden" name="type[' + i +
                        ']" value="BLOCK" class="form-control" /></div>  <div class="p-1 align-self-end ms-4"> <button type="button" class="btn btn-sm btn-outline-danger remove-input-field">Delete</button></div></div>'
                        );
        });

        $(document).on("click","#dynamic-add-RS", function () {
                    ++i;
                    $("#dynamicAddRemove").append(' <div class="d-flex flex-row bd-highlight justify-content-start mb-2"><div class="flex-grow-1 pe-4 me-4"><input type="text" name="addMoreInputFields[' + i +
                        ']" placeholder="Enter subject" class="form-control" /><input type="hidden" name="type[' + i +
                        ']" value="RS" class="form-control" /></div>  <div class="p-1 align-self-end ms-4"> <button type="button" class="btn btn-sm btn-outline-danger remove-input-field">Delete</button></div></div>'
                        );
        });

        $(document).on("click","#dynamic-add-NOTIF", function () {
                    ++i;
                    $("#dynamicAddRemove").append(' <div class="d-flex flex-row bd-highlight justify-content-start mb-2"><div class="flex-grow-1 pe-4 me-4"><input type="text" name="addMoreInputFields[' + i +
                        ']" placeholder="Enter subject" class="form-control" /><input type="hidden" name="type[' + i +
                        ']" value="NOTIF" class="form-control" /></div>  <div class="p-1 align-self-end ms-4"> <button type="button" class="btn btn-sm btn-outline-danger remove-input-field">Delete</button></div></div>'
                        );
        });

        $(document).on("click",".dynamic-delete", function (e) {
            e.preventDefault();
            var thisClass = $(this).attr('class');
            let thisDiv = $(this);
            
            data = thisDiv.parent('div').parent('div').children().first().children('.id-input').attr("value");
            $.ajax({
                    url: "{!! url('/blockStatus/delete/') !!}/"+data,
                    type: "delete",
                    
                    datatype: "json",
                    success: function(response) {                  
                        window.location.reload();
                        
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error(textStatus, errorThrown);
                    }
                });
            
        });
*/
        
        $(document).on('click', '.remove-input-field', function () {
            $(this).parent('div').parent('div').remove();
        }); 
   
        $(document).on('submit',"#formAuthor" , function(e) { 

        //    $('#formAuthor').submit(function () {
            e.preventDefault();
            var formData = $(formAuthor).serializeArray();
            console.log (formData);    
            var posturl = "{{ url('/blockStatus/save/') }}"; //$('#saveURL').val();
            console.log (posturl)
            $.ajax({
                url: posturl,
                type: "post",
                data: formData,
                datatype: "json",
                success: function(response) {
                    console.log(response, ' Resposta AJAX')
                    window.location.reload()

                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error(textStatus, errorThrown);
                }
            });

        })
             /** function for author modal edit */
        $(document).on('submit',"#formEditAuthor" , function(e) { 
            e.preventDefault();
                
            var formData   = $(formEditAuthor).serializeArray(); //serialize

            console.log (formData);

            $.ajax({
                url: "{!! url('/authors/save') !!}",
                type: "post",
                data: formData,
                datatype: "json",
                success: function(response) {
                    console.log(response, ' Resposta AJAX')
                    window.location.reload()

                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error(textStatus, errorThrown);
                }
            });


        })
   
        


       
     
        var i = 0;
        $(document).on("click", ".dynamicReplies-edit", function (e) {
            e.preventDefault();
            var thisClass = $(this).attr('class');
            let thisDiv = $(this);
            $.fn.editFieldReplies (thisClass, thisDiv, e);
        
        });

      

        $(document).on("click","#dynamicReplies-add", function () {
                    ++i;
                    $("#dynamicRepliesAddRemove").append(' <div class="d-flex flex-row bd-highlight flex-row bd-highlight align-items-center justify-content-center py-2">' +
                        '<div class="col-md-1 bd-highlight ">'+
                            '<input class="form-check-input m-2" type="radio"  name="default_message_id" id="default_message_id" value="'+i+'" />'+
                        '</div>'+
                        '<div class="col-md-8 bd-highlight ">'+
                            '<input type="text" name="addMoreInputFields[' + i +']" placeholder="Enter subject" class="form-control text-input col-md-10 rounded-3" />'+
                        '</div> '+
                        '<div class="col-md-2 buttons ms-4">' + 
                            '<div class="p-1 align-self-end ms-4"> <button type="button" class="btn btn-sm btn-outline-danger remove-input-field">{{ __("applabels.Delete") }}</button>'+
                         '</div></div>'
                        );
                    $('#submit').attr('disabled',false);
                    $('#submit').removeClass('invisible');
                    $('#submit').addClass('visible');
        });

        $(document).on("click",".dynamicReplies-delete", function (e) {
            e.preventDefault();
            var thisClass = $(this).attr('class');
            let thisDiv = $(this);
            console.log(thisDiv);
            data = thisDiv.parent('div').parent('div').children().first().next().children('.id-input').attr("value");
            $.ajax({
                    url: "{!! url('/replyMessage/delete/') !!}/"+data,
                    type: "delete",
                    
                    datatype: "json",
                    success: function(response) {                  
                        window.location.reload();
                        
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error(textStatus, errorThrown);
                    }
                });
            
        });

        $(document).on('click', '.remove-input-field', function () {
            $(this).parent('div').parent('div').remove();
        }); 
   
        $(document).on('submit',"#formReplyMessages" , function(e) { 

        //    $('#formAuthor').submit(function () {
            
            var formData = $(formReplyMessages).serializeArray();
            console.log (formData);    
            var posturl = "{{ url('/replyMessage/save') }}"; //$('#saveURL').val();
            console.log ('DEFAULT SUBMIT');
            $.ajax({
                url: posturl,
                type: "post",
                data: formData,
                datatype: "json",
                success: function(response) {
                    console.log(response, ' Resposta AJAX')
                    window.location.reload()

                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error(textStatus, errorThrown);
                }
            });

        });


        

        $.fn.editFieldReplies = function(currentClass, myDiv, e){
            e.preventDefault();
            if (~currentClass.indexOf('btn-warning')){
                myDiv.removeClass('btn-warning');
                myDiv.addClass('btn-success');
                myDiv.html("{{ __('applabels.Save') }}");    
                idInput = myDiv.parent('div').parent('div').children().first().next().children('.id-input');
                defaultValue = myDiv.parent('div').parent('div').children().first().children('#default_message_id');
                console.log (defaultValue);
                myDiv.parent('div').parent('div').children().first().next().children('.text-input').attr("readonly", false);    
                textValue = myDiv.parent('div').parent('div').children().first().next().children('.text-input');
                myDiv.parent('div').parent('div').children().first().children('#default_message_id').prop('disabled',false);
            }

            if (~currentClass.indexOf('btn-success')){
                console.log ('SAVING');
    
                id = idInput.attr("value");
                desc =  textValue.val();
               
                defaultVal = (defaultValue.is(':checked')) ? 1 : 0;
                const data = {id, desc, defaultVal };
                var formData = JSON.stringify(data) ; //serialize
                console.log (formData);

                $.ajax({
                    url: "{!! url('/replyMessage/save') !!}",
                    type: "post",
                    data: data,
                    datatype: "json",
                    success: function(response) {
                    
                        myDiv.removeClass('btn-success');
                        myDiv.addClass('btn-warning');
                        myDiv.html("{{ __('applabels.Edit') }}");    
                        //textInput.attr("readonly", true);
                        myDiv.parent('div').parent('div').children().first().next().children('.text-input').attr("readonly", true);    
                        myDiv.parent('div').parent('div').children().first().children('#default_message_id').prop('disabled',true);
                      
                        console.log(response, ' Resposta AJAX');
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error(textStatus, errorThrown);
                    }
                });

            }
        }

    }); 
 
    
    
 
</script>
    
@endpush
@endsection