<?php

use \yii\helpers\Html;
use \yii\helpers\ArrayHelper;
use \yii\helpers\Url;
use yii\widgets\ActiveForm;
use kartik\select2\Select2;
use kartik\sortable\Sortable;
use app\components\Utilities;

$this->registerCssFile(\app\components\Utilities::getDataTableCssFileLink());
$this->registerCssFile('@web/css/query-builder.default.css');
$this->registerJsFile('@web/js/query-builder.standalone.js');

$this->title = $update ? 'Update view ' . $model->name : 'View Builder';
$is_default_view = isset($_GET['default_view']) && $_GET['default_view'] == 1 ? true : false;
$encoded_is_default_view = json_encode(isset($_GET['default_view']) && $_GET['default_view'] == 1);
$mapped_columns = ArrayHelper::map($columns, 'name', 'label');
$base_url = json_encode(Url::base(true));
$form_id = json_encode((string)$model->formId);
$is_update = json_encode(Yii::$app->controller->action->id == 'update-file-domain-view');

$fields_selection_count = Utilities::getViewFieldsSelectionCount();
$charts_count = Utilities::getChartsCount();

$script =<<< JS

var baseUrl = $base_url;
var fieldsSelectionCount = $fields_selection_count;
var chartsCount = $charts_count;

