{% extends '_main.html' %}

{% block title %}Languages - Bazarr{% endblock %}

{% block page_head %}
    <style>
        .warning {
            color: red;
        }
    </style>
{% endblock page_head %}

{% block bcleft %}
    <div class="">
        <button class="btn btn-outline" id="save_button">
            <div>
                <span class="fa-stack">
                    <i class="fas fa-save fa-stack-2x align-top text-themecolor text-center font-20" aria-hidden="true"></i>
                    <i id="save_button_checkmark" class="fas fa-check fa-stack-2x" style="color:green;"></i>
                </span>
            </div>
            <div class="align-bottom text-themecolor small text-center">Save</div>
        </button>
    </div>
{% endblock bcleft %}

{% block bcright %}

{% endblock bcright %}

{% block body %}
    <div class="container-fluid" style="padding-top: 3em;">
        <form class="form" name="settings_form" id="settings_form">
            <h4>Subtitles languages</h4>
            <hr/>
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>Single Language</b>
                </div>
                <div class="form-group col-sm-8">
                    <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="settings-general-single_language" name="settings-general-single_language">
                        <span class="custom-control-label" for="settings-general-single_language"></span>
                    </label>
                    <label>Download a single Subtitles file without adding the language code to the filename.</label>
                    <label class="warning">We don't recommend enabling this option unless absolutely required (ie: media player not supporting language code in subtitles filename). Results may vary.</label>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>Enabled Languages</b>
                </div>
                <div class="form-group col-sm-8 pl-sm-0">
                    <select class="selectpicker" id="enabled_languages" name="enabled_languages" data-live-search="true" multiple></select>
                </div>
            </div>
            <br>

            <h4>Default Settings</h4>
            <hr>
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>Series Default Settings</b>
                </div>
                <div class="form-group col-sm-8">
                    <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="settings-general-serie_default_enabled" name="settings-general-serie_default_enabled">
                        <span class="custom-control-label" for="settings-general-serie_default_enabled"></span>
                    </label>
                    <label>Apply only to Series added to Bazarr after enabling this option.</label>
                </div>
            </div>
            <div id="series_default_div">
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Languages</b>
                    </div>
                    <div class="form-group col-sm-8 pl-sm-0">
                        <select class="selectpicker" id="settings-general-serie_default_language" name="settings-general-serie_default_language" multiple></select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Hearing-Impaired</b>
                    </div>
                    <div class="form-group col-sm-1">
                        <label class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="settings-general-serie_default_hi" name="settings-general-serie_default_hi">
                            <span class="custom-control-label" for="settings-general-serie_default_hi"></span>
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Forced</b>
                    </div>
                    <div class="form-group col-sm-8 pl-sm-0">
                        <select class="selectpicker" id="settings-general-serie_default_forced" name="settings-general-serie_default_forced">
                            <option value="False">False</option>
                            <option value="True">True</option>
                            <option value="Both">Both</option>
                        </select>
                    </div>
                </div>
                <br>
            </div>
            <br>
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>Movies Default Settings</b>
                </div>
                <div class="form-group col-sm-8">
                    <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="settings-general-movie_default_enabled" name="settings-general-movie_default_enabled">
                        <span class="custom-control-label" for="settings-general-movie_default_enabled"></span>
                    </label>
                    <label>Apply only to Movies added to Bazarr after enabling this option.</label>
                </div>
            </div>
            <div id="movies_default_div">
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Languages</b>
                    </div>
                    <div class="form-group col-sm-8 pl-sm-0">
                        <select class="selectpicker" id="settings-general-movie_default_language" name="settings-general-movie_default_language" multiple></select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Hearing-Impaired</b>
                    </div>
                        <div class="form-group col-sm-1">
                        <label class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="settings-general-movie_default_hi" name="settings-general-movie_default_hi">
                            <span class="custom-control-label" for="settings-general-movie_default_hi"></span>
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Forced</b>
                    </div>
                    <div class="form-group col-sm-8 pl-sm-0">
                        <select class="selectpicker" id="settings-general-movie_default_forced" name="settings-general-movie_default_forced">
                            <option value="False">False</option>
                            <option value="True">True</option>
                            <option value="Both">Both</option>
                        </select>
                    </div>
                </div>
                <br>
            </div>
        </form>
    </div>
{% endblock body %}

