<?php require_once __DIR__ . '/_sidebar.php'; ?>
<main class="flex-1 py-16 md:py-0 md:pl-64">
    <div class="max-w-7xl mx-auto px-4 py-8 md:py-16">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <h1 class="text-4xl font-bold text-premium-charcoal">Admin Dashboard</h1>
                <p class="mt-2 text-architectural-gray text-lg">Overview of leads, active projects, quotations and revenue at a glance.</p>
            </div>
            <div class="flex items-center gap-3">
                <a href="<?= htmlspecialchars($baseUrl) ?>/admin/leads" class="rounded-lg btn-primary px-6 py-3 text-sm font-semibold text-white">View Leads</a>
                <a href="<?= htmlspecialchars($baseUrl) ?>/logout" class="rounded-lg border-2 border-soft-beige px-6 py-3 text-sm text-premium-charcoal hover:bg-soft-beige transition">Logout</a>
            </div>
        </div>
        <div class="grid gap-4 mt-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
            <div class="rounded-2xl sm:rounded-3xl bg-gradient-to-br from-slate-900 to-slate-950 p-4 sm:p-6 shadow-lg hover:shadow-2xl transition text-white border border-slate-800 group stat-card">
                <div class="flex items-start justify-between">
                    <div>
                        <h2 class="stat-number"><?= $stats['new_leads'] ?></h2>
                        <p class="mt-2 text-slate-300 font-medium flex items-center gap-2"><span class="material-symbols-outlined text-base">trending_up</span> New Leads</p>
                    </div>
                    <span class="material-symbols-outlined text-3xl opacity-20 group-hover:opacity-40 transition">trending_up</span>
                </div>
            </div>
            <div class="rounded-2xl sm:rounded-3xl bg-gradient-to-br from-balorp-magenta to-[#D87AA8] p-4 sm:p-6 shadow-lg hover:shadow-2xl transition text-white border border-[#F44D7A] group stat-card" style="background-image: linear-gradient(135deg, var(--balorp-magenta) 0%, #D87AA8 100%);">
                <div class="flex items-start justify-between">
                    <div>
                        <h2 class="stat-number"><?= $stats['active_projects'] ?></h2>
                        <p class="mt-2 text-white/90 font-medium flex items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6M9 16h6M9 8h6M7 4h10v2H7V4zM7 6v14h10V6"/></svg>
                            Active Projects
                        </p>
                    </div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 opacity-20 group-hover:opacity-40 transition" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6M9 16h6M9 8h6M7 4h10v2H7V4zM7 6v14h10V6"/></svg>
                </div>
            </div>
            <div class="rounded-2xl sm:rounded-3xl bg-gradient-to-br from-warm-gold-peach to-[#FFB366] p-4 sm:p-6 shadow-lg hover:shadow-2xl transition text-white border border-[#FFD480] group stat-card" style="background-image: linear-gradient(135deg, #F4B183 0%, #FFB366 100%);">
                <div class="flex items-start justify-between">
                    <div>
                        <h2 class="stat-number"><?= $stats['quotations_pending'] ?></h2>
                        <p class="mt-2 text-white/90 font-medium flex items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 7h6l2 2v9a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z"/></svg>
                            Quotations Pending
                        </p>
                    </div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 opacity-20 group-hover:opacity-40 transition" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 7h6l2 2v9a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z"/></svg>
                </div>
            </div>
            <div class="rounded-2xl sm:rounded-3xl bg-gradient-to-br from-rich-crimson to-[#E74C3C] p-4 sm:p-6 shadow-lg hover:shadow-2xl transition text-white border border-[#E74C3C]/50 group stat-card" style="background-image: linear-gradient(135deg, #D6004C 0%, #E74C3C 100%);">
                <div class="flex items-start justify-between">
                    <div>
                        <h2 class="stat-number"><?= $stats['invoices_due'] ?></h2>
                        <p class="mt-2 text-white/90 font-medium flex items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 14h6M9 10h6M7 3h10l1 2v13l-1 1-2-1-2 1-2-1-2 1-2-1V5l1-2z"/></svg>
                            Invoices Due
                        </p>
                    </div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 opacity-20 group-hover:opacity-40 transition" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 14h6M9 10h6M7 3h10l1 2v13l-1 1-2-1-2 1-2-1-2 1-2-1V5l1-2z"/></svg>
                </div>
            </div>
            <div class="rounded-2xl sm:rounded-3xl bg-gradient-to-br from-emerald-600 to-emerald-700 p-4 sm:p-6 shadow-lg hover:shadow-2xl transition text-white border border-emerald-400 group stat-card">
                <div class="flex items-start justify-between">
                    <div>
                        <h2 class="stat-number"><?= $stats['customers'] ?></h2>
                        <p class="mt-2 text-white/90 font-medium flex items-center gap-2"><span class="material-symbols-outlined text-base">people</span> Registered Customers</p>
                    </div>
                    <span class="material-symbols-outlined text-3xl opacity-20 group-hover:opacity-40 transition">people</span>
                </div>
            </div>
        </div>

        <div class="mt-16">
            <div class="mb-6">
                <h2 class="text-2xl font-semibold text-premium-charcoal">Quick Actions</h2>
                <p class="text-sm text-architectural-gray">Fast access to the most-used administration areas.</p>
            </div>
            <div class="grid gap-6 lg:grid-cols-3">
                <a href="<?= htmlspecialchars($baseUrl) ?>/admin/invoices" class="block rounded-3xl bg-gradient-to-br from-balorp-magenta to-[#D87AA8] p-8 text-white shadow-xl hover:shadow-2xl transition border border-[#F44D7A] group quick-action-card from-magenta" style="background-image: linear-gradient(135deg, var(--balorp-magenta) 0%, #D87AA8 100%);">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <h2 class="text-xl font-semibold group-hover:translate-x-1 transition">Manage Invoices</h2>
                            <p class="mt-3 text-white/90">Update status and review billing details.</p>
                        </div>
                        <span class="material-symbols-outlined text-3xl opacity-30 group-hover:opacity-50 transition">receipt_long</span>
                    </div>
                </a>
                <a href="<?= htmlspecialchars($baseUrl) ?>/admin/customers" class="block rounded-3xl bg-gradient-to-br from-slate-800 to-slate-900 p-8 text-white shadow-xl hover:shadow-2xl transition border border-slate-700 group quick-action-card from-slate" style="background-image: linear-gradient(135deg, #1f2937 0%, #111827 100%);">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <h2 class="text-xl font-semibold group-hover:translate-x-1 transition">Manage Customers</h2>
                            <p class="mt-3 text-white/90">View customer contacts, billing totals and outstanding balance.</p>
                        </div>
                        <span class="material-symbols-outlined text-3xl opacity-30 group-hover:opacity-50 transition">people</span>
                    </div>
                </a>
                <a href="<?= htmlspecialchars($baseUrl) ?>/admin/users" class="block rounded-3xl bg-gradient-to-br from-slate-700 to-slate-800 p-8 text-white shadow-xl hover:shadow-2xl transition border border-slate-600 group quick-action-card from-slate" style="background-image: linear-gradient(135deg, #374151 0%, #111827 100%);">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <h2 class="text-xl font-semibold group-hover:translate-x-1 transition">Admin Users</h2>
                            <p class="mt-3 text-white/90">Manage admin login accounts and passwords.</p>
                        </div>
                        <span class="material-symbols-outlined text-3xl opacity-30 group-hover:opacity-50 transition">admin_panel_settings</span>
                    </div>
                </a>
            </div>
        </div>

        <div class="mt-16">
            <div class="mb-6">
                <h2 class="text-2xl font-semibold text-premium-charcoal">Site Settings</h2>
                <p class="text-sm text-architectural-gray">These cards link directly to the editable site settings page for homepage text, navigation, footer content, and more.</p>
            </div>
            <div class="grid gap-6 lg:grid-cols-3">
                <a href="<?= htmlspecialchars($baseUrl) ?>/admin/settings" class="block rounded-3xl bg-gradient-to-br from-[#FF007A] to-[#D87AA8] p-8 text-white shadow-xl hover:shadow-2xl transition border border-[#F44D7A] group">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <h2 class="text-xl font-semibold group-hover:translate-x-1 transition">Site Settings</h2>
                            <p class="mt-3 text-white/90">Edit site navigation, homepage text, footer content and contact details.</p>
                        </div>
                        <span class="material-symbols-outlined text-3xl opacity-30 group-hover:opacity-50 transition">settings</span>
                    </div>
                </a>
                <a href="<?= htmlspecialchars($baseUrl) ?>/admin/settings?focus=nav#main-navigation" class="block rounded-3xl bg-gradient-to-br from-orange-500 to-orange-600 p-8 text-white shadow-xl hover:shadow-2xl transition border border-orange-400 group">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <h2 class="text-xl font-semibold group-hover:translate-x-1 transition">Top Navigation</h2>
                            <p class="mt-3 text-white/90">Edit top menu labels and header navigation text.</p>
                        </div>
                        <span class="material-symbols-outlined text-3xl opacity-30 group-hover:opacity-50 transition">menu</span>
                    </div>
                </a>
                <a href="<?= htmlspecialchars($baseUrl) ?>/admin/settings#services-content" class="block rounded-3xl bg-gradient-to-br from-cyan-500 to-cyan-600 p-8 text-white shadow-xl hover:shadow-2xl transition border border-cyan-400 group">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <h2 class="text-xl font-semibold group-hover:translate-x-1 transition">Services Content</h2>
                            <p class="mt-3 text-white/90">Update services page and homepage services copy.</p>
                        </div>
                        <span class="material-symbols-outlined text-3xl opacity-30 group-hover:opacity-50 transition">miscellaneous_services</span>
                    </div>
                </a>
                <a href="<?= htmlspecialchars($baseUrl) ?>/admin/settings#gallery-content" class="block rounded-3xl bg-gradient-to-br from-purple-500 to-purple-600 p-8 text-white shadow-xl hover:shadow-2xl transition border border-purple-400 group">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <h2 class="text-xl font-semibold group-hover:translate-x-1 transition">Gallery Content</h2>
                            <p class="mt-3 text-white/90">Edit gallery page heading and description.</p>
                        </div>
                        <span class="material-symbols-outlined text-3xl opacity-30 group-hover:opacity-50 transition">photo_library</span>
                    </div>
                </a>
                <a href="<?= htmlspecialchars($baseUrl) ?>/admin/settings#wizard-content" class="block rounded-3xl bg-gradient-to-br from-indigo-500 to-indigo-600 p-8 text-white shadow-xl hover:shadow-2xl transition border border-indigo-400 group">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <h2 class="text-xl font-semibold group-hover:translate-x-1 transition">Estimate Wizard</h2>
                            <p class="mt-3 text-white/90">Manage the project estimate wizard page text.</p>
                        </div>
                        <span class="material-symbols-outlined text-3xl opacity-30 group-hover:opacity-50 transition">auto_awesome</span>
                    </div>
                </a>
                <a href="<?= htmlspecialchars($baseUrl) ?>/admin/settings#footer-content" class="block rounded-3xl bg-gradient-to-br from-teal-500 to-teal-600 p-8 text-white shadow-xl hover:shadow-2xl transition border border-teal-400 group">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <h2 class="text-xl font-semibold group-hover:translate-x-1 transition">Footer & Social</h2>
                            <p class="mt-3 text-white/90">Update footer text, contact details and social links.</p>
                        </div>
                        <span class="material-symbols-outlined text-3xl opacity-30 group-hover:opacity-50 transition">share</span>
                    </div>
                </a>
            </div>
        </div>

        <div class="mt-16">
            <div class="mb-6">
                <h2 class="text-2xl font-semibold text-premium-charcoal">CMS Content</h2>
                <p class="text-sm text-architectural-gray">Manage homepage blocks stored in content tables rather than site settings.</p>
            </div>
            <div class="grid gap-6 lg:grid-cols-2">
                <a href="<?= htmlspecialchars($baseUrl) ?>/admin/cms-services" class="block rounded-3xl bg-gradient-to-br from-green-500 to-green-600 p-8 text-white shadow-xl hover:shadow-2xl transition border border-green-400 group">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <h2 class="text-xl font-semibold group-hover:translate-x-1 transition">Homepage Service Cards</h2>
                            <p class="mt-3 text-white/90">Manage individual cards shown in the homepage services section.</p>
                        </div>
                        <span class="material-symbols-outlined text-3xl opacity-30 group-hover:opacity-50 transition">dashboard_customize</span>
                    </div>
                </a>
                <a href="<?= htmlspecialchars($baseUrl) ?>/admin/cms-slides" class="block rounded-3xl bg-gradient-to-br from-rose-500 to-rose-600 p-8 text-white shadow-xl hover:shadow-2xl transition border border-rose-400 group">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <h2 class="text-xl font-semibold group-hover:translate-x-1 transition">Hero Slides</h2>
                            <p class="mt-3 text-white/90">Manage homepage hero slide content, images and activation.</p>
                        </div>
                        <span class="material-symbols-outlined text-3xl opacity-30 group-hover:opacity-50 transition">slideshow</span>
                    </div>
                </a>
            </div>
        </div>
    </div>
