@extends('hr_main')
@section('title', '| ' . $data['pageTitle'])
@section('content')
<link rel="stylesheet" type="text/css" href="{{ asset('plugin/summernote/mirror.min.css') }}">
<style type="text/css">
    .panel {
        margin-bottom: 80px;
    }
    .panel .panel-heading {
        border-bottom: 1px solid #ddd;
        padding-bottom: 9px
    }
    .panel.panel-border {
        border: 0;
    }
    #ambalaLetterShortCode {
        padding: 10px 10px 0px 5px;
        border: 1px solid rgba(0,0,0,.2);
        border-bottom: 0px;
        background-color: #20b2aa2e;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }
    #ambalaLetterShortCode button{
        margin-bottom: 10px;
        margin-left: 5px;
        padding: 2px 5px;
        border-radius: 5px;
        background: #20B2AA;
        color: #fff;
        font-size: 12px;
    }
    .fa {
        vertical-align: middle;
    }
    .note-editor .note-toolbar{
        padding: 5px 0 0px 10px;
        background: #20b2aa1a !important;
    }
    .note-editor {
        padding: 0px;
        margin: 0px;
        padding-top: 0px !important;
    }
    .panel-default>.panel-heading {
        color: #333;
        background-color: #f5f5f5;
        border-color: #ddd;
    }
    .table.table-bordered > thead > tr > td, .table.table-bordered > tbody > tr > td, .table.table-bordered > tfood > tr > td, .table.table-bordered > thead > tr > th, .table.table-bordered > tbody > tr > th, .table.table-bordered > tfood > tr > th {
        border-color: black;
        background: transparent;
        background-color: white;
        color: black;
    }
    .table > tbody > tr > td, .table > tfoot > tr > td, .table > tbody > tr > th, .table > tfoot > tr > th {
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        background: transparent;
        background-color: white;
        color: black;
    }
    pre {
        padding: 0px;
        margin: 0px;
        background: transparent;
    }
    .note-editable p, .note-editable div {
        color: black;
    }
    .note-editable ul li {
        color: black;
    }
    .note-editable h1, h2, h3, h4, h5, h6 {
        color: black;
    }
    table{
        width: 100%;
    }
    footer.main-footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    footer.main-footer .footer-inner {
        display: flex;
        justify-content: center;
    }
    footer.main-footer .footer-text p {
        margin: 0;
    }
    footer.main-footer .go-up a {
        padding: 0px 5px;
    }
</style> 

