<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-warning bg-gradient text-white py-3 d-flex justify-content-between align-items-center">
        <h5 class="mb-0 fw-semibold">
            <i class="isax isax-timer me-2"></i>
            {Lang::T('Expiring Subscriptions Overview')}
        </h5>
        <div>
            <span class="badge bg-danger me-2">{$totalExpired|default:0} {Lang::T('Expired')}</span>
            <span class="badge bg-warning">{$totalExpiring|default:0} {Lang::T('Expiring Soon')}</span>
        </div>
    </div>

    <!-- Expired Customers Section -->
    <div class="card-body p-0">
        {if $expired}
            <div class="p-3 bg-light border-bottom">
                <h6 class="mb-0 fw-semibold text-danger">
                    <i class="isax isax-close-circle me-2"></i>
                    {Lang::T('Expired Customers')}
                </h6>
            </div>
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="py-3 px-4">
                                <select class="form-select form-select-sm border-0 bg-transparent" style="width: auto; min-width: 150px;"
                                    onchange="changeExpiredDefault(this)">
                                    <option value="username" {if $cookie['expdef'] == 'username'}selected{/if}>
                                        {Lang::T('Username')}
                                    </option>
                                    <option value="fullname" {if $cookie['expdef'] == 'fullname'}selected{/if}>
                                        {Lang::T('Full Name')}
                                    </option>
                                    <option value="phone" {if $cookie['expdef'] == 'phone'}selected{/if}>
                                        {Lang::T('Phone')}
                                    </option>
                                    <option value="email" {if $cookie['expdef'] == 'email'}selected{/if}>
                                        {Lang::T('Email')}
                                    </option>
                                </select>
                            </th>
                            <th class="py-3 px-4">{Lang::T('Created / Expired')}</th>
                            <th class="py-3 px-4">{Lang::T('Package')}</th>
                            <th class="py-3 px-4">{Lang::T('Router')}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {foreach $expired as $expired_customer}
                            {assign var="rem_exp" value="{$expired_customer['expiration']} {$expired_customer['time']}"}
                            {assign var="rem_started" value="{$expired_customer['recharged_on']} {$expired_customer['recharged_time']}"}
                            <tr>
                                <td class="px-4 py-3">
                                    <a href="{Text::url('customers/view/')}{$expired_customer['id']}" class="text-decoration-none fw-semibold">
                                        {if $cookie['expdef'] == 'fullname' && $expired_customer['fullname']}
                                            {$expired_customer['fullname']}
                                        {elseif $cookie['expdef'] == 'phone' && $expired_customer['phonenumber']}
                                            {$expired_customer['phonenumber']}
                                        {elseif $cookie['expdef'] == 'email' && $expired_customer['email']}
                                            {$expired_customer['email']}
                                        {else}
                                            {$expired_customer['username']}
                                        {/if}
                                    </a>
                                    {if $cookie['expdef'] != 'username' && $expired_customer['username']}
                                        <br><small class="text-muted">{$expired_customer['username']}</small>
                                    {/if}
                                </td>
                                <td class="px-4 py-3">
                                    <span class="badge bg-light text-muted me-1" data-bs-toggle="tooltip" 
                                          data-bs-placement="top" title="{Lang::dateAndTimeFormat($expired_customer['recharged_on'],$expired_customer['recharged_time'])}">
                                        <i class="isax isax-calendar-1 me-1"></i>{Lang::timeElapsed($rem_started)}
                                    </span>
                                    <span class="text-muted">/</span>
                                    <span class="badge bg-danger bg-gradient text-white ms-1" data-bs-toggle="tooltip" 
                                          data-bs-placement="top" title="{Lang::dateAndTimeFormat($expired_customer['expiration'],$expired_customer['time'])}">
                                        <i class="isax isax-timer me-1"></i>{Lang::timeElapsed($rem_exp)}
                                    </span>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="badge bg-primary bg-gradient">{$expired_customer['namebp']}</span>
                                </td>
                                <td class="px-4 py-3">
                                    <i class="isax isax-location me-1 text-muted"></i>
                                    <span class="text-muted">{$expired_customer['routers']}</span>
                                </td>
                            </tr>
                        {/foreach}
                    </tbody>
                </table>
            </div>
        {/if}

        <!-- Expiring Soon Section -->
        {if $expiringSoon}
            <div class="p-3 bg-light border-bottom {if $expired}border-top{/if}">
                <h6 class="mb-0 fw-semibold text-warning">
                    <i class="isax isax-warning-2 me-2"></i>
                    {Lang::T('Expiring in Next 7 Days')}
                </h6>
            </div>
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="py-3 px-4">{Lang::T('Customer')}</th>
                            <th class="py-3 px-4">{Lang::T('Created / Expires')}</th>
                            <th class="py-3 px-4">{Lang::T('Package')}</th>
                            <th class="py-3 px-4">{Lang::T('Router')}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {foreach $expiringSoon as $expiring}
                            {assign var="rem_exp" value="{$expiring['expiration']} {$expiring['time']}"}
                            {assign var="rem_started" value="{$expiring['recharged_on']} {$expiring['recharged_time']}"}
                            {assign var="days_left" value={(strtotime($expiring['expiration']) - time()) / 86400}
                            <tr>
                                <td class="px-4 py-3">
                                    <a href="{Text::url('customers/view/')}{$expiring['id']}" class="text-decoration-none fw-semibold">
                                        {if $expiring['fullname']}
                                            {$expiring['fullname']}
                                        {else}
                                            {$expiring['username']}
                                        {/if}
                                    </a>
                                    <br>
                                    <small class="text-muted">{$expiring['username']}</small>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="badge bg-light text-muted me-1" data-bs-toggle="tooltip" 
                                          data-bs-placement="top" title="{Lang::dateAndTimeFormat($expiring['recharged_on'],$expiring['recharged_time'])}">
                                        <i class="isax isax-calendar-1 me-1"></i>{Lang::timeElapsed($rem_started)}
                                    </span>
                                    <span class="text-muted">/</span>
                                    {if $days_left <= 1}
                                        <span class="badge bg-danger bg-gradient text-white ms-1" data-bs-toggle="tooltip" 
                                              data-bs-placement="top" title="{Lang::dateAndTimeFormat($expiring['expiration'],$expiring['time'])}">
                                            <i class="isax isax-timer me-1"></i>{$days_left|ceil} {Lang::T('day left')}
                                        </span>
                                    {elseif $days_left <= 3}
                                        <span class="badge bg-warning bg-gradient text-white ms-1" data-bs-toggle="tooltip" 
                                              data-bs-placement="top" title="{Lang::dateAndTimeFormat($expiring['expiration'],$expiring['time'])}">
                                            <i class="isax isax-timer me-1"></i>{$days_left|ceil} {Lang::T('days left')}
                                        </span>
                                    {else}
                                        <span class="badge bg-success bg-gradient text-white ms-1" data-bs-toggle="tooltip" 
                                              data-bs-placement="top" title="{Lang::dateAndTimeFormat($expiring['expiration'],$expiring['time'])}">
                                            <i class="isax isax-timer me-1"></i>{$days_left|ceil} {Lang::T('days left')}
                                        </span>
                                    {/if}
                                </td>
                                <td class="px-4 py-3">
                                    <span class="badge bg-info bg-gradient">{$expiring['namebp']}</span>
                                </td>
                                <td class="px-4 py-3">
                                    <i class="isax isax-location me-1 text-muted"></i>
                                    <span class="text-muted">{$expiring['routers']}</span>
                                </td>
                            </tr>
                        {/foreach}
                    </tbody>
                </table>
            </div>
        {/if}

        <!-- Empty State - Only show if both sections are empty -->
        {if !$expired && !$expiringSoon}
            <div class="p-4 text-center text-muted">
                <i class="isax isax-tick-circle fs-1 mb-3 d-block text-success"></i>
                <p class="mb-2 fw-semibold">{Lang::T('All subscriptions are up to date')}</p>
                <p class="mb-0 small">{Lang::T('No expired or expiring customers found')}</p>
            </div>
        {/if}
    </div>

    <!-- Footer with Action Buttons (only show if there are records) -->
    {if $totalExpired > 0 || $totalExpiring > 0}
        <div class="card-footer bg-light p-3">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    {if $totalExpired > 0}
                        <a href="{Text::url('customers&expired=yes')}" class="btn btn-sm btn-outline-danger me-2">
                            <i class="isax isax-close-circle me-1"></i>
                            {Lang::T('View All Expired')} ({$totalExpired})
                        </a>
                    {/if}
                    {if $totalExpiring > 0}
                        <a href="{Text::url('customers&expiring=7')}" class="btn btn-sm btn-outline-warning">
                            <i class="isax isax-warning-2 me-1"></i>
                            {Lang::T('View Expiring Soon')} ({$totalExpiring})
                        </a>
                    {/if}
                </div>
            </div>
        </div>
    {/if}
</div>

<script>
    function changeExpiredDefault(fl) {
        setCookie('expdef', fl.value, 365);
        setTimeout(() => {
            location.reload();
        }, 1000);
    }
</script>