@extends('admin.layout.app')

@section('main_title', 'Maps')
@section('title', 'Maps')
@section('sub_title', 'Control Panel')

@push('styles')
<style>

    .grey{
        fill:grey;
    }
    path,rect,polyline,ellipse,polygon,circle{
        pointer-events:all;
    }
</style>
    <link href="{{ asset('public/assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />

    <link href="{{ asset('public/assets/libs/mohithg-switchery/switchery.min.css') }}" rel="stylesheet" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
  
@endpush

@section('content')
<div class="card">
    <div class="card-body">

            <form class="form-horizontal" method="POST" action="#" enctype="multipart/form-data">
                <div class="card-body">
                    <div class="form-group">
                        <label for="svg">Svg Code</label>
                        <textarea id="svg" name="svg" row="25" class="form-control ">{{$content}}</textarea>
                    </div>
                    <div class="form-group">
                        <div class="map-svg-wrp">
                            <div class="map-svg-wrp-inner ui-draggable ui-draggable-handle" id="svgfile" style="top: 0px; left: 0px; position: relative;">  
                            </div>
                        </div>
                    </div> 
                   
                </div>
                <div class="card-body">
                     <div class="form-group">
                         <button type="button" class="btn btn-primary submit">Create Map</button>
                         <button type="button" class="btn btn-primary copy_submit">Copy Map</button>
                    </div>
                </div>
               
            </form>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <form action="{{route('maps.update',$map->id) }}" method="post">
            <input type="hidden" name="_method" value="put">
        <div class="row">
            <div class="category col-md-3">
                <select name="venue_category" id="venue_category" class="form-control select2 category" data-toggle="select2" data-width="100%"> 
                    <option value="field">Field</option>
                    <option value="gray_fields">Gray Fields</option>
                    <option value="stand">Stand Name</option> 
                    <option value="tier">Tier Name</option>
                    @foreach($categories as $category)
                        <option value="{{$category->name}}">{{$category->name}}</option>
                    @endforeach
                </select>
            </div>
            
            
            <div class="col-md-4">
                <div class="row">
                    <div class="col-md-4">
                        <button type="button" class="btn btn-primary move_highlighte_box">Move Blocks</button>
                    </div>
                     <div class="col-md-6">
                        <button type="button" class="btn btn-primary change_section_name">Change Section Name</button>
                    </div>
                   
                </div>
            </div>
            <div class="col-md-4">
                <input type="text" class="form-control" name="svg-name" id="svg-name" placeholder="Please add svg name e.g Fc Barcelona"> 
            </div>
             <div class="col-md-1">
                <button type="button" class="btn btn-primary export float-end">Export</button>
            </div>
        </div>
        </br>
        <div class="change_section_div row" style="display:none">
             <div class="category col-md-3">
                <select name="section_name" id="section_name" class="form-control select2 section" data-toggle="select2" data-width="100%">
               
                </select>
            </div>
            <div class="col-md-4">
                <input type="text" class="form-control" name="section-name" id="section-name" placeholder="Section Name"> 
            </div>
            <div class="col-md-4">
                <div class="row">
                    <div class="col-md-4">
                        <button type="button" class="btn btn-primary update_section_name">Update Section</button>
                    </div>
                    
                </div>
            </div>
        </div>
        </br></br>
        <div class="row">
            <div class="col-md-6">
            </div>
            <div class="col-md-3 float-end">
                <!--<div class="switchery-demo">  -->
                  
                <!--</div>-->
            </div>
            <div class="col-md-3">
                <div class="row">
                    <div class="col-md-6">
                        <button type="button" class="btn btn-primary remove_block float-end">Remove Block</button>
                    </div>
                    <div class="col-md-6">
                        <input type="checkbox" name="editor" data-switchery="true" class="js-switch editor" value="0" />
                        <label class="form-label">Editor</label>
                    </div>
                </div>
                
            </div>
        </div>
       
        <div class="row mt-3">
            <div class="svg col-md-6">
                
            </div>
            
            <div class="converted_svg col-md-6" id="converted_svg">
              
            </div>
        </div>
        </br>
        </br>
        <div class="row">
            <div class="col-md-4">
                                <select name="category[]" id="category" class="form-control select2 select2-multiple filter-select2 category" multiple="multiple" data-toggle="select2" data-width="100%" data-placeholder="Plase select category"> 
                   <option value="">Please Select Category</option>
                    @foreach($categoriesTree as $category)
                        <option value="{{$category->name}}" @if(in_array($category->name,$categoryArray)) selected @endif>{{$category->name}}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <input type="hidden" name="svg-data" id="svg-data" value="">
                <input type="hidden" name="venue_id" id="venue_id" value="{{$venueId}}">
               <input type="text" class="form-control" value="{{ $map->name }}" name="map-name" id="map-name" required placeholder="Please add svg name e.g Fc Barcelona">
            </div>
            <div class="col-md-4">
                <button type="submit" class="btn btn-primary submit_map">Save</button>
                
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                 <h5 class="text-danger" style="padding-top:15px">Note : Please turn off the editor before saving map.</h5>
                 </div>
        </div>
    </div>
   