$(document).ready(function(){
    $('#filters_data_source').change(function(){
        var value = $('input[name="Filters[data_source]"]:checked').val();
        if(value == 'SPECIFIC_CAMPAIGN'){
            $('#filters_specific_campaign_container').slideDown(250);
        }
        else{
            $('#filters_specific_campaign_container').slideUp(250);
        }
    });

    $('#meta-data-filters-checkbox').change(function(){
        $('#meta-data-filters').slideToggle(250);
    });

    $('#file-meta-data-filters-checkbox').change(function(){
        $('#file-meta-data-filters').slideToggle(250);
    });

    $('#query-builder').queryBuilder({
        filters: $query_builder_filters,
        operators: ['equal', 'not_equal', 'less', 'less_or_equal', 'greater', 'greater_or_equal', 'between', 'not_between', 'contains', 'not_contains', 'begins_with', 'not_begins_with', 'ends_with', 'not_ends_with', 'is_null', 'is_not_null']
    });

    $('#columns').change(function(){
        var selectedItems = $(this).val();

        if(selectedItems.length > 0){
            $('#preview-btn').prop('disabled', false);
            if(selectedItems.length > fieldsSelectionCount){
                alert('You mustn\'t exceed ' + fieldsSelectionCount + ' columns in selections');
                var newSelectedItems = selectedItems.slice(0, fieldsSelectionCount);
                $('#columns').val(newSelectedItems);
                $('#columns').trigger('change');
                return;
            }
        }
        else{
            $('#preview-btn').prop('disabled', true);
        }
        
        var items = $('#columns_order').find('li');
        var deletedItems = [];
        for(var i = 0; i < items.length; i++){
            var itemId = $(items[i]).prop('id');
            if(! selectedItems.includes(itemId.replace('_column', ''))){
                deletedItems.push(itemId);
            }
        }

        for(var i = 0; i < selectedItems.length; i++){
            var labelToFind = 'option[value="' + selectedItems[i] + '"]';
            
            if($('#columns_order').find('li#' + selectedItems[i] + '_column').length == 0){
                $('#columns_order').append(`<li draggable="true" class="columns_order_item" id="` + selectedItems[i] + `_column" style="background-color: white;">
                    <span class="handle">
                        <i class="glyphicon glyphicon-move"></i>
                    </span>
                    <span style="width: 20%; display: inline-block;">` + $(this).find(labelToFind).html() + `</span>
                </li>    
            `);
            }
        }

        for(var i = 0; i < deletedItems.length; i++){
            $('#columns_order').find('li#' + deletedItems[i]).remove();
        }
    });

    $('#order_data_by_columns').change(function(){
        var selectedItems = $(this).val();
        var items = $('#columns_sorting').find('li');
        var deletedItems = [];
        for(var i = 0; i < items.length; i++){
            var itemId = $(items[i]).prop('id');
            if(! selectedItems.includes(itemId.replace('_row', ''))){
                deletedItems.push(itemId);
            }
        }

        for(var i = 0; i < selectedItems.length; i++){
            var labelToFind = 'option[value="' + selectedItems[i] + '"]';

            if($('#columns_sorting').find('li#' + selectedItems[i] + '_row').length == 0){
                $('#columns_sorting').append(`<li draggable="true" id="` + selectedItems[i] + `_row" class="columns_sorting_item" style="background-color: white;">
                        <span class="handle">
                            <i class="glyphicon glyphicon-move"></i>
                        </span>
                        <span style="width: 25%; display: inline-block;">` + $(this).find(labelToFind).html() + `</span>
                        ASC <input checked type="radio" name="` + selectedItems[i] + `_sort" value="asc">
                        DESC <input type="radio" name="` + selectedItems[i] + `_sort" value="desc">
                    </li>
                `);
            }
        }

        for(var i = 0; i < deletedItems.length; i++){
            $('#columns_sorting').find('li#' + deletedItems[i]).remove();
        }
    });

    $('#preview-btn').click(function(){
        $('#loader').show();
        var dataFields = getDataFromFields();
        var columnsOrderItemsArray = dataFields['columnsOrderItemsArray'];
        var columnsOrderSortingItemsArray = dataFields['columnsOrderSortingItemsArray'];
        var filters = dataFields['filters'];

        $.ajax({
            url: baseUrl + '/views/preview-data',
            method: 'POST',
            data: {
                formId: $form_id,
                columnsOrderItems: columnsOrderItemsArray,
                columnsOrderSortingItems: columnsOrderSortingItemsArray,
                filters: JSON.stringify(filters),
            },
            success: function(response){
                var data = JSON.parse(response);
                if(data['status']){
                    $('#data-sample').html('');
                    $('#data-sample').append('<div class="alert alert-warning"><b>Attention: </b>This data is just samples, full data can be previewed after saving the view</div>');
                    $('#data-sample').append("<table class='cell-border stripe' id='data-sample-table'><thead></thead><tbody></tbody></table>");

                    var columnsHeader = '<tr>';
                    for(var  i = 0; i < data['columns'].length; i++){
                        columnsHeader += '<td style="white-space: nowrap;">' + data['columns'][i][0].toUpperCase() + data['columns'][i].slice(1) + '</td>';
                    }
                    columnsHeader += '</tr>'
                    $('#data-sample-table thead').append(columnsHeader);

                    if($('#data-sample:hidden')){
                        $('#data-sample').slideDown(250);
                    }

                    $('#data-sample-table').DataTable(
                        {
                            order: data['order'],
                            data: data['data']
                        }
                    );
                    $('html, body').animate({
                        scrollTop: $('#data-sample').offset().top - 50
                    }, 1000);
                }
                $('#loader').hide();
            }
        });
    });

    $('body').on('beforeSubmit', '#view-builder', function(){
        $('#loader').show();
        var viewName = $('input[name="name"]').val();
        if(viewName == '' || viewName == ' '){
            $('#loader').hide();
            alert('You have to give a name to the view');
            return false;
        }

        var dataFields = getDataFromFields();
        var columnsOrderItemsArray = dataFields['columnsOrderItemsArray'];
        var columnsOrderSortingItemsArray = dataFields['columnsOrderSortingItemsArray'];
        var filters = dataFields['filters'];

        if(columnsOrderItemsArray.length == 0){
            $('#loader').hide();
            alert('You have to select one column at least!');
            return false;
        }

        if(columnsOrderItemsArray.length > fieldsSelectionCount){
            $('#loader').hide();
            alert('You mustn\'t exceed ' + fieldsSelectionCount + ' columns in selections');
            return false;
        }

        // Meta data filters
        var metaDataFiltersEnabled = $('#meta-data-filters-checkbox').is(':checked');
        var metaDataFilters = {};
        if(metaDataFiltersEnabled){
            metaDataFilters['submittedBy']      = $('#filters_submitted_by').val();
            metaDataFilters['lastUpdatedBy']    = $('#filters_last_updated_by').val();
            metaDataFilters['completedBy']      = $('#filters_completed_by').val();
            metaDataFilters['submittedAt']      = $('#filters_submitted_at').val();
            metaDataFilters['lastUpdatedAt']    = $('#filters_last_updated_at').val();
            metaDataFilters['completedAt']      = $('#filters_completed_at').val();

            var dataSourceOption = $('input[name="Filters[data_source]"]:checked').val();
            metaDataFilters['dataSourceOption'] = dataSourceOption;
            if(typeof dataSourceOption != 'undefiend'){
                if(dataSourceOption == 'SPECIFIC_CAMPAIGN'){
                    var dataSourceCampaign = $('#filters_specific_campaign').val();
                    if(! dataSourceCampaign){
                        alert('You have selected \'Specific Campaign\' option, but you haven\'t selected a campaign');
                        $('#loader').hide();
                        return false;
                    }
                    metaDataFilters['dataSourceCampaign'] = dataSourceCampaign;
                }
            }

            metaDataFilters['node'] = $('#filters_node').val();
        }

        var selectedFiles = $('#file-fields-list').val();
        var fileMetaDataFilters = {};
        if($('#file-meta-data-filters-checkbox').is(':checked')){
            var fileSizeOperator = $('select[name="FileFilters[file_size_operator]"]').val();
            var fileSizeValue = $('input[name="FileFilters[file_size_value]"]').val();
            if((fileSizeOperator == '' && fileSizeValue != '') || (fileSizeOperator != '' && fileSizeValue == '')){
                alert('You have to fill-out the file size operator and file size value together');
                $('#loader').hide();
                return false;
            }

            fileMetaDataFilters['fileSizeOperator'] = fileSizeOperator;
            fileMetaDataFilters['fileSizeValue'] = fileSizeValue;
        }

        var form = $(this);
        $.ajax({
            url: form.attr('action'),
            type: 'POST',
            data: {
                formId: $form_id,
                viewName: viewName,
                columnsOrderItems: columnsOrderItemsArray,
                columnsOrderSortingItems: columnsOrderSortingItemsArray,
                filters: JSON.stringify(filters),
                selectedFiles: selectedFiles,
                isDefaultView: $encoded_is_default_view,
                metaDataFilters: metaDataFilters,
                fileMetaDataFilters: fileMetaDataFilters,
            },
            success: function(response){
                var data = JSON.parse(response);
                if(data['status']){
                    window.location.href = baseUrl + '/views/index';
                }
                else{
                    alert(data['message']);
                }
                $('#loader').hide();
            },
            error: function(error){
                console.log(error);
                $('#loader').hide();
            }
        });
        return false;
    });

    if($is_update){
        handleUpdateAction();
    }

    $('#file-fields-list').change(function(){
        $('.file-meta-data-filters').slideToggle(250);
        // Select2 set width to 0 if the container were hidden. So, here we set it back to full width in order to display the full label
        $('.select2-search__field').css('width', 'auto');
    });
});

