<!doctype html>
<html lang="bn">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="ফটো কার্ড - <?php echo e($data->title); ?>">
  <meta name="theme-color" content="#9b090d">
  <meta name="msapplication-navbutton-color" content="#9b090d">
  <meta name="apple-mobile-web-app-status-bar-style" content="#9b090d">

  <link href="<?php echo e(asset('assets/images/'.$gs->favicon)); ?>" rel="icon">
  <link href="<?php echo e(asset('assets/images/'.$gs->favicon)); ?>" rel="apple-touch-icon">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.min.css">

  <title>ফটো কার্ড | <?php echo e($data->title); ?></title>

  <style>
    @font-face {
      font-family: "Shurjo";
      font-display: swap;
      font-style: normal;
      font-weight: 400;
      src: url(https://assets.prothomalo.com/prothomalo/assets/ShurjoWeb_400_v5_1.woff2) format('woff2'),
           url(https://assets.prothomalo.com/prothomalo/assets/ShurjoWeb_400_v5_1.woff) format("woff");
    }
    @font-face {
      font-family: "Shurjo";
      font-display: swap;
      font-style: normal;
      font-weight: 700;
      src: url(https://assets.prothomalo.com/prothomalo/assets/ShurjoWeb_700_v5_1.woff2) format('woff2'),
           url(https://assets.prothomalo.com/prothomalo/assets/ShurjoWeb_400_v5_1.woff) format("woff");
    }

    :root {
      --brand: #9b090d;
      --brand-dark: #7a0709;
      --brand-light: #c41015;
      --accent: #fff200;
      --bg-primary: #0c1620;
      --bg-secondary: #13202e;
      --bg-card: #182a3a;
      --bg-glass: rgba(19,32,46,0.85);
      --text-primary: #e8edf2;
      --text-muted: #7a8fa0;
      --border-color: rgba(255,255,255,0.06);
      --radius: 16px;
      --shadow: 0 8px 40px rgba(0,0,0,0.35);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: "Shurjo", sans-serif;
      background: var(--bg-primary);
      color: var(--text-primary);
      min-height: 100vh;
      overflow-x: hidden;
    }

    body::before {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background:
        radial-gradient(ellipse at 30% 20%, rgba(155,9,13,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(22,38,56,0.4) 0%, transparent 50%);
      pointer-events: none;
      z-index: 0;
    }

    /* ===== TOP BAR ===== */
    .top-bar {
      position: relative;
      z-index: 2;
      background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
      padding: 10px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .top-bar .brand {
      font-size: 0.95rem;
      font-weight: 700;
      color: white;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .top-bar .brand i { font-size: 1.2rem; }
    .top-bar .live-clock {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.82rem;
      color: rgba(255,255,255,0.85);
    }
    .top-bar .live-clock .dot {
      width: 6px; height: 6px;
      background: var(--accent);
      border-radius: 50%;
      animation: blink-dot 1s ease-in-out infinite;
    }
    @keyframes blink-dot {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.2; }
    }

    /* ===== MAIN LAYOUT ===== */
    .main-layout {
      position: relative;
      z-index: 1;
      max-width: 900px;
      margin: 0 auto;
      padding: 24px 16px 40px;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 24px;
      align-items: start;
    }

    /* ===== LEFT: CARD PREVIEW ===== */
    .card-preview-section {
      position: sticky;
      top: 24px;
    }

    .photocard-wrapper {
      background: var(--bg-secondary);
      border-radius: var(--radius);
      padding: 16px;
      box-shadow: var(--shadow);
      border: 1px solid var(--border-color);
    }

    #creativedesignbdPhotocard {
      width: 360px;
      min-height: 357px;
      font-family: "Shurjo", sans-serif;
      position: relative;
      background-color: white;
      overflow: hidden;
      border-radius: 6px;
    }

    .card-bg {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 3;
    }
    .card-bg img { width: 100%; height: 100%; object-fit: cover; }

    .creativedesignbd-meta {
      font-size: 10px;
      font-weight: bold;
      position: absolute;
      top: 2px; left: 8px;
      color: white;
      z-index: 33;
    }

    .creativedesignbd-pc-logo {
      z-index: 99;
      position: absolute;
      top: 166px; left: 158px;
      height: 39px;
    }

    .creativedesignbd-pc-photo img {
      width: 100%;
      object-fit: cover;
      position: absolute;
      height: 200px;
      top: 0; left: 0;
      z-index: 1;
    }

    .creativedesign-news-heading {
      position: absolute;
      top: 205px; left: 0;
      width: 100%;
      z-index: 9999;
    }

    .creativedesign-news-heading h2 {
      font-weight: 800;
      font-size: 20px;
      line-height: 28px;
      text-align: center;
      padding: 0 10px;
      margin-top: 5px;
      height: 62px;
      color: #fff;
      align-content: center;
      overflow: hidden;
      cursor: pointer;
    }

    .creativedesign-news-heading h2 .highlight {
      color: var(--accent);
    }

    .ads {
      position: absolute;
      top: 324px; left: 0;
      width: 100%;
      z-index: 9999;
    }
    .ads img { width: 100%; display: block; }

    /* ===== RIGHT: CONTROLS ===== */
    .controls-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Info Banner */
    .info-banner {
      background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
      border-radius: 12px;
      padding: 14px 18px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.85rem;
      color: rgba(255,255,255,0.92);
      font-weight: 500;
      box-shadow: 0 4px 20px rgba(155,9,13,0.25);
    }
    .info-banner .icon-circle {
      width: 36px; height: 36px;
      min-width: 36px;
      background: rgba(255,255,255,0.15);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
    }

    /* Controls Panel */
    .controls-panel {
      background: var(--bg-card);
      border-radius: var(--radius);
      padding: 20px;
      border: 1px solid var(--border-color);
    }

    .panel-title {
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--text-muted);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .panel-title::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border-color);
    }

    .highlight-tip {
      text-align: center;
      padding: 10px 14px;
      background: rgba(255,242,0,0.06);
      border: 1px dashed rgba(255,242,0,0.2);
      border-radius: 10px;
      margin-bottom: 18px;
      font-size: 0.8rem;
      color: var(--accent);
      font-weight: 500;
      animation: blink-subtle 1.8s ease-in-out infinite;
    }
    @keyframes blink-subtle {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.45; }
    }

    .control-group {
      margin-bottom: 16px;
    }
    .control-group:last-of-type { margin-bottom: 0; }

    .control-group label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.82rem;
      font-weight: 500;
      color: var(--text-primary);
      margin-bottom: 10px;
    }
    .control-group label i {
      color: var(--brand-light);
      font-size: 0.95rem;
    }

    /* Range slider */
    .form-range {
      width: 100%;
      height: 5px;
      -webkit-appearance: none;
      appearance: none;
      background: linear-gradient(to right, var(--brand), var(--brand-light));
      border-radius: 3px;
      outline: none;
      cursor: pointer;
    }
    .form-range::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: white;
      border: 3px solid var(--brand);
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .form-range::-webkit-slider-thumb:hover {
      transform: scale(1.25);
      box-shadow: 0 3px 12px rgba(155,9,13,0.4);
    }
    .form-range::-moz-range-thumb {
      width: 18px; height: 18px;
      border-radius: 50%;
      background: white;
      border: 3px solid var(--brand);
      cursor: pointer;
    }

    /* Action Buttons */
    .action-buttons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .btn-action {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 13px 14px;
      border-radius: 12px;
      font-size: 0.88rem;
      font-weight: 600;
      font-family: "Shurjo", sans-serif;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn-action i { font-size: 1.05rem; }

    .btn-view {
      background: var(--bg-secondary);
      color: var(--text-primary);
      border: 1px solid rgba(255,255,255,0.1);
    }
    .btn-view:hover {
      background: rgba(255,255,255,0.08);
      color: white;
      transform: translateY(-1px);
    }

    .btn-download {
      background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);
      color: white;
      box-shadow: 0 4px 16px rgba(155,9,13,0.3);
    }
    .btn-download:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 24px rgba(155,9,13,0.45);
    }

    /* Post Info Card */
    .post-info {
      background: var(--bg-card);
      border-radius: var(--radius);
      padding: 16px 20px;
      border: 1px solid var(--border-color);
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }
    .post-info .cat-badge {
      display: inline-block;
      background: var(--brand);
      color: white;
      font-size: 0.7rem;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 4px;
      white-space: nowrap;
    }
    .post-info .post-title {
      font-size: 0.88rem;
      font-weight: 600;
      line-height: 1.5;
      color: var(--text-primary);
      margin-top: 6px;
    }

    /* Footer */
    .page-footer {
      text-align: center;
      padding-top: 20px;
      font-size: 0.72rem;
      color: var(--text-muted);
      grid-column: 1 / -1;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
      .main-layout {
        grid-template-columns: 1fr;
        padding: 16px 12px 30px;
        gap: 16px;
      }
      .card-preview-section {
        position: relative;
        top: 0;
        display: flex;
        justify-content: center;
      }
      .photocard-wrapper {
        padding: 12px;
        width: fit-content;
      }
      .page-footer { grid-column: 1; }
    }

    @media (max-width: 400px) {
      #creativedesignbdPhotocard {
        width: 310px;
        min-height: 308px;
      }
      .creativedesignbd-pc-photo img { height: 172px; }
      .creativedesign-news-heading { top: 177px; }
      .creativedesign-news-heading h2 { font-size: 17px; line-height: 24px; height: 54px; }
      .creativedesignbd-pc-logo { top: 142px; left: 134px; height: 33px; }
      .ads { top: 280px; }
      .controls-panel { padding: 16px; }
      .btn-action { padding: 11px 10px; font-size: 0.82rem; }
    }

    /* Loading state */
    .btn-download.loading {
      pointer-events: none;
      opacity: 0.7;
    }
  </style>