</div>
@endsection


@push('scripts')
<script src="{{ asset('public/assets/libs/select2/js/select2.min.js') }}"></script>
<script src="{{ asset('public/assets/libs/sweetalert2/sweetalert2.all.min.js') }}"></script>
<script src="{{ asset('public/assets/libs/mohithg-switchery/switchery.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
<script>
//  $(document).ready(function() {
//         $('#summernote').summernote();
//     });
$(document).ready(function(){
    $('#venue_category').select2();
     
     $('.select2-multiple').select2();
     
     var elem = document.querySelector('.js-switch');
        var init = new Switchery(elem,{
                    "color"             : '#574bbc', 
                    "secondaryColor"    : '#dfdfdf',
                    "jackColor"         : '#fff',
                    "jackSecondaryColor": null,
                    "className"         : 'switchery',
                    "disabled"          : false,
                    "disabledOpacity"   : 0.5,
                    "speed"             : '0.4s',
                    "size"              : 'default'
                });
        elem.onchange = function() {
            if(elem.checked==true){
                elem.value = 1;
            }else{
                elem.value = 0;
            }
        };
});

$(document).on('click','.submit',function(){
    var svg = $("#svg").val();
    
    var catSection = null;
    // var catSectionArray = $.parseJSON(catSection);
    
    console.log(catSection);
    
    $(".svg").html(svg);
    $(".svg").find('svg').removeAttr('height');
    $(".svg").find('svg').removeAttr('width');
    $(".svg").find('svg').removeClass('svg-stadium');
    $(".svg").find('.field').removeClass('field');
    $(".svg").find('g').css('cursor','pointer');
    
    var svgElement = $(".svg").find('svg');
    
    var html = svgElement[0].cloneNode(false).outerHTML;
    
    $.each(catSection,function(key,value){
        if($(".svg").find('[data-category="' + key.toLowerCase() + '"]').length <= 0){
            var gTag = document.createElement('g');
            gTag.setAttribute('data-category',key.replace(/ /g, '-').toLowerCase());
            svgElement.append(gTag);
        }
    })
    
    // Loop through each <text> element
    var textElements = $('svg text');
    textElements.each(function() {
        // $(this).attr("fill","#000");
        $(this).css("fill", "#000");
        $(this).css("font-family", "DM Sans");
        $(this).css("font-weight","500");
        $(this).css("stroke","transparent");
        
        var textClass = $(this).text();
        textClass = textClass.replace(/ /g,'-').toLowerCase();
        $(this).addClass(textClass);
    });
    
    
    $allTags = document.querySelectorAll('[data-section-id]');
    
    $.each($allTags,function(key,value){
        // if($(this).data('section-id') == "Patio Suite 5E-20"){
            
        
        var sectionId = $(this).attr('id');
        if(sectionId.includes("s-")){
            sectionId = sectionId.replace('s-','');
        }
        if(sectionId.includes("-")){
            sectionId = sectionId.replace(/-/g,' ');
        } 
        
        //check if value is present in catSection array
        parentCategory= "";
        section = "";
        $.each(catSection,function(key,value){
            value = value.map(element => {
                            return element.toLowerCase();
                    });
            if ($.inArray(sectionId, value) != -1)
            {
                
                if(parentCategory == "" ){
                    parentCategory = key;
                        if(sectionId == parentCategory.replace('/-/g',' ').toLowerCase()){
                            section = parentCategory;
                        }else{
                            section = $.trim(sectionId.replace(parentCategory.toLowerCase(),''));
                        }
                }
            }
        });
        
        if(section == ""){
            var sectionId = $(this).data('section-id');
            if(typeof(sectionId) == "string"){
                sectionId = sectionId.toLowerCase();
            }
            //check if value is present in catSection array
            
            parentCategory="";
            section="";
            $.each(catSection,function(key,value){
                value = value.map(element => {
                                return element.toLowerCase();
                        });
                if ($.inArray(sectionId, value) != -1)
                {
                    if(parentCategory == "" ){
                        parentCategory = key;
                            if(sectionId == parentCategory.replace('/-/g',' ').toLowerCase()){
                                console.log(sectionId);
                                console.log(parentCategory);
                                section = parentCategory;
                            }else{
                                console.log("Test"+section);
                                console.log(parentCategory);
                                section = $.trim(sectionId.replace(parentCategory.toLowerCase(),''));
                            }
                    }
                }
            });
        }
        
        parentCategory = parentCategory.replace(/ /g,'-').toLowerCase();
        section = section.replace(/ /g,'-').toLowerCase();
       
        var dataSectionId = $(this).data('section-id');
        var categoryTag = $(".svg").find('[data-category="' + parentCategory + '"]');
        
        var fieldlength = $(".svg").find('[data-section-id="'+dataSectionId+'"]').length;
            
            // field = sectionId.replace(/ /g,'-').toLowerCase();
            // fieldArray = field.split('-');
            
            // category = [];
            // section = "";
            // var fieldTag = "";
            
            // $.each(fieldArray,function(key2,value2){
            //     fieldTag = $("."+value2);
            //     if(typeof(fieldTag[0]) == "undefined"){
            //         category.push(value2);
            //     }else{
            //         section =value2;
            //     }
            // });
            
            // if(section == ""){
            //     section = category.join("-");
            //     fieldTag = $("."+section);
            // }
            
            // if(category != ""){
            //     category = category.join("-");
            // }else{
            //     category= section;
            // }
            
            // fieldTag = $("."+section);
            
            //create category if not exist
            // if($(".svg").find('[data-category="' + category + '"]').length <= 0){
            //             var gTag = document.createElement('g');
            //             gTag.setAttribute('data-category',category);
            //             svgElement.append(gTag);
            // }
            
            if(value.hasChildNodes()){
                
                $(this).attr('fill','none');
                $(this).attr('stroke','#000000');
                $(this).removeClass('mapnode');
                $(this).removeAttr('data-section-id');
                $(this).addClass('block');
                
                // fieldTag.removeClass('mapnode');
                // fieldTag.addClass('section-label');
                
                // var gTag = $(".svg").find('[data-category="' + category + '"]');
                
                //create section if not exist in category
                if($(".svg").find('[data-section="' + parentCategory+'_'+section + '"]').length <= 0){
                    var gsectionTag = document.createElement('g');
                    gsectionTag.setAttribute('data-section',parentCategory+'_'+section);
                }else{
                    var gsectionTag = $(".svg").find('[data-section="' + parentCategory+'_'+section + '"]');
                }
                
                $(this).children().each(function(key1,value1){
                   
                    $(this).attr('fill','none');
                    $(this).attr('stroke','#000000');
                    $(this).removeClass('mapnode');
                    $(this).removeAttr('data-section-id');
                    $(this).addClass('block');
                    gsectionTag.append(value1);
                })
                
                if(fieldlength >= 1){
                    var anotherfield = $(".svg").find('[data-section-id="'+ sectionId +'"]');
                    console.log(anotherfield.length);
                    $.each(anotherfield,function(key3,value3){
                        gsectionTag.append(value3)
                    })
                }
                
                // if(typeof(fieldTag[0]) != "undefined"){
                //     gsectionTag.append(fieldTag[0]);
                // }
                categoryTag.append(gsectionTag);
            
            }else{
                $(this).attr('fill','none');
                $(this).attr('stroke','#000000');
                $(this).removeClass('mapnode');
                $(this).addClass('block');
                
                // fieldTag.removeClass('mapnode');
                // fieldTag.removeClass(section);
                // fieldTag.addClass('section-label');
                
                // var gTag = $(".svg").find('[data-category="' + category + '"]'); 
                
                // var gsectionTag = document.createElement('g');
                // gsectionTag.setAttribute('data-section',category+'_'+section);
                
                if($(".svg").find('[data-section="' + parentCategory+'_'+section + '"]').length <= 0){
                    var gsectionTag = document.createElement('g');
                    gsectionTag.setAttribute('data-section',parentCategory+'_'+section);
                }else{
                    var gsectionTag = $(".svg").find('[data-section="' + parentCategory+'_'+section + '"]');
                }
                
                
                gsectionTag.append(value);
                
                if(fieldlength >= 1){
                    var anotherfield = $(".svg").find('[data-section-id="'+ sectionId +'"]');
                    $.each(anotherfield,function(key3,value3){
                        gsectionTag.append(value3)
                    })
                }
                
                // if(typeof(fieldTag[0]) != "undefined"){
                //     gsectionTag.append(fieldTag[0]);
                // }
                categoryTag.append(gsectionTag);
                    
                /* else{
                   
                    $(this).attr('fill','none');
                    $(this).attr('stroke','#000000');
                    $(this).removeClass('mapnode');
                    
                    fieldTag.removeClass('mapnode');
                    fieldTag.removeClass(section);
                    
                    var gTag = $(".svg").find('[data-category="' + category + '"]'); 
                    
                    
                    gsectionTag = document.createElement('g');
                    gsectionTag.setAttribute('data-section',category+'_'+section);
                    gsectionTag.append(value);
                    if(typeof(fieldTag[0]) != "undefined"){ 
                       gsectionTag.append(fieldTag[0]);
                    }
                    gTag.append(gsectionTag);     
                } */
            }
            
        // }   
    })
    
    var fieldElemts = document.querySelectorAll('.mapnode');
    $.each(fieldElemts,function(key,value){
        var fieldElement = $(".field").html();
            
            if(fieldElement == '' || typeof(fieldElement) == "undefined"){
                
                $(this).removeClass('mapnode');
                var fieldHtml = document.createElement('g');
                fieldHtml.classList.add('field');
                $(this).attr('fill','none');
                $(this).attr('stroke','#000000');
                $(this).removeClass('mapnode');
                fieldHtml.append(value);
                svgElement.append(fieldHtml);
                
            }else{
                $(this).attr('fill','none');
                
                $(this).attr('stroke','#000000');
                $(this).removeClass('mapnode');
                
                var fieldHtml = $(".field");
                fieldHtml.append(value);
            }
             
    })
    
    var svgHtml = $(".svg").html();
    $(".svg").html("");
    $(".svg").html(svgHtml);
    $(".converted_svg").html(svgHtml);
    $(".converted_svg").find('svg').addClass('svg-stadium');
    $(".converted_svg").find('svg').removeAttr('id');

});

