<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css	">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <link rel="icon" href="data:,">
</head>
<body>
<div class="container py-5">
    <div class="row top-buffer">
        <div class="col-sm-6">
            <div id="instruction-text" class="text-center">
                <h4>Instruction:<br>{{ instruction_text }}</h4>
            </div>
        </div>
    </div>
    <div class="row top-buffer">
        <form method="post" action="{{url_for('index', session_id=session_id)}}">
            <button type="submit" class="btn btn-success">Back to Search</button>
        </form>
    </div>
    <div class="row top-buffer">
        <form method="post" action="{{url_for('search_results', session_id=session_id, keywords=keywords, page=page)}}">
            <button type="submit" class="btn btn-primary">&lt; Prev</button>
        </form>
    </div>
    <div class="row top-buffer">
        <div class="col-md-4 mb-4 mb-md-0">
            <div class="row top-buffer">
                <img id="product-image" src="{{product_info.MainImage}}" class="item-page-img">
            </div>
            {% for option_name, option_contents in product_info.options.items() %}
            <div class="row top-buffer">
                <h4>{{ option_name }}</h4>
                <div class="radio-toolbar">
                    {% for option_content in option_contents %}
                    {% set current_options = options.copy() %}
                    {% set _ = current_options.update({option_name: option_content}) %}
                    {% set url = url_for('item_page', session_id=session_id, asin=asin, keywords=keywords, page=page,
                    options=current_options) %}
                    <input type="radio" id="radio_{{ option_name }}{{ loop.index0 }}" name="{{ option_name }}"
                           value="{{ option_content }}" data-url="{{ url }}">
                    <label for="radio_{{ option_name }}{{ loop.index0 }}">{{ option_content }}</label>
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
        </div>
        <div class="col-md-6">
            <h2>{{product_info.Title}}</h2>
            <h4>Price: {{product_info.Price}}</h4>
            <h4>Rating: {{product_info.Rating}}</h4>
            <div class="row top-buffer">
                <div class="col-sm-3" name="description">
                    <form method="post"
                          action="{{ url_for('item_sub_page', session_id=session_id, asin=asin, keywords=keywords, page=page, sub_page='Description', options=options) }}">
                        <button class="btn btn-primary" type="submit">Description</button>
                    </form>
                </div>
                <div class="col-sm-3" name="bulletpoints">
                    <form method="post"
                          action="{{ url_for('item_sub_page', session_id=session_id, asin=asin, keywords=keywords, page=page, sub_page='Features', options=options) }}">
                        <button class="btn btn-primary" type="submit">Features</button>
                    </form>
                </div>
                <div class="col-sm-3" name="reviews">
                    <form method="post"
                          action="{{ url_for('item_sub_page', session_id=session_id, asin=asin, keywords=keywords, page=page, sub_page='Reviews', options=options) }}">
                        <button class="btn btn-primary" type="submit">Reviews</button>
                    </form>
                </div>
                {% if show_attrs %}
                <div class="col-sm-3" name="attributes">
                    <form method="post"
                          action="{{ url_for('item_sub_page', session_id=session_id, asin=asin, keywords=keywords, page=page, sub_page='Attributes', options=options) }}">
                        <button class="btn btn-primary" type="submit">Attributes</button>
                    </form>
                </div>
                {% endif %}
            </div>
        </div>
        <h3 id="progress_reward">Your progress score (min 0.0, max 1.0)
            <pre>{{ progress_reward }}</pre>
        </h3>
        <div class="col-sm-2">
            <div class="row top-buffer">
                <form method="post" action="{{url_for('done', session_id=session_id, asin=asin, options=options )}}">
                    <button type="submit" class="btn btn-lg purchase">Buy Now</button>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(document).ready(function () {
        $('input:radio').each(function () {
            //console.log($(this).val());
            let options = JSON.parse(`{{ options | tojson }}`);
            let optionValues = $.map(options, function (value, key) {
                return value
            });
            //console.log(optionValues);
            if (optionValues.includes($(this).val())) {
                $(this).prop('checked', true);

                let option_to_image = JSON.parse(`{{ product_info.option_to_image | tojson }}`);
//          console.log($(this).val());
//          console.log(options);
//          console.log(option_to_image);
                let image_url = option_to_image[$(this).val()];

                //console.log(image_url);
                if (image_url) {
                    $("#product-image").attr("src", image_url);
                }
            }

            // reload with updated options
            this.addEventListener("click", function () {
                window.location.href = this.dataset.url;
            });

        });
    });
</script>
</html>