<!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>Settings - 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>

/* ================= EXISTING STYLES – CLEANED & SAFE ================= */

.settings-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.settings-tab {
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #e5e7eb;
    color: #374151;
}

.settings-tab:hover {
    background: #d1d5db;
}

.settings-tab.active {
    background: #FD4326;
    color: #ffffff;
}

.settings-panel {
    display: none;
}

.settings-panel.active {
    display: block;
}

.settings-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.875rem;
    transition: border-color 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: #FD4326;
}

.form-hint {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 4px;
}

.file-input-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.file-input-btn {
    padding: 8px 16px;
    background: #FD4326;
    color: #ffffff;
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    border: none;
}

.staff-form {
    background: #f9fafb;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
}

.staff-form h4 {
    margin-bottom: 16px;
    font-size: 1rem;
    font-weight: 600;
}

.staff-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.team-section h4 {
    margin-bottom: 16px;
    font-size: 1rem;
    font-weight: 600;
}

.team-table {
    width: 100%;
    border-collapse: collapse;
}

.team-table th {
    text-align: left;
    padding: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
}

.team-table td {
    padding: 12px;
    font-size: 0.875rem;
    border-bottom: 1px solid #f3f4f6;
}

.status-active {
    display: inline-block;
    padding: 4px 12px;
    background: #d1fae5;
    color: #059669;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-inactive {
    display: inline-block;
    padding: 4px 12px;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

/* ======================================================
   🔥 MOBILE RESPONSIVE – CLEAN & SAFE
   ✔ No toggle conflict
   ✔ No z-index conflict
   ✔ Proper stacking
====================================================== */

@media (max-width: 768px) {

    /* Prevent overlay from blocking header clicks */
    .sidebar-overlay {
        z-index: 900;
    }

    .sidebar {
        z-index: 1000;
    }

    .header {
        position: relative;
        z-index: 1100;
    }

    /* Tabs */
    .settings-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .settings-tab {
        width: 100%;
        font-size: 0.75rem;
        padding: 10px;
    }

    /* Card padding reduced */
    .settings-card {
        padding: 16px;
        border-radius: 12px;
    }

    /* Staff form single column */
    .staff-form-grid {
        grid-template-columns: 1fr;
    }

    /* File input stack */
    .file-input-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    /* Touch friendly inputs */
    .form-input {
        font-size: 16px; /* Prevent iOS zoom */
        padding: 12px;
    }

    /* Table mobile scroll safe */
    .team-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Improve spacing */
    .staff-form {
        padding: 16px;
    }

}

</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="Inway Logo" class="sidebar-logo" onerror="this.style.display='none'">
        <div class="sidebar-brand">
            <h1>Inway Hosting</h1>
        </div>
    </div>
    
    <nav class="sidebar-nav">

        <a href="{{ @BASE_PATH }}/company" 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="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>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 Reminders</span>
        </a>

        <a href="{{ @BASE_PATH }}/company/settings" 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="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>Account 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">Inway Admin</div>
            </div>
        </div>
        <a href="{{ @BASE_PATH }}/logout" class="btn btn-secondary btn-sm" style="width: 100%; margin-top: 12px;">Logout</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>
            <h1 class="page-title">Account Settings</h1>
        </div>
    </header>
    
    <div class="content-area page-transition">

        <div class="settings-tabs">
            <button class="settings-tab active" onclick="showTab('business')">Company Profile</button>
            <button class="settings-tab" onclick="showTab('reminders')">Notification Templates</button>
            <button class="settings-tab" onclick="showTab('staff')">Team Management</button>
        </div>

        <!-- ================= COMPANY PROFILE ================= -->

        <div id="business-panel" class="settings-panel active">
            <div class="settings-card">

                <div style="background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px; padding: 16px; margin-bottom: 24px;">
                    <h4 style="color: #0369a1; margin-bottom: 8px; font-size: 0.9rem;">About Company Profile</h4>
                    <p style="color: #0c4a6e; font-size: 0.85rem; margin: 0;">
                        Your company details will appear in invoices, renewal reminders, subscription alerts and customer communications.
                        Keep this updated for professional branding.
                    </p>
                </div>

                <form id="business-form">
                    <div class="form-group">
                        <label class="form-label">Company Name</label>
                        <input type="text" class="form-input" name="business_name" value="{{ @company.name }}">
                        <div class="form-hint">Displayed in renewal emails and invoices.</div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Company Logo</label>
                        <div class="file-input-wrapper">
                            <label class="file-input-btn">
                                Choose File
                                <input type="file" name="logo" style="display: none;" accept="image/*">
                            </label>
                            <span id="file-name">No file chosen</span>
                        </div>
                        <div class="form-hint">Used for invoices, reports and portal branding.</div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Office Address</label>
                        <textarea class="form-input" name="address" rows="3">{{ @company.address }}</textarea>
                        <div class="form-hint">Your registered office address.</div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Support WhatsApp Number</label>
                        <input type="tel" class="form-input" name="whatsapp_number" value="{{ @company.phone }}">
                        <div class="form-hint">Clients can contact this number for hosting support.</div>
                    </div>

                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </form>
            </div>
        </div>

        <!-- ================= NOTIFICATION TEMPLATES ================= -->

        <div id="reminders-panel" class="settings-panel">
            <div class="settings-card">

                <div style="background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px; padding: 16px; margin-bottom: 24px;">
                    <h4 style="color: #92400e; margin-bottom: 8px; font-size: 0.9rem;">Template Placeholders</h4>
                    <p style="color: #78350f; font-size: 0.85rem; margin: 0;">
                        Use these placeholders in your templates. They will be replaced automatically when sending renewal notifications:
                    </p>
                    <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;">
                        <code style="background: #fef9c3; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem;">{client_name}</code>
                        <code style="background: #fef9c3; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem;">{domain}</code>
                        <code style="background: #fef9c3; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem;">{plan}</code>
                        <code style="background: #fef9c3; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem;">{expiry_date}</code>
                        <code style="background: #fef9c3; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem;">{amount}</code>
                    </div>
                </div>

                <form id="templates-form">

                    <div class="form-group">
                        <label class="form-label">WhatsApp Renewal Template</label>
                        <textarea class="form-input template-textarea" name="whatsapp" rows="4" style="min-height: 100px;">
Hi {client_name}, your domain {domain} under {plan} will expire on {expiry_date}. Kindly renew to avoid service interruption. Thank you.
                        </textarea>
                        <div class="form-hint">Used when sending WhatsApp renewal reminders.</div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Email / Call Script Template</label>
                        <textarea class="form-input template-textarea" name="sms" rows="4" style="min-height: 100px;">
Dear {client_name}, this is a reminder that your hosting plan for {domain} will expire on {expiry_date}. Please renew at the earliest to ensure uninterrupted service.
                        </textarea>
                        <div class="form-hint">Use this when calling or emailing clients.</div>
                    </div>

                    <button type="submit" class="btn btn-primary">Save Templates</button>
                </form>
            </div>
        </div>

        <!-- ================= TEAM MANAGEMENT ================= -->

        <div id="staff-panel" class="settings-panel">
            <div class="settings-card">

                <div class="staff-form">
                    <h4>Add Team Member</h4>

                    <form id="add-staff-form">
                        <div class="staff-form-grid">

                            <div class="form-group">
                                <label class="form-label">Name</label>
                                <input type="text" class="form-input" name="name" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label">Email</label>
                                <input type="email" class="form-input" name="email" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label">Role</label>
                                <select class="form-input" name="role">
                                    <option value="staff">Support Executive</option>
                                    <option value="manager">Account Manager</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label class="form-label">Password</label>
                                <input type="password" class="form-input" name="password" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label">Phone</label>
                                <input type="tel" class="form-input" name="phone" placeholder="e.g., +91 9876543210">
                            </div>

                        </div>

                        <div class="checkbox-group" style="margin-bottom: 16px;">
                            <input type="checkbox" name="is_active" id="is_active" checked>
                            <label for="is_active">Active</label>
                        </div>

                        <button type="submit" class="btn btn-primary">Add Team Member</button>
                    </form>
                </div>

                <div class="team-section">
                    <h4>Team Members</h4>
                    <div class="table-wrapper">
                        <table class="team-table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Role</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody id="staff-list">
                                <tr>
                                    <td colspan="4" style="text-align: center; color: #6b7280;">
                                        Loading team members...
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>

    </div>
</main>
    </div>
    
    <script>

const BASE_PATH = '{{ @BASE_PATH }}';

/* ==============================
   SIDEBAR TOGGLE (FIXED SAFE)
================================ */

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

    if (!sidebar || !overlay) return;

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

/* ==============================
   PASSWORD TOGGLE (UNCHANGED)
================================ */

function togglePassword(inputId, btn) {
    const input = document.getElementById(inputId);
    if (!input) return;

    if (input.type === 'password') {
        input.type = 'text';
        btn.innerHTML = `
            <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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
            </svg>`;
    } else {
        input.type = 'password';
        btn.innerHTML = `
            <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
            </svg>`;
    }
}

/* ==============================
   TAB SWITCHING (FIXED)
================================ */

function showTab(tab, el) {

    document.querySelectorAll('.settings-tab').forEach(t =>
        t.classList.remove('active')
    );

    document.querySelectorAll('.settings-panel').forEach(p =>
        p.classList.remove('active')
    );

    if (el) el.classList.add('active');

    const panel = document.getElementById(tab + '-panel');
    if (panel) panel.classList.add('active');

    if (tab === 'staff') {
        loadStaff();
    }
}

/* ==============================
   LOAD STAFF (UNCHANGED)
================================ */

async function loadStaff() {
    try {
        const response = await fetch(BASE_PATH + '/api/company/staff');
        const data = await response.json();

        if (data.success && data.staff) {
            const tbody = document.getElementById('staff-list');
            if (!tbody) return;

            if (data.staff.length === 0) {
                tbody.innerHTML =
                    '<tr><td colspan="4" style="text-align:center;color:#6b7280;">No staff members found</td></tr>';
            } else {
                tbody.innerHTML = data.staff.map(s => `
                    <tr>
                        <td>${s.name}</td>
                        <td>${s.email}</td>
                        <td>${s.role || 'Staff'}</td>
                        <td>
                            <span class="${s.is_active ? 'status-active' : 'status-inactive'}">
                                ${s.is_active ? 'Active' : 'Inactive'}
                            </span>
                        </td>
                    </tr>
                `).join('');
            }
        }
    } catch (error) {
        console.error('Error loading staff:', error);
    }
}

/* ==============================
   DOM READY SAFE INIT
================================ */

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

    /* Fix file input */
    const logoInput = document.querySelector('input[name="logo"]');
    if (logoInput) {
        logoInput.addEventListener('change', function(e) {
            const fileName = document.getElementById('file-name');
            if (fileName)
                fileName.textContent =
                    e.target.files[0]?.name || 'No file chosen';
        });
    }

    /* Fix tab clicks */
    document.querySelectorAll('.settings-tab').forEach(tab => {
        tab.addEventListener('click', function () {
            const tabName = this.textContent.toLowerCase().includes('team')
                ? 'staff'
                : this.textContent.toLowerCase().includes('notification')
                ? 'reminders'
                : 'business';

            showTab(tabName, this);
        });
    });

});

/* ==============================
   TOAST (UNCHANGED)
================================ */

function showToast(message, type = 'info') {
    const container = document.querySelector('.toast-container');
    if (!container) return;

    const toast = document.createElement('div');
    toast.className = 'toast toast-' + type;
    toast.textContent = message;

    toast.style.cssText =
        'padding:12px 20px;border-radius:8px;color:white;margin-bottom:8px;' +
        'animation:slideIn 0.3s ease;background:' +
        (type === 'success'
            ? '#22c55e'
            : type === 'error'
            ? '#ef4444'
            : '#FD4326');

    container.appendChild(toast);
    setTimeout(() => toast.remove(), 3000);
}

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