<!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>Staff Dashboard - 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/mobile.css">
    <style>
/* =====================================================
   STAFF HEADER
===================================================== */
.staff-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: white;
    border-bottom: 1px solid #e5e7eb;
}

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

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

.company-name {
    font-weight: 600;
    color: #374151;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-avatar-sm {
    width: 32px;
    height: 32px;
    background: #FD4326;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

/* =====================================================
   SIDEBAR
===================================================== */
.staff-sidebar {
    width: 220px;
    background: #FD4326;
    min-height: 100vh;
    padding: 20px 0;
}

.staff-brand {
    padding: 0 20px 20px;
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
}

.staff-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: all 0.2s;
}

.staff-nav a:hover,
.staff-nav a.active {
    background: rgba(255,255,255,0.1);
    color: white;
}

.staff-nav a svg {
    width: 20px;
    height: 20px;
}

/* =====================================================
   SEARCH & ACTIONS
===================================================== */
.search-box {
    display: flex;
    align-items: center;
    background: #f3f4f6;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 24px;
}

.search-box input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    font-size: 14px;
}

.action-btns {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.action-btns .btn {
    flex: 1;
    padding: 14px;
    font-size: 14px;
}

.btn-add {
    background: #3b82f6;
    color: white;
}

.btn-edit-service {
    background: white;
    border: 2px solid #22c55e;
    color: #22c55e;
}

/* =====================================================
   REMINDER LIST
===================================================== */
.reminder-list {
    margin-top: 24px;
}

.reminder-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: white;
    border-radius: 8px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.reminder-info h4 {
    font-weight: 600;
    margin-bottom: 4px;
}

.reminder-info p {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 2px;
}

.reminder-info .due-date {
    color: #dc2626;
    font-size: 13px;
}

.reminder-actions {
    display: flex;
    gap: 8px;
}

.btn-whatsapp {
    background: #22c55e;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
}

.btn-call {
    background: #dc2626;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
}

.btn-mark-sent {
    background: white;
    border: 1px solid #d1d5db;
    color: #374151;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
}

/* =====================================================
   SIDEBAR OVERLAY
===================================================== */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99;
    pointer-events: none;
}

.sidebar-overlay.active,
.sidebar-overlay.open {
    display: block;
    pointer-events: auto;
}

