{% extends "support.html" %}

{% block head %}
    {{ block.super }}
    <script>
        function apply_settings_search(term) {
            let lower_term = term.toLowerCase().replace(/_/g, ' ');

            if (!lower_term) {
                reset_search();
                return;
            }

            let $rows = $('#printer-setting-table tbody tr');

            $rows.each(function () {
                let $row = $(this);
                let $cells = $row.find('td').slice(0, 2);

                let combined_text = $cells.text()
                    .toLowerCase()
                    .replace(/_/g, ' ');

                if (combined_text.indexOf(lower_term) !== -1) {
                    $row.show();

                    $cells.each(function () {
                        let $cell = $(this);
                        let original = $cell.text();
                        let normalized = original.replace(/_/g, ' ');
                        let regex = new RegExp(
                            '(' + lower_term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')',
                            'ig'
                        );

                        if (normalized.match(regex)) {
                            let highlighted = '';
                            let last = 0;

                            normalized.replace(regex, function (match, p1, offset) {
                                highlighted += original.slice(last, offset)
                                    + '<span class="highlight">'
                                    + original.slice(offset, offset + p1.length)
                                    + '</span>';
                                last = offset + p1.length;
                            });

                            highlighted += original.slice(last);
                            $cell.html(highlighted);
                        } else {
                            $cell.html(original);
                        }
                    });
                } else {
                    $row.hide();
                }
            });
        }

        function reset_search() {
            $('#printer-setting-table tbody tr').show();
            $('#printer-setting-table tbody tr').each(function () {
                $(this).find('td').slice(0, 2).each(function () {
                    $(this).html($(this).text());
                });
            });
        }

        function clear_input_state($input) {
            let border_timer = $input.data('border_timer');
            let error_timer = $input.data('error_timer');

            if (border_timer) {
                clearTimeout(border_timer);
                $input.removeData('border_timer');
            }

            if (error_timer) {
                clearTimeout(error_timer);
                $input.removeData('error_timer');
            }

            $('.field-error').remove();
            $input.css('border-color', '#ccc');
        }

        function show_border($input, color) {
            let timer = setTimeout(function () {
                $input.css('border-color', '#ccc');
                $input.removeData('border_timer');
            }, 5000);

            $input.css('border-color', color);
            $input.data('border_timer', timer);
        }

        function show_status($input, message) {
            let color = '#f44336';
            if (message.toUpperCase() === 'SUCCESSFULLY UPDATED') {
                color = '#4caf50';
            }

            let $error = $('<div />', {
                text: message,
                class: 'field-error'
            }).css({
                position: 'absolute',
                color: color,
                fontSize: '0.9em',
                background: '#fff',
                padding: '2px 6px',
                border: '1px solid ' + color,
                borderRadius: '3px',
                whiteSpace: 'nowrap',
                zIndex: 1000
            });

            $('.field-error').remove();

            let offset = $input.offset();
            let height = $input.outerHeight();

            let top_offset = height + 4;
            if ($input.attr('type') === 'checkbox') {
                top_offset = height + 14;
            }

            $error.css({
                top: offset.top - top_offset,
                left: offset.left + 20
            });

            $('body').append($error);

            let timer = setTimeout(function () {
                $error.fadeOut(200, function () {
                    $(this).remove();
                });
                $input.removeData('error_timer');
            }, 5000);

            $input.data('error_timer', timer);
        }

        $(function () {
            $('#settings-search').on('input', function () {
                apply_settings_search(this.value);
            });

            $('#setting-clear-search').on('click', function () {
                $('#settings-search').val('').trigger('input');
            });

            $(document).on('change', '#printer-setting-table .printer-input', function () {
                let $input = $(this);
                clear_input_state($input);

                let setting_id = $input.data('setting-id');
                let field_val = $input.val();

                if ($input.is(':checkbox')) {
                    field_val = $input.is(':checked') ? 'TRUE' : 'FALSE';
                }

                $.ajax({
                    url: "{% url 'support:update-printer-setting-value' %}",
                    method: 'POST',
                    data: {
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        setting_id: setting_id,
                        field_val: field_val
                    },
                    success: function () {
                        show_border($input, 'green');
                        show_status($input, 'Successfully Updated');
                    },
                    error: function (xhr) {
                        let error_msg = 'Invalid value';
                        if (xhr.responseJSON && xhr.responseJSON.error) {
                            error_msg = xhr.responseJSON.error;
                        }
                        show_status($input, error_msg);
                        show_border($input, 'red');
                    }
                });
            });

            let parsed_url = new URL(window.location.href);
            let printer_setting = parsed_url.searchParams.get('printer_setting');

            if (printer_setting) {
                $('#printer-setting-table tbody td').each(function () {
                    if ($(this).text() === printer_setting) {
                        $(this).css('background-color', 'lightblue');
                        $(this).siblings().css('background-color', 'lightblue');
                        $('html, body').animate({ scrollTop: $(this).offset().top - 80 }, 150);
                        return false;
                    }
                });
            }
        });
    </script>

    <style>
        .dosis-report-header th {
            padding-bottom: 0;
        }

        .highlight {
            background-color: yellow;
        }

        .settings-controls {
            display: flex;
            gap: 24px;
            align-items: flex-end;
            padding: 12px 16px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #ddd;
        }

        .settings-controls .control-group {
            display: flex;
            flex-direction: column;
        }

        .settings-controls label {
            font-weight: 600;
            margin-bottom: 4px;
            font-size: 0.9rem;
        }

        #settings-search {
            min-width: 260px;
            margin-bottom: 0;
        }

        .btn-history {
            height: 36px;
            padding: 6px 14px;
            font-weight: 600;
            border: 1px solid #ccc;
            background-color: #f8f9fa;
            color: #333;
            margin-top: -15px;
        }

        .btn-history:hover {
            background-color: #e9ecef;
            border-color: #bbb;
        }
    </style>
{% endblock %}