</head>
<body>

<!-- Top Bar -->
<div class="top-bar">
  <div class="brand">
    <i class="bi bi-image"></i> ফটো কার্ড
  </div>
  <div class="live-clock">
    <span class="dot"></span>
    <span id="Clock"></span>
  </div>
</div>

<!-- Main Layout -->
<div class="main-layout">

  <!-- LEFT: Card Preview -->
  <div class="card-preview-section">
    <div class="photocard-wrapper">
      <div id="creativedesignbdPhotocard">
        <div class="card-bg">
          <img src="<?php echo e(asset('assets/images/logo/'.$gs->photo_card)); ?>" alt="Card Background">
        </div>
        <div class="card-content">
          <div class="creativedesignbd-pcard-header">
            <span class="creativedesignbd-meta"><?php echo e($data->category->title ?? ''); ?> | ঢাকা <span id="ClockCard"></span></span>
          </div>
          <img class="creativedesignbd-pc-logo" src="<?php echo e(asset('assets/images/logo/'.$gs->photo_card_logo)); ?>" alt="Logo">
          <div class="creativedesignbd-pc-photo text-center">
            <img src="<?php echo e(asset('assets/images/post/'.$data->image_big)); ?>" alt="<?php echo e($data->title); ?>">
          </div>
          <div class="creativedesign-news-heading">
            <h2 id="clickable-heading"><?php echo e($data->title); ?></h2>
          </div>
          <div class="ads">
            <img src="<?php echo e(asset('assets/images/logo/'.$gs->photo_card_ads)); ?>" alt="Ads">
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- RIGHT: Controls -->
  <div class="controls-section">

    <!-- Post Info -->
    <div class="post-info">
      <div>
        <span class="cat-badge"><?php echo e($data->category->title ?? ''); ?></span>
        <p class="post-title"><?php echo e($data->title); ?></p>
      </div>
    </div>

    <!-- Info Banner -->
    <div class="info-banner">
      <div class="icon-circle"><i class="bi bi-share"></i></div>
      <span>ফটোকার্ড টি ডাউনলোড করে ফেসবুক ও সোশ্যাল মিডিয়ায় শেয়ার করুন</span>
    </div>

    <!-- Customize Panel -->
    <div class="controls-panel">
      <div class="panel-title">কাস্টমাইজ</div>

      <div class="highlight-tip">
        <i class="bi bi-hand-index"></i> শিরোনামের শব্দে ক্লিক করে হাইলাইট করুন
      </div>

      <div class="control-group">
        <label><i class="bi bi-type"></i> লেখার সাইজ</label>
        <input type="range" class="form-range" id="creativedesignbdAdjstFontSize" min="16" max="50" value="20">
      </div>

      <div class="control-group">
        <label><i class="bi bi-text-paragraph"></i> লাইনের উচ্চতা</label>
        <input type="range" class="form-range" id="creativedesignbdAdjstLineHeight" min="20" max="60" value="28">
      </div>
    </div>

    <!-- Action Buttons -->
    <div class="action-buttons">
      <a href="<?php echo e(route('frontend.postBySubcategory.details', [$data->category->slug ?? 'news', $data->slug])); ?>" class="btn-action btn-view">
        <i class="bi bi-newspaper"></i> পোস্ট দেখুন
      </a>
      <button onclick="captureAndDownload()" class="btn-action btn-download" id="dw_bt">
        <i class="bi bi-download"></i> ডাউনলোড
      </button>
    </div>

  </div>

  <!-- Footer -->
  <div class="page-footer">
    <?php echo e($gs->title ?? 'Channel 5 Bangla'); ?>

  </div>

