<!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>Customers - 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">
</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">
        <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 Reminder System</h1><span>Company Admin</span></div>
            </div>
            <nav class="sidebar-nav">
                <div class="nav-section">
                    <div class="nav-section-title">Main</div>
                    <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>
                </div>
                <div class="nav-section">
                    <div class="nav-section-title">Management</div>
                    <a href="{{ @BASE_PATH }}/company/staff" 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg><span>Staff</span></a>
                    <a href="{{ @BASE_PATH }}/company/customers" 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="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg><span>Customers</span></a>
                    <a href="{{ @BASE_PATH }}/company/domains" 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 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z" /></svg><span>Domains</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="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" /></svg><span>Services</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>Reminders</span></a>
                </div>
            </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">Company 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"><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">Customers</h1>
                </div>
                <div class="header-right">
                    <button class="btn btn-primary" data-modal="add-customer-modal">
                        <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="M12 4v16m8-8H4" /></svg>
                        Add Customer
                    </button>
                </div>
            </header>
            
            <div class="content-area page-transition">
                <div class="glass-card" style="padding: 0; overflow: hidden;">
                    <table class="data-table">
                        <thead><tr><th>Name</th><th>Email</th><th>Phone</th><th>Address</th><th>Actions</th></tr></thead>
                        <tbody>
                            <repeat group="{{ @customersList }}" value="{{ @customer }}">
                                <tr data-id="{{ @customer.id }}">
                                    <td>{{ @customer.name }}</td>
                                    <td>{{ @customer.email }}</td>
                                    <td>{{ @customer.phone }}</td>
                                    <td>{{ @customer.address }}</td>
                                    <td>
                                        <div class="action-buttons">
                                            <button class="btn btn-danger btn-sm btn-icon" onclick="deleteCustomer({{ @customer.id }})" title="Delete">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </repeat>
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>
    
    <div id="add-customer-modal" class="modal-overlay">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">Add New Client</h3>
            <button class="modal-close">&times;</button>
        </div>

        <form id="add-customer-form">
            <div class="modal-body">

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

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

                <div class="form-group">
                    <label class="form-label">Phone Number</label>
                    <input type="tel" name="phone" class="form-input" placeholder="Enter Contact Number" required>
                </div>

                <div class="form-group">
                    <label class="form-label">Company / Address</label>
                    <textarea name="address" class="form-input" rows="2" placeholder="Enter Company Name or Address"></textarea>
                </div>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary modal-cancel">Cancel</button>
                <button type="submit" class="btn btn-primary">Add Client</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>
        document.getElementById('add-customer-form').addEventListener('submit', async function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const data = Object.fromEntries(formData);
            try {
                const response = await API.customers.create(data);
                if (response.success) { showToast('Customer added successfully', 'success'); setTimeout(() => location.reload(), 1000); }
            } catch (error) { showToast(error.message || 'Failed to add customer', 'error'); }
        });
        
        async function deleteCustomer(id) {
            if (!confirm('Are you sure you want to delete this customer?')) return;
            try {
                const response = await API.customers.delete(id);
                if (response.success) { showToast('Customer deleted', 'success'); document.querySelector(`tr[data-id="${id}"]`).remove(); }
            } catch (error) { showToast(error.message || 'Failed to delete customer', 'error'); }
        }
    </script>
</body>
</html>