$(document).on('click','.copy_submit',function(){
    var svg = $("#svg").val();
    $(".svg").html(svg);
    $(".converted_svg").html(svg);
})

$(document).on('change','#category',function(){
    var category = $(this).val();
    if(category != "" && typeof(category) != "undefined"){
        $(".section").select2('destroy');
         $.ajax({
                url: '{{route("get.maps.section")}}',
                type: 'post',
                data: {'category':category,'_token':"{{csrf_token()}}"},
                success: function(response){
                    
                    $("#section_name").html(response.html);
                    $("#section_name").select2();
                }
        })
    }
})

$(document).on('click','path,polygon,rect,line,circle,eclipse,polyline,ellipse,text',function(){
 
    var category = $(".category :selected").val();
    var me = $(this);
  
    if($(this).hasClass('red')==true){
        Swal.fire({
            title: "Are you sure?",
            text: "This block is already moved.do you want to unblock this section?",
            icon: "warning",
            showCancelButton: !0,
            confirmButtonColor: "#28bb4b",
            cancelButtonColor: "#f34e4e",
            confirmButtonText: "Yes",
            cancelButtonText: "No",
        }).then(function(e) {
            if(e.value==true){
                me.removeClass('red');
                me.removeAttr('style');
            }else{
                return;
            }
        })
    }else{
        if($(this).hasClass('grey') == false){
            $(this).addClass('grey');
            $(this).css('fill','grey');
        }
        else{
            $(this).removeClass('grey');
            $(this).removeAttr('style');
        }
    }
    
})

