<!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>Domains - 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">
            <!-- SIDEBAR -->
            <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>
                        <span>Company Admin Panel</span>
                    </div>
                </div>

                <nav class="sidebar-nav">
                    <div class="nav-section">
                        <div class="nav-section-title">Dashboard</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 7"
                                />
                            </svg>
                            <span>Overview</span>
                        </a>
                    </div>

                    <div class="nav-section">
                        <div class="nav-section-title">Operations</div>

                        <a
                            href="{{ @BASE_PATH }}/company/staff"
                            class="nav-item"
                        >
                            <span>Team Management</span>
                        </a>

                        <a
                            href="{{ @BASE_PATH }}/company/customers"
                            class="nav-item"
                        >
                            <span>Client Accounts</span>
                        </a>

                        <a
                            href="{{ @BASE_PATH }}/company/domains"
                            class="nav-item active"
                        >
                            <span>Assets Management</span>
                        </a>

                        <a
                            href="{{ @BASE_PATH }}/company/services"
                            class="nav-item"
                        >
                            <span>Service Plans</span>
                        </a>

                        <a
                            href="{{ @BASE_PATH }}/company/reminders"
                            class="nav-item"
                        >
                            <span>Renewal Tracking</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">INWAY 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 CONTENT -->
            <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">INWAY Digital Assets</h1>
                    </div>

                    <div class="header-right">
                        <button
                            class="btn btn-primary"
                            data-modal="add-domain-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 New Asset
                        </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>Asset ID</th>
                                    <th>Category</th>
                                    <th>Plan Type</th>
                                    <th>Duration</th>
                                    <th>Assigned Client</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>

                            <tbody>
                                <repeat
                                    group="{{ @vehiclesList }}"
                                    value="{{ @domain }}"
                                >
                                    <tr data-id="{{ @domain.id }}">
                                        <td>
                                            <strong
                                                >{{ @domain.registration_number
                                                }}</strong
                                            >
                                        </td>
                                        <td>{{ @domain.make }}</td>
                                        <td>{{ @domain.model }}</td>
                                        <td>{{ @domain.year }}</td>
                                        <td>{{ @domain.customer_name }}</td>
                                        <td>
                                            <div class="action-buttons">
                                                <button
                                                    class="btn btn-danger btn-sm btn-icon"
                                                    onclick="deleteVehicle({{ @domain.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-domain-modal" class="modal-overlay">
            <div class="modal">
                <div class="modal-header">
                    <h3 class="modal-title">Add New Digital Asset</h3>
                    <button class="modal-close">&times;</button>
                </div>

                <form id="add-domain-form">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="form-label">Assigned Client</label>
                            <select
                                name="customer_id"
                                class="form-input"
                                required
                            >
                                <option value="">Select Client</option>
                                <repeat
                                    group="{{ @customersList }}"
                                    value="{{ @customer }}"
                                >
                                    <option value="{{ @customer.id }}">
                                        {{ @customer.name }}
                                    </option>
                                </repeat>
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="form-label"
                                >Asset ID / Domain Name</label
                            >
                            <input
                                type="text"
                                name="registration_number"
                                class="form-input"
                                placeholder="example.com or Project ID"
                                required
                            />
                        </div>

                        <div class="form-group">
                            <label class="form-label">Service Category</label>
                            <input
                                type="text"
                                name="make"
                                class="form-input"
                                placeholder="Hosting / Domain / SSL / Marketing"
                                required
                            />
                        </div>

                        <div class="form-group">
                            <label class="form-label">Plan Type</label>
                            <input
                                type="text"
                                name="model"
                                class="form-input"
                                placeholder="Basic / Pro / Enterprise"
                                required
                            />
                        </div>

                        <div class="form-group">
                            <label class="form-label"
                                >Subscription Duration (Years)</label
                            >
                            <input
                                type="number"
                                name="year"
                                class="form-input"
                                min="1"
                                max="10"
                                placeholder="1 - 10"
                            />
                        </div>

                        <div class="form-group">
                            <label class="form-label"
                                >Reference ID (Optional)</label
                            >
                            <input
                                type="text"
                                name="vin"
                                class="form-input"
                                placeholder="Invoice / Order ID"
                            />
                        </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 Asset
                        </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-domain-form")
                .addEventListener("submit", async function (e) {
                    e.preventDefault();
                    const formData = new FormData(this);
                    const data = Object.fromEntries(formData);
                    try {
                        const response = await API.domains.create(data);
                        if (response.success) {
                            showToast("Domain added successfully", "success");
                            setTimeout(() => location.reload(), 1000);
                        }
                    } catch (error) {
                        showToast(
                            error.message || "Failed to add domain",
                            "error",
                        );
                    }
                });

            async function deleteVehicle(id) {
                if (!confirm("Are you sure you want to delete this domain?"))
                    return;
                try {
                    const response = await API.domains.delete(id);
                    if (response.success) {
                        showToast("Domain deleted", "success");
                        document.querySelector(`tr[data-id="${id}"]`).remove();
                    }
                } catch (error) {
                    showToast(
                        error.message || "Failed to delete domain",
                        "error",
                    );
                }
            }
        </script>
    </body>
</html>