{% block pagehead %}
    {% include 'pagehead.html' %}
{% endblock %}

{% block content %}
    <div class="settings-controls">
        <div class="control-group">
            <label for="settings-search">Search</label>
            <input id="settings-search" type="text" class="form-control" placeholder="Tag or setting name">
        </div>

        <div class="control-group">
            <button id="setting-clear-search" type="button" class="btn btn-history">
                Clear
            </button>
        </div>
    </div>

    <table id="printer-setting-table" class="table table-striped">
        <thead style="position: sticky; top: 0;">
            <tr class="dosis-report-header">
                <th>Tag</th>
                <th>Setting</th>
                <th>Value</th>
            </tr>
        </thead>
        <tbody>
            {% for setting in settings %}
                <tr>
                    <td style="padding: 3px;">{{ setting.setting_tag }}</td>
                    <td style="padding: 3px;">{{ setting.setting_desc }}</td>
                    <td style="padding: 3px;">
                        {% if setting.value_type == 'BOOL' %}
                            <input type="checkbox"
                                   class="printer-input"
                                   data-setting-id="{{ setting.setting_type_id }}"
                                   {% if setting.value.upper == 'TRUE' %}checked{% endif %}>
                        {% elif setting.choices %}
                            <select class="printer-input"
                                    data-setting-id="{{ setting.setting_type_id }}"
                                    style="width: auto">
                                {% for choice in setting.choices %}
                                    <option value="{{ choice }}"
                                            {% if choice == setting.value %}selected{% endif %}>
                                        {{ choice }}
                                    </option>
                                {% endfor %}
                            </select>
                        {% else %}
                            <input type="text"
                                   class="printer-input"
                                   data-setting-id="{{ setting.setting_type_id }}"
                                   value="{{ setting.value }}"
                                   style="width: auto">
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% endblock %}