<div class="row">
    <div class="col-md-2"></div>

    <div class="col-md-6 srch-div">
        <div class="input-group custom-text-input">
            <input id="search_name_ref" type="text" onkeypress="saveClick()" class="form-control" name="search_name" value="<?= $_SESSION['search_name'] ?>" placeholder="Search..." id="txtSearch" />

            <div class="input-group-btn">
                <button class="btn btn-primary search-btn" name="search" id="search-btn-ref">
                    <span class="fa fa-search icon"></span>
                </button>
            </div>
        </div>
    </div>

    <div class="col-md-2">
        <button class="btn btn-primary find-replace" onclick="window.dialog.show();">Find and Replace</button>
    </div>
</div>
<br />

<div class="row">
    <div class="col-md-6">
        <select class="form-control custom-select-input right ref-select" name="types" id="types-ref">
            <option value="0">All resource types</option>
            <?php foreach ($types as $type) : ?>
                <option value="<?= $type->id ?>" <?= isset($_SESSION['type_id']) && $_SESSION['type_id'] == $type->id ? 'selected' : '' ?>>
                    <?= $type->name ?>
                </option>
            <?php endforeach; ?>
        </select>
    </div>

    <div class="col-md-6">
        <select class="form-control custom-select-input left ref-select" name="status" id="status-ref">
            <option value="0" <?= isset($_SESSION['status']) && $_SESSION['status'] == 0 ? 'selected' : '' ?>>All statuses</option>
            <option value="1" <?= isset($_SESSION['status']) && $_SESSION['status'] == 1 ? 'selected' : '' ?>>New resources</option>
            <option value="6" <?= isset($_SESSION['status']) && $_SESSION['status'] == 6 ? 'selected' : '' ?>>Existing resources</option>
            <option value="2" <?= isset($_SESSION['status']) && $_SESSION['status'] == 2 ? 'selected' : '' ?>>Changed resources</option>
            <option value="5" <?= isset($_SESSION['status']) && $_SESSION['status'] == 5 ? 'selected' : '' ?>>Unchanged resources</option>
            <option value="4" <?= isset($_SESSION['status']) && $_SESSION['status'] == 4 ? 'selected' : '' ?>>Approved resources</option>
            <option value="3" <?= isset($_SESSION['status']) && $_SESSION['status'] == 3 ? 'selected' : '' ?>>Not approved resources</option>
            <option value="7" <?= isset($_SESSION['status']) && $_SESSION['status'] == 7 ? 'selected' : '' ?>>With context</option>
            <option value="8" <?= isset($_SESSION['status']) && $_SESSION['status'] == 8 ? 'selected' : '' ?>>Without context</option>
            <option value="9" <?= isset($_SESSION['status']) && $_SESSION['status'] == 9 ? 'selected' : '' ?>>Context requested</option>
        </select>
    </div>
</div>
<br />

<div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-10">
        <div class="centered-div" style="width: 80%;">
            <label class="switch">
                <input type="checkbox" id="extended_search" class="chkbox_srch_ref" name="extended_search" <?= $_SESSION['extended_search'] == 'on' ? 'checked' : '' ?>>
                <span class="slider round"></span>
            </label>
            <p class="slider-text">&nbsp; Exact match only</p>
            &nbsp;
            &nbsp;

            <label class="switch">
                <input type="checkbox" id="key_search" class="chkbox_srch_ref" name="key_search" <?= $_SESSION['key_search'] == 'on' ? 'checked' : '' ?>>
                <span class="slider round"></span>
            </label>
            <p class="slider-text">&nbsp; Search keys only</p>
            &nbsp;
            &nbsp;

            <label class="switch">
                <input type="checkbox" id="recent_search" class="chkbox_srch_ref" name="recent_search" <?= $_SESSION['recent_search'] == 'on' ? 'checked' : '' ?>>
                <span class="slider round"></span>
            </label>
            <p class="slider-text">&nbsp; Show most recently added resources first</p>
            &nbsp;
            &nbsp;

            <label class="switch">
                <input type="checkbox" id="errors_search" class="chkbox_srch_ref" name="errors_search" <?= $_SESSION['errors_search'] == 'on' ? 'checked' : '' ?>>
                <span class="slider round"></span>
            </label>
            <p class="slider-text">&nbsp; Show errors only</p>
        </div>
    </div>
