<!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>Customer Portal - 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/components.css">
    <link rel="stylesheet" href="{{ @ASSET_PATH }}/css/animations.css">
    <style>
/* =====================================================
   IMPERSONATION BANNER
===================================================== */
.impersonation-banner {
    background: linear-gradient(90deg, #7c3aed, #6d28d9);
    color: white;
    padding: 12px 20px;
    text-align: center;
    font-weight: 500;
}

.impersonation-banner a {
    color: #fbbf24;
    text-decoration: underline;
    margin-left: 10px;
}

/* =====================================================
   PORTAL CONTAINER
===================================================== */
.portal-container {
    min-height: 100vh;
    padding: 40px 20px;
}

/* =====================================================
   HEADER
===================================================== */
.portal-header {
    text-align: center;
    margin-bottom: 40px;
}

.portal-logo {
    width: 100px;
    margin-bottom: 20px;
}

.portal-title {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(
        135deg,
        var(--primary-light),
        var(--accent-cyan)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

/* =====================================================
   SEARCH SECTION
===================================================== */
.search-section {
    max-width: 600px;
    margin: 0 auto 40px;
}

.search-form {
    display: flex;
    gap: 12px;
}

.search-form input {
    flex: 1;
    padding: 16px 20px;
    font-size: 1.1rem;
    text-transform: uppercase;
}

.search-form button {
    padding: 16px 32px;
    font-size: 1rem;
}

/* =====================================================
   RESULTS SECTION
===================================================== */
.results-section {
    max-width: 900px;
    margin: 0 auto;
    display: none;
}

.results-section.active {
    display: block;
}

/* =====================================================
   VEHICLE INFO GRID
===================================================== */
.domain-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.info-card {
    padding: 20px;
}

.info-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.info-value {
    font-size: 1.25rem;
    font-weight: 600;
}

/* =====================================================
   Renewal Date CARD
===================================================== */
.next-service-card {
    padding: 32px;
    text-align: center;
    margin-bottom: 32px;
    border: 2px solid var(--primary);
}

.next-service-card h3 {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.next-service-date {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-light);
}

.next-service-type {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-top: 8px;
}

/* =====================================================
   EMPTY / BACK STATES
===================================================== */
.no-domain {
    text-align: center;
    padding: 60px 20px;
}

.back-link {
    text-align: center;
    margin-top: 40px;
}

/* =====================================================
   ✅ MOBILE & TABLET RESPONSIVE FIX
===================================================== */
@media (max-width: 768px) {

    html, body {
        overflow-x: hidden;
    }

    .portal-container {
        padding: 24px 16px;
    }

    .portal-title {
        font-size: 1.8rem;
    }

    .portal-logo {
        width: 80px;
    }

    /* Search form stack */
    .search-form {
        flex-direction: column;
    }

    .search-form input {
        font-size: 1rem;
        padding: 14px 16px;
    }

    .search-form button {
        width: 100%;
        padding: 14px;
        font-size: 1rem;
    }

    /* Domain info stack */
    .domain-info {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .info-card {
        padding: 16px;
    }

    .info-value {
        font-size: 1.1rem;
    }

    /* Renewal Date card */
    .next-service-card {
        padding: 24px 16px;
    }

    .next-service-date {
        font-size: 2rem;
    }

    .next-service-type {
        font-size: 0.95rem;
    }

    .no-domain {
        padding: 40px 16px;
    }

    .back-link {
        margin-top: 24px;
    }
}

/* =====================================================
   SMALL PHONES (≤360px)
===================================================== */
@media (max-width: 360px) {

    .portal-title {
        font-size: 1.5rem;
    }

    .next-service-date {
        font-size: 1.6rem;
    }
}
</style>

</head>
<body>

    <check if="{{ @is_impersonating }}">
        <true>
            <div class="impersonation-banner">
                Viewing Client Portal for {{ @impersonating_company.name }}
                <a href="{{ @BASE_PATH }}/super-admin/return">
                    Return to Super Admin
                </a>
            </div>
        </true>
    </check>

    <div class="portal-container">

        <!-- HEADER -->
        <div class="portal-header fade-in">

            <img src="{{ @ASSET_PATH }}/images/logo.png"
                 alt="INWAY Service Hub"
                 class="portal-logo"
                 onerror="this.style.display='none'">

            <h1 class="portal-title">
                INWAY Service Hub
            </h1>

            <p style="color: var(--text-muted);">
                Client Subscription & Renewal Portal
            </p>

        </div>


        <!-- SEARCH SECTION -->
        <div class="search-section fade-in">

            <div class="glass-card" style="padding: 32px;">

                <h3 style="text-align: center; margin-bottom: 20px;">
                    Check Your Subscription Status
                </h3>

                <form id="lookup-form" class="search-form">
                    <input type="text"
                           id="registration"
                           class="form-input"
                           placeholder="Enter Domain / Asset ID / Subscription ID"
                           required>

                    <button type="submit"
                            class="btn btn-primary">
                        Search
                    </button>
                </form>

            </div>

        </div>


        <!-- RESULTS -->
        <div id="results" class="results-section">
            <div id="domain-details"></div>
        </div>


        <!-- LOGIN LINK -->
        <div class="back-link">
            <a href="{{ @BASE_PATH }}/login"
               style="color: var(--text-muted);">
                Staff Login
            </a>
        </div>

    </div>


    
    <div class="toast-container"></div>
    <script src="{{ @ASSET_PATH }}/js/app.js"></script>
    <script src="{{ @ASSET_PATH }}/js/api.js"></script>
    <script>
        document.getElementById('lookup-form').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const registration = document.getElementById('registration').value.trim();
            const resultsDiv = document.getElementById('results');
            const detailsDiv = document.getElementById('domain-details');
            
            try {
                const response = await API.lookupVehicle(registration);
                
                if (response.success) {
                    const domain = response.domain;
                    const services = response.services || [];
                    const nextService = response.next_service;
                    
                    let html = `
                        <div class="glass-card domain-info">
                            <div class="info-card">
                                <div class="info-label">Registration</div>
                                <div class="info-value">${domain.registration_number}</div>
                            </div>
                            <div class="info-card">
                                <div class="info-label">Domain</div>
                                <div class="info-value">${domain.make} ${domain.model}</div>
                            </div>
                            <div class="info-card">
                                <div class="info-label">Year</div>
                                <div class="info-value">${domain.year || 'N/A'}</div>
                            </div>
                            <div class="info-card">
                                <div class="info-label">Owner</div>
                                <div class="info-value">${domain.customer_name}</div>
                            </div>
                        </div>
                    `;
                    
                    if (nextService) {
                        html += `
                            <div class="glass-card next-service-card">
                                <h3>Renewal Date Due</h3>
                                <div class="next-service-date">${formatDate(nextService.next_service_date)}</div>
                                <div class="next-service-type">${nextService.service_type}</div>
                            </div>
                        `;
                    } else {
                        html += `
                            <div class="glass-card next-service-card">
                                <h3>Renewal Date Due</h3>
                                <div class="next-service-date" style="color: var(--accent-green);">Up to Date</div>
                                <div class="next-service-type">No upcoming service scheduled</div>
                            </div>
                        `;
                    }
                    
                    if (services.length > 0) {
                        html += `
                            <div class="glass-card" style="padding: 24px;">
                                <h3 style="margin-bottom: 20px;">Service History</h3>
                                <table class="data-table">
                                    <thead>
                                        <tr>
                                            <th>Date</th>
                                            <th>Service</th>
                                            <th>Mileage</th>
                                            <th>Notes</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                        `;
                        
                        services.forEach(service => {
                            html += `
                                <tr>
                                    <td>${service.service_date}</td>
                                    <td>${service.service_type}</td>
                                    <td>${service.mileage || 'N/A'}</td>
                                    <td>${service.notes || '-'}</td>
                                </tr>
                            `;
                        });
                        
                        html += `
                                    </tbody>
                                </table>
                            </div>
                        `;
                    }
                    
                    detailsDiv.innerHTML = html;
                    resultsDiv.classList.add('active');
                }
            } catch (error) {
                detailsDiv.innerHTML = `
                    <div class="glass-card no-domain">
                        <h3>Domain Not Found</h3>
                        <p style="color: var(--text-muted); margin-top: 12px;">No domain found with domain: <strong>${registration}</strong></p>
                        <p style="color: var(--text-muted); margin-top: 8px;">Please check the number and try again.</p>
                    </div>
                `;
                resultsDiv.classList.add('active');
            }
        });
        
        function formatDate(dateString) {
            const date = new Date(dateString);
            return date.toLocaleDateString('en-GB', {
                day: '2-digit',
                month: 'short',
                year: 'numeric'
            });
        }
    </script>
</body>
</html>
