{% include 'header.twig' %}

<style>
/* Font Icon */
.table a span{
 display:none;
}

/* Import Google Fonts */
@import url("//fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

/* Balance Unknowndown  toggle */
.sidebar-block__top div .navbar .navbar-collapse .d-flex .navbar-nav-currencies .balance-dropdown-container .balance-dropdown .balance-dropdown__toggle{
 font-family:'Nunito' !important;
}

/* Balance Unknowndown  toggle */
.navbar-nav-currencies .balance-dropdown .balance-dropdown__toggle{
 font-family:'Nunito', sans-serif;
}

/* Button */
.nav-pills .nav-item .btn-big-primary{
 font-family:'Nunito', sans-serif;
}

/* Nav link */
.nav-pills .nav-item .nav-link{
 font-family:'Nunito', sans-serif;
}

/* Wrapper content */
.wrapper-sidebar-navbar .wrapper-content{
 font-family:'Nunito', sans-serif !important;
}
/* List */
#block_82 .sidebar-block__left ul{
 font-family:'Nunito';
 transform:translatex(0px) translatey(0px);
}

/* Link */
.sidebar-block__left-menu .component-sidebar__menu-item-active a{
 font-family:'Nunito', sans-serif;
}

/* Link */
.sidebar-block__left-menu li a{
 font-family:'Nunito', sans-serif !important;
}
.data-tippy-content {
     font-family:'Nunito', sans-serif;
}
/* Button */
.table tr .btn-big-primary{
 position:relative;
 top:10px;
}
/* Button */
.input-group .input-group-append .btn-big-primary{
 box-shadow:2px 0px 10px -3px rgba(25,121,200,0) !important;
}
.completion-time {
    font-size: 0.9em; /* Smaller font size */
    color: #888; /* Lighter color */
    margin-top: 5px;
}

</style>
<style>.body .btn-big-primary {margin-top: 0px;padding-top: 11px;padding-bottom: 11px;}</style>
 <div class="wrapper-content">
    <div class="wrapper-content__header">
          </div>
    <div class="wrapper-content__body">
      <!-- Main variables *content* -->
      <div id="block_99">
    <div class="orders-history ">
        <div class="bg"></div>
        <div class="divider-top"></div>
        <div class="divider-bottom"></div>
        <div class="container-fluid">
        {% if contentText %}
<div class="card mt-2 mb-3">
{{ contentText }}
</div>
{% endif %}
            <div class="row">
                <div class="col">
                    <div class="orders-history__margin-tab">
                        <div class="component_status_tabs">
                            <div class="">
      <ul class="nav nav-pills tab ">
      
        <li class="nav-item" >
        <a {% if 'all' == status %}  class="btn btn-big-primary" style="width:100%;text-align:left;" {% endif %} class="nav-link" href="orders">All</a>
        </li>
        <li class="nav-item"><a {% if 'pending' == status %}  class="btn btn-big-primary" style="width:100%;text-align:left;" {% endif %} class="nav-link" href="orders/pending">{{ lang['orders.status.pending'] }}</a></li>
        <li class="nav-item"><a {% if 'inprogress' == status %}  class="btn btn-big-primary" style="width:100%;text-align:left;" {% endif %} class="nav-link" href="orders/inprogress">{{ lang['orders.status.inprogress'] }}</a></li>
        <li class="nav-item"><a {% if 'completed' == status %}  class="btn btn-big-primary" style="width:100%;text-align:left;" {% endif %} class="nav-link" href="orders/completed">{{ lang['orders.status.completed'] }}</a></li>
        <li class="nav-item"><a {% if 'partial' == status %}  class="btn btn-big-primary" style="width:100%;text-align:left;" {% endif %} class="nav-link" href="orders/partial">{{ lang['orders.status.partial'] }}</a></li>
        <li class="nav-item"><a {% if 'processing' == status %}  class="btn btn-big-primary" style="width:100%;text-align:left;" {% endif %} class="nav-link" href="orders/processing">{{ lang['orders.status.processing'] }}</a></li>
        <li class="nav-item"><a {% if 'canceled' == status %}  class="btn btn-big-primary" style="width:100%;text-align:left;" {% endif %} class="nav-link" href="orders/canceled">{{ lang['orders.status.canceled'] }}</a></li>
       
      </ul><br>
           <div class="row">
                <div class="col-12">
                    <div class="orders-history__margin-search component_card">
                        <div class="card">
                            <div class="component_form_group component_button_search">
                                <div class="">
                                    <form action="" method="get" id="history-search">
                                        <div class="input-group">
                                            <input type="text" name="search" class="form-control" value="{{ search }}" placeholder="Search">
                                            <div class="input-group-append">
                                                <button class="btn btn-big-primary" type="submit" style="box-shadow: 2px 0px 10px -3px #1979c8;">
                                                    <span class="fas fa-search"></span>
                                                </button>
                                            </div>
                                        </div>
                                        
                                    </form>
                                </div>
                             </div>
                        </div>
                    </div>
                    
                </div>
                <!-- Copy and Refill Buttons -->