</div>

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
  // Live Clock with Bangla digits
  const banglaDigits = {'0':'০','1':'১','2':'২','3':'৩','4':'৪','5':'৫','6':'৬','7':'৭','8':'৮','9':'৯','AM':'এএম','PM':'পিএম'};
  function toBangla(str) {
    return String(str).replace(/[0-9]|AM|PM/g, m => banglaDigits[m] || m);
  }

  function displayTime() {
    const now = new Date();
    let h = now.getHours(), m = now.getMinutes(), s = now.getSeconds();
    const period = h >= 12 ? 'PM' : 'AM';
    h = h % 12 || 12;
    const pad = n => n < 10 ? '0' + n : n;
    const time = pad(h) + ':' + pad(m) + ':' + pad(s) + ' ' + period;
    const banglaTime = toBangla(time);
    const el1 = document.getElementById('Clock');
    const el2 = document.getElementById('ClockCard');
    if(el1) el1.textContent = banglaTime;
    if(el2) el2.textContent = banglaTime;
  }
  setInterval(displayTime, 1000);
  displayTime();

  // Highlight words on click
  const heading = document.getElementById("clickable-heading");
  const words = heading.textContent.split(" ");
  heading.innerHTML = words.map(word => `<span>${word}</span>`).join(" ");
  heading.querySelectorAll("span").forEach(span => {
    span.style.cursor = 'pointer';
    span.addEventListener("click", () => span.classList.toggle("highlight"));
  });

  // Slider controls
  document.addEventListener("DOMContentLoaded", () => {
    const fontSlider = document.getElementById("creativedesignbdAdjstFontSize");
    const lineSlider = document.getElementById("creativedesignbdAdjstLineHeight");
    fontSlider.addEventListener("input", () => heading.style.fontSize = fontSlider.value + 'px');
    lineSlider.addEventListener("input", () => heading.style.lineHeight = lineSlider.value + 'px');
  });

  // Download photo card
  async function captureAndDownload() {
    const btn = document.getElementById('dw_bt');
    const element = document.getElementById("creativedesignbdPhotocard");
    btn.classList.add('loading');
    btn.innerHTML = '<i class="bi bi-hourglass-split"></i> তৈরি হচ্ছে...';
    element.style.pointerEvents = "none";

    try {
      const images = element.getElementsByTagName("img");
      await Promise.all(Array.from(images).map(async (img) => {
        if (!img.src.startsWith("data:")) {
          const response = await fetch(img.src);
          const blob = await response.blob();
          const reader = new FileReader();
          await new Promise(resolve => {
            reader.onloadend = () => { img.src = reader.result; resolve(); };
            reader.readAsDataURL(blob);
          });
        }
      }));
      await Promise.all(Array.from(images).map(img =>
        img.complete ? Promise.resolve() : new Promise(resolve => { img.onload = resolve; })
      ));
      const canvas = await html2canvas(element, { backgroundColor: "transparent", scale: 3 });
      const link = document.createElement("a");
      link.href = canvas.toDataURL("image/png");
      link.download = "photocard_<?php echo e($data->slug); ?>.png";
      link.click();
    } catch(e) { console.error('Download error:', e); }

    element.style.pointerEvents = "";
    btn.classList.remove('loading');
    btn.innerHTML = '<i class="bi bi-download"></i> ডাউনলোড';
  }
</script>

</body>
</html>
<?php /**PATH /Users/istiakahmedsourav/Desktop/JAMUNABKP/project/resources/views/frontend/photo_card.blade.php ENDPATH**/ ?>