

<!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>Admin - Inway Reminder System</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">
    <link rel="stylesheet" href="{{ @ASSET_PATH }}/css/mobile.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <style>

/* ============================= */
/* EXISTING DESKTOP STYLES       */
/* ============================= */

.stat-card-new {
    background: white;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}

.stat-card-new:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.stat-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon-circle.blue { background: #dbeafe; color: #3b82f6; }
.stat-icon-circle.yellow { background: #fef3c7; color: #f59e0b; }
.stat-icon-circle.orange { background: #ffedd5; color: #f97316; }
.stat-icon-circle.green { background: #d1fae5; color: #10b981; }

.stat-info h3 {
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 4px;
    font-weight: 500;
}

.stat-info p {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.chart-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.chart-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 20px;
}

.quick-actions {
    margin-top: 32px;
}

.quick-actions h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 16px;
}

.quick-actions-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.quick-action-btn {
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.quick-action-btn:hover {
    transform: translateY(-2px);
}

.quick-action-btn.blue { background: #3b82f6; color: white; }
.quick-action-btn.red { background: #ef4444; color: white; }
.quick-action-btn.green { background: #22c55e; color: white; }
.quick-action-btn.orange { background: #f97316; color: white; }

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-user-info {
    text-align: right;
}

.header-user-info .name {
    font-weight: 600;
    color: #111827;
    font-size: 0.875rem;
}

.header-user-info .role {
    font-size: 0.75rem;
    color: #6b7280;
}

.header-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
}


/* ============================= */
/* RESPONSIVE IMPROVEMENTS ONLY  */
/* Desktop Layout NOT AFFECTED   */
/* ============================= */

@media (max-width: 1024px) {

    .grid.grid-4 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .grid[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {

    .grid.grid-4 {
        grid-template-columns: 1fr;
    }

    .stat-card-new {
        padding: 18px;
        border-radius: 14px;
    }

    .stat-icon-circle {
        width: 48px;
        height: 48px;
    }

    .stat-info h3 {
        font-size: 0.7rem;
    }

    .stat-info p {
        font-size: 1.5rem;
    }

    .chart-card {
        padding: 18px;
    }

    .quick-actions-grid {
        flex-direction: column;
    }

    .quick-action-btn {
        width: 100%;
        justify-content: center;
        font-size: 0.85rem;
    }

    .header-user-info {
        display: none;
    }

    .header-user-avatar {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 480px) {

    .stat-card-new {
        padding: 16px;
    }

    .stat-icon-circle {
        width: 42px;
        height: 42px;
    }

    .stat-info p {
        font-size: 1.4rem;
    }

    .quick-action-btn {
        padding: 10px 14px;
        font-size: 0.8rem;
    }

    .chart-card h3,
    .quick-actions h3 {
        font-size: 0.9rem;
    }

    .page-title {
        font-size: 1rem;
    }
}

</style>
</head>
<body>
    <check if="{{ @is_impersonating }}">
        <true>
            <div style="background: linear-gradient(90deg, #7c3aed, #6d28d9); color: white; padding: 12px 20px; text-align: center; font-weight: 500;">
                You are viewing as {{ @user.name }}. 
                <a href="{{ @BASE_PATH }}/super-admin/return" style="color: #fbbf24; text-decoration: underline; margin-left: 10px;">Return to Super Admin</a>
            </div>
        </true>
    </check>

    <div class="app-container">
        <div class="sidebar-overlay" onclick="toggleSidebar()"></div>

        <aside class="sidebar">
            <div class="sidebar-header">
                <img src="{{ @ASSET_PATH }}/images/logo.png" alt="Logo" class="sidebar-logo" onerror="this.style.display='none'">
                <div class="sidebar-brand">
                    <h1>INWAY Service Hub</h1>
                </div>
            </div>
            
            <nav class="sidebar-nav">

                <a href="{{ @BASE_PATH }}/company" class="nav-item active">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                    </svg>
                    <span>Dashboard</span>
                </a>

                <a href="{{ @BASE_PATH }}/company/services" class="nav-item">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    <span>Client Subscriptions</span>
                </a>

                <a href="{{ @BASE_PATH }}/company/reminders" class="nav-item">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                    </svg>
                    <span>Renewal Management</span>
                </a>

                <a href="{{ @BASE_PATH }}/company/settings" class="nav-item">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                    <span>System Settings</span>
                </a>

            </nav>
            
            
            
     <div class="sidebar-footer">
    <div class="user-info">
        <div class="user-avatar">{{ substr(@user.name, 0, 1) }}</div>
        <div class="user-details">
            <div class="user-name">{{ @user.name }}</div>
            <div class="user-role">Service Admin</div>
        </div>
    </div>
    <a href="{{ @BASE_PATH }}/logout" class="btn btn-secondary btn-sm" style="width: 100%; margin-top: 12px;">Sign Out</a>
</div>
</aside>

<main class="main-content">
    <header class="header">
        <div class="header-left">
            <button class="menu-toggle" onclick="toggleSidebar()">
                <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>
            <div>
                <div style="font-size: 0.875rem; color: #6b7280;">{{ @company.name }}</div>
                <h1 class="page-title" style="margin: 0;">Service Dashboard</h1>
            </div>
        </div>
        <div class="header-right">
            <div class="header-user">
                <div class="header-user-info">
                    <div class="name">{{ @user.name }}</div>
                    <div class="role">Service Admin ({{ @company.name }})</div>
                </div>
                <div class="header-user-avatar">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                    </svg>
                </div>
                <a href="{{ @BASE_PATH }}/logout" title="Sign Out" style="color: #6b7280;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                    </svg>
                </a>
            </div>
        </div>
    </header>

    <div class="content-area page-transition">
        <div class="grid grid-4">

            <!-- TOTAL DOMAINS -->
            <div class="stat-card-new slide-in-up stagger-1">
                <div class="stat-icon-circle 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="M8 7h12M4 17h16" />
                    </svg>
                </div>
                <div class="stat-info">
                    <h3>Total Domains</h3>
                    <p>{{ @stats.total_vehicles }}</p>
                </div>
            </div>

            <!-- RENEWALS THIS MONTH -->
            <div class="stat-card-new slide-in-up stagger-2">
                <div class="stat-icon-circle yellow">
                    <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="M8 7V3m8 4V3m-9 8h10" />
                    </svg>
                </div>
                <div class="stat-info">
                    <h3>Renewals This Month</h3>
                    <p>{{ @stats.due_this_month }}</p>
                </div>
            </div>

            <!-- OVERDUE RENEWALS -->
            <div class="stat-card-new slide-in-up stagger-3">
                <div class="stat-icon-circle 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 9v2m0 4h.01" />
                    </svg>
                </div>
                <div class="stat-info">
                    <h3>Overdue Renewals</h3>
                    <p>{{ @stats.overdue_reminders }}</p>
                </div>
            </div>

            <!-- SERVICES COMPLETED -->
            <div class="stat-card-new slide-in-up stagger-4">
                <div class="stat-icon-circle 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-4" />
                    </svg>
                </div>
                <div class="stat-info">
                    <h3>Services Completed This Month</h3>
                    <p>{{ @stats.completed_this_month }}</p>
                </div>
            </div>
        </div>

        <!-- CHART SECTION -->
        <div class="grid" style="grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px;">
            <div class="chart-card slide-in-up">
                <h3>Domain Renewals - Month on Month</h3>
                <canvas id="vehiclesDueChart" height="200"></canvas>
            </div>
            <div class="chart-card slide-in-up">
                <h3>Services Completed - Month on Month</h3>
                <canvas id="jobsCompletedChart" height="200"></canvas>
            </div>
        </div>

        <!-- QUICK ACTIONS -->
        <div class="quick-actions slide-in-up">
            <h3>Quick Actions</h3>
            <div class="quick-actions-grid">
                <a href="{{ @BASE_PATH }}/company/services?action=add" class="quick-action-btn blue">Add New Subscription</a>
                <a href="{{ @BASE_PATH }}/company/reminders?filter=today" class="quick-action-btn red">Renewals Today</a>
                <a href="{{ @BASE_PATH }}/company/reminders?queue=whatsapp" class="quick-action-btn green">WhatsApp Renewal Queue</a>
                <a href="{{ @BASE_PATH }}/company/reminders?queue=call" class="quick-action-btn orange">Client Follow-up Queue</a>
            </div>
        </div>
    </div>
</main>
    </div>
    
    <div class="toast-container"></div>
    <script src="{{ @ASSET_PATH }}/js/app.js"></script>
    <script>

const sidebar = document.querySelector('.sidebar');
const overlay = document.querySelector('.sidebar-overlay');

/* ==============================
   SAFE SIDEBAR TOGGLE
============================== */

function toggleSidebar() {
    if (!sidebar || !overlay) {
        console.warn('Sidebar elements missing');
        return;
    }

    sidebar.classList.toggle('open');
    overlay.classList.toggle('open');
}

/* ==============================
   AUTO BIND AFTER DOM READY
============================== */

document.addEventListener('DOMContentLoaded', function () {

    const menuBtn = document.querySelector('.menu-toggle');

    if (menuBtn) {
        menuBtn.addEventListener('click', function () {
            toggleSidebar();
        });
    }

    if (overlay) {
        overlay.addEventListener('click', function () {
            toggleSidebar();
        });
    }

});

/* ==============================
   AUTO CLOSE ON DESKTOP RESIZE
============================== */

window.addEventListener('resize', function () {
    if (window.innerWidth > 768) {
        sidebar?.classList.remove('open');
        overlay?.classList.remove('open');
    }
});

/* ==============================
   CHART SECTION (UNCHANGED)
============================== */

const vehiclesDueData = {{ @chartData.vehiclesDue | raw }};
const jobsCompletedData = {{ @chartData.jobsCompleted | raw }};
const months = {{ @chartData.months | raw }};

new Chart(document.getElementById('vehiclesDueChart'), {
    type: 'bar',
    data: {
        labels: months,
        datasets: [{
            label: 'Renewals',
            data: vehiclesDueData,
            backgroundColor: '#3b82f6',
            borderRadius: 4
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { display: true, position: 'bottom' } },
        scales: { y: { beginAtZero: true } }
    }
});

new Chart(document.getElementById('jobsCompletedChart'), {
    type: 'bar',
    data: {
        labels: months,
        datasets: [{
            label: 'Completed',
            data: jobsCompletedData,
            backgroundColor: '#10b981',
            borderRadius: 4
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { display: true, position: 'bottom' } },
        scales: { y: { beginAtZero: true } }
    }
});

</script>
    
</body>
</html>