<div class="container-fluid" id="actionButtons" style="display: none;">
    <button id="copySelectedBtn" class="btn btn-big-primary">Copy Selected Order IDs</button>
    <button id="refillSelectedBtn" class="btn btn-big-primary">Refill Selected Orders</button>
</div>
            </div>
            <br>
     <div class="row">
                <div class="col">
                    <div class="orders-history__margin-table">
                        <div class="table-bg component_table ">
                            <div class="table-wr table-responsive">
        <table class="table ">
          <thead>
            <tr>
              <th><input type="checkbox" id="selectAll"></th>
              <th>{{ lang['orders.id'] }}</th>
              <th>{{ lang['orders.date'] }}</th>
              <th width="20%">{{ lang['orders.link'] }}</th>
              <th>{{ lang['orders.charge'] }}</th>
              <th class="nowrap">{{ lang['orders.start.count'] }}</th>
              <th>{{ lang['orders.quantity'] }}</th>
              <th width="20%">{{ lang['orders.service'] }}</th>
              <th>Status</th>
              <th>Remains</th>
<th></th>
            </tr>
          </thead>
          <tbody>

            {% for order in orders %}
              <tr>
<td><input type="checkbox" class="orderCheckbox" value="{{ order['id'] }}"></td>
<td>
<span id="order-{{ order['id'] }}">{{ order['id'] }}</span>
                                        <a>
                                            <span
                                                data-clip="true"
                                                title="Order Id copied"
                                                data-clipboard-action="copy"
                                                data-clipboard-target="#order-{{ order['id'] }}"
                                                class="fas fa-clone"></span>
                                        </a><a href="neworder?category_id={{ order['category_id'] }}&service_id={{ order['service_id'] }}" >Reorder</a>

                                        
{% if order['order_where'] == "api"  %}<a class="btn btn-big-primary">Api</a>{% endif %} </td>
                <td>{{ order['date'] }}</td>
                <td width="20%"><a target="_blank" href="{{ order['link'] }}">{{ order['link'] }}</a></td>
<td><div style="width:90px;">{{order["charge"]}}</div></td>
                <td class="nowrap">{{ order['start_count'] }}</td>
                <td>{{ order['quantity'] }}</td>
                <td><div  style="width:300px;">{{ order['service_id'] }} - {{ order['service'] }}</div></td>
             <td>
    {{ order['status'] }}<br>
    
    {% if settings['order_completion_time'] == 2 and settings['order_completion_visibility'] in ['both', 'users'] %}
        <span class="completion-time">{{ order['completion_time'] }}</span>
    {% endif %}
</td>
                
                <td>{{ order['remains'] }}</td>
<td>
{% if order["refillButton"] == "2" %}
{% if order['status'] == "Completed"  %}

{% if order['show_refill'] == "true"  %}
<a class="btn btn-big-primary" href="orders/refill/{{order['id']}}" class="btn btn-sm refill-button">Refill</a>
<br><br>
{% endif %}
{% endif %}
{% endif %}
{% if order["refillButton"] == "3" %}

{% if order['status'] == "Completed"  %}

{% if order['show_refill'] == "true"  %}
  <button data-tippy-content="Refill will be available in {{order['refillTimeLeft']}}" class="btn btn-big-primary">Refill</button>
{% endif %}
{% endif %}
{% endif %}
{% if order["refillButton"] == "4" %}



{% if order['status'] == "Completed"  %}