</div>
<br />
<br />

<div class="row">
    <div class="centered-div">
        <label for="page_number" class="slider-text">Show: &nbsp;</label>
        <select class="form-control custom-select ref-select" name="page_number" id="page_number_ref">
            <option value="10" <?= $_SESSION['page_number'] == 10 ? 'selected' : '' ?>>10</option>
            <option value="25" <?= $_SESSION['page_number'] == 25 ? 'selected' : '' ?>>25</option>
            <option value="50" <?= $_SESSION['page_number'] == 50 ? 'selected' : '' ?>>50</option>
            <option value="100" <?= $_SESSION['page_number'] == 100 ? 'selected' : '' ?>>100</option>
        </select>
        <label for="page_number" class="slider-text">&nbsp; hits per page</label>
    </div>
</div>
<br />

<dialog id="dialog">
    <div class="form-group header-grp">
        <div class="col-sm-10">
            <h3 class="dlg-header">Find and replace</h3>
        </div>

        <div class="col-sm-2">
            <button id="close-dialog" type="button" class="close">×</button>
        </div>
    </div>

    <div class="dlg-header-div"></div>

    <div class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-sm-3" for="search_text">Find what:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="search_text" name="search_text">
            </div>

            <div class="col-sm-2">
                <button type="button" name="button" id="next-replace-btn" class="btn btn-default dlg-btn">Find Next</button>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-3" for="replace_txt">Replace with:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="replace_txt" name="replace_txt">
            </div>
            <div class="col-sm-2">
                <button type="button" name="button" id="replace-btn" class="btn btn-default dlg-btn">Replace</button>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-9"></div>
            <div class="col-sm-3">
                <button type="button" name="button" id="replace-all-btn" class="btn btn-default dlg-btn">Replace All</button>
            </div>
        </div>
        <br />

        <div class="row">
            <div class="col-md-12">
                <div class="left-div">
                    <label class="switch">
                        <input type="checkbox" id="case-sensitivity" name="case-sensitivity">
                        <span class="slider round"></span>
                    </label>

                    <p class="slider-text">&nbsp; Case Sensitivity</p>
                </div>
            </div>
        </div>
        <br />

        <div class="row">
            <div class="col-md-12">
                <div class="left-div">
                    <label class="switch">
                        <input type="checkbox" id="backward-dir" name="backward-dir">
                        <span class="slider round"></span>
                    </label>
                    <p class="slider-text">&nbsp; Backward direction</p>
                </div>
            </div>
        </div>
    </div>