{% block tail %}
    <script>
        $(document).ready(function () {
            getLanguages();

            // Show warning if there's unsaved changes in the settings_form
            var form_changed = false;
            $(window).on('beforeunload', function() {
                if (form_changed) {
                    return "";
                }
            });

            // Hide checkmark over save button
            $('#save_button_checkmark').hide();
            $('#save_button').prop('disabled', true).css('cursor', 'not-allowed');

            // Listen to selection change on enabled_languages select and keep series and movies default language select synced
            $('#enabled_languages').on('changed.bs.select', function(event, clickedIndex, isSelected, previousValue) {
                actual = $("#enabled_languages option:selected").map(function() {
                    return $(this).val();
                }).get();

                if (previousValue) {
                    var added = actual.filter(x => !previousValue.includes(x));
                    var removed = previousValue.filter(x => !actual.includes(x));

                    if (added.length > 0) {
                        $('#settings-general-serie_default_language').append('<option value="' + added[0] + '">' + $("#enabled_languages option[value="+added[0]+"]").text() + '</option>');
                        $('#settings-general-movie_default_language').append('<option value="' + added[0] + '">' + $("#enabled_languages option[value="+added[0]+"]").text() + '</option>');
                    }
                    if (removed.length > 0) {
                        $("#settings-general-serie_default_language option[value="+removed[0]+"]").remove();
                        $("#settings-general-movie_default_language option[value="+removed[0]+"]").remove();
                    }
                } else {
                    $(actual).each( function(i, item) {
                        if ($('#settings-general-serie_default_language option[value='+item+']').length < 1) {
                            $('#settings-general-serie_default_language').append('<option value="' + item + '">' + $("#enabled_languages option[value="+item+"]").text() + '</option>');
                            $('#settings-general-movie_default_language').append('<option value="' + item + '">' + $("#enabled_languages option[value="+item+"]").text() + '</option>');
                        }
                    });
                }

                $('#settings-general-serie_default_language').selectpicker('val', {{settings.general.serie_default_language|safe}});
                $('#settings-general-movie_default_language').selectpicker('val', {{settings.general.movie_default_language|safe}});
                $("#settings-general-serie_default_language").selectpicker("refresh");
                $("#settings-general-movie_default_language").selectpicker("refresh");
            })

            // Set Select input values
            $('#settings-general-serie_default_forced').val('{{settings.general.serie_default_forced}}').trigger('change');
            $('#settings-general-movie_default_forced').val('{{settings.general.movie_default_forced}}').trigger('change');
            $('.selectpicker').selectpicker('refresh')

            // Listen to single language checkbox change to adapt languages menus
            $('#settings-general-single_language').on('change', function() {
                if ($(this).prop('checked')) {
                    $('#settings-general-serie_default_language').selectpicker({maxOptions:1}).selectpicker('refresh');
                    $('#settings-general-movie_default_language').selectpicker({maxOptions:1}).selectpicker('refresh');
                    $('#settings-general-serie_default_language').selectpicker('val', $('#settings-general-serie_default_language').val()[0]);
                    $('#settings-general-movie_default_language').selectpicker('val', $('#settings-general-movie_default_language').val()[0]);
                } else {
                    $('#settings-general-serie_default_language').selectpicker({maxOptions:false}).selectpicker('refresh');
                    $('#settings-general-movie_default_language').selectpicker({maxOptions:false}).selectpicker('refresh');
                }
            });

            // Hide *_div on default-enabled change
            $('#settings-general-serie_default_enabled').on('change', function() {
                if ($(this).prop('checked')) {
                    $('#series_default_div').show();
                } else {
                    $('#series_default_div').hide();
                }
            });

            $('#settings-general-movie_default_enabled').on('change', function() {
                if ($(this).prop('checked')) {
                    $('#movies_default_div').show();
                } else {
                    $('#movies_default_div').hide();
                }
            });

            // Set Checkbox input values
            $('#settings-general-single_language').prop('checked', {{'true' if settings.general.getboolean('single_language') else 'false'}}).trigger('change');
            $('#settings-general-serie_default_enabled').prop('checked', {{'true' if settings.general.getboolean('serie_default_enabled') else 'false'}}).trigger('change');
            $('#settings-general-serie_default_hi').prop('checked', {{'true' if settings.general.getboolean('serie_default_hi') else 'false'}}).trigger('change');
            $('#settings-general-movie_default_enabled').prop('checked', {{'true' if settings.general.getboolean('movie_default_enabled') else 'false'}}).trigger('change');
            $('#settings-general-movie_default_hi').prop('checked', {{'true' if settings.general.getboolean('movie_default_hi') else 'false'}}).trigger('change');

            $('#save_button').on('click', function() {
                var formdata = new FormData(document.getElementById("settings_form"));

                // Make sure empty default languages select are send (bug in bootstrap-select)
                if (formdata.get('settings-general-serie_default_language') == null) {
                    formdata.append('settings-general-serie_default_language', null)
                }
                if (formdata.get('settings-general-movie_default_language') == null) {
                    formdata.append('settings-general-movie_default_language', null)
                }

                // Make sure all checkbox input are sent with true/false value
                $('input[type=checkbox]').each(function () {
                    formdata.set($(this).prop('id'), $(this).prop('checked'));
                });
                $.ajax({
                    url: "{{ url_for('api.savesettings') }}",
                    data: formdata,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    complete: function () {
                        $('#save_button_checkmark').show();
                        form_changed = false;
                        $('#save_button').prop('disabled', true).css('cursor', 'not-allowed');
                        setTimeout(
                            function()
                            {
                                $('#save_button_checkmark').hide();
                            }, 2000);
                    }
                });
            });

            function getLanguages() {
                $.ajax({
                    url: "{{ url_for('api.languages') }}?enabled=false",
                    success: function (data) {
                        $('#enabled_languages').empty();
                        $.each(data, function (i, item) {
                            $('#enabled_languages').append('<option value="' + item.code2 + '">' + item.name + '</option>');
                        });
                        getEnabledLanguages();
                        $("#enabled_languages").selectpicker("refresh");
                    }
                });
            }

            function getEnabledLanguages() {
                $.ajax({
                    url: "{{ url_for('api.languages') }}?enabled=true",
                    success: function (data) {
                        let optArr = [];
                        $.each(data, function (i, item) {
                            optArr.push(item.code2);
                        });
                        $('#enabled_languages').selectpicker('val', optArr);
                    }
                });
            }

            // monitor changes to the settings_form
            setTimeout(
                function()
                {
                    $('#settings_form').on('change', function() {
                        form_changed = true;
                        $('#save_button').prop('disabled', false).css('cursor', 'auto');
                    })
                }, 1000);
        });
    </script>
{% endblock tail %}