{% extends 'layouts/admin.twig' %}

{% block content %}
    <ul class="breadcrumbs el">
        <li><a href="/admin/">Admin</a> /</li>
        <li class="end">Subscriptions</li>
    </ul>

    <div class="content-card">
        <h1>{{ title }}</h1>

        <div class="stats-container">
            <div class="card {{ request.status is empty ? 'active' : '' }}">
                <a href="{{ route('admin-subscriptions') }}" class="stat-box ">
                    <span class="stat-label">All</span>
                    <span class="stat-value">{{ attribute(status_counts, 'all')|default(0) }}</span>
                </a>
            </div>
            {% for status in statuses %}
                <div class="card {{ request.status == status ? 'active' : '' }}">
                    <a href="{{ route('admin-subscriptions') }}?status={{ status }}" class="stat-box ">
                        <span class="stat-label">{{ status|title }}</span>
                        <span class="stat-value">{{ attribute(status_counts, status)|default(0) }}</span>
                    </a>
                </div>
            {% endfor %}
        </div>

        {% include 'admin/messages.twig' %}

        <form action="" method="GET" class="style" id="search-form">
            <fieldset class="show">
                <h1><a class="show el">Search <i class="fa fa-caret-right"></i></a></h1>
                <div class="row">
                    <label for="subscription_id">Subscription ID</label>
                    <input type="text" name="id" id="subscription_id" value="{{ request.id }}" />
                </div>
                <div class="row">
                    <label for="member_id">Member ID</label>
                    <input type="text" name="member_id" id="member_id" value="{{ request.member_id }}" />
                </div>
                <div class="row">
                    <label for="next_issue_date_start">Next Issue Date Start</label>
                    <input type="date" name="next_issue_date_start" id="next_issue_date_start" value="{{ request.next_issue_date_start }}" />
                </div>
                <div class="row">
                    <label for="next_issue_date_end">Next Issue Date End</label>
                    <input type="date" name="next_issue_date_end" id="next_issue_date_end" value="{{ request.next_issue_date_end }}" />
                </div>
                <div class="row">
                    <label for="created_at_start">Created At Start</label>
                    <input type="date" name="created_at_start" id="created_at_start" value="{{ request.created_at_start }}" />
                </div>
                <div class="row">
                    <label for="created_at_end">Created At End</label>
                    <input type="date" name="created_at_end" id="created_at_end" value="{{ request.created_at_end }}" />
                </div>
                <div class="row">
                    <label for="status">Status</label>
                    <select name="status" id="status">
                            <option value="">All</option>
                            {% for status in statuses %}
                                <option value="{{ status }}" {{ request.status == status ? 'selected' : '' }}>{{ status|title }}</option>
                            {% endfor %}
                    </select>
                </div>
                <div class="search-button">
                    <input type="submit" value="Search" class="BUTTON"/>
                </div>
                <div class="reset-button">
                    <a href="{{ route('admin-subscriptions') }}" class="BUTTON">Reset</a>
                </div>
            </fieldset>
        </form>
    </div>

    {% if subscriptions|length > 0 %}
        <div class="content-card">
            <table class="manage-items">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Items</th>
                        <th>Member</th>
                        <th>Status</th>
                        <th>Orders</th>
                        <th>Interval</th>
                        <th>#</th>
                        <th>Next Issue</th>
                        <th>Expiry</th>
                        <th>Created</th>
                        <th class="center">Actions</th>
                    </tr>
                </thead>
                <tbody class="tabular">
                    {% for subscription in subscriptions %}
                        <tr>
                            <td>{{ subscription.id }}</td>
                            <td width="200">{{ subscription.items|join('<br />')|raw }}</td>
                            <td>{{ subscription.member }}</td>
                            <td>{{ subscription.status | title }}</td>
                            <td>
                                {% for order in subscription.orders|slice(0, 2) %}
                                    <div><a target="_blank" href="/shop/admin/orders/manage.order.php?id={{ order.id }}">#{{ order.id }} | {{ order.date | date('d/m/Y H:i:s')}} | Status: {{ order.getOrderStatusTitle() | title }}</a></div>
                                {% endfor %}
                                {% if subscription.orders|length > 2 %}
                                    <div><a href="#" class="show-all-orders" data-subscription-id="{{ subscription.id }}" data-order-count="{{ subscription.orders|length }}">Show all {{ subscription.orders|length }} orders</a></div>
                                    <div id="all-orders-{{ subscription.id }}" style="display: none;">
                                        {% for order in subscription.orders|slice(2) %}
                                            <div><a target="_blank" href="/shop/admin/orders/manage.order.php?id={{ order.id }}">#{{ order.id }} | {{ order.date | date('d/m/Y H:i:s')}} | Status: {{ order.getOrderStatusTitle() | title }}</a></div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </td>
                            <td>{{ subscription.interval }}</td>
                            <td>{{ subscription.no_of_subscriptions }}</td>
                            <td>{{ subscription.next_issue_date }}</td>
                            <td>{{ subscription.expiry_date }}</td>
                            <td>{{ subscription.created_date }}</td>
                            <td class="center">
                                <a href="{{ subscription.actions.edit }}" class="edit">
                                    <i class="fa fa-pencil"></i>
                                </a>
                                <a href="{{ route('admin-subscription-logs-for-subscription', subscription.id) }}" class="edit" title="View Subscription">
                                    <i class="fa fa-eye"></i>
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>

            {% include 'navigation/pagination.twig' %}
        </div>

        <div class="content-card">
            <form action="{{ route('admin-subscriptions-export') }}" method="post" class="style">
                <fieldset class="show">
                    <h1><a class="show el">Export Subscriptions <i class="fa fa-caret-down"></i></a></h1>
                    <div class="row">Click export below to export the above subscriptions as a CSV</div>
                </fieldset>
                <div class="row">
                    <input type="hidden" name="id" value="{{ request.id }}"/>
                    <input type="hidden" name="member_id" value="{{ request.member_id }}"/>
                    <input type="hidden" name="status" value="{{ request.status }}"/>
                    <input type="hidden" name="next_issue_date_start" value="{{ request.next_issue_date_start }}"/>
                    <input type="hidden" name="next_issue_date_end" value="{{ request.next_issue_date_end }}"/>
                    <input type="submit" value="Export"/>
                </div>
            </form>
        </div>
    {% else %}
        <div class="content-card">
            <p>There were no subscriptions found matching your search criteria</p>
        </div>
    {% endif %}
{% endblock %}