</dialog>
<br />
<br />

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <ul class="pagination pagination-ref"></ul>
        </div>

        <div class="col-md-2">
            <div class="total-div total-ref"></div>
        </div>

        <div class="col-md-2">
            <button type="button" class="btn grey-btn save-all-btn custom-btn" disabled>Save all changes</button>
        </div>
    </div>

    <table class="table table-striped">
        <thead>
            <tr>
                <th></th>
                <th>
                    <div id="ref_key" class="mouse-pointer column-sort" data-order="<?= $_SESSION['column'] == 'ref_key' && $_SESSION['sort'] == 'desc' ? 'asc' : 'desc' ?>">Key
                        <span class="fa fa-sort-amount-<?= $_SESSION['column'] == 'ref_key' && $_SESSION['sort'] == 'desc' ? 'desc' : 'asc' ?> order-span"></span>
                    </div>
                </th>
                <th>
                    <div id="ref_text" class="mouse-pointer eng-th column-sort" data-order="<?= $_SESSION['column'] == 'ref_text' && $_SESSION['sort'] == 'desc' ? 'asc' : 'desc' ?>">Text (English)
                        <span class="fa fa-sort-amount-<?= $_SESSION['column'] == 'ref_text' && $_SESSION['sort'] == 'desc' ? 'desc' : 'asc' ?> order-span"></span>
                    </div>
                </th>
                <th></th>
                <th>
                    <div id="lang_text" class="mouse-pointer lang-th column-sort" data-order="<?= $_SESSION['column'] == 'lang_text' && $_SESSION['sort'] == 'desc' ? 'asc' : 'desc' ?>">Text (Hungarian)
                        <span class="fa fa-sort-amount-<?= $_SESSION['column'] == 'lang_text' && $_SESSION['sort'] == 'desc' ? 'desc' : 'asc' ?> order-span"></span>
                    </div>
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody id="data-table-ref">

        </tbody>
    </table>

    <div class="row">
        <div class="col-md-8">
            <ul class="pagination pagination-ref"></ul>
        </div>

        <div class="col-md-2">
            <div class="total-div total-ref"></div>
        </div>

        <div class="col-md-2">
            <button type="button" class="btn grey-btn save-all-btn custom-btn" disabled>Save all changes</button>
        </div>
    </div>

    <!-- Add or update context Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <input type="hidden" id="ref_id" value="" />

        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Add Or Update Context</h4>
                </div>

                <div class="modal-body">
                    <p id="ref_p"></p>
                    <div id="context_div">

                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" id="btn-save-context" class="btn btn-success">Save</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Add alternative string Modal -->
    <div class="modal fade" id="addAltModal" role="dialog">
        <input type="hidden" id="alt_ref_id" value="" />

        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Add Alternative Resource</h4>
                </div>

                <div class="modal-body">
                    <div class="form-group">
                        <p>Reference:</p>
                        <p id="ref_alt_text"></p>
                    </div>
                    <br />

                    <div class="form-group">
                        <label for="alt_key">Key:</label>
                        <input type="text" class="form-control" id="alt_key" require>
                    </div>
                    <br />

                    <div class="form-group">
                        <label for="alt_txt">Text:</label>
                        <textarea name="alt_txt" id="alt_txt" class="form-control" require></textarea>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" id="btn-save-alternative" class="btn btn-success">Save</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function changeAlt(id) {
        const element = $('#alternative_' + id);

        $.post("/resourcemanager/getAlternative", {
            elem_id: id,
            alt_key: element.val()
        }, function(data, status) {
            let response = JSON.parse(data);

            if (element.val() == 'add_alt') {
                $('#alt_ref_id').val(id);
                $('#ref_alt_text').html('<b>' + response.ref_text + '</b>');
                $('#addAltModal').modal('show');
            } else {
                $('#txt_ref_' + id).val(response.ext_key);
                $('#txt_' + id).val(response.text);

                disableButtons(id);
                checkCharacters(id, 0);
                checkCharacters(id, 1);

                inputText['txt_ref_' + id] = response.ext_key;
                inputText['txt_' + id] = response.text;
            }
        });
    }

    $('#btn-save-alternative').click(function() {
        const id = $('#alt_ref_id').val();
        const key = $('#alt_key').val();
        let txt = $('#alt_txt').val();

        $.post("/resourcemanager/addAlternative", {
            id: id,
            key: key,
            txt: txt
        }, function(data, status) {
            let response = JSON.parse(data);
            let opt = '<option value="@' + response.ext_key + '" selected>@' + response.ext_key + '</option>';

            $('#alternative_' + id + ' option:last').before(opt);
            $('#txt_ref_' + id).text('@' + response.ext_key);
            $('#txt_' + id).text(response.text);

            checkCharacters(id, 0);
            checkCharacters(id, 1);

            inputText['txt_ref_' + id] = response.ext_key;
            inputText['txt_' + id] = response.text;
        });

        $('#addAltModal').modal('hide');
    });
</script>