{% extends 'affiliate.html.twig' %}

{% block dashboard %}

    <h3 class="referral-stats-title">{{ 'Promotion Materials'|trans }}</h3>
    <div class="referral-stats-section">
        <ul class="nav nav-tabs referral-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="referred-tab" data-toggle="tab" data-target="#referred-tab-pane"
                        type="button" role="tab" aria-controls="referred-tab-pane" aria-selected="true">
                    {{ 'Text'|trans }}
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="rewards-tab" data-toggle="tab" data-target="#banner-tab-pane" type="button"
                        role="tab" aria-controls="banner-tab-pane" aria-selected="false">
                    {{ 'Banner'|trans }}
                </button>
            </li>
        </ul>

        <div class="tab-content text-tab-pane" id="myTabContent">
            <div class="tab-pane fade show active" id="referred-tab-pane" role="tabpanel" aria-labelledby="referred-tab"
                 tabindex="0">
                <table class="table table-hover referral-table">
                    <thead>
                    <tr>
                        <th>{{ 'ID'|trans }}</th>
                        <th>{{ 'Text'|trans }}</th>
                        <th>{{ 'Action'|trans }}</th>
                    </tr>
                    </thead>
                    <tbody >
                    {% for textitem in textPromotion %}
                        <tr>
                        <td>{{ textitem.id }}</td>
                        <td>{{ textitem.name }}</td>
                        <td><a class="btn btn-sm btn-pink" style="padding: 5px !important;" href="javascript:void(null)"
                               onclick="generate_link('{{ textitem.id }}','{{ app.user.id }}','text','{{ textitem.name }}','{{ textitem.id }}')">{{ 'View HTML Code'|trans }}</a>
                        </td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="tab-pane fade" id="banner-tab-pane" role="tabpanel" aria-labelledby="rewards-tab" tabindex="0">
                <hr>
                <div class="row">
                    {% for imageitem in imagePromotion %}
                        <div class="col-md-3 image-box ">
                            <a href="javascript:void(null)"
                               onclick="generate_link('{{ imageitem.id }}','{{ app.user.id }}','banner','{{ asset('/assets/images/' ~ imageitem.data) }}','{{ imageitem.id }}')">
                                <img class="image" src="{{ asset('/assets/images/' ~ imageitem.data) }}"></a>
                            <label style="color: black">{{ imageitem.name }}</label>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="generateLinkModel" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"></h5>
                    <a class="closeButton xs-btn-close" data-dismiss="modal" aria-label="Close"
                       style="cursor: pointer;">
                        <span aria-hidden="true">&times;</span>
                    </a>
                </div>
                <div class="modal-body">
                    <div class="image-container">
                        <img class="image generate_link_image" src="" style="display: none;">
                    </div>
                    <br>
                    <select id="plan-type-dropdown" class="form-control">
                        <option value="">{{ 'Select A Plan'|trans }}</option>
                        <option value="life_time_commission">{{ 'Life Time Commission'|trans }}</option>
                        <option value="temporary_commission">{{ 'Temporary Commission'|trans }}</option>
                        <option value="pps_20">{{ 'PPS 20'|trans }} (£)</option>
                    </select>
                    <br>
                    <!-- Initially hidden link URL field -->
                    <textarea id="link-url" class="form-control" readonly rows="6" style="display: none;"></textarea>
                </div>
                <div class="modal-footer">
                    <a class="btn btn-secondary" data-dismiss="modal" aria-label="Close">
                        {{ 'Close'|trans }}
                    </a>
                    <button type="button" class="btn btn-primary" id="copyButton">{{ 'Copy'|trans }}</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        function generate_link(promo_id, user_id, type = 'banner', data, id) {
            $('.modal-title').text('{{ 'Promotion Materials'|trans }} ID: ' + id);
            $('#generateLinkModel').modal('toggle');

            var baseUrl = '{{ app.request.schemeAndHttpHost }}' + '/promotion-ref';
            var generatedUrl = baseUrl + '?promotion=' + promo_id + '&referral=' + user_id;
            $('#link-url').hide();
            $('#plan-type-dropdown').val('');

            function updateLink() {
                var planType = $('#plan-type-dropdown').val();

                if (planType == null || planType == '') {
                    $('#link-url').hide();
                    return;
                }
                var newGeneratedUrl = generatedUrl + '&plan_type=' + planType;
                var linkElement = '';
                if (type == 'banner') {
                    linkElement = '<a href="' + newGeneratedUrl + '" target="_blank">' +
                        '<img src="' + data + '" alt="Promo Image" style="width: 100%; max-height: 100px; object-fit: contain;" />' +
                        '</a>';
                } else {
                    linkElement = '<a href="' + newGeneratedUrl + '" target="_blank">' + data + '</a>';
                }
                $('#link-url').show();
                $('#link-url').val(linkElement);
            }

            $('#plan-type-dropdown').change(function () {
                updateLink();
            });
        }
        document.getElementById("copyButton").addEventListener("click", function () {
            var copyText = document.getElementById("link-url");
            copyText.select();
            copyText.setSelectionRange(0, 99999);
            document.execCommand("copy");
            alert("Link copied to clipboard!");
            var originalButtonText = this.innerHTML;
            this.innerHTML = "Copied!";
            setTimeout(function () {
                document.getElementById("copyButton").innerHTML = originalButtonText;
            }, 2000);
        });

    </script>

{% endblock %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}