<!DOCTYPE html>
<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
      xmlns:th="https://www.thymeleaf.org">

<head>
    <th:block th:insert="~{fragments/common :: head(title=#{replace-color.title}, header=#{replace-color.header})}"></th:block>
</head>

<body>
<th:block th:insert="~{fragments/common :: game}"></th:block>
<div id="page-container">
    <div id="content-wrap">
        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
        <br><br>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-6 bg-card">
                    <div class="tool-header">
                        <span class="material-symbols-rounded tool-header-icon advance">zoom_in_map</span>
                        <span class="tool-header-text" th:text="#{replace-color.header}"></span>
                    </div>
                    <form action="#" th:action="@{'/api/v1/misc/replace-invert-pdf'}" method="post" enctype="multipart/form-data">
                        <div
                                th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='application/pdf')}">
                        </div>
                        <div class="card mb-3">
                            <div class="card-body">
                                <h4 th:text="#{replace-color.selectText.1}"></h4>
                                <select name="replaceAndInvertOption" id="replace-invert" class="form-control">
                                    <option value="HIGH_CONTRAST_COLOR" th:text="#{replace-color.selectText.2}" ></option>
                                    <option value="CUSTOM_COLOR" th:text="#{replace-color.selectText.3}"></option>
                                    <option value="FULL_INVERSION" th:text="#{replace-color.selectText.4}" selected></option>
                                    <option th:text="#{replace-color.selectText.12}" value="COLOR_SPACE_CONVERSION"></option>
                                </select>
                            </div>
                        </div>
                        <div class="card mb-3" id="high-contrast-options" style="display: none">
                            <div class="card-body">
                                <h4 th:text="#{replace-color.selectText.5}"></h4>
                                <select name="highContrastColorCombination" id="high-contrast" class="form-control">
                                    <option value="WHITE_TEXT_ON_BLACK" th:text="#{replace-color.selectText.6}" selected></option>
                                    <option value="BLACK_TEXT_ON_WHITE" th:text="#{replace-color.selectText.7}"></option>
                                    <option value="YELLOW_TEXT_ON_BLACK" th:text="#{replace-color.selectText.8}"></option>
                                    <option value="GREEN_TEXT_ON_BLACK" th:text="#{replace-color.selectText.9}"></option>
                                </select>
                            </div>
                        </div>
                        <div class="card mb-3" id = "custom-color-1" style="display: none">
                            <div class="card-body">
                                <h4 th:text="#{replace-color.selectText.10}"></h4>
                                <input type="color" name="textColor" id="text-color" class="form-control">
                            </div>
                        </div>
                        <div class="card mb-3" id = "custom-color-2" style="display: none">
                            <div class="card-body">
                                <h4 th:text="#{replace-color.selectText.11}"></h4>
                                <input type="color" name="backGroundColor" id="bg-color" class="form-control">
                            </div>
                        </div>
                        
                        <div class="card mb-3" id="color-space-info" style="display: none">
                            <div class="card-body">
                                <h4 th:text="#{replace-color.selectText.13}"></h4>
                                <p th:text="#{replace-color.selectText.14}"></p>
                                <ul>
                                    <li th:text="#{replace-color.selectText.15}"></li>
                                    <li th:text="#{replace-color.selectText.16}"></li>
                                    <li th:text="#{replace-color.selectText.17}"></li>
                                </ul>
                            </div>
                        </div>

                        <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{replace-color.submit}"></button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
</div>
<script>
    $(document).ready(function(){
        $('#replace-invert').change(function() {
            var selectedOption = $(this).val();

            // Hide all conditional fields by default
            $('#high-contrast-options').hide();
            $('#custom-color-1').hide();
            $('#custom-color-2').hide();
            $('#color-space-info').hide();

            if (selectedOption === "HIGH_CONTRAST_COLOR") {
                $('#high-contrast-options').show();
            } else if (selectedOption === "CUSTOM_COLOR") {
                $('#custom-color-1').show();
                $('#custom-color-2').show();
            } else if (selectedOption === "COLOR_SPACE_CONVERSION") {
                $('#color-space-info').show();
            }
        });
    });
</script>
</body>

</html>