{% if order['show_refill'] == "true"  %}
<button type="button" class="btn btn-big-primary" disabled="true">{{"Refilling"}}</button>
{% endif %}
{% endif %}
{% endif %}

{% if order['cancelButton']   == true %}
         


                   <a href="orders/cancel/{{order['id']}}" class="btn btn-big-primary">Cancel</a>
               {% endif %}

                 </td>
              </tr>
            {% endfor %}

          </tbody>
        </table>
      </div>
<br>
      {% if pagination["count"] > 1 %}
        <ul class="pagination">

          {% if pagination["current"] != 1 %}
            <li>
              <a class="btn btn-big-primary" href="orders/{{ status }}/{{ pagination["previous"] }}{% if search %}?search={{ search }}{% endif %}" aria-label="Previous">
                <span aria-hidden="true">«</span>
              </a>
            </li>
          {% endif %}

          {% set r, l = 3, 3 %}

          {% if pagination['current'] == 1 %}
            {% set r = 7 %}
          {% endif %}

          {% if pagination['current'] == 2 %}
            {% set r = 5 %}
          {% endif %}

          {% if pagination['current'] >= pagination['count'] %}
            {% set l = 5 %}
          {% endif %}

          {% for page in 1..pagination["count"] %}
            {% if page >= (pagination['current']-l) and page <= (pagination['current']+r) %}
              <li{% if page == pagination['current'] %} class="active" {%endif%}><a class="btn btn-big-primary" 
 href="orders/{{ status }}/{{ page }}{% if search %}?search={{ search }}{% endif %}">{{ page }}</a></li>
            {%endif%}
          {% endfor %}

          {% if pagination['current'] < pagination['count'] %}
            <li>
              <a class="btn btn-big-primary" href="orders/{{ status }}/{{ pagination['next'] }}{% if search %}?search={{ search }}{% endif %}" aria-label="Next">
                <span aria-hidden="true">»</span>
              </a>
            </li>
          {% endif %}

        </ul>
      {% endif %}

    </div>
   </div></div>
   </div></div></div></div></div>
   </div</div></div>
   </div></div></div>
   </div>
 <div class="divider-top"></div>
        <div class="divider-bottom"></div>
        <div class="container-fluid">
 {% if contentText2 %}
 <div class="card mb-4">	
{{ contentText2 }}
</div>
{% endif %}
</div>



{% include 'footer.twig' %}

<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectAllCheckbox = document.getElementById('selectAll');
    const orderCheckboxes = document.querySelectorAll('.orderCheckbox');
    const copySelectedBtn = document.getElementById('copySelectedBtn');
    const refillSelectedBtn = document.getElementById('refillSelectedBtn');
    const actionButtons = document.getElementById('actionButtons');

    function updateActionButtonsVisibility() {
        const anyChecked = Array.from(orderCheckboxes).some(checkbox => checkbox.checked);
        actionButtons.style.display = anyChecked ? 'block' : 'none';
    }

    selectAllCheckbox.addEventListener('change', function() {
        orderCheckboxes.forEach(checkbox => {
            checkbox.checked = selectAllCheckbox.checked;
        });
        updateActionButtonsVisibility();
    });

    orderCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', updateActionButtonsVisibility);
    });

    copySelectedBtn.addEventListener('click', function() {
        const selectedOrderIds = Array.from(orderCheckboxes)
            .filter(checkbox => checkbox.checked)
            .map(checkbox => checkbox.value)
            .join(', ');

        navigator.clipboard.writeText(selectedOrderIds).then(() => {
            alert('Order IDs copied to clipboard: ' + selectedOrderIds);
        }).catch(err => {
            console.error('Failed to copy: ', err);
        });
    });

    refillSelectedBtn.addEventListener('click', function(event) {
        event.preventDefault(); // Prevent the default action (page refresh)

        const selectedOrderIds = Array.from(orderCheckboxes)
            .filter(checkbox => checkbox.checked)
            .map(checkbox => checkbox.value);

        if (selectedOrderIds.length > 0) {
            fetch('orders/refill_multiple', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ orderIds: selectedOrderIds })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Selected orders are being refilled.');
                } else {
                    alert('Failed to refill selected orders.');
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        } else {
            alert('No orders selected for refill.');
        }
    });
});
</script>