</main>
<script>
    // Ensure dashboard cards reliably navigate when clicked (delegated handler)
    (function(){
        try {
            var dashboardMain = document.querySelector('main.flex-1');
            if (!dashboardMain) return;
            dashboardMain.addEventListener('click', function(e){
                // If a link (<a>) was clicked, let the browser handle it
                var a = e.target.closest && e.target.closest('a');
                if (!a) return;
                // If anchor has an href and is not a hash-only internal navigation handled elsewhere,
                // ensure navigation occurs (works around cases where nested elements may block default)
                var href = a.getAttribute('href');
                if (!href) return;
                // allow the browser to handle normal left-clicks where default not prevented
                if (e.defaultPrevented) return;
                // For same-origin admin links, force navigation
                try {
                    var url = new URL(href, window.location.href);
                    if (url.pathname.indexOf('/admin') === 0) {
                        // small guard: allow ctrl/cmd+click and middle-click to open in new tab
                        if (e.ctrlKey || e.metaKey || e.button === 1) return;
                        e.preventDefault();
                        window.location.href = url.href;
                    }
                } catch (err) {
                    // fallback: if href contains '/admin' text
                    if (href.indexOf('/admin') !== -1) {
                        e.preventDefault();
                        window.location.href = href;
                    }
}
    })();
</script>
</div>
<script>
    // Force anchors inside the admin dashboard cards to be full-block and clickable
    (function(){
        try {
            var dashboard = document.querySelector('main.flex-1');
            if (!dashboard) return;
            var anchors = dashboard.querySelectorAll('a');
            anchors.forEach(function(a){
                a.style.display = a.style.display || 'block';
                a.style.position = a.style.position || 'relative';
                a.style.zIndex = a.style.zIndex || '10';
                a.style.pointerEvents = a.style.pointerEvents || 'auto';
                // ensure anchor fills its parent card (helps if card has padding)
                a.style.width = a.style.width || '100%';
                a.style.height = a.style.height || '100%';
                // attach safe click handler to force navigation when browser default prevented
                a.addEventListener('click', function(e){
                    try {
                        if (e.defaultPrevented) return;
                        // respect new-tab clicks
                        if (e.ctrlKey || e.metaKey || e.button === 1) return;
                        var href = a.getAttribute('href');
                        if (!href) return;
                        if (href.indexOf('/admin') !== -1) {
                            e.preventDefault();
                            window.location.href = href;
                        }
                    } catch (err) { console.error(err); }
                }, false);
            });
        } catch (e) { console.error(e); }
    })();
</script>
<script>
    // Debug logger: click target info for troubleshooting non-working cards
    (function(){
        try {
            var dbg = function(){
                var args = Array.prototype.slice.call(arguments);
                if (window.console && window.console.log) window.console.log.apply(console, ['[DASHBOARD-DBG]'].concat(args));
            };
            var container = document.querySelector('main.flex-1');
            if (!container) return;
            container.addEventListener('click', function(e){
                try {
                    var target = e.target;
                    var a = target.closest ? target.closest('a') : null;
                    if (!a) return;
                    var href = a.getAttribute('href');
                    dbg('click on', target.tagName, 'closest A href=', href);
                    // log bounding rect and computed pointer-events for the element clicked and anchor
                    var rectT = target.getBoundingClientRect ? target.getBoundingClientRect() : null;
                    var rectA = a.getBoundingClientRect ? a.getBoundingClientRect() : null;
                    dbg('targetRect', rectT, 'anchorRect', rectA);
                    var csT = window.getComputedStyle ? window.getComputedStyle(target) : null;
                    var csA = window.getComputedStyle ? window.getComputedStyle(a) : null;
                    dbg('pointerEvents target:', csT && csT.pointerEvents, 'anchor:', csA && csA.pointerEvents, 'zIndex target:', csT && csT.zIndex, 'anchor zIndex:', csA && csA.zIndex);
                } catch (err) { console.error(err); }
            }, true);
        } catch (e) { console.error(e); }
    })();
</script>
</div>
