<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <title>Subscriptions - TyreCare 360</title>
    <link rel="stylesheet" href="{{ @ASSET_PATH }}/css/variables.css">
    <link rel="stylesheet" href="{{ @ASSET_PATH }}/css/base.css">
    <link rel="stylesheet" href="{{ @ASSET_PATH }}/css/layout.css">
    <link rel="stylesheet" href="{{ @ASSET_PATH }}/css/components.css">
    <link rel="stylesheet" href="{{ @ASSET_PATH }}/css/animations.css">
</head>
<body>
    <div class="app-container">
        <include href="super-admin/_sidebar.html" />
        
        <main class="main-content">
            <header class="header">
                <div class="header-left">
                    <button class="menu-toggle">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                    </button>
                    <h1 class="page-title">Subscription Management</h1>
                </div>
            </header>
            
            <div class="content-area page-transition">
                <div class="grid grid-4" style="margin-bottom: 24px;">
                    <div class="glass-card stat-card">
                        <div class="stat-icon green">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <div class="stat-content">
                            <h3>{{ @stats.active }}</h3>
                            <p>Active Subscriptions</p>
                        </div>
                    </div>
                    <div class="glass-card stat-card">
                        <div class="stat-icon orange">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <div class="stat-content">
                            <h3>{{ @stats.expiring_soon }}</h3>
                            <p>Expiring in 30 Days</p>
                        </div>
                    </div>
                    <div class="glass-card stat-card">
                        <div class="stat-icon red">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                            </svg>
                        </div>
                        <div class="stat-content">
                            <h3>{{ @stats.expired }}</h3>
                            <p>Expired</p>
                        </div>
                    </div>
                    <div class="glass-card stat-card">
                        <div class="stat-icon blue">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" />
                            </svg>
                        </div>
                        <div class="stat-content">
                            <h3>{{ @stats.trial }}</h3>
                            <p>Trial Accounts</p>
                        </div>
                    </div>
                </div>
                
                <div class="glass-card" style="padding: 0; overflow: hidden;">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>Company</th>
                                <th>Plan</th>
                                <th>Status</th>
                                <th>Joined Date</th>
                                <th>Expiry Date</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <repeat group="{{ @companies }}" value="{{ @company }}">
                                <tr data-id="{{ @company.id }}">
                                    <td>
                                        <div style="font-weight: 600;">{{ @company.name }}</div>
                                        <div style="font-size: 12px; color: var(--text-muted);">{{ @company.email }}</div>
                                    </td>
                                    <td>
                                        <check if="{{ @company.subscription_plan == 'premium' }}">
                                            <true><span class="badge badge-purple">Premium</span></true>
                                            <false>
                                                <check if="{{ @company.subscription_plan == 'basic' }}">
                                                    <true><span class="badge badge-info">Basic</span></true>
                                                    <false><span class="badge badge-secondary">Trial</span></false>
                                                </check>
                                            </false>
                                        </check>
                                    </td>
                                    <td>
                                        <check if="{{ @company.subscription_status == 'active' }}">
                                            <true><span class="badge badge-success">Active</span></true>
                                            <false>
                                                <check if="{{ @company.subscription_status == 'expired' }}">
                                                    <true><span class="badge badge-danger">Expired</span></true>
                                                    <false><span class="badge badge-warning">Suspended</span></false>
                                                </check>
                                            </false>
                                        </check>
                                    </td>
                                    <td>{{ @company.joined_date ? date('M d, Y', strtotime(@company.joined_date)) : date('M d, Y', strtotime(@company.created_at)) }}</td>
                                    <td class="{{ @company.is_expired ? 'text-danger' : (@company.is_expiring_soon ? 'text-warning' : '') }}">
                                        {{ @company.subscription_expiry ? date('M d, Y', strtotime(@company.subscription_expiry)) : 'Not Set' }}
                                    </td>
                                    <td>
                                        <div class="action-buttons">
                                            <button class="btn btn-primary btn-sm" onclick="editSubscription({{ @company.id }}, '{{ @company.name }}', '{{ @company.subscription_plan }}', '{{ @company.subscription_status }}', '{{ @company.subscription_expiry }}')" title="Edit Subscription">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                                </svg>
                                            </button>
                                            <button class="btn btn-success btn-sm" onclick="renewSubscription({{ @company.id }})" title="Renew for 1 Year">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                                                </svg>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </repeat>
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>
    
    <div id="edit-subscription-modal" class="modal-overlay">
        <div class="modal">
            <div class="modal-header">
                <h3 class="modal-title">Edit Subscription</h3>
                <button class="modal-close">&times;</button>
            </div>
            <form id="edit-subscription-form">
                <input type="hidden" name="company_id" id="edit-company-id">
                <div class="modal-body">
                    <p style="margin-bottom: 16px; color: var(--text-secondary);" id="edit-company-name"></p>
                    <div class="form-group">
                        <label class="form-label">Subscription Plan</label>
                        <select name="plan" id="edit-plan" class="form-input">
                            <option value="trial">Trial</option>
                            <option value="basic">Basic</option>
                            <option value="premium">Premium</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Status</label>
                        <select name="status" id="edit-status" class="form-input">
                            <option value="active">Active</option>
                            <option value="suspended">Suspended</option>
                            <option value="expired">Expired</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Expiry Date</label>
                        <input type="date" name="expiry_date" id="edit-expiry" class="form-input">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary modal-cancel">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
    
    <div class="toast-container"></div>
    <script src="{{ @ASSET_PATH }}/js/app.js"></script>
    <script src="{{ @ASSET_PATH }}/js/api.js"></script>
    <script src="{{ @ASSET_PATH }}/js/ui.js"></script>
    <script>
        function editSubscription(id, name, plan, status, expiry) {
            document.getElementById('edit-company-id').value = id;
            document.getElementById('edit-company-name').textContent = name;
            document.getElementById('edit-plan').value = plan || 'trial';
            document.getElementById('edit-status').value = status || 'active';
            document.getElementById('edit-expiry').value = expiry || '';
            document.getElementById('edit-subscription-modal').classList.add('active');
        }
        
        document.getElementById('edit-subscription-form').addEventListener('submit', async function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const data = Object.fromEntries(formData);
            
            try {
                const response = await fetch('{{ @BASE_PATH }}/api/subscriptions/' + data.company_id, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(data)
                });
                const result = await response.json();
                if (result.success) {
                    showToast('Subscription updated successfully', 'success');
                    setTimeout(() => location.reload(), 1000);
                } else {
                    showToast(result.message || 'Failed to update subscription', 'error');
                }
            } catch (error) {
                showToast('Failed to update subscription', 'error');
            }
        });
        
        async function renewSubscription(id) {
            if (!confirm('Renew this subscription for 1 year from today?')) return;
            
            try {
                const response = await fetch('{{ @BASE_PATH }}/api/subscriptions/' + id + '/renew', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' }
                });
                const result = await response.json();
                if (result.success) {
                    showToast('Subscription renewed for 1 year', 'success');
                    setTimeout(() => location.reload(), 1000);
                } else {
                    showToast(result.message || 'Failed to renew subscription', 'error');
                }
            } catch (error) {
                showToast('Failed to renew subscription', 'error');
            }
        }
    </script>
</body>
</html>