JS;

$this->registerJs($script);

?>

<div class="view-builder">

    <h1><?= $this->title ?></h1>
    <h4><?= '(' . $form_name . ' form)' ?></h4>

    <?php if($is_default_view): ?>
        <div class='alert alert-info'>
            <span class='glyphicon glyphicon-info-sign'></span> <?= 'You are building a default view which will be accessible to all users those have Read permission to this form' ?>
        </div>
    <?php endif; ?>

    <?php $form = ActiveForm::begin([
        'action' => Url::base(true) . ($update ? '/views/update-file-domain-view?id=' . $id : '/views/save-file-domain-view'),
        'options' => [
            'id' => 'view-builder'
        ]
    ]); ?>

    <div class="form-group">
        <?= Html::label('View name', 'name') ?>

        <?= Html::textInput('name', $model->name ?? null , ['class' => 'form-control']) ?>
    </div>

    <div class="form-group">
        <?= Html::label('Files', 'file_field_name') ?>

        <?= Select2::widget([
            'name' => 'file_field_name',
            'data' => ArrayHelper::map($files_fields, 'name', 'label'),
            'value' => $model->selectedFiles,
            'options' => [
                'multiple' => true,
                'placeholder' => 'Select one or more files',
                'id' => 'file-fields-list'
            ],
        ]) ?>
        
    </div>

    <div id='view-form'>
        <?= Html::label('Columns selection & order', 'columns') ?>

        <p class="text-warning">
            <span class="glyphicon glyphicon-info-sign"></span> 
            <?= Yii::t('app', 'The maximum allowed number of fields that you can select is: ' . $fields_selection_count . ' (according to admin settings)') ?>
        </p>

        <?= Select2::widget([
            'name' => 'columns',
            'data' => $mapped_columns,
            'value' => $selected_columns_names ?? [],
            'options' => [
                'id' => 'columns',
                'placeholder' => 'Select columns',
                'multiple' => true
            ],
        ]); ?>

        <br>

        <?= Sortable::widget([
            'showHandle' => false,
            'items' => [],
            'options' => [
                'id' => 'columns_order',
            ],
        ]); ?>

        <br>

        <?= Html::label('Order data by columns', 'order_data_by_columns') ?>

        <?= Select2::widget([
            'name' => 'columns',
            'data' => $mapped_columns,
            'value' => isset($columns_sorting) ? array_column(json_decode($columns_sorting), 'name') : null,
            'options' => [
                'id' => 'order_data_by_columns',
                'placeholder' => 'Select columns',
                'multiple' => true
            ],
        ]); ?>

        <div class='alert alert-warning' style='margin-top: 5px;'>
            <?= '<b>Attention: </b>Columns order will affect the sequence of data sorting' ?>
        </div>

        <?= Sortable::widget([
            'showHandle' => false,
            'items' => [],
            'options' => [
                'id' => 'columns_sorting',
            ],
        ]); ?>

        <br>
        
        <label for=""><?= 'Parent Data Filters' ?></label>
        <div id='query-builder'></div>
        
        <br>

        <?php
            $meta_data_filters_enabled = Yii::$app->controller->action->id == 'update-file-domain-view' && $model->metaDataFilters;
            $file_meta_data_filters_enabled = Yii::$app->controller->action->id == 'update-file-domain-view' && $model->fileMetaDataFilters;
        ?>

        <div class="form-group">
            <?= Html::checkbox('meta-data-filters', $meta_data_filters_enabled ? true : false, [
                'label' => 'Enable meta data filters',
                'id' => 'meta-data-filters-checkbox'
            ]) ?>

            <div id="meta-data-filters" style="display: <?= $meta_data_filters_enabled ? 'block' : 'none' ?>;">
                <div class="well">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for=""><?= 'Submitted By' ?></label>

                                <?= Select2::widget([
                                    'name' => 'Filters[submitted_by]',
                                    'data' => $users,
                                    'value' => $meta_data_filters_enabled && isset($meta_data_filters['submittedBy']) ? $meta_data_filters['submittedBy'] : null,
                                    'options' => [
                                        'placeholder' => 'Select user',
                                        'id' => 'filters_submitted_by'
                                    ],
                                    'pluginOptions' => [
                                        'allowClear' => true,
                                    ],
                                ]) ?>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for=""><?= 'Submitted At' ?></label>

                                <input type="date" name="Filters[submitted_at]" class="form-control" id="filters_submitted_at" value="<?= $meta_data_filters_enabled && isset($meta_data_filters['submittedAt']) ? $meta_data_filters['submittedAt'] : null ?>">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for=""><?= 'Last Updated By' ?></label>

                                <?= Select2::widget([
                                    'name' => 'Filters[last_updated_by]',
                                    'data' => $users,
                                    'value' => $meta_data_filters_enabled  && isset($meta_data_filters['lastUpdatedBy']) ? $meta_data_filters['lastUpdatedBy'] : null,
                                    'options' => [
                                        'placeholder' => 'Select user',
                                        'id' => 'filters_last_updated_by'
                                    ],
                                    'pluginOptions' => [
                                        'allowClear' => true,
                                    ],
                                ]) ?>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for=""><?= 'Last Updated At' ?></label>

                                <input type="date" name="Filters[last_updated_at]" class="form-control" id="filters_last_updated_at" value="<?= $meta_data_filters_enabled  && isset($meta_data_filters['lastUpdatedAt']) ? $meta_data_filters['lastUpdatedAt'] : null ?>">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for=""><?= 'Completed By' ?></label>

                                <?= Select2::widget([
                                    'name' => 'Filters[completed_by]',
                                    'data' => $users,
                                    'value' => $meta_data_filters_enabled && isset($meta_data_filters['completedBy']) ? $meta_data_filters['completedBy'] : null,
                                    'options' => [
                                        'placeholder' => 'Select user',
                                        'id' => 'filters_completed_by'
                                    ],
                                    'pluginOptions' => [
                                        'allowClear' => true,
                                    ],
                                ]) ?>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for=""><?= 'Completed At' ?></label>

                                <input type="date" name="Filters[completed_at]" class="form-control" id="filters_completed_at" value="<?= $meta_data_filters_enabled && isset($meta_data_filters['completedAt']) ? $meta_data_filters['completedAt'] : null ?>">
                            </div>
                        </div>
                    </div>

                

                    <hr style="margin: 10px 0;">
                    
                    <div class="form-group">
                        <label for=""><?= 'Data Source' ?></label>

                        <?= Html::radioList('Filters[data_source]', $meta_data_filters_enabled && isset($meta_data_filters['dataSourceOption']) ? $meta_data_filters['dataSourceOption'] : 'ALL_DATA', [
                            'ALL_DATA' => 'All Data',
                            'NOT_FROM_CAMPAIGN' => 'Not From Campaign',
                            'ANY_CAMPAIGN' => 'Any Campaign',
                            'SPECIFIC_CAMPAIGN' => 'Specific Campaign',
                        ], [
                            'separator' => '<br>',
                            'id' => 'filters_data_source'
                        ]) ?>
                    </div>

                    <div class="row" id="filters_specific_campaign_container" style="display: <?= ($meta_data_filters_enabled && isset($meta_data_filters['dataSourceOption']) && $meta_data_filters['dataSourceOption'] == 'SPECIFIC_CAMPAIGN') ? 'block' : 'none' ?>;">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label for=""><?= 'Campaign' ?></label>

                                <?= Select2::widget([
                                    'name' => 'Filters[campaign]',
                                    'data' => Utilities::getAllCampaigns(json_decode($form_id)),
                                    'value' => $meta_data_filters_enabled && isset($meta_data_filters['dataSourceCampaign']) ? $meta_data_filters['dataSourceCampaign'] : null,
                                    'options' => [
                                        'placeholder' => 'Select campaign',
                                        'id' => 'filters_specific_campaign'
                                    ],
                                    'pluginOptions' => [
                                        'allowClear' => true,
                                    ],
                                ]) ?>
                            </div>
                        </div>
                    </div>

                    <hr style="margin: 10px 0;">

                    <div class="form-group">
                        <label for=""><?= 'Node' ?></label>

                        <?= Select2::widget([
                            'name' => 'Filters[node]',
                            'data' => $nodes,
                            'value' => $meta_data_filters_enabled ? $meta_data_filters['node'] : null,
                            'options' => [
                                'placeholder' => 'Select node',
                                'id' => 'filters_node'
                            ],
                            'pluginOptions' => [
                                'allowClear' => true,
                            ],
                        ]) ?>
                    </div>
                </div>
            </div>
        </div>

        <?= Html::checkbox('file-meta-data-filters', $file_meta_data_filters_enabled, [
                'label' => 'Enable file meta data filters',
                'id' => 'file-meta-data-filters-checkbox'
            ]) ?>

        <div id="file-meta-data-filters" style="display: <?= $file_meta_data_filters_enabled ? 'block' : 'none' ?>;">
            <div class="well">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for=""><?= 'File Size Operator' ?></label>

                            <?= Html::dropdownList('FileFilters[file_size_operator]', $file_meta_data_filters_enabled ? $model->fileMetaDataFilters['fileSizeOperator'] : null, [
                                'Less Than' => 'Less Than',
                                'Larger Than' => 'Larger Than',
                            ], [
                                'class' => 'form-control',
                                'prompt' => 'Select an option',
                            ]) ?>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for=""><?= 'File Size Value' ?></label>

                            <div class="input-group">
                                <?= Html::textInput('FileFilters[file_size_value]', $file_meta_data_filters_enabled ? $model->fileMetaDataFilters['fileSizeValue'] : null, [
                                    'type' => 'number',
                                    'min' => 0.1,
                                    'step' => 0.1,
                                    'class' => 'form-control',
                                ]) ?>

                                <span class="input-group-addon">MB</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <p>
            <?= Html::button('Preview Data Samples', ['class' => 'btn btn-primary', 'id' => 'preview-btn', 'disabled' => true]) ?>
        </p>

        <div id='data-sample' style='display: none;' class='table-responsive'></div>
        <br><hr>

        <div style='display: flex; justify-content: center; margin-top: 10px;'>
            <?= Html::submitButton('Save View', ['class' => 'btn btn-success', 'style' => 'width: 20%;']) ?>
        </div>

    </div>

    <?php ActiveForm::end() ?>

