<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Subscription Expired - <?= isset($site_name) ? $site_name : 'POS System'; ?></title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="<?= $theme_link; ?>bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="<?= $theme_link; ?>dist/css/AdminLTE.min.css">

    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .expired-container {
            max-width: 700px;
            margin: 20px;
        }
        .expired-box {
            background: white;
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            overflow: hidden;
        }
        .expired-header {
            background: linear-gradient(135deg, #dd4b39 0%, #c23321 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        .expired-header i {
            font-size: 80px;
            margin-bottom: 20px;
            animation: shake 0.5s;
        }
        .expired-header h2 {
            margin: 0;
            font-size: 32px;
            font-weight: 300;
        }
        .expired-body {
            padding: 40px;
        }
        .status-badge {
            display: inline-block;
            padding: 8px 20px;
            border-radius: 20px;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 12px;
            margin-top: 10px;
        }
        .status-expired {
            background: #dd4b39;
            color: white;
        }
        .status-grace {
            background: #f39c12;
            color: white;
        }
        .status-suspended {
            background: #555;
            color: white;
        }
        .details-table {
            margin-top: 30px;
            background: #f9f9f9;
            border-radius: 5px;
            overflow: hidden;
        }
        .details-table table {
            margin: 0;
        }
        .details-table th {
            background: #ecf0f5;
            font-weight: 600;
            width: 40%;
        }
        .action-buttons {
            margin-top: 30px;
            text-align: center;
        }
        .action-buttons .btn {
            margin: 5px;
            padding: 12px 30px;
            font-size: 16px;
        }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-10px); }
            75% { transform: translateX(10px); }
        }
        .contact-info {
            background: #fff3cd;
            border-left: 4px solid #f39c12;
            padding: 15px;
            margin-top: 20px;
            border-radius: 4px;
        }
        .contact-info h4 {
            margin-top: 0;
            color: #856404;
        }
    </style>
</head>
<body>
    <div class="expired-container">
        <div class="expired-box">
            <!-- Header -->
            <div class="expired-header">
                <i class="fa fa-ban"></i>
                <h2>Subscription Expired</h2>
                <p style="margin: 10px 0 0 0; font-size: 16px; opacity: 0.9;">
                    Your access has been temporarily suspended
                </p>
            </div>

            <!-- Body -->
            <div class="expired-body">
                <!-- Message -->
                <div style="text-align: center; margin-bottom: 20px;">
                    <p style="font-size: 18px; color: #333; margin-bottom: 15px;">
                        <?= isset($subscription_info['message']) ? $subscription_info['message'] : 'Your subscription has expired.'; ?>
                    </p>

                    <?php if (isset($subscription_info['status'])): ?>
                    <span class="status-badge status-<?= $subscription_info['status']; ?>">
                        <?= ucfirst(str_replace('_', ' ', $subscription_info['status'])); ?>
                    </span>
                    <?php endif; ?>
                </div>

                <!-- Subscription Details -->
                <?php if (isset($subscription_info['subscription']) && $subscription_info['subscription']):
                    $sub = $subscription_info['subscription'];
                ?>
                <div class="details-table">
                    <table class="table table-bordered" style="margin-bottom: 0;">
                        <tr>
                            <th><i class="fa fa-building-o"></i> Company Name</th>
                            <td><?= $sub->company_name; ?></td>
                        </tr>
                        <tr>
                            <th><i class="fa fa-tag"></i> Subscription Plan</th>
                            <td><?= ucfirst($sub->subscription_plan); ?></td>
                        </tr>
                        <tr>
                            <th><i class="fa fa-calendar-check-o"></i> Start Date</th>
                            <td><?= date('F d, Y', strtotime($sub->start_date)); ?></td>
                        </tr>
                        <tr>
                            <th><i class="fa fa-calendar-times-o"></i> Expiration Date</th>
                            <td><strong style="color: #dd4b39;"><?= date('F d, Y', strtotime($sub->end_date)); ?></strong></td>
                        </tr>
                        <?php if ($subscription_info['status'] === 'grace_period'): ?>
                        <tr>
                            <th><i class="fa fa-clock-o"></i> Grace Period Remaining</th>
                            <td><strong style="color: #f39c12;"><?= $subscription_info['days_remaining']; ?> day(s)</strong></td>
                        </tr>
                        <?php endif; ?>
                    </table>
                </div>
                <?php endif; ?>

                <!-- Contact Information -->
                <div class="contact-info">
                    <h4><i class="fa fa-info-circle"></i> Need to Renew?</h4>
                    <p style="margin: 10px 0;">
                        Contact our support team to renew your subscription and restore access:
                    </p>
                    <p style="margin: 5px 0;">
                        <i class="fa fa-envelope"></i>
                        <strong>Email:</strong>
                        <a href="mailto:<?= isset($support_email) ? $support_email : 'mahfuzcmt@gmail.com'; ?>">
                            <?= isset($support_email) ? $support_email : 'mahfuzcmt@gmail.com'; ?>
                        </a>
                    </p>
                    <?php if (isset($support_phone) && !empty($support_phone)): ?>
                    <p style="margin: 5px 0;">
                        <i class="fa fa-phone"></i>
                        <strong>Phone:</strong>
                        <a href="tel:<?= $support_phone; ?>"><?= $support_phone; ?></a>
                    </p>
                    <?php endif; ?>
                </div>

                <!-- Action Buttons -->
                <div class="action-buttons">
                    <a href="mailto:<?= isset($support_email) ? $support_email : 'mahfuzcmt@gmail.com'; ?>?subject=Subscription Renewal Request - <?= isset($current_tenant) ? $current_tenant : ''; ?>&body=Hello, I would like to renew my subscription.%0D%0A%0D%0ACompany: <?= isset($sub->company_name) ? $sub->company_name : ''; ?>%0D%0ATenant: <?= isset($current_tenant) ? $current_tenant : ''; ?>%0D%0A%0D%0APlease contact me to discuss renewal options."
                       class="btn btn-danger btn-lg">
                        <i class="fa fa-envelope"></i> Request Renewal
                    </a>

                    <a href="<?= base_url('logout'); ?>" class="btn btn-default btn-lg">
                        <i class="fa fa-sign-out"></i> Logout
                    </a>
                </div>

                <!-- Additional Info -->
                <div style="text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee;">
                    <p style="color: #999; font-size: 14px;">
                        <i class="fa fa-question-circle"></i>
                        Have questions? Our support team is here to help!
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="<?= $theme_link; ?>plugins/jQuery/jquery-2.2.3.min.js"></script>
    <!-- Bootstrap -->
    <script src="<?= $theme_link; ?>bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