$(document).on('click','.move_highlighte_box',function(){
    
    var category = $(".category :selected").val();
    category = $.trim(category);
    category = category.replace(/\s+/g, '-').toLowerCase();
    if($('.grey').length <= 0){
        Swal.fire("Please Select Block.");
        return;
    }
    $('.grey').each(function(i, obj) {
    
        //create svg if not created 
        if($(".converted_svg").find('svg').length == 0){
            
            var svgElement = $(".svg").find('svg');
            var styleTag = $(".svg").find('style').html();
            var styleHtml = '<style>'+styleTag+'</style>';
            
            var html = svgElement[0].cloneNode(false).outerHTML;
            
           $(".converted_svg").append(html);
           $(".converted_svg").find('svg').addClass('svg-stadium');
        
        }
        
        if(category != "field" && category !="stand" && category != "tier" && category != "gray_box"){
            var element;
            var blockTagArray = ['path','polygon','rect','line','circle','eclipse','polyline'];
            
            for(var i = 0; i < blockTagArray.length; i++) {
                
                var tagName = blockTagArray[i];
                var tagElements = $(this).parent('g').find(tagName);
              
                if (tagElements.length > 0) {
                    element = tagElements;
                }
              
            }
            
            $(this).removeClass('grey');
            $(this).removeAttr('style');
            
            $(this).parent('g').find(element).addClass('block');
            $(this).parent('g').find(element).attr('data-seat',category);
            var svgHtml = $(".svg-stadium").html();
            
            if($(".svg-stadium").find('[data-category="' + category + '"]').length <= 0){
                var categoryHtml = '<g data-category="'+category+'"></g>';
                $(".svg-stadium").html(svgHtml + categoryHtml);
            }
            
            $(this).parent('g').find('text').addClass('section-label');
            categoryHtml = $(".svg-stadium").find('[data-category="' + category + '"]').html();
            var sectionName = $(this).parent('g').find('text').text();
            sectionName = sectionName.replace(/\s+/g, '-').toLowerCase();
        
            var gTag ='<g data-section="'+category+'_'+sectionName+'">'+$(this).parent('g').html()+'</g>';
            
            $(".svg-stadium").find('[data-category="' + category + '"]').html(categoryHtml+gTag);
            
            $(this).addClass("red");
            $(this).css('fill','red');
            
        }
        else if(category == "stand"){
            $(this).removeClass('grey');
            $(this).removeAttr('style');
            $(this).parent('g').find('text').addClass('stand-label');
            var fieldHtml = $(".field").html();
            if(fieldHtml != '' && typeof(fieldHtml) != "undefined"){
                var standName = $(this).parent('g').find('text').text();
                standName = standName.replace(/\s+/g, '-').toLowerCase();
                var standTag = '<g data-stand="'+standName+'">'+ $(this).parent('g').html()+'</g>';
                $(".field").html(fieldHtml + standTag);
            }else{
                Swal.fire("Please add field block.");
            }
        }else if(category == "tier"){
            $(this).removeClass('grey');
            $(this).removeAttr('style');
            $(this).parent('g').find('text').addClass('tier-label');
            var fieldHtml = $(".field").html();
            if(fieldHtml != '' && typeof(fieldHtml) != "undefined"){
                var tierName = $(this).parent('g').find('text').text();
                tierName = tierName.replace(/\s+/g, '-').toLowerCase();
                var tierTag = '<g data-tier="'+tierName+'">'+ $(this).parent('g').html()+'</g>';
                $(".field").html(fieldHtml + tierTag);
            }else{
                Swal.fire("Please add field block.");
            }
        }else if(category=="gray_fields"){
            $(this).removeClass('grey');
            $(this).removeAttr('style');
            var grey_fields = $(".grey_fields").html();
            if(grey_fields != '' && typeof(grey_fields) != "undefined"){
                var empty_blocks = $(this).parent('g').html();
                var grey_fields = grey_fields + empty_blocks;
                $(".grey_fields").html(grey_fields);
            }else{
                var svgHtml = $(".svg-stadium").html();
                var fieldHtml = '<g class="grey_fields">'+$(this).parent('g').html()+'</g>';
                $(".svg-stadium").html(svgHtml + fieldHtml);
            }
            $(this).addClass("red");
            $(this).css('fill','red');
            
        }else{
            $(this).removeClass('grey');
            $(this).removeAttr('style');
            var svgHtml = $(".svg-stadium").html();
            var fieldHtml = '<g class="field">'+$(this).parent('g').html()+'</g>';
            $(".svg-stadium").html(svgHtml + fieldHtml);
            $(this).addClass("red");
            $(this).css('fill','red');
            
        }
    });
    
});

