{% extends 'base.html.twig' %}
{% set titleName = "Converty Configuration" %}
{% block title %} POWER DATA | {{titleName}} {% endblock %}
{% block page %}{{titleName}}{% endblock %}
{% block breadcrumb %} {% if titleName != "Home" %} {{titleName}} {% endif %} {% endblock %}

{% block content %}
    <section class="content">
        <div class="container-fluid">
            {% for message in app.flashes('success') %}
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>{{ message }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            {% endfor %}
            {% for message in app.flashes('error') %}
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <strong>{{ message }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            {% endfor %}
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">

                    <div class="card">
                        <!-- /.card-header -->
                        <div class="card-body">

                            {{ form_start(form) }}
                            <fieldset class="form-group">
                                <div class="form-row ">
                                    <legend>Configuration for API</legend>
                                <div class="form-group col-4">
                                    <label for="admin_create_account_firstname">Client Id</label>
                                    {{ form_widget(form.clientId) }}
                                </div>
                                <div class="form-group col-4">
                                    <label for="admin_create_account_lastname">Client Secret</label>
                                    {{ form_widget(form.clientSecret) }}
                                </div>
                                <div class="form-group col-4 ">
                                    <label class=" " for="role" >Authorization Code</label>
                                    {{ form_widget(form.authorizationCode) }}
                                </div>
                                <div class="form-group col-12  col-md-12 ">
                                    <label for="admin_create_account_firstname">Refresh Token</label>
                                    {{ form_widget(form.refreshToken) }}
                                </div>
                                <div class="form-group col-12  col-md-12 ">
                                    <label for="admin_create_account_firstname">Token</label>
                                    {{ form_widget(form.token) }}
                                </div>
                                <div class="form-group col-4    ">
                                    <label for="admin_create_account_firstname">Max Orders Per Page</label>
                                    {{ form_widget(form.maxOrdersPerPage) }}
                                </div>
                                <div class="form-group col-4   ">
                                    <label for="admin_create_account_firstname">Filter Status</label>
                                    {{ form_widget(form.filterStatus) }}
                                </div>
                                <div class="form-group col-4   ">
                                    <label for="admin_create_account_firstname">Status Out</label>
                                    {{ form_widget(form.statusOut) }}
                                </div>
                               </div>
                            </fieldset>
                            {{ form_end(form) }}


                            <div class="row">
                                <div class="col-6">
                                    {% if converty.expiresAt is not null %}
                                        {% set issuedAt = "now"|date('U') %} {# current timestamp in seconds #}
                                        {% set expiresIn = converty.expiresAt %}
                                        {% set expiresAt = issuedAt + expiresIn %}
                                        {% set remainingDays = ((expiresAt - issuedAt) / 86400) | round(0, 'floor') %}
                                        <h4>
                                            Token expires on: {{ expiresAt|date('Y-m-d') }}<br>
                                            You have {{ remainingDays }} day{{ remainingDays > 1 ? 's' : '' }} left.
                                        </h4>
                                    {% else %}
                                        <p>No expiration date available.</p>
                                    {% endif %}
                                </div>
                                <div class="col-6">
                                    <a href="{{ path('app_converty_update_token') }}" class="btn btn-success">Update Access Tokens</a>
                                    {% if app.request.scheme ~ '://' ~ app.request.host == 'http://walid.jumia' %}
                                        <a href="{{ path('app_converty_import_data') }}" class="btn btn-primary">Update Local Data</a>
                                    {% endif %}
                                    <button id="connectConverty" class="btn btn-warning">Update ALL Tokens</button>
                                    <script>
                                        $('#connectConverty').on('click', function () {
                                            // Redirect user to Converty OAuth Login
                                            window.location.href = "{{ path('app_converty_redirect') }}";
                                        });
                                    </script>
                                </div>

                            </div>
                        </div>


                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
{% endblock %}

{% block script %}


    <!-- Select2 -->
    <script src="{{ asset('assets/plugins/select2/js/select2.full.min.js' ) }} "></script>
    <!-- Bootstrap4 Duallistbox -->
    <script src="{{ asset('assets/plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js' ) }} "></script>
    <script>
        $('.selectCanal option:first-child').html('Please choice one');
        //Bootstrap Duallistbox
        //  var box = $('.duallistbox').bootstrapDualListbox()
    </script>


    <!-- date-range-picker -->
    <script src="{{ asset('assets/plugins/daterangepicker/daterangepicker.js' ) }} "></script>
    <script src="{{ asset('assets/plugins/chart.js/Chart.min.js' ) }} "></script>

    <script>
        $(function () {
            $('.select2').select2()
            /* bug display none Select shipper then option*/
            $(".select2 option[data-status='0']").prop("disabled", true);

            //Initialize Select2 Elements
            $('.select2bs4').select2({
                theme: 'bootstrap4'
            })

        });
    </script>

    <script>
        function copyToClipboard(input) {
            // Copy text (fallback method)
            const textarea = document.createElement('textarea');
            textarea.value = input.value;
            document.body.appendChild(textarea);
            textarea.select();
            textarea.setSelectionRange(0, 99999);
            document.execCommand('copy');
            document.body.removeChild(textarea);

            // Show temporary message
            let msg = document.createElement('span');
            msg.textContent = 'Copied!';
            msg.style.position = 'absolute';
            msg.style.background = '#28a745';
            msg.style.color = 'white';
            msg.style.padding = '3px 8px';
            msg.style.borderRadius = '4px';
            msg.style.fontSize = '12px';
            msg.style.zIndex = '9999';

            // Position message near the input
            const rect = input.getBoundingClientRect();
            msg.style.top = rect.top - 2 + 'px';
            msg.style.left = rect.left + 'px';
            document.body.appendChild(msg);

            // Remove message after 1.5 seconds
            setTimeout(() => {
                document.body.removeChild(msg);
            }, 1500);//1500
        }
    </script>

{% endblock %}