<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>@yield('title', 'Clear.Bank')</title>
  <link rel="manifest" href="{{ asset('manifest.json') }}">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="white">
  <link href="{{ asset('css2?family=Inter:wght@400;500;600;700;800&display=swap') }}" rel="stylesheet">
  <link rel="stylesheet" href="{{ asset('dashboard/css/mobile.css') }}">
  <script src="{{ asset('lucide@1.34.0/dist/umd/lucide.min.js') }}"></script>
  @stack('styles')
</head>
<body>
  @yield('content')

  <div class="ios-modal-overlay" id="iosModalOverlay" onclick="closeIOSModal()"></div>
  <div class="ios-modal-sheet" id="iosModalSheet">
    <div class="ios-modal-icon">
      <img src="{{ asset('512/6202/6202860.png') }}" alt="App Logo" style="width: 40px; height: 40px;">
    </div>
    <h3>Install App</h3>
    <p>Install this application on your home screen for quick and easy access when you're on the go.</p>
    <div class="ios-steps">
      <div class="ios-step">
        <span>1.</span>
        <span>Tap the <strong>Share</strong> button at the bottom of Safari.</span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left: auto; color: var(--mob-text);"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="15"></line></svg>
      </div>
      <div class="ios-step">
        <span>2.</span>
        <span>Scroll down and select <strong>Add to Home Screen</strong>.</span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left: auto; color: var(--mob-text);"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
      </div>
    </div>
    <button class="btn-got-it" onclick="closeIOSModal()">Got it!</button>
  </div>

  <script>
    lucide.createIcons();

    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js'); });
    }

    let deferredPrompt;
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
    const isStandalone = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone;

    if (!isStandalone) {
      document.querySelectorAll('.pwa-install-btn').forEach(btn => {
        btn.style.display = 'inline-flex';
      });
      window.addEventListener('beforeinstallprompt', (e) => {
        e.preventDefault();
        deferredPrompt = e;
      });
    }

    function triggerInstall() {
      if (isIOS) {
        document.getElementById('iosModalOverlay').classList.add('open');
        setTimeout(() => document.getElementById('iosModalSheet').classList.add('open'), 10);
      } else if (deferredPrompt) {
        deferredPrompt.prompt();
        deferredPrompt.userChoice.then((choiceResult) => {
          deferredPrompt = null;
        });
      } else {
        alert("To install the app on this device, click the 'Install' icon in your browser's URL address bar, or add this page to your home screen.");
      }
    }

    function closeIOSModal() {
      document.getElementById('iosModalSheet').classList.remove('open');
      setTimeout(() => document.getElementById('iosModalOverlay').classList.remove('open'), 300);
    }
  </script>
</body>
</html>