$(document).on('click','.export',function(){
    
    //append style element
    if($(".svg-stadium").find('style').length <= 0){
      var styleTag = $(".svg").find('style').html();
      if(typeof(styleTag) != "undefined"){
        var styleHtml = '<style>'+styleTag+'</style>';
      }
      $(".svg-stadium").prepend(styleHtml);
    }
      
      const svgElement = document.getElementById("converted_svg").innerHTML;
      const svgBlob = new Blob([svgElement], { type: "image/svg+xml;charset=utf-8" });
      const svgURL = URL.createObjectURL(svgBlob);
      const downloadLink = document.createElement("a");
      downloadLink.href = svgURL;
      
      var svgName = $("#svg-name").val();
      console.log(svgName);
      if(svgName == '' || typeof(svgName) == "undefined"){
          svgName="my-svg-file";
      }
      downloadLink.download = svgName+".svg";
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);
});

$(document).on('click','.change_section_name',function(){
    $(".change_section_div").toggle();
});

$(document).on('change','#section_name',function(){
    var sectionName = $(this).val();
    if(sectionName != '' ||  typeof(sectionName) != "undefined"){
        $("#section-name").val(sectionName);
    }
})

$(document).on('click','.update_section_name',function(){
    var sectionName = $("#section-name").val();
    if(sectionName =='' || typeof(sectionName) == "undefined" ){
        Swal.fire("Error","Please Add Section");
        return;
    }
    sectionName = $.trim(sectionName);
    sectionName = sectionName.replace(/\s+/g, '-').toLowerCase(); 
    
    $('.grey').each(function(i, obj) {
        
        var category = $(this).parent('g').attr('data-section');
        category = category.split("_");
        
        $(this).parent('g').find('text').text($("#section-name").val());
        $(this).parent('g').attr('data-section',"");
        $(this).parent('g').attr('data-section',category[0]+'_'+sectionName);
        $(this).removeClass('grey');
        $(this).removeAttr('style');
    });
    
});