<div class="row add-data-form">
    <div class="col-md-12">
        <div class="col-md-1"></div>
        <div class="col-md-10 fullbody">
            <div class="viewTitle" style="border-bottom: 1px solid white; padding-right: 8px;">
                <a href="{!! $data['listBtnUrl'] !!}" class="btn btn-info pull-right addViewBtn" style="margin-bottom: 0; "><i
                        class="glyphicon glyphicon-th-list viewIcon">
                    </i>{!! $data['listBtnLabel'] !!}
                </a>
            </div>

            <div class="panel panel-default panel-border">
                <div class="panel-body">

                    <div class="row col-md-12">
                        <div class="panel-heading">
                            <div class="panel-title">{{ $data['pageTitle'] }}</div>
                        </div>
                    </div>

                    {!! Form::open(['url' => '', 'id' => 'formId', 'class' => 'form', 'method' => 'post']) !!}

                        <br><br><br><br>
                        <input type='hidden' value='' id='org_letter_type_previous_value' />
                        <input type="hidden" id="effect_date_previous_value" value="">
                        <input type='hidden' value='' name="org_letter_type_attribute_update_time" id='org_letter_type_attribute_updated_at' />
                        <input type='hidden' value='' name="org_letter_type_attribute_id" id='org_letter_type_attribute_id' />
                        <div class="row form-group">
                            <div class="col-sm-12" style="padding: 0;">
                                <div class="col-sm-2">
                                    {!! Form::label('Letter Type', 'Letter Type', ['class' => 'control-label']) !!}
                                    <span style="color: red">*</span>
                                </div>

                                <div class="col-sm-5">
                                    {!! Form::select('org_letter_type', ['' => 'Select Letter Type'] + $data['org_letter_types'], '',
                                        ['class' => 'form-control', 'id' => 'org_letter_type']
                                    )!!}
                                    <p id='org_letter_type_msg' style="max-height:3px; color:#FF0000 !important;"></p>
                                </div>
                            </div>     
                        </div>

                        <div class="row form-group">
                            <div class="col-sm-12" style="padding: 0;">
                                <div class="col-sm-2">
                                    {!! Form::label('Applicable For', 'Applicable For', ['class' => 'control-label']) !!}
                                    <span style="color: red">*</span>
                                </div>

                                <div class="col-sm-5">
                                    {!! Form::select('applicable_for', $data['applicable_for'], '',
                                        ['class' => 'form-control', 'id' => 'applicable_for']
                                    )!!}
                                    <p id='applicable_for_msg' style="max-height:3px; color:#FF0000 !important;"></p>
                                </div>
                            </div>     
                        </div>

                        <div class="row form-group">
                            <div class="col-sm-12" style="padding: 0;">
                                <div class="col-sm-2">
                                    {!! Form::label('Project', 'Project', ['class' => 'control-label']) !!}
                                    <span style="color: red">*</span>
                                </div>

                                <div class="col-sm-5">
                                    {!! Form::select('project_ids[]', $data['projects'], '',
                                        ['class' => 'form-control', 'id' => 'project_id', 'multiple' => 'multiple']
                                    )!!}
                                    <p id='project_id_msg' style="max-height:3px; color:#FF0000 !important;"></p>
                                </div>
                            </div>     
                        </div>

                        <div class="row form-group">
                            <div class="col-sm-12" style="padding: 0;">
                                <div class="col-sm-2">
                                    {!! Form::label('recruitment_type', 'Recruitment Type', ['class' => 'control-label']) !!}
                                    <span style="color: red">*</span>
                                </div>

                                <div class="col-sm-5">
                                    {!! Form::select('recruitment_type_ids[]', $data['recruitment_types'], '',
                                        ['class' => 'form-control', 'id' => 'recruitment_type_id', 'multiple' => 'multiple']
                                    )!!}
                                    <p id='recruitment_type_id_msg' style="max-height:3px; color:#FF0000 !important;"></p>
                                </div>
                            </div>     
                        </div>

                        <div class="row form-group">
                            <div class="col-sm-12" style="padding: 0;">
                                <div class="col-sm-2">
                                    {!! Form::label('Position', 'Position', ['class' => 'control-label']) !!}
                                    <span style="color: red">*</span>
                                </div>

                                <div class="col-sm-5">
                                    {!! Form::select('position_ids[]', $data['positions'], '',
                                        ['class' => 'form-control', 'id' => 'position_id', 'multiple' => 'multiple']
                                    )!!}
                                    <p id='position_id_msg' style="max-height:3px; color:#FF0000 !important;"></p>
                                </div>
                            </div>     
                        </div>

                        <div class="row form-group">
                            <div class="col-sm-12" style="padding: 0;">
                                <div class="col-sm-2">
                                    {!! Form::label('Effect Date', 'Effect Date', ['class' => 'control-label']) !!}
                                    <span style="color: red">*</span>
                                </div>

                                <div class="col-sm-5">
                                    {!! Form::text('effect_date', null, ['class' => 'form-control datepicker', 'id' => 'effect_date',
                                        'placeholder' => 'Choose Effect Date', 'style'=>'cursor:pointer']) !!}
                                    <p id='effect_date_msg' style="max-height:3px; color:#FF0000 !important;"></p>
                                </div>
                            </div>
                        </div>

                        <br>
                        <div class="row form-group">
                            <div class="col-sm-12" style="padding: 0;">
                                <div class="col-sm-2">
                                </div>
                                <div class="col-sm-10">
                                    <a class="btn btn-white pull-right" href="javascript:void(0);" name="print" onclick="_print('#letterDiv')"><i class="fa fa-print" style="padding-right:5px;"></i>Preview</a>
                                </div>
                            </div>
                        </div>

                        <div hidden>
                            @include('hr.orgLetterTemplate.printViewWithoutBackgroundImage')
                        </div>

                        <div class="row form-group">
                            <div class="col-sm-12" style="padding: 0;">
                                <div class="col-sm-2">
                                    {!! Form::label('Letter Format', 'Letter Format', ['class' => 'control-label']) !!}
                                    <span style="color: red">*</span>
                                </div>

                                <div class="col-sm-10">
                                    <div id="ambalaLetterShortCode"></div>
                                    <textarea name="letter_format" class="summernote" id="letter_format"></textarea>
                                    <p id='letter_format_msg' style="max-height:3px; color:#FF0000 !important;"></p>
                                </div>
                            </div>
                        </div>

                        <div class="row form-group">
                            <div class="col-sm-12">
                                <a style="margin-left: 10px" href="{!! $data['closeBtnUrl'] !!}" class="btn btn-danger closeBtn pull-right">Close</a>
                                <input type="button" class="btn btn-success closeBtn pull-right" id="add" value="Save" />
                            </div>
                        </div>

                    {!! Form::close() !!}

                </div>
            </div>
            <div class="footerTitle" style="border-top:1px solid white"></div>
        </div>
        <div class="col-md-1"></div>

    </div>