{% block head %}
<style>
    .reset-button a{
        display: block;
        float: left;
        clear: none;
        text-align: center;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        background: #0e55c1;
        background: -webkit-linear-gradient(top, #0d4cb1, #0744a7);
        background: -moz-linear-gradient(top, #0d4cb1, #043e9c);
        color: #fff !important;
        border: none;
        font-size: 1.1em;
        font-family: "OpenSansSemibold";
        outline: none;
        min-width: 100px;
        width: auto;
        padding: 0 15px !important;
        margin-bottom: 5px;
        margin-right: 5px;
        height: 33px;
        line-height: 31px;
    }
    .stats-container {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
    }

    .stats-container .card {
        flex: 1;
        background: #fff;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        border: 1px solid #e0e0e0;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .stat-box {
        text-align: center;
        text-decoration: none;
        color: #333;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .card.active {
        background-color: #4a89dc;
        color: white;
        border-radius: 6px;
        padding: 10px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        transform: translateY(-2px);
    }
    .card.active a{
        color: white;
    }

    .stat-label {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .stat-value {
        font-size: 22px;
        font-weight: bold;
    }
</style>

<script>
    $(document).ready(function() {
        $('.reset-button').on('click', function(e) {
            e.preventDefault();
            $('#search-form').find('input').val('');
            $('#search-form').submit();
        });

        $('.show-all-orders').on('click', function(e) {
            e.preventDefault();

            var subscriptionId = $(this).data('subscription-id');
            var $allOrdersDiv = $('#all-orders-' + subscriptionId);

            if ($allOrdersDiv.is(':visible')) {
                $allOrdersDiv.hide();
                var orderCount = $(this).data('order-count');
                $(this).text('Show all ' + orderCount + ' orders');
            } else {
                $allOrdersDiv.show();
                $(this).text('Hide additional orders');
            }
        });
    });
</script>
{% endblock %}