<!DOCTYPE html>
<html lang="<?php echo e(app()->getLocale()); ?>">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>InspectAI - <?php echo $__env->yieldContent('title', 'Dashboard'); ?></title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
  <script>
    (function () {
      const theme = localStorage.getItem('theme') || 'light';
      document.documentElement.classList.toggle('dark', theme === 'dark');
    })();
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: { sans: ['DM Sans', 'sans-serif'], mono: ['DM Mono', 'monospace'] },
          colors: { primary: { DEFAULT: '#4f6ef7', foreground: '#ffffff' } }
        }
      }
    }
  </script>
  <style>
    body { font-family: 'DM Sans', sans-serif; }
    .dark body { background: #0f172a; color: #e5e7eb; }
    .dark .bg-white { background-color: #111827 !important; }
    .dark .bg-white\/90 { background-color: rgba(17,24,39,.9) !important; }
    .dark .bg-white\/80 { background-color: rgba(17,24,39,.84) !important; }
    .dark .bg-gray-50 { background-color: #0f172a !important; }
    .dark .bg-gray-100 { background-color: #1f2937 !important; }
    .dark .bg-slate-50 { background-color: #0f172a !important; }
    .dark .bg-emerald-50 { background-color: rgba(16,185,129,.12) !important; }
    .dark .bg-amber-50 { background-color: rgba(245,158,11,.12) !important; }
    .dark .bg-blue-50 { background-color: rgba(59,130,246,.12) !important; }
    .dark .bg-red-50,
    .dark .bg-rose-50 { background-color: rgba(244,63,94,.12) !important; }
    .dark .bg-\[\#eff3fe\] { background-color: rgba(79,110,247,.14) !important; }
    .dark .bg-gradient-to-br,
    .dark .bg-gradient-to-r { background-image: none !important; background-color: #111827 !important; }
    .dark .border-gray-100,
    .dark .border-gray-200 { border-color: #263244 !important; }
    .dark .border-emerald-100,
    .dark .border-emerald-200 { border-color: rgba(16,185,129,.28) !important; }
    .dark .border-amber-100,
    .dark .border-amber-200 { border-color: rgba(245,158,11,.3) !important; }
    .dark .border-blue-100,
    .dark .border-blue-200 { border-color: rgba(59,130,246,.3) !important; }
    .dark .border-red-100,
    .dark .border-red-200,
    .dark .border-rose-100,
    .dark .border-rose-200 { border-color: rgba(244,63,94,.3) !important; }
    .dark .border-\[\#c7d3fc\] { border-color: rgba(124,148,255,.34) !important; }
    .dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #263244 !important; }
    .dark .text-gray-900 { color: #f8fafc !important; }
    .dark .text-gray-950 { color: #f8fafc !important; }
    .dark .text-gray-800 { color: #f1f5f9 !important; }
    .dark .text-gray-700 { color: #e5e7eb !important; }
    .dark .text-gray-600 { color: #cbd5e1 !important; }
    .dark .text-gray-500 { color: #94a3b8 !important; }
    .dark .text-gray-400 { color: #64748b !important; }
    .dark .text-emerald-600,
    .dark .text-emerald-500 { color: #34d399 !important; }
    .dark .text-amber-700,
    .dark .text-amber-600,
    .dark .text-amber-500 { color: #fbbf24 !important; }
    .dark .text-blue-600,
    .dark .text-blue-500 { color: #60a5fa !important; }
    .dark .text-red-600,
    .dark .text-red-500,
    .dark .text-rose-600,
    .dark .text-rose-500 { color: #fb7185 !important; }
    .dark .hover\:bg-gray-50:hover,
    .dark .hover\:bg-gray-50\/50:hover,
    .dark .hover\:bg-gray-100:hover,
    .dark .hover\:bg-white:hover { background-color: #1f2937 !important; }
    .dark .hover\:bg-\[\#4f6ef7\]\/\[0\.02\]:hover { background-color: rgba(79,110,247,.1) !important; }
    .dark .hover\:border-gray-100:hover { border-color: #334155 !important; }
    .dark .hover\:text-gray-900:hover,
    .dark .hover\:text-gray-700:hover { color: #f8fafc !important; }
    .dark .focus\:bg-white:focus { background-color: #111827 !important; }
    .dark input,
    .dark select,
    .dark textarea { background-color: #0f172a !important; color: #e5e7eb !important; border-color: #334155 !important; }
    .dark input::placeholder,
    .dark textarea::placeholder { color: #64748b !important; }
    .dark option { background-color: #111827; color: #e5e7eb; }
    .dark .shadow-sm,
    .dark .shadow-lg,
    .dark .shadow-xl,
    .dark .shadow-2xl { box-shadow: 0 12px 32px rgba(0,0,0,.35) !important; }
    .sidebar { width: 260px; transition: width 0.3s ease; }
    .sidebar.collapsed { width: 68px; }
    .main-content { margin-left: 260px; transition: margin-left 0.3s ease; }
    .main-content.collapsed { margin-left: 68px; }
    .sidebar-label { transition: opacity 0.2s ease, width 0.2s ease; }
    .sidebar.collapsed .sidebar-label { opacity: 0; width: 0; overflow: hidden; white-space: nowrap; pointer-events: none; }
    .sidebar.collapsed .section-label,
    .sidebar.collapsed .collapse-label { display: none; }
    .nav-item.active { background: #eff3fe; color: #4f6ef7; }
    .nav-item.active svg { color: #4f6ef7; }
    .dark .nav-item.active { background: rgba(79,110,247,.18); color: #93a7ff; }
    .dark .nav-item.active svg { color: #93a7ff; }
    .nav-item { transition: all 0.15s ease; }
    .panel:hover, .stat-card:hover, .summary-card:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
    .panel, .stat-card, .summary-card { transition: all 0.25s ease; }
    .progress-bar { transition: width 0.6s ease; }
    .pulse-dot { animation: pulse 2s infinite; }
    .spin-anim { animation: spin 0.9s linear infinite; }
    .pulse-anim { animation: pulse 1.5s ease-in-out infinite; }
    .scale-in { animation: scaleIn 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards; }
    #pageProgress {
      transform: translateX(-100%);
      transition: transform 0.35s ease, opacity 0.2s ease;
    }
    #pageProgress.active {
      opacity: 1;
      transform: translateX(-18%);
    }
    #pageProgress.finishing {
      opacity: 1;
      transform: translateX(0);
    }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes scaleIn { from { transform: scale(0); } to { transform: scale(1); } }
    @keyframes slideDown { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 99px; }

    @media (max-width: 1024px) {
      .sidebar { position: fixed; z-index: 50; transform: translateX(-100%); }
      .sidebar.mobile-open { transform: translateX(0); width: 260px; }
      .main-content, .main-content.collapsed { margin-left: 0; }
      .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 40; }
      .mobile-overlay.active { display: block; }
    }
  </style>
  <?php echo $__env->yieldPushContent('styles'); ?>
</head>
<body class="min-h-screen bg-gray-50 text-gray-900">
  <div class="fixed left-0 top-0 z-[80] h-1 w-full overflow-hidden bg-transparent">
    <div id="pageProgress" class="h-full w-full bg-[#4f6ef7] opacity-0 shadow-[0_0_18px_rgba(79,110,247,0.45)]"></div>
  </div>

  <div class="mobile-overlay" id="mobileOverlay" onclick="closeMobileSidebar()"></div>

  <?php echo $__env->make('partials.sidebar', ['active' => trim($__env->yieldContent('active'))], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

  <div class="main-content min-h-screen flex flex-col" id="mainContent">
    <?php echo $__env->make('partials.header', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

    <main id="pageContent" data-active="<?php echo $__env->yieldContent('active', 'dashboard'); ?>" class="flex-1 p-4 sm:p-6 lg:p-8 space-y-6">
      <?php echo $__env->yieldContent('content'); ?>
    </main>

    <footer class="border-t border-gray-100 bg-white px-6 py-4">
      <p class="text-xs text-gray-400">© 2026 InspectAI. AI-Powered Property Inspection Platform.</p>
    </footer>
  </div>

  <script>
    let sidebarCollapsed = false;
    const activeClass = 'active';

    function toggleSidebar() {
      sidebarCollapsed = !sidebarCollapsed;
      document.getElementById('sidebar')?.classList.toggle('collapsed', sidebarCollapsed);
      document.getElementById('mainContent')?.classList.toggle('collapsed', sidebarCollapsed);
      const icon = document.getElementById('collapseIcon');
      if (icon) {
        icon.style.transform = sidebarCollapsed ? 'rotate(180deg)' : 'rotate(0deg)';
      }
    }

    function openMobileSidebar() {
      document.getElementById('sidebar')?.classList.add('mobile-open');
      document.getElementById('mobileOverlay')?.classList.add('active');
    }

    function closeMobileSidebar() {
      document.getElementById('sidebar')?.classList.remove('mobile-open');
      document.getElementById('mobileOverlay')?.classList.remove('active');
    }

    function setTheme(theme) {
      localStorage.setItem('theme', theme);
      document.documentElement.classList.toggle('dark', theme === 'dark');
      document.querySelectorAll('[data-theme-label]').forEach((node) => {
        node.textContent = theme === 'dark' ? <?php echo json_encode(__('Light'), 15, 512) ?> : <?php echo json_encode(__('Dark'), 15, 512) ?>;
      });
    }

    function toggleTheme() {
      setTheme(document.documentElement.classList.contains('dark') ? 'light' : 'dark');
    }

    function formatLiveValue(key, value) {
      if (['estimatedCost', 'repairCost'].includes(key)) {
        return 'Rp ' + Number(value || 0).toLocaleString('id-ID');
      }

      return Number.isFinite(Number(value)) ? Number(value).toLocaleString('id-ID') : value;
    }

    function startPageProgress() {
      const bar = document.getElementById('pageProgress');
      if (!bar) return;
      bar.classList.remove('finishing');
      bar.classList.add('active');
    }

    function finishPageProgress() {
      const bar = document.getElementById('pageProgress');
      if (!bar) return;
      bar.classList.add('finishing');
      setTimeout(() => {
        bar.classList.remove('active', 'finishing');
      }, 260);
    }

    async function refreshLiveSummary() {
      try {
        const response = await fetch('<?php echo e(route('live.summary')); ?>', {
          headers: { 'X-Requested-With': 'XMLHttpRequest' }
        });
        if (!response.ok) return;
        const data = await response.json();
        Object.entries(data).forEach(([key, value]) => {
          document.querySelectorAll(`[data-live="${key}"]`).forEach((node) => {
            node.textContent = formatLiveValue(key, value);
          });
        });
        document.querySelectorAll('[data-live-updated-at]').forEach((node) => {
          node.textContent = data.updatedAt;
        });
      } catch (error) {
        console.debug('Live summary unavailable', error);
      }
    }

    function runPageScripts(doc) {
      if (typeof window.__pageCleanup === 'function') {
        window.__pageCleanup();
        window.__pageCleanup = null;
      }

      doc.querySelectorAll('script[data-page-script]').forEach((script) => {
        const next = document.createElement('script');
        next.dataset.pageScript = 'true';
        next.textContent = script.textContent;
        document.body.appendChild(next);
        next.remove();
      });
    }

    function setActiveNav(active) {
      document.querySelectorAll('[data-nav]').forEach((item) => {
        item.classList.toggle(activeClass, item.dataset.nav === active);
        item.classList.toggle('text-gray-500', item.dataset.nav !== active);
        item.classList.toggle('hover:bg-gray-50', item.dataset.nav !== active);
        item.classList.toggle('hover:text-gray-900', item.dataset.nav !== active);
      });
    }

    async function loadPage(url, push = true) {
      const pageContent = document.getElementById('pageContent');
      startPageProgress();
      pageContent.classList.add('opacity-60');

      try {
        const response = await fetch(url, {
          headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'text/html'
          }
        });
        if (!response.ok) {
          window.location.href = url;
          return;
        }

        const html = await response.text();
        const doc = new DOMParser().parseFromString(html, 'text/html');
        const nextContent = doc.getElementById('pageContent');
        if (!nextContent) {
          window.location.href = url;
          return;
        }

        document.title = doc.title;
        pageContent.innerHTML = nextContent.innerHTML;
        pageContent.dataset.active = nextContent.dataset.active || 'dashboard';
        setActiveNav(pageContent.dataset.active);
        runPageScripts(doc);
        refreshLiveSummary();
        closeMobileSidebar();
        window.scrollTo({ top: 0, behavior: 'smooth' });
        if (push) history.pushState({}, '', url);
      } finally {
        pageContent.classList.remove('opacity-60');
        finishPageProgress();
      }
    }

    document.addEventListener('click', (event) => {
      const link = event.target.closest('a[data-spa-link]');
      if (!link || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
      const target = new URL(link.href, window.location.origin);
      if (target.origin !== window.location.origin) return;
      event.preventDefault();
      loadPage(target.href);
    });

    window.addEventListener('popstate', () => loadPage(window.location.href, false));
    document.addEventListener('DOMContentLoaded', () => {
      setTheme(localStorage.getItem('theme') || 'light');
      refreshLiveSummary();
      setInterval(refreshLiveSummary, 15000);
    });
  </script>
  <?php echo $__env->yieldPushContent('scripts'); ?>
</body>
</html>
<?php /**PATH C:\Users\ariqa\Documents\matkul\smster 4\data sains\prj\homeinspector\resources\views/layouts/app.blade.php ENDPATH**/ ?>