<!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>Service Records - 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>

<style>
/* ================= EXISTING STYLES â€“ DO NOT CHANGE ================= */

.header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit { background: #fef3c7; color: #d97706; }
.btn-edit:hover { background: #fde68a; transform: translateY(-2px); }

.btn-delete { background: #fee2e2; color: #dc2626; }
.btn-delete:hover { background: #fecaca; transform: translateY(-2px); }

.btn-whatsapp { background: #dcfce7; color: #16a34a; }
.btn-whatsapp:hover { background: #bbf7d0; transform: translateY(-2px); }

.btn-call { background: #dbeafe; color: #2563eb; }
.btn-call:hover { background: #bfdbfe; transform: translateY(-2px); }

.btn-sent { background: #ede9fe; color: #7c3aed; }
.btn-sent:hover { background: #ddd6fe; transform: translateY(-2px); }

.action-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.sent {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3);
    font-weight: 600;
}

.status-badge.completed { background: #dbeafe; color: #2563eb; }
.status-badge.pending { background: #fef3c7; color: #d97706; }
.status-badge.call-queue { background: #fee2e2; color: #dc2626; }

.service-table tr.row-sent {
    background: linear-gradient(
        90deg,
        rgba(34, 197, 94, 0.08),
        rgba(34, 197, 94, 0.03)
    );
}

.service-table tr.row-sent td {
    border-left: 3px solid #22c55e;
}

.service-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.service-table th {
    text-align: left;
    padding: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
    text-transform: uppercase;
    background: #f9fafb;
}

.service-table td {
    padding: 16px;
    font-size: 0.875rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.service-table tr:hover {
    background: rgba(124, 58, 237, 0.02);
}

.domain-cell {
    display: flex;
    flex-direction: column;
}

.domain-number {
    font-weight: 600;
    color: #111827;
}

.domain-model {
    font-size: 0.75rem;
    color: #6b7280;
}

.customer-cell {
    display: flex;
    flex-direction: column;
}

.customer-name {
    font-weight: 500;
    color: #111827;
}

.customer-phone {
    font-size: 0.75rem;
    color: #6b7280;
}

/* ================= EXISTING MOBILE (UNCHANGED) ================= */

@media (max-width: 768px) {

    .form-row {
        grid-template-columns: 1fr;
    }

    .service-table {
        display: block;
        overflow-x: auto;
    }

    .service-table th,
    .service-table td {
        min-width: 100px;
        white-space: nowrap;
    }

    .header-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .header-actions .btn span {
        display: none;
    }

    .action-buttons {
        flex-direction: column;
        gap: 4px;
    }

    .btn-icon {
        width: 32px;
        height: 32px;
    }
}


/* =========================================================
   🔥 SERVICE TABLE – PERFECT MOBILE RESPONSIVE (ADD ONLY)
   ✔ Desktop untouched
   ✔ Existing styles untouched
   ✔ No HTML change required
   ✔ Clean stacked card layout
========================================================= */

@media (max-width: 768px) {

    /* Remove horizontal scroll */
    .service-table {
        display: block;
        width: 100%;
        overflow: visible !important;
        white-space: normal !important;
    }

    /* Hide header row */
    .service-table thead {
        display: none;
    }

    /* Make tbody block */
    .service-table tbody {
        display: block;
        width: 100%;
    }

    /* Convert each row to card */
    .service-table tr {
        display: block;
        width: 100%;
        background: #ffffff;
        margin-bottom: 16px;
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }

    /* Convert cells into stacked rows */
    .service-table td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 14px 16px;
        border-bottom: 1px solid #f3f4f6;
        white-space: normal !important;
        text-align: right;
        font-size: 0.9rem;
        gap: 12px;
    }

    .service-table td:last-child {
        border-bottom: none;
    }

    /* Auto labels using nth-child */
    .service-table td:nth-child(1)::before { content: "Domain"; }
    .service-table td:nth-child(2)::before { content: "Customer"; }
    .service-table td:nth-child(3)::before { content: "Service"; }
    .service-table td:nth-child(4)::before { content: "Date"; }
    .service-table td:nth-child(5)::before { content: "Next Due"; }
    .service-table td:nth-child(6)::before { content: "Status"; }
    .service-table td:nth-child(7)::before { content: "Actions"; }

    .service-table td::before {
        font-weight: 600;
        font-size: 0.75rem;
        color: #374151;
        text-transform: uppercase;
        flex: 1;
        text-align: left;
    }

    /* Align content right */
    .domain-cell,
    .customer-cell {
        align-items: flex-end;
        text-align: right;
    }

    /* Action buttons horizontal */
    .action-buttons {
        flex-direction: row;
        justify-content: flex-end;
        gap: 6px;
    }

    .btn-icon {
        width: 34px;
        height: 34px;
    }

    /* Status badge size adjustment */
    .status-badge {
        font-size: 0.75rem;
        padding: 4px 10px;
    }
}
/* ================================================================
   ðŸ”¥ MOBILE RESPONSIVE TABLE FIX (ONLY ADDITION)
   âœ” Desktop unchanged
   âœ” Mobile = column-wise stacked layout
================================================================ */

@media (max-width: 768px) {

    /* prevent sideways scroll */
    .service-table {
        overflow: hidden;
    }

    /* hide header row */
    .service-table thead {
        display: none;
    }

    /* convert table to stacked cards */
    .service-table,
    .service-table tbody,
    .service-table tr {
        display: block;
        width: 100%;
    }

    .service-table tr {
        background: #ffffff;
        margin-bottom: 14px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    }

    .service-table td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 16px;
        border-bottom: 1px solid #f3f4f6;
        white-space: normal;
        text-align: right;
    }

    .service-table td:last-child {
        border-bottom: none;
    }

    /* labels */
    .service-table td::before {
        content: "";
        font-weight: 600;
        font-size: 0.8rem;
        color: #374151;
        text-align: left;
        flex: 1;
    }

    .service-table td:nth-child(1)::before { content: "Domain"; }
    .service-table td:nth-child(2)::before { content: "Customer"; }
    .service-table td:nth-child(3)::before { content: "Service"; }
    .service-table td:nth-child(4)::before { content: "Date"; }
    .service-table td:nth-child(5)::before { content: "Next Due"; }
    .service-table td:nth-child(6)::before { content: "Status"; }
    .service-table td:nth-child(7)::before { content: "Actions"; }

    .domain-cell,
    .customer-cell {
        align-items: flex-end;
        text-align: right;
    }

    .action-buttons {
        flex-direction: row;
        justify-content: flex-end;
        gap: 6px;
    }
}

/* =====================================================
   ðŸ”§ MOBILE BLANK PAGE FIX (CRITICAL)
   Fixes collapsed glass-card height
===================================================== */

@media (max-width: 768px) {

    /* ensure table wrapper expands */
    .table-wrapper {
        display: block;
        width: 100%;
        overflow: visible;
    }

    /* force glass-card to grow with content */
    .glass-card {
        overflow: visible !important;
        min-height: 1px;
    }

    /* safety: ensure tbody is visible */
    .service-table tbody {
        display: block;
    }
}

/* ==========================================================
   MOBILE SERVICE TABLE â€“ FINAL FIX (NO BLANK SCREEN)
   âœ” No HTML changes
   âœ” No JS changes
   âœ” Works on all phones
========================================================== */

@media (max-width: 768px) {

    /* Reset conflicting desktop behavior */
    .table-wrapper,
    .service-table {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
    }

    /* Hide table header */
    .service-table thead {
        display: none !important;
    }

    /* Force tbody to render */
    .service-table tbody {
        display: block !important;
        width: 100% !important;
    }

    /* Convert rows into cards */
    .service-table tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: 16px;
        background: #ffffff;
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
        overflow: hidden;
    }

    /* Convert cells into label-value rows */
    .service-table td {
        display: flex !important;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
        border-bottom: 1px solid #f3f4f6;
        white-space: normal !important;
        text-align: right;
        font-size: 0.9rem;
    }

    .service-table td:last-child {
        border-bottom: none;
    }

    /* Column labels */
    .service-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        color: #374151;
        text-transform: uppercase;
        flex: 1;
        text-align: left;
    }

    /* Domain & customer alignment */
    .domain-cell,
    .customer-cell {
        align-items: flex-end;
        text-align: right;
    }

    /* Status badge size */
    .status-badge {
        font-size: 0.75rem;
        padding: 4px 10px;
    }

    /* Action buttons inline */
    .action-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
    }

    .btn-icon {
        width: 34px;
        height: 34px;
    }
}



/* =========================================================
   🔥 CLEAN MOBILE RESPONSIVE (ONLY ONE BLOCK)
   ✔ Desktop untouched
   ✔ No conflicts
   ✔ No blank screen
   ✔ No horizontal scroll
========================================================= */

@media (max-width: 768px) {

    /* ===== TABLE FIX ===== */

    .service-table {
        width: 100%;
        border-collapse: collapse;
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .service-table th,
    .service-table td {
        min-width: 120px;
    }

    /* ===== MODAL FORM FIX (THIS WAS YOUR REAL ISSUE) ===== */

    .modal {
        width: 95% !important;
        max-width: 95% !important;
        margin: auto;
        max-height: 90vh !important;
        overflow-y: auto !important;
        border-radius: 16px !important;
    }

    .modal-body {
        padding: 16px !important;
    }

    .form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .form-group {
        width: 100% !important;
    }

    .form-input,
    select,
    textarea {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important; /* Prevent Safari zoom */
    }

    .modal-footer {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .modal-footer .btn {
        width: 100% !important;
    }

    /* ===== HEADER FIX ===== */

    .header-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .header-actions .btn span {
        display: none;
    }

    .btn-icon {
        width: 32px;
        height: 32px;
    }

}

/* =========================================================
   🔥 MOBILE HEADER ALIGNMENT FIX
   ✔ Desktop untouched
   ✔ Only mobile
   ✔ Perfect vertical alignment
========================================================= */

@media (max-width: 768px) {

    .header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 16px !important;
        gap: 10px;
    }

    .header-left {
        display: flex !important;
        align-items: center !important;
        gap: 12px;
        flex: 1;
        min-width: 0;
    }

    .menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 40px;
        width: 40px;
    }

    .page-title {
        font-size: 1rem !important;
        font-weight: 600;
        margin: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-actions,
    .header-right {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    .header-actions .btn,
    .header-right .btn {
        height: 40px;
        width: 40px;
        padding: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
    }

}

/* =========================================================
   CLEAN MOBILE HEADER ALIGNMENT FIX
   Only alignment — no toggle changes
========================================================= */

@media (max-width: 768px) {

    .header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .header-left {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex: 1;
    }

    .page-title {
        display: flex !important;
        align-items: center !important;
        gap: 6px;
        margin: 0 !important;
        line-height: 1.2;
    }

    .menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .header-actions {
        display: flex !important;
        align-items: center !important;
    }

}

/* =========================================
   SAFE MOBILE HEADER ALIGNMENT
   (Does NOT affect toggle)
========================================= */

@media (max-width: 768px) {

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
    }

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

    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        padding: 0;
    }

    .page-title {
        margin: 0;
        font-size: 1rem;
        line-height: 1.2;
    }

    .header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

}
</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">
                    <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>
                    <span>Dashboard</span>
                </a>

                <a href="{{ @BASE_PATH }}/company/services" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10" />
                    </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 17h5" />
                    </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="M15 12a3 3 0 11-6 0" />
                    </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 type="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">Subscription Management</h1>
                </div>

                <div class="header-actions">

                    <button type="button" class="btn btn-secondary" onclick="exportData()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3" />
                        </svg>
                        <span>Export Data</span>
                    </button>

                    <button type="button" class="btn btn-primary" onclick="openAddModal()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                        </svg>
                        <span>Add Subscription</span>
                    </button>

                </div>
            </header>
            
            
           <div class="content-area">
    <div class="glass-card" style="padding: 0; overflow: hidden; border-radius: 16px;">
        <div class="table-wrapper">
            <table class="service-table">
                <thead>
                    <tr>
                        <th>Domain</th>
                        <th>Client</th>
                        <th>Service Category</th>
                        <th>Activation Date</th>
                        <th>Renewal Date</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="services-tbody">
                    <tr>
                        <td colspan="7" style="text-align: center; padding: 48px; color: #6b7280;">
                            Loading subscriptions...
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</main>
</div>


<!-- ADD SUBSCRIPTION MODAL -->
<div id="add-service-modal" class="modal-overlay">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">Add New Subscription</h3>
            <button type="button" class="modal-close" onclick="closeModal('add-service-modal')">&times;</button>
        </div>

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

                <!-- CLIENT DETAILS -->
                <div class="form-row">
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="form-label">Client Name *</label>
                        <input type="text" name="customer_name" class="form-input" placeholder="Enter Client Name" required>
                    </div>
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="form-label">Client Mobile *</label>
                        <input type="tel" name="customer_phone" class="form-input" placeholder="Enter Contact Number" required>
                    </div>
                </div>

                <!-- DOMAIN DETAILS -->
                <div class="form-row">
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="form-label">Domain *</label>
                        <input type="text" name="registration_number" class="form-input" placeholder="Enter Domain Name" required>
                    </div>
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="form-label">Service Provider</label>
                        <input type="text" name="make" class="form-input" placeholder="e.g. InwayHosting">
                    </div>
                </div>

                <!-- SERVICE CATEGORY -->
                <div class="form-row">
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="form-label">Hosting Plan / Package</label>
                        <input type="text" name="model" class="form-input" placeholder="e.g. Business Hosting">
                    </div>
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="form-label">Service Category *</label>
                        <select name="service_type" class="form-input" required>
                            <option value="">Select Service</option>
                            <option value="Domain Registration">Domain Registration</option>
                            <option value="Web Hosting">Web Hosting</option>
                            <option value="Domain & Web Hosting">Domain & Web Hosting</option>
                            <option value="Domain / Hosting / Website Solutions">Domain / Hosting / Website Solutions</option>
                            <option value="Digital Infra & Solutions">Digital Infra & Solutions</option>
                        </select>
                    </div>
                </div>

                <!-- DATES -->
                <div class="form-row">
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="form-label">Activation Date *</label>
                        <input type="date" name="service_date" class="form-input" required>
                    </div>
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="form-label">Renewal Date *</label>
                        <input type="date" name="next_service_date" class="form-input" required>
                    </div>
                </div>

                <!-- NOTES -->
                <div class="form-group" style="margin-bottom: 0;">
                    <label class="form-label">Notes / Technical Details</label>
                    <textarea name="notes" class="form-input" rows="2" placeholder="Add technical notes or plan details"></textarea>
                </div>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal('add-service-modal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Save Subscription</button>
            </div>
        </form>
    </div>
</div>
    
  <div id="edit-service-modal" class="modal-overlay">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">Edit Subscription</h3>
            <button type="button" class="modal-close" onclick="closeModal('edit-service-modal')">&times;</button>
        </div>

        <form id="edit-service-form">
            <input type="hidden" name="id" id="edit-service-id">

            <div class="modal-body">

                <div class="form-row">
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="form-label">Service Category *</label>
                        <select name="service_type" id="edit-service-type" class="form-input" required>
                            <option value="Domain Registration">Domain Registration</option>
                            <option value="Web Hosting">Web Hosting</option>
                            <option value="Domain & Web Hosting">Domain & Web Hosting</option>
                            <option value="Domain / Hosting / Website Solutions">Domain / Hosting / Website Solutions</option>
                            <option value="Digital Infra & Solutions">Digital Infra & Solutions</option>
                        </select>
                    </div>

                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="form-label">Status</label>
                        <select name="status" id="edit-service-status" class="form-input">
                            <option value="pending">Pending</option>
                            <option value="call_queue">Client Follow-up</option>
                            <option value="sent">Reminder Sent</option>
                            <option value="completed">Renewed / Completed</option>
                        </select>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="form-label">Activation Date *</label>
                        <input type="date" name="service_date" id="edit-service-date" class="form-input" required>
                    </div>

                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="form-label">Renewal Date *</label>
                        <input type="date" name="next_service_date" id="edit-next-date" class="form-input" required>
                    </div>
                </div>

                <div class="form-group" style="margin-bottom: 0;">
                    <label class="form-label">Notes / Technical Details</label>
                    <textarea name="notes" id="edit-service-notes" class="form-input" rows="2"></textarea>
                </div>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal('edit-service-modal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Update Subscription</button>
            </div>

        </form>
    </div>
</div>
    
    <div class="sidebar-overlay" onclick="toggleSidebar()"></div>
    <div class="toast-container"></div>
    
    <script>
        const BASE_PATH = '{{ @BASE_PATH }}';
        let allServices = [];
        
        function toggleSidebar() {
            document.querySelector('.sidebar').classList.toggle('open');
            document.querySelector('.sidebar-overlay').classList.toggle('open');
        }
        
        function openAddModal() {
            document.getElementById('add-service-form').reset();
            document.querySelector('#add-service-form input[name="service_date"]').valueAsDate = new Date();
            document.getElementById('add-service-modal').classList.add('active');
        }
        
        function closeModal(id) {
            document.getElementById(id).classList.remove('active');
        }
        
        function showToast(message, type = 'info') {
            const toast = document.createElement('div');
            toast.className = 'toast toast-' + type;
            toast.innerHTML = '<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="' + (type === 'success' ? 'M5 13l4 4L19 7' : type === 'error' ? 'M6 18L18 6M6 6l12 12' : 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z') + '" /></svg>' + message;
            document.querySelector('.toast-container').appendChild(toast);
            setTimeout(() => toast.remove(), 3000);
        }
        
        async function loadServices() {
            try {
                const response = await fetch(BASE_PATH + '/api/company/services');
                const data = await response.json();
                if (data.success) {
                    allServices = data.services || [];
                    renderServices();
                }
            } catch (error) {
                console.error('Error:', error);
                document.getElementById('services-tbody').innerHTML = '<tr><td colspan="7" class="empty-state"><p>Error loading services</p></td></tr>';
            }
        }
        
        function renderServices() {
            const tbody = document.getElementById('services-tbody');
            if (allServices.length === 0) {
                tbody.innerHTML = `<tr><td colspan="7"><div class="empty-state">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /></svg>
                    <h3>No service records yet</h3>
                    <p>Click "Add Service" to create your first record</p>
                    <button class="btn btn-primary" onclick="openAddModal()">Add Service Record</button>
                </div></td></tr>`;
                return;
            }
            
            tbody.innerHTML = allServices.map(s => {
                const statusClass = s.status === 'sent' ? 'sent' : (s.status === 'completed' ? 'completed' : (s.status === 'call_queue' ? 'call-queue' : 'pending'));
                const statusText = s.status === 'sent' ? 'Sent' : (s.status === 'completed' ? 'Completed' : (s.status === 'call_queue' ? 'Call Queue' : 'Pending'));
                const phone = (s.customer_phone || '').replace(/[^0-9]/g, '');
                const rowClass = s.status === 'sent' ? 'row-sent' : '';
                
                return `<tr data-id="${s.id}" class="${rowClass}">
                    <td><div class="domain-cell"><span class="domain-number">${s.registration_number || ''}</span><span class="domain-model">${s.make || ''} ${s.model || ''}</span></div></td>
                    <td><div class="customer-cell"><span class="customer-name">${s.customer_name || ''}</span><span class="customer-phone">${s.customer_phone || ''}</span></div></td>
                    <td>${s.service_type || ''}</td>
                    <td>${s.service_date || ''}</td>
                    <td>${s.next_service_date || ''}</td>
                    <td><span class="status-badge ${statusClass}">${statusText}</span></td>
                    <td>
                        <div class="action-buttons">
                            <button class="btn-icon btn-edit" onclick="editService(${s.id})" title="Edit">
                                <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="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-icon btn-whatsapp" onclick="sendWhatsApp('${phone}', '${(s.customer_name || '').replace(/'/g, "\\'")}', '${s.registration_number || ''}', '${s.service_type || ''}', ${s.id})" title="WhatsApp">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                            </button>
                            <a href="tel:${phone}" class="btn-icon btn-call" title="Call" onclick="logCallAction(${s.id}, '${phone}')">
                                <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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
                            </a>
                            <button class="btn-icon btn-sent" onclick="markSent(${s.id})" title="Mark Sent">
                                <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="M5 13l4 4L19 7" /></svg>
                            </button>
                            <button class="btn-icon btn-delete" onclick="deleteService(${s.id})" title="Delete">
                                <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>`;
            }).join('');
        }
        
        document.getElementById('add-service-form').addEventListener('submit', async function(e) {
            e.preventDefault();
            const data = Object.fromEntries(new FormData(this));
            try {
                const response = await fetch(BASE_PATH + '/api/company/services', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(data)
                });
                const result = await response.json();
                if (result.success) {
                    showToast('Service record added', 'success');
                    closeModal('add-service-modal');
                    loadServices();
                } else {
                    showToast(result.message || 'Failed to add', 'error');
                }
            } catch (error) {
                showToast('Failed to add service', 'error');
            }
        });
        
        function editService(id) {
            const service = allServices.find(s => s.id == id);
            if (!service) return;
            
            document.getElementById('edit-service-id').value = id;
            document.getElementById('edit-service-type').value = service.service_type || '';
            document.getElementById('edit-service-status').value = service.status || 'pending';
            document.getElementById('edit-service-date').value = service.service_date || '';
            document.getElementById('edit-next-date').value = service.next_service_date || '';
            document.getElementById('edit-service-notes').value = service.notes || '';
            document.getElementById('edit-service-modal').classList.add('active');
        }
        
        document.getElementById('edit-service-form').addEventListener('submit', async function(e) {
            e.preventDefault();
            const id = document.getElementById('edit-service-id').value;
            const data = Object.fromEntries(new FormData(this));
            delete data.id;
            
            try {
                const response = await fetch(BASE_PATH + '/api/services/' + id, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(data)
                });
                const result = await response.json();
                if (result.success) {
                    showToast('Service updated', 'success');
                    closeModal('edit-service-modal');
                    loadServices();
                } else {
                    showToast(result.message || 'Failed to update', 'error');
                }
            } catch (error) {
                showToast('Failed to update', 'error');
            }
        });
        
        async function deleteService(id) {
            if (!confirm('Are you sure you want to delete this service record?')) return;
            try {
                const response = await fetch(BASE_PATH + '/api/services/' + id, { method: 'DELETE' });
                const result = await response.json();
                if (result.success) {
                    showToast('Service deleted', 'success');
                    loadServices();
                } else {
                    showToast(result.message || 'Failed to delete', 'error');
                }
            } catch (error) {
                showToast('Failed to delete', 'error');
            }
        }
        
        function sendWhatsApp(phone, name, domain, service, serviceId) {
            const message = encodeURIComponent(`Hi ${name}, this is a reminder for your domain ${domain}. Your ${service} service is due soon. Please schedule your appointment. - Inway Reminder System`);
            window.open(`https://wa.me/${phone}?text=${message}`, '_blank');
            
            fetch(BASE_PATH + '/api/services/' + serviceId, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ status: 'sent' })
            }).then(response => response.json())
            .then(result => {
                if (result.success) {
                    showToast('WhatsApp opened & marked as sent', 'success');
                    loadServices();
                } else {
                    showToast('WhatsApp opened', 'success');
                }
            }).catch(() => showToast('WhatsApp opened', 'success'));
        }
        
        function logCallAction(serviceId, phone) {
            fetch(BASE_PATH + '/api/services/' + serviceId, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ notes: 'Call made to customer at ' + new Date().toLocaleString() })
            }).then(() => showToast('Call initiated', 'success')).catch(() => showToast('Call initiated', 'info'));
        }
        
        async function markSent(id) {
            try {
                const response = await fetch(BASE_PATH + '/api/services/' + id, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ status: 'sent' })
                });
                const result = await response.json();
                if (result.success) {
                    showToast('Marked as sent', 'success');
                    loadServices();
                } else {
                    showToast(result.message || 'Failed to update', 'error');
                }
            } catch (error) {
                showToast('Failed to update', 'error');
            }
        }
        
        function exportData() {
            if (allServices.length === 0) {
                showToast('No data to export', 'info');
                return;
            }
            let csv = 'Domain,Make,Model,Customer,Phone,Service,Domain Expiry Date,Next Due,Status,Notes\n';
            allServices.forEach(s => {
                csv += `"${s.registration_number || ''}","${s.make || ''}","${s.model || ''}","${s.customer_name || ''}","${s.customer_phone || ''}","${s.service_type || ''}","${s.service_date || ''}","${s.next_service_date || ''}","${s.status || ''}","${(s.notes || '').replace(/"/g, '""')}"\n`;
            });
            const blob = new Blob([csv], { type: 'text/csv' });
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'services_' + new Date().toISOString().split('T')[0] + '.csv';
            a.click();
            window.URL.revokeObjectURL(url);
            showToast('Data exported', 'success');
        }
        
        function toggleSidebar() {
            document.querySelector('.sidebar').classList.toggle('open');
            document.querySelector('.sidebar-overlay').classList.toggle('open');
        }
        
        document.addEventListener('DOMContentLoaded', loadServices);
        if (window.location.search.includes('action=add')) {
            document.addEventListener('DOMContentLoaded', openAddModal);
        }
    </script>
</body>
</html>