/* =====================================================
   MOBILE MENU BUTTON
===================================================== */
.mobile-menu-toggle {
    display: none;
    background: #FD4326;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* =====================================================
   ✅ MOBILE-ONLY FIX (DESKTOP REMOVED)
===================================================== */
@media (max-width: 768px) {

    html, body {
        overflow-x: hidden !important;
    }

    /* Remove desktop flex layout */
    body > div[style*="display: flex"] {
        flex-direction: column !important;
    }

    /* Sidebar becomes drawer */
    .staff-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 240px;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 100;
    }

    .staff-sidebar.open {
        transform: translateX(0);
    }

    .mobile-menu-toggle {
        display: block;
    }

    /* Content full width */
    body > div > div[style*="flex: 1"] {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Header adjustments */
    .staff-header {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 8px;
        position: sticky;
        top: 0;
        z-index: 90;
    }

    .staff-header-left {
        flex: 1;
    }

    .staff-header-right {
        width: 100%;
        justify-content: space-between;
        font-size: 12px;
        flex-wrap: wrap;
    }

    /* Buttons stack */
    .action-btns {
        flex-direction: column;
    }

    /* Reminder cards */
    .reminder-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .reminder-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .reminder-actions button,
    .reminder-actions a {
        flex: 1;
        min-width: 100px;
        text-align: center;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Main padding + title */
    main {
        max-width: 100% !important;
        padding: 12px !important;
    }

    h1 {
        font-size: 1.25rem !important;
    }
}
</style>

</head>
<body style="background: #f9fafb;">

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

    <check if="{{ @is_impersonating }}">
        <true>
            <div style="background: linear-gradient(90deg, #FD4326, #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 style="display: flex;">

        <!-- STAFF SIDEBAR -->
        <aside class="staff-sidebar" id="sidebar">

            <div class="staff-brand">
                Inway Service Hub
            </div>

            <nav class="staff-nav">

                <a href="{{ @BASE_PATH }}/staff" class="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 7" />
                    </svg>
                    Dashboard Overview
                </a>

                <a href="{{ @BASE_PATH }}/staff/services">
                    <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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2" />
                    </svg>
                    Service Plans & Assets
                </a>

                <a href="{{ @BASE_PATH }}/staff/reminders">
                    <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 17h5" />
                    </svg>
                    Renewal Alerts
                </a>

            </nav>

        </aside>
        
        <div style="flex: 1;">

    <header class="staff-header">
        <div class="staff-header-left">
            <button class="mobile-menu-toggle" onclick="toggleSidebar()">&#9776;</button>
            <span class="company-name">{{ @company.name ?? 'INWAY Service Hub' }}</span>
        </div>

        <div class="staff-header-right">
            <div class="user-profile">
                <span style="font-size: 14px;">{{ @user.name }}</span>
                <span style="font-size: 12px; color: #6b7280;">
                    Service Executive ({{ @company.name ?? '' }})
                </span>
                <div class="user-avatar-sm">{{ substr(@user.name, 0, 1) }}</div>
            </div>
            <a href="{{ @BASE_PATH }}/logout" style="color: #6b7280; font-size: 14px;">Logout</a>
        </div>
    </header>

    <main style="padding: 24px; max-width: 1200px;">

        <h1 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 24px;">
            INWAY Operations Dashboard
        </h1>

        <div class="search-box">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="#9ca3af" style="margin-right: 12px;">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
            <input type="text" id="search-input" placeholder="Search Domain / Asset ID / Client Name..." oninput="filterReminders()">
        </div>

        <div class="action-btns">
            <a href="{{ @BASE_PATH }}/staff/services?action=add" class="btn btn-add">
                Add Service / Subscription
            </a>
            <a href="{{ @BASE_PATH }}/staff/services" class="btn btn-edit-service">
                Manage Service Records
            </a>
        </div>

        <h3 style="font-size: 1rem; font-weight: 600; margin-bottom: 16px; color: #374151;">
            Today’s Expiring / Overdue Subscriptions
        </h3>

        <div class="reminder-list" id="reminder-list">

            <check if="{{ count(@pendingReminders) > 0 }}">
                <true>

                    <repeat group="{{ @pendingReminders }}" value="{{ @reminder }}">
                        <div class="reminder-item"
                             data-id="{{ @reminder.id }}"
                             data-search="{{ strtolower(@reminder.registration_number . ' ' . @reminder.customer_name) }}">

                            <div class="reminder-info">

                                <h4>
                                    {{ @reminder.registration_number }}
                                    <span style="font-weight: 400; color: #6b7280;">
                                        ({{ @reminder.make }} - {{ @reminder.model }})
                                    </span>
                                </h4>

                                <p>
                                    {{ @reminder.customer_name }} - {{ @reminder.customer_phone }}
                                </p>

                                <p class="due-date">
                                    Renewal Date: {{ @reminder.next_service_date }}
                                </p>

                            </div>

                            <div class="reminder-actions">
                                <button class="btn-whatsapp"
                                    onclick="sendWhatsApp({{ @reminder.id }}, '{{ @reminder.customer_phone }}', '{{ @reminder.customer_name }}', '{{ @reminder.registration_number }}', '{{ @reminder.service_type }}')">
                                    Send Renewal WhatsApp
                                </button>

                                <button class="btn-call"
                                    onclick="logCall({{ @reminder.id }})">
                                    Log Client Call
                                </button>

                                <button class="btn-mark-sent"
                                    onclick="markSent({{ @reminder.id }})">
                                    Mark as Renewed
                                </button>
                            </div>

                        </div>
                    </repeat>

                </true>

                <false>
                    <div style="text-align: center; padding: 40px; color: #6b7280;">
                        No pending renewals today
                    </div>
                </false>
            </check>

        </div>

    </main>
</div>


    </div>
    
    <div class="toast-container" id="toast-container"></div>
    
    <script>
        const BASE_PATH = '{{ @BASE_PATH }}';
        
        function toggleSidebar() {
            document.getElementById('sidebar').classList.toggle('open');
            document.getElementById('sidebar-overlay').classList.toggle('active');
        }
        
        function filterReminders() {
            const search = document.getElementById('search-input').value.toLowerCase();
            document.querySelectorAll('.reminder-item').forEach(item => {
                const text = item.dataset.search || '';
                item.style.display = text.includes(search) ? 'flex' : 'none';
            });
        }
        
        function showToast(message, type = 'info') {
            const container = document.getElementById('toast-container');
            const toast = document.createElement('div');
            toast.className = 'toast ' + type;
            toast.textContent = message;
            container.appendChild(toast);
            setTimeout(() => toast.remove(), 3000);
        }
        
        async function sendWhatsApp(id, phone, name, domain, service) {
            const message = encodeURIComponent(`Hi ${name}, this is a reminder for your domain ${domain}. Your ${service} service is due. Please visit us at your earliest convenience.`);
            const cleanPhone = phone.replace(/\D/g, '');
            window.open(`https://wa.me/${cleanPhone}?text=${message}`, '_blank');
            
            try {
                await fetch(BASE_PATH + '/api/reminders/' + id + '/whatsapp', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' }
                });
                showToast('WhatsApp opened', 'success');
            } catch (error) {
                console.error('Error logging WhatsApp:', error);
            }
        }
        
        async function logCall(id) {
            const notes = prompt('Enter call notes:');
            if (notes === null) return;
            
            try {
                const response = await fetch(BASE_PATH + '/api/reminders/' + id + '/call', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ notes })
                });
                const result = await response.json();
                if (result.success) {
                    showToast('Call logged successfully', 'success');
                } else {
                    showToast(result.message || 'Failed to log call', 'error');
                }
            } catch (error) {
                showToast('Failed to log call', 'error');
            }
        }
        
        async function markSent(id) {
            try {
                const response = await fetch(BASE_PATH + '/api/reminders/' + id + '/sent', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' }
                });
                const result = await response.json();
                if (result.success) {
                    showToast('Marked as sent', 'success');
                    document.querySelector(`.reminder-item[data-id="${id}"]`).remove();
                } else {
                    showToast(result.message || 'Failed to mark as sent', 'error');
                }
            } catch (error) {
                showToast('Failed to mark as sent', 'error');
            }
        }
        
        if (window.innerWidth <= 768) {
            document.querySelector('.menu-btn').style.display = 'block';
        }
    </script>
</body>
</html>