$(document).on('click','.remove_block',function(){
    var length = $(".converted_svg .grey").length;
    if(length > 0){
        $('.converted_svg .grey').each(function(i, obj) {
            $(this).parent('g').remove();
        });
    }else{
        Swal.fire("No final map block selected.");
    }
})

$(document).on('submit','form',function(e){
                e.preventDefault();
               
                if($(".editor").val()==1){
                    Swal.fire("Please turn off the editor");
                    return false;
                }
                //check map is ready or not
                var html = $(".converted_svg").html();
                if(html == '' ||  typeof(html) == "undefined" ){
                    Swal.fire("Please Create Map.");
                    return;
                }
                
                // if($(".svg-stadium").find('style').length <= 0){
                //     var styleTag = $(".svg").find('style').html();
                //     var styleHtml = '<style>'+styleTag+'</style>';
                //     $(".svg-stadium").prepend(styleHtml);
                // }
                
                
                var html =$(".converted_svg").html();
                $("#svg-data").val(html);
            
                var me = $(this);
                var fd=new FormData($(this)[0]);
                
                $.ajax({
                    url: me.attr('action'),
                    type: me.attr('method'),
                    data: fd,
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    success: function(response){
                        Swal.fire("Done",response.msg,"success");
                        $('.modal').modal('hide');
                        $("#roles_table").DataTable().ajax.reload();
                    },
                    error:function(response){
                        $.each(response.responseJSON.errors, function(key, value) {
                        var element = $('#' + key);
                        element.closest('div.form-group')
                        .removeClass('.has-error')
                        .addClass(value.length > 0 ? 'has-error':'has-success' )
                        .find('.text-danger')
                        .remove();
                        element.after('<p class="text text-danger">'+value+'</p>');
                        });
                    }
                });
            })

$(document).on('change','.editor',function(){
    if($(this).val() == "1"){
        
        var map = $(".svg").html();
        $(".svg").html('');
        $(".svg").html('<div id="original_svg">'+map+'</div>');
        $('#original_svg').summernote();
        
        var converted_map = $(".converted_svg").html();
        $(".converted_svg").html('');
        $(".converted_svg").html('<div id="converted_edited_svg">'+converted_map+'</div>');
        $("#converted_edited_svg").summernote();
        
    }else{
        var html = $("#original_svg").summernote('code');
        $(".svg").html('');
        $(".svg").html(html);
        
        var converted_html = $("#converted_edited_svg").summernote('code');
        $(".converted_svg").html('');
        $(".converted_svg").html(converted_html);
        
        
    }
})
</script>

@endpush