<?php
include('head.php');
include('header.php');
//require_once('functionReports.php');
//session_start();
$clientName = isset($_SESSION['clientName']) ? $_SESSION['clientName'] : 'Client';
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Market Insights - <?= htmlspecialchars($clientName) ?></title>

  <!-- jQuery and Chart.js -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>

  <style>
    :root{--bg:#f8fafc; --card:#ffffff; --muted:#64748b; --accent:#3b82f6; --border:#e2e8f0; --success:#059669; --warning:#f59e0b; --danger:#dc2626;}
    *{box-sizing:border-box}
    body{font-family:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:#0f172a; margin:0; padding:0; line-height:1.5;}
    .container-fluid{max-width:98%;margin:0 auto; padding:10px;margin-top: 80px;}
    .container{overflow-x : hidden;width: 90%;margin :0%  auto;}
    
    /* Header Section */
    .dashboard-header{background:linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:white; padding:24px 0; margin:60px 0px 0px 0px; box-shadow:0 4px 12px rgba(0,0,0,0.1);}
    .header-content{max-width:95%; margin:0 auto; padding:0 20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
    .header-left h1{font-size:28px; font-weight:700; margin:0; text-shadow:0 2px 4px rgba(0,0,0,0.1);}
    .header-left .subtitle{font-size:14px; opacity:0.9; margin-top:4px;}
    .header-controls{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
    .header-controls select, .header-controls input{padding:8px 12px; border:1px solid rgba(255,255,255,0.3); border-radius:6px; background:rgba(255,255,255,0.1); color:white; font-size:14px;}
    .header-controls input[type="date"]{color:white; background:rgba(255,255,255,0.1);}
    .header-controls input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);}
    .header-controls select::placeholder, .header-controls input::placeholder{color:rgba(255,255,255,0.7);}
    .header-controls .btn{background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.3); color:white; font-weight:500;}
    .header-controls .btn:hover{background:rgba(255,255,255,0.3);}
    
    /* Cards and Layout */
    .card { background:var(--card); padding:20px; border-radius:12px; border:1px solid var(--border); box-shadow: 0 2px 8px rgba(15,23,42,0.04); transition:all 0.2s ease;}
    .card:hover{box-shadow: 0 4px 16px rgba(15,23,42,0.08); transform:translateY(-1px);}
    
    /* Buttons */
    .btn { display:inline-flex; gap:8px; align-items:center; padding:10px 16px; border-radius:8px; text-decoration:none; border:1px solid var(--border); background:#fff; cursor:pointer; font-size:14px; font-weight:500; transition:all 0.2s ease;}
    .btn:hover{background:#f8fafc; border-color:var(--accent);}
    .btn.primary { background:var(--accent); color:white; border-color:var(--accent); }
    .btn.primary:hover{background:#2563eb;}
    
    /* Iframe Container */
    .iframe-container {
      position: relative;
      width: 100%;
      height: calc(100vh - 120px);
      min-height: 700px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 16px rgba(15,23,42,0.08);
      background: white;
      border: 1px solid #e2e8f0;
    }
    
    .iframe-container iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
      background: white;
    }
    
    .iframe-loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      color: var(--muted);
      z-index: 1;
    }
    
    .iframe-loading i {
      font-size: 48px;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .iframe-error {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: var(--danger);
      display: none;
      z-index: 2;
    }
    
    .iframe-error i {
      font-size: 48px;
      margin-bottom: 16px;
    }
    
    @media(max-width:900px){ 
      .header-content{flex-direction:column; align-items:flex-start;}
      .iframe-container {
        height: calc(100vh - 140px);
        min-height: 600px;
      }
    }
    
    /* Additional iframe optimization */
    @media(max-width:768px) {
      .iframe-container {
        border-radius: 8px;
        height: calc(100vh - 100px);
        min-height: 500px;
      }
      .container-fluid {
        padding: 5px;
        max-width: 100%;
      }
    }
    .dashboard-header {   margin-top: 60px;    width: 100%;}
  </style>
</head>
<body>
  <div class="dashboard-header">
    <div class="header-content">
      <div class="header-left">
        <!--<h1><i class="fas fa-chart-pie"></i> Market Insights Dashboard</h1>-->
        <h1><i class="fas fa-chart-pie"></i> Patient Insights Dashboard</h1>
        <div class="subtitle">Comprehensive market analysis and insights for <?= htmlspecialchars($clientName) ?></div>
      </div>
      <div class="header-controls">
        <button class="btn" id="refreshBtn"><i class="fas fa-sync-alt"></i> Refresh</button>
        <button class="btn" id="fullscreenBtn"><i class="fas fa-expand"></i> Fullscreen</button>
        <a href="ms.php" target="_blank" class="btn"><i class="fas fa-external-link-alt"></i> Open in New Tab</a>
      </div>
    </div>
  </div>
  
  <div class="container">
    <div class="iframe-container" id="iframeContainer">
      <div class="iframe-loading" id="iframeLoading">
        <i class="fas fa-spinner"></i>
        <div>Loading Market Insights...</div>
      </div>
      <div class="iframe-error" id="iframeError">
        <i class="fas fa-exclamation-triangle"></i>
        <div>
          <h4>Unable to load Market Insights</h4>
          <p>Please check your connection and try again.</p>
          <button class="btn primary" onclick="reloadIframe()">
            <i class="fas fa-redo"></i> Retry
          </button>
        </div>
      </div>
      <iframe 
        id="marketInsightsFrame" 
        src="ms.php?iframe=1" 
        title="Market Insights"
        onload="handleIframeLoad()"
        onerror="handleIframeError()"
        style="width: 100%; height: 100%; border: none; display: block;">
      </iframe>
    </div>
  </div>

<script>
$(function(){
  let isFullscreen = false;
  
  // Handle iframe loading
  function handleIframeLoad() {
    $('#iframeLoading').hide();
    $('#iframeError').hide();
    
    // Try to optimize iframe content
    try {
      const iframe = document.getElementById('marketInsightsFrame');
      const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
      
      // Add some CSS to the iframe content to ensure it uses full space
      const style = iframeDoc.createElement('style');
      style.textContent = `
        body { margin: 0 !important; padding: 0 !important; }
        .container { padding: 8px !important; margin: 0 !important; max-width: 100% !important; }
        .top-navbar { display: none !important; }
        .wrapper { padding-top: 0 !important; }
      `;
      iframeDoc.head.appendChild(style);
    } catch (e) {
      // Cross-origin restrictions - this is expected
      console.log('Cannot access iframe content due to same-origin policy');
    }
  }
  
  function handleIframeError() {
    $('#iframeLoading').hide();
    $('#iframeError').show();
  }
  
  // Reload iframe
  function reloadIframe() {
    $('#iframeLoading').show();
    $('#iframeError').hide();
    const iframe = $('#marketInsightsFrame');
    iframe.attr('src', iframe.attr('src'));
  }
  
  // Refresh button
  $('#refreshBtn').on('click', function(){
    reloadIframe();
  });
  
  // Fullscreen toggle
  $('#fullscreenBtn').on('click', function(){
    const container = $('#iframeContainer')[0];
    const btn = $(this);
    
    if (!isFullscreen) {
      // Enter fullscreen
      if (container.requestFullscreen) {
        container.requestFullscreen();
      } else if (container.webkitRequestFullscreen) {
        container.webkitRequestFullscreen();
      } else if (container.msRequestFullscreen) {
        container.msRequestFullscreen();
      }
      btn.html('<i class="fas fa-compress"></i> Exit Fullscreen');
      isFullscreen = true;
    } else {
      // Exit fullscreen
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
      btn.html('<i class="fas fa-expand"></i> Fullscreen');
      isFullscreen = false;
    }
  });
  
  // Listen for fullscreen changes
  document.addEventListener('fullscreenchange', function() {
    if (!document.fullscreenElement) {
      $('#fullscreenBtn').html('<i class="fas fa-expand"></i> Fullscreen');
      isFullscreen = false;
    }
  });
  
  document.addEventListener('webkitfullscreenchange', function() {
    if (!document.webkitFullscreenElement) {
      $('#fullscreenBtn').html('<i class="fas fa-expand"></i> Fullscreen');
      isFullscreen = false;
    }
  });
  
  // Handle iframe communication (optional)
  window.addEventListener('message', function(event) {
    // Handle messages from the iframe if needed
    if (event.origin !== window.location.origin) return;
    
    if (event.data.type === 'resize') {
      // Handle resize requests from iframe
      const container = $('#iframeContainer');
      if (event.data.height) {
        container.css('height', event.data.height + 'px');
      }
    }
  });
  
  // Ensure iframe takes full available space on window resize
  $(window).on('resize', function() {
    const iframe = $('#marketInsightsFrame');
    if (iframe.length) {
      // Force iframe to recalculate its size
      iframe.css('height', '99%');
      setTimeout(() => {
        iframe.css('height', '100%');
      }, 10);
    }
  });
  
  // Global functions for iframe callbacks
  window.handleIframeLoad = handleIframeLoad;
  window.handleIframeError = handleIframeError;
  window.reloadIframe = reloadIframe;
  
  // Auto-hide loading after timeout as fallback
  setTimeout(function() {
    if ($('#iframeLoading').is(':visible')) {
      $('#iframeLoading').hide();
    }
  }, 10000);
});
</script>
<?php include('footer.php'); ?>
</body>
</html>