</div>

<script>
    var columns = JSON.parse('<?= Utilities::customJsonEncode($columns) ?>');

    function getDataFromFields(){
        var columnsOrderItems = $('.columns_order_item');
        var columnsOrderItemsArray = [];
        for(var i = 0; i < columnsOrderItems.length; i++){
            columnsOrderItemsArray.push($(columnsOrderItems[i]).prop('id').replace('_column', ''));
        }

        var columnsOrderSortingItems = $('.columns_sorting_item');
        var columnsOrderSortingItemsArray = [];
        for(var i = 0; i < columnsOrderSortingItems.length; i++){
            columnsOrderSortingItemsArray.push({
                id: $(columnsOrderSortingItems[i]).prop('id').replace('_row', ''),
                sort: $(columnsOrderSortingItems[i]).find('input[type="radio"]:checked').val()
            });
        }

        var filters = $('#query-builder').queryBuilder('getMongo');

        return {
            columnsOrderItemsArray,
            columnsOrderSortingItemsArray,
            filters,
        };
    }

    function handleUpdateAction(){
        var readyFilters = <?= $ready_filters ?? json_encode(null) ?>;
        var selectedColumnsLabels = <?= $selected_columns_labels ?? json_encode(null) ?>;
        var selectedColumnsNames = <?= isset($selected_columns_names) ? json_encode($selected_columns_names) : json_encode(null) ?>;
        var columnsSorting = <?= $columns_sorting ?? json_encode(null) ?>;

        if(readyFilters != 'null'){
            $('#query-builder').queryBuilder('setRulesFromMongo', JSON.parse(readyFilters));
        }
        
        if(selectedColumnsLabels){
            for(var i = 0; i < selectedColumnsLabels.length; i++){
                $('#columns_order').append(`<li draggable="true" class="columns_order_item" id="` + selectedColumnsNames[i] + `_column" style="background-color: white;">
                        <span class="handle">
                            <i class="glyphicon glyphicon-move"></i>
                        </span>
                        <span style="width: 20%; display: inline-block;">` + selectedColumnsLabels[i] + `</span>
                    </li>    
                `);
            }
        }

        if(columnsSorting){
            for(var i = 0; i < columnsSorting.length; i++){
                $('#columns_sorting').append(`<li draggable="true" id="` + columnsSorting[i]['name'] + `_row" class="columns_sorting_item" style="background-color: white;">
                        <span class="handle">
                            <i class="glyphicon glyphicon-move"></i>
                        </span>
                        <span style="width: 25%; display: inline-block;">` + columnsSorting[i]['label'] + `</span>
                        ASC <input ` + (columnsSorting[i]['sort'] == 'asc' ? 'checked' : '') + ` type="radio" name="` + columnsSorting[i]['name'] + `_sort" value="asc">
                        DESC <input ` + (columnsSorting[i]['sort'] == 'desc' ? 'checked' : '') + ` type="radio" name="` + columnsSorting[i]['name'] + `_sort" value="desc">
                    </li>
                `);
            }
        }

        $('#preview-btn').prop('disabled', false);
    }

</script>