</div>

<script type="text/javascript" src="{{asset('js/printThis.js')}}" defer></script>
<script type="text/javascript" src="{{ asset('plugin/summernote/mirror.min.js') }}"></script>

<script type="text/javascript">

    $(document).ready(function() {
        $("#project_id").select2({
            placeholder: 'Choose Project',
            allowClear: true
        }).on('select2-open', function() {
            // Adding Custom Scrollbar
            $(this).data('select2').results.addClass('overflow-hidden').perfectScrollbar();
        });

        $("#recruitment_type_id").select2({
            placeholder: 'Choose Recruitment Type',
            allowClear: true
        }).on('select2-open', function() {
            // Adding Custom Scrollbar
            $(this).data('select2').results.addClass('overflow-hidden').perfectScrollbar();
        });

        $("#position_id").select2({
            placeholder: 'Choose Position',
            allowClear: true
        }).on('select2-open', function() {
            // Adding Custom Scrollbar
            $(this).data('select2').results.addClass('overflow-hidden').perfectScrollbar();
        });
        var marginValue = 0;
        function generateSummerNote() {
            $('.summernote').summernote({
                height: 400,
                placeholder: 'Letter Format Write Console',
                // fontNames: ['Times New Roman'],
                fontNames: ['Arimo','Arial', 'Arial Black','Georgia', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana','Comic Sans MS', 'Courier New'],
                addDefaultFonts: false,
                tabsize: 5,
                spellCheck: true,
                toolbar: [ ["history", ["undo", "redo"]], ["style", ["style"]], ["font", ["bold", "italic", "underline", "fontname", "strikethrough", "superscript", "subscript", "clear"]],['fontsize', ['fontsize']], ["color", ["forecolor", "backcolor", "color"]], ["paragraph", ["ul", "ol", "paragraph", "height"]], ["table", ["table"]], ['myTable', ['alignLeftTable', 'alignCenterTable', 'alignRightTable']], /*["insert",["link", "picture", "video"]],*/ /*["view", ["codeview"]],*/ ['margin', ['increaseMargin', 'decreaseMargin']]  ],
                buttons: {
                    alignLeftTable: function (context) {
                        return alignTable(context, 'left');
                    },
                    alignCenterTable: function (context) {
                        return alignTable(context, 'center');
                    },
                    alignRightTable: function (context) {
                        return alignTable(context, 'right');
                    },
                    increaseMargin: function(context) {
                        return $.summernote.ui.button({
                            contents: '<i class="fa fa-plus"></i>',
                            tooltip: 'Increase margin by 5px, (Current: ' + marginValue + 'px)',
                            click: function () {
                                marginValue += 5;  // Increase margin by 5px
                                $('.note-editable').children().css({
                                    'margin-left': marginValue + 'px',
                                    'margin-right': marginValue + 'px'
                                });
                                $('.note-btn:has(.fa-plus)').attr('data-original-title', 'Increase margin by 5px (Current: ' + marginValue + 'px)').tooltip('show');
                                $('.note-btn:has(.fa-minus)').attr('data-original-title', 'Decrease margin by 5px (Current: ' + marginValue + 'px)');
                            }
                        }).render();
                    },
                    decreaseMargin: function(context) {
                        return $.summernote.ui.button({
                            contents: '<i class="fa fa-minus"></i>',
                            tooltip: 'Decrease margin by 5px (Current: ' + marginValue + 'px)',
                            click: function () {
                                if (marginValue > 0) {
                                    marginValue = Math.max(0, marginValue - 5);
                                    $('.note-editable').children().css({
                                        'margin-left': marginValue + 'px',
                                        'margin-right': marginValue + 'px'
                                    });
                                    $('.note-btn:has(.fa-plus)').attr('data-original-title', 'Increase margin by 5px (Current: ' + marginValue + 'px)');
                                    $('.note-btn:has(.fa-minus)').attr('data-original-title', 'Decrease margin by 5px (Current: ' + marginValue + 'px)').tooltip('show');
                                }
                            }
                        }).render();
                    }
                },
                fontSizes: ['8', '9', '10', '11', '12', '13', '14', '16', '18', '24', '36'],
                callbacks: {
                    onInit: function() {
                        // const $editable = $('.note-editable');
                        // $editable.css({
                        //     'font-size': '13px',
                        //     'font-family': 'Times New Roman'
                        // });
                        // setTimeout(function () {
                        //     $('.note-current-fontname').text('Times New Roman').css('font-family', 'Times New Roman');
                        //     $editable.focus();
                        // }, 100);
                    },
                    onChange: function(contents, $editable) {
                        applyFontToMarksInEditor();
                    },
                    onKeydown: function(e) {
                        const selection = window.getSelection();
                        const key = e.key;
                        if (key === "ArrowLeft" || key === "ArrowRight") {
                            return;
                        }

                        if (selection.rangeCount > 0) {
                            const range = selection.getRangeAt(0);
                            let currentNode = range.commonAncestorContainer;

                            // Move up from text node if needed
                            if (currentNode.nodeType === Node.TEXT_NODE) {
                                currentNode = currentNode.parentNode;
                            }

                            // Check if inside a <mark class="attributeClass">, even nested
                            const markNode = currentNode.closest?.('mark.attributeClass');

                            if (markNode) {
                                e.preventDefault();

                                const previousNode = markNode.previousSibling;
                                const nextNode = markNode.nextSibling;

                                if (key === "Backspace") {
                                    if (nextNode && nextNode.nodeType === Node.TEXT_NODE && nextNode.nodeValue === '\u00A0') {
                                        nextNode.remove();  // Remove the non-breaking space
                                    } else {
                                        markNode.remove();
                                    }
                                } else {
                                    markNode.remove();
                                }
                            } else if (currentNode.tagName === 'TEXTAREA' || currentNode.tagName === 'DIV') {
                                if (key === "Backspace" && currentNode.parentElement.tagName === 'MARK') {
                                    e.preventDefault();
                                    currentNode.parentElement.remove(); // Remove the entire <mark> tag
                                }
                            }
                        }
                    },
                    onKeyup: function() {
                        const $editable = $('.note-editable');
                        // If empty or only <br>, restore a default <p>
                        if (
                            $editable.html().trim() === '' ||
                            $editable.html().trim() === '<br>' ||
                            $editable.children().length === 0
                        ) {
                            $editable.html('<p><br></p>');
                            const range = document.createRange();
                            const sel = window.getSelection();
                            const p = $editable.find('p')[0];

                            // Move cursor inside the new <p>
                            range.setStart(p, 0);
                            range.collapse(true);
                            sel.removeAllRanges();
                            sel.addRange(range);
                        }
                    }
                }
            });
        }

        generateSummerNote();

        $(document).on('click', '.attributeClass', function(event) {
            text = $(document).find('.summernote').val();
        });

        $(document).on('click', '.removeAttributeClass', function() {
            getIdValue = $(this).attr('id');
            if(getIdValue != '') {
                var confirmValue = confirm("Are you sure want to remove this attribute?");
                if(confirmValue == true) {
                    $('.'+getIdValue).remove();
                }
            }
        });

        function _appendShortCode(attribute_code, attribute_name) {
            var $summernote = $(document).find('.summernote');
            $summernote.summernote('pasteHTML', 
                "&nbsp;<mark draggable='false' class='"+attribute_code+" attributeClass' style='cursor: not-allowed;'>"
                + attribute_name + 
                "</mark>&nbsp;"
            );
            $summernote.summernote('focus');
        }

        $('#org_letter_type').change(function() {
            const letter_type = $(this).val();
            const effect_date = $('#effect_date').val();
            const summernoteValue = $('.summernote').val();
            if (summernoteValue.trim() !== '') {
                const confirmChange = confirm(
                    'Changing the letter type or effect date will clear the editor and you may lose content. Do you want to continue?'
                );
                if (confirmChange) {
                    $('.summernote').summernote('code', '');
                    $('.summernote').summernote('destroy');
                    generateSummerNote();

                    $('#org_letter_type_previous_value').val(letter_type);
                    $('#effect_date_previous_value').val(effect_date);
                } else {
                    // Restore previous values
                    $('#org_letter_type').val($('#org_letter_type_previous_value').val());
                    $('#effect_date').val($('#effect_date_previous_value').val());
                    return;
                }
            }
            if (letter_type && effect_date) {
                __generateLetterTypeWiseAttribute(letter_type, effect_date);
            } else {
                $('.shortCodeButton').remove();
            }
        });

        let isHandlingChange = false;
        $('#effect_date').off('change').on('change', function () {
            if (isHandlingChange) return;
            isHandlingChange = true;

            // Use setTimeout to delay the logic and allow rapid events to settle
            setTimeout(() => {
                const letter_type = $('#org_letter_type').val();
                const effect_date = $(this).val();
                const summernoteValue = $('.summernote').val();
                if (summernoteValue.trim() !== '') {
                    const confirmChange = confirm(
                        'Changing the letter type or effect date will clear the editor and you may lose content. Do you want to continue?'
                    );
                    if (confirmChange) {
                        $('.summernote').summernote('code', '');
                        $('.summernote').summernote('destroy');
                        generateSummerNote();
                        $('#org_letter_type_previous_value').val(letter_type);
                        $('#effect_date_previous_value').val(effect_date);
                    } else{
                        $('#org_letter_type').val($('#org_letter_type_previous_value').val());
                        $('#effect_date').val($('#effect_date_previous_value').val());
                        isHandlingChange = false;
                        return;
                    }
                }

                if (letter_type && effect_date) {
                    __generateLetterTypeWiseAttribute(letter_type, effect_date);
                } else {
                    toastr.error("Missing required values: Letter Type and Effect Date");
                    $('.shortCodeButton').remove();
                }
                isHandlingChange = false;
            }, 100);
        });


        function __generateLetterTypeWiseAttribute(letter_type, effect_date) {
            $('.shortCodeButton').remove();
            $.ajax({
                url: '{{ route("getLetterTypeAndDateWiseAttribute") }}',
                type: 'POST',
                dataType: 'json',
                data: {
                    "org_letter_type": letter_type,
                    "effect_date": effect_date,
                    "applicable_for": $('#applicable_for').val(),
                    "project_ids": $('#project_id').val(),
                    "recruitment_type_ids": $('#recruitment_type_id').val(),
                    "position_ids": $('#position_id').val(),
                    "_token": $('meta[name="_token"]').attr('content')
                },
            })
            .done(function(__response) {
                if(__response.status == true) {
                    // Set the attributes configure based on letter type
                    $('#ambalaLetterShortCode').html('');
                    $(__response.data).each(function(index, value) {
                        var shortCodeButton = $('<button type="button" class="btn shortCodeButton"><i class="fa fa-plus" style="padding-right: 3px;"></i>'+value.attribute_name+'</button>')
                                                    .data('attributeCode', value.attribute_code)
                                                    .data('attributeName', value.attribute_name)
                                                    .click(function () {
                                                        _appendShortCode($(this).data('attributeCode'), $(this).data('attributeName'));
                                                    });

                        $("#ambalaLetterShortCode").append(shortCodeButton);
                    });
                    $('#org_letter_type_attribute_updated_at').val(__response.updated_at);
                    $('#org_letter_type_attribute_id').val(__response.id);
                    $('#org_letter_type_previous_value').val(letter_type);
                    $('#effect_date_previous_value').val(effect_date);
                    $('#effect_date_msg').html('');
                } else if(__response.status == false && __response.message) {
                    $('#effect_date').val('');
                    $('#effect_date_msg').html('<span style="color: red; font-size: 12px;">' + __response.message + '</span>');
                } else {
                    $('#effect_date').val('');
                    $('#effect_date_msg').html('<span style="color: red; font-size: 12px;">Letter type attribute not found</span>');
                }
            })
            .fail(function() {
                alert("Response error");
            });
        }

        function applyFontToMarksInEditor() {
            $('.note-editable').find('mark.attributeClass').each(function () {
                const mark = this;
                let font = '';
                const parent = mark.parentNode;
                const siblings = Array.from(parent.childNodes);
                const index = siblings.indexOf(mark);

                // Helper to extract a usable font
                const getFont = (node) => {
                    if (node.nodeType === Node.TEXT_NODE) {
                        const span = document.createElement('span');
                        span.textContent = node.textContent.trim();
                        parent.insertBefore(span, node);
                        const font = window.getComputedStyle(span).fontFamily;
                        parent.removeChild(span);
                        return font;
                    } else if (node.nodeType === Node.ELEMENT_NODE && node.tagName !== 'BR') {
                        return window.getComputedStyle(node).fontFamily;
                    }
                    return '';
                };

                // Search backward
                for (let i = index - 1; i >= 0; i--) {
                    const siblingFont = getFont(siblings[i]);
                    if (siblingFont && !['inherit', 'initial', 'auto'].includes(siblingFont)) {
                        font = siblingFont;
                        break;
                    }
                }

                // Search forward if not found
                if (!font) {
                    for (let i = index + 1; i < siblings.length; i++) {
                        const siblingFont = getFont(siblings[i]);
                        if (siblingFont && !['inherit', 'initial', 'auto'].includes(siblingFont)) {
                            font = siblingFont;
                            break;
                        }
                    }
                }

                // Fallback to parent
                if (!font) {
                    const parentFont = window.getComputedStyle(parent).fontFamily;
                    if (parentFont && !['inherit', 'initial', 'auto'].includes(parentFont)) {
                        font = parentFont;
                    }
                }

                // Apply font
                if (font) {
                    const firstFont = font.split(',')[0].trim().replace(/^["']|["']$/g, '');
                    mark.style.fontFamily = firstFont;
                }
            });

            $('.note-editable').focus();
        }

    });

    $('#org_letter_type, #applicable_for').change(function(event) {
        id = $(this).attr('id');

        if(id == 'org_letter_type') {
            $('#org_letter_type_msg').text('');
        }

        if(id == 'applicable_for') {
            $('#applicable_for_msg').text('');
        }
    });

    $('#position_id').click(function(event) {
        position_id = $(this).val();

        if(position_id != null) {
            $('#position_id_msg').text('');

            foundAll = false;
            for(i=0; i<position_id.length; i++) {
                if(position_id[i] == 'All') {
                    foundAll = true;
                }
                
                if(foundAll == true && position_id[i] != 'All') {
                    $('#position_id').val('All').trigger('change');
                }
            }
        }
    });

    $('#project_id, #recruitment_type_id, #effect_date').click(function(event) {
        id = $(this).attr('id');

        if(id == 'project_id') {
            $('#project_id_msg').text('');
        }

        if(id == 'recruitment_type_id') {
            $('#recruitment_type_id_msg').text('');
        }

        if(id == 'effect_date') {
            $('#effect_date_msg').text('');
        }
    });

    $('#add').click(function(event) {
        event.preventDefault();
        $("#add").prop('disabled', true);

        var formData = $('#formId').serialize();
        $.ajax({
            url: '../orgLetterFormatConfig/store',
            type: 'POST',
            dataType: 'json',
            data: formData,
        })
        .done(function(__response) {
            if(__response.errors) {
                if(__response.errors.org_letter_type) $('#org_letter_type_msg').text(__response.errors.org_letter_type[0]);
                if(__response.errors.applicable_for) $('#applicable_for_msg').text(__response.errors.applicable_for[0]);
                if(__response.errors.project_ids) $('#project_id_msg').text(__response.errors.project_ids[0]);
                if(__response.errors.recruitment_type_ids) $('#recruitment_type_id_msg').text(__response.errors.recruitment_type_ids[0]);
                if(__response.errors.position_ids) $('#position_id_msg').text(__response.errors.position_ids[0]);
                if(__response.errors.effect_date) $('#effect_date_msg').text(__response.errors.effect_date[0]);
                if(__response.errors.letter_format) $('#letter_format_msg').text(__response.errors.letter_format[0]);
                $("#add").prop('disabled', false);
            } 
            else if (__response.status == true) {
                toastr.success(__response.message);
                setTimeout(function() {
                    window.location.href = "{{ route('orgLetterFormatConfigList') }}";
                }, 1000);
            }
            else if (__response.status == false) {
                $("#add").prop('disabled', false);
                if(__response.message) toastr.error(__response.message);
            }
            else {
                $("#add").prop('disabled', false);
                alert("something went wrong");
            }
        })
        .fail(function() {
            $("#add").prop('disabled', false);
            alert("Response error");
        });

    });

    function _print(_id) {
        var content = $('.summernote').summernote('code');
        $('#letterDiv').html(content).show();

        $(_id).printThis({
            importCSS: true,
            pageTitle: "", 
            header: null,
            footer: null,
            base: false,
        });
    }

    function alignTable(context, align) {
        const ui = $.summernote.ui;
        const icons = {
            left: 'fa-align-left',
            center: 'fa-align-center',
            right: 'fa-align-right'
        };
        const tooltips = {
            left: 'Align Table Left',
            center: 'Align Table Center',
            right: 'Align Table Right'
        };

        return ui.button({
            contents: `<i class="fa ${icons[align]}"></i>`,
            tooltip: tooltips[align],
            click: function () {
                const selection = window.getSelection();
                if (selection.rangeCount > 0) {
                    const node = $(selection.getRangeAt(0).commonAncestorContainer).closest('table');
                    if (node.length) {
                        node.removeClass('table-left table-center table-right');
                        node.addClass(`table-${align}`);
                    } else {
                        alert('Please place the cursor inside a table.');
                    }
                }
            }
        }).render();
    }

    $(document).ready(function () {
        let currentTable = null;
        // Listener for when a table inside .note-editable is clicked
        $(document).on('click', '.note-editable table', function () {
            currentTable = $(this);
            if (!currentTable.data('styled')) {
                setTableMinHeight(currentTable);
                currentTable.data('styled', true);
            }
        });
        // Listener for when the content in Summernote changes (e.g., rows added/removed)
        $('#letter_format').on('summernote.change', function () {
            if (currentTable) {
                setTableMinHeight(currentTable);
                currentTable.data('styled', true); 
            } else {
                $('.note-editable table').each(function () {
                    const $table = $(this);
                    if (!$table.data('styled')) {
                        setTableMinHeight($table);
                        $table.data('styled', true);
                    }
                });
            }

        });
        // Listener for when the row is added via the "Add row above" or "Add row below" button in the popover
        $(document).on('click', '.note-icon-row-above, .note-icon-row-below', function () {
            if (currentTable) {
                setTableMinHeight(currentTable);
            }
        });
        // Listener for when the row is deleted via the "Delete row" button in the popover
        $(document).on('click', '.note-icon-row-remove', function () {
            if (currentTable) {
                setTableMinHeight(currentTable);
            }
        });
        // Function to set the minimum height of the table based on row count
        function setTableMinHeight($table) {
            const rowCount = $table.find('tr').length;
            const baseHeight = 15;
            let minHeight = baseHeight * rowCount;
            $table.find('tr').each(function() {
                $(this).find('td').each(function() {
                    if ($(this).text().trim() === "") {
                        $(this).html("&nbsp;");
                        return false;
                    }
                });
            });
            $table.css('min-height', minHeight);
        }
    });
</script>
@endsection