<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Webaccess - Boarding Pass</title>
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
  <link rel="shortcut icon" href="assets/media/logos/favicon.ico" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

  <!-- Original page styles (keeps your theme) -->
  <link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
  <link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
  <link href="assets/css/style.css" rel="stylesheet" type="text/css" />

  <!-- Swup transition styles (custom) -->
  <style>
    /* Fade + small translate for nicer effect */
    .transition-fade {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 350ms ease, transform 350ms ease;
    }
    html.is-animating .transition-fade {
      opacity: 0;
      transform: translateY(10px);
    }

    /* Optional: active link styling */
    a.active { color: #0d6efd; font-weight: 600; }

    /* Keep footer from jumping during animation */
    #swup { will-change: opacity, transform; }
  </style>
</head>
<body id="kt_body" class="bg-body bg-body-inner">
  <div class="d-flex flex-column flex-root">
    <!-- Header (static) -->
    <div id="kt_header" class="header align-items-stretch border bg-white border-bottom">
      <div class="container-xxl d-flex align-items-stretch justify-content-between">
        <div class="d-flex flex-grow-1 flex-lg-grow-0 me-lg-15 pt-4 w-100">
          <a href="home.html" class="mb-5">
            <img alt="logo" src="assets/media/logos/df_logo.png" class="h-30px" />
          </a>
        </div>

        <div class="d-flex float-end align-items-center">
          <div class="d-flex align-items-center d-flex me-3 mt-2">
            <div class="float-end d-flex w-auto rounded w-150px">
              <select onchange="switchPartner()" class="form-select border-0 text-gray-800" id="partners" data-control="select2" data-placeholder="Select an option" data-hide-search="true">
                <option selected value="1">Bank Name</option>
              </select>
            </div>
          </div>

          <div class="float-end align-items-center d-none d-md-flex">
            <div class="d-flex align-items-center d-flex pe-5">
              <div class="text-center">
                <a href="transaction-history.html" class="btn-icon btn-custom btn-icon-muted lh-1 pt-2 d-flex align-items-center">
                  <small class="fs-6 text-gray-800 pe-2">History</small>
                  <i class="fas fa-history text-gray-800 fs-lg-6"></i>
                </a>
              </div>
            </div>
            <div class="d-flex align-items-center d-flex pe-5">
              <div class="text-center">
                <a href="cards.html" class="btn-icon btn-custom btn-icon-muted lh-1 pt-2 d-flex align-items-center">
                  <small class="fs-6 text-gray-800 pe-2 text-nowrap">My Cards</small>
                  <img src="assets/img/my-card-icon.png" />
                </a>
              </div>
            </div>
            <div class="d-flex align-items-center d-flex">
              <div class="w-100px text-center">
                <a href="enter_card_details.html" class="btn btn-primary p-2 mx-auto text-dark">Add Card</a>
              </div>
            </div>
          </div>

          <div class="d-flex align-items-stretch flex-shrink-0">
            <!-- User menu -->
            <div class="d-flex align-items-center ms-1 ms-lg-3" id="kt_header_user_menu_toggle">
              <div class="cursor-pointer symbol symbol-30px symbol-md-30px p-1 border border-dark rounded-circle" data-kt-menu-trigger="click" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
                <img src="assets/media/avatars/blank.png" alt="user" class="rounded-circle" />
              </div>
              <!-- (menu markup omitted for brevity; keep as in your source if needed) -->
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Page top (static) -->
    <div class="bg-primary-internal mb-3">
      <div class="container-xxl">
        <div class="d-flex w-100 align-items-center justify-content-between p-2 fs-2 px-0 lh-lg">
          <div class="d-flex align-items-center justify-content-between">
            <div class="me-5">
              <a href="javascript:history.go(-1)"><i class="fas fa-angle-left float-start fs-3 lh-lg"></i></a>
            </div>
            <div>
              <strong class="lh-1">Accor</strong>
              <p class="m-0 fs-5 lh-1 mb-2">Sector 49 |  Gurgaon</p>
            </div>
          </div>
          <div>
            <span class="d-inline-block mt-2 rounded fs-4 d-flex align-items-center justify-content-between">
              <img src="assets/img/Frame-1.svg" class="me-2 h-30px">Travel F&B
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- Main container -->
    <div class="container-xxl pb-10 overflow-hidden">
      <div>
        <div class="mb-5 d-block float-start p-3 px-0">
          <div class="d-flex justify-content-start align-items-center fs-6">
            <a href="javascript:history.go(-1)" class="text-dark">Provide Information</a>
            <i class="fas fa-angle-right mx-2"></i>
            <a href="#" class="text-dark">Boarding Pass</a>
          </div>
        </div>
        <div class="clearfix"></div>

        <!-- <- ONLY THIS main will be animated by Swup -> -->
        <main id="swup" class="transition-fade">
          <div class="mw-800px mx-auto text-center p-6" data-swup="true">
            <strong class="fs-2 d-inline-block">Add Boarding Pass</strong>
            <p class="mb-10">Scan your boarding pass to unlock exclusive benefits</p>

            <div class="mt-5">
              <div class="row mb-6">
                <div class="col-12 mx-auto">
                  <div class="border border-1 border-dashed border-primary rounded-3 p-3 py-10 text-black h-100 shadow-sm scanbox cursor-pointer" style="background: #fdf6fe;">
                    <img src="assets/img/qr.svg" alt="qr">
                    <strong class="d-block fs-6 mt-3 fw-400">Scan</strong>
                  </div>
                </div>
              </div>

              <div class="mt-10 boarding-detail" style="display: none;">
                <p class="fs-4">Boarding Pass Details</p>
                <div class="table-responsive">
                  <table class="table border">
                    <tr>
                      <td class="border fw-bold">Name</td>
                      <td class="border">Sonal</td>
                    </tr>
                    <tr>
                      <td class="border fw-bold">Date of Travel</td>
                      <td class="border">20 Sep 2025</td>
                    </tr>
                    <tr>
                      <td class="border fw-bold">Source City</td>
                      <td class="border">Delhi, India</td>
                    </tr>
                    <tr>
                      <td class="border fw-bold">Destination City</td>
                      <td class="border">Mumbai, India</td>
                    </tr>
                  </table>
                </div>
              </div>

              <div class="row">
                <div class="col-6">
                  <a href="javascript:history.go(-1)">
                    <button type="button" class="btn btn-white border w-100 float-end w-md-300px">Don't Save</button>
                  </a>
                </div>
                <div class="col-6 text-center">
                  <a href="javascript:history.go(-1)">
                    <button type="button" class="btn btn-primary w-100 float-start w-md-300px">Save</button>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </main>
        <!-- /#swup -->
      </div>
    </div>

    <!-- Footer (static) -->
    <div class="d-flex flex-column flex-column-fluid footer-bg px-5 px-md-20 py-10">
      <div class="row justify-content-between flex-column-fluid flex-center">
        <div class="col-12 col-md-3"><img src="assets/img/powered-by-black.png" class="h-40px" /></div>
        <div class="col-12 col-md-6 my-10 m-md-0 text-start text-md-center">
          <a href="#" class="px-md-5 fs-5 py-3 p-md-0 d-block d-md-inline-block">Terms and Condition</a>
          <a href="#" class="px-md-5 fs-5 py-3 p-md-0 d-block d-md-inline-block">FAQs</a>
          <a href="#" class="px-md-5 fs-5 py-3 p-md-0 d-block d-md-inline-block">Privacy Policy</a>
        </div>
        <div class="col-12 col-md-3 text-start text-md-end">
          <small class=" fs-6">Contact us</small><br/>
          <p class="pt-4"><a href="mailto:info@dreamfolks.in" class="text-decoration-underline fs-5"><img src="assets/img/mail-icon.png" class="me-2" />info@dreamfolks.in</a></p>
          <p><a href="tel:18001234109" class="text-decoration-underline fs-5"><img src="assets/img/phone-icon.png" class="me-2" />1800 1234 109</a></p>
        </div>
      </div>
      <div class="separator border-gray-400 my-10"></div>
      <div class="fs-7 text-center text-gray-500">© 2025 Dreamfolks Services Ltd.</div>
    </div>
  </div>

  <!-- JS: Swup library (must be available before initialization) -->
  <script src="https://unpkg.com/swup@4"></script>

  <!-- Your global bundles -->
  <script>var hostUrl = "assets/";</script>
  <script src="assets/plugins/global/plugins.bundle.js"></script>
  <script src="assets/js/scripts.bundle.js"></script>

  <!-- Init Swup and re-bind page-specific behavior after content swap -->
  <script>
    (function () {
      // helper: bind scanbox click and any other per-page init
      function initSwupContent() {
        // .scanbox click -> show boarding detail
        if (window.jQuery) {
          // use namespaced handlers so we can safely remove them on rebind
          $('.scanbox').off('click.swup').on('click.swup', function () {
            $('.boarding-detail').show();
          });
        } else {
          // vanilla fallback
          document.querySelectorAll('.scanbox').forEach(function (el) {
            el.removeEventListener('click', vanillaHandler);
            el.addEventListener('click', vanillaHandler);
          });
        }

        // mark active links (optional UX enhancement)
        markActiveLinks();
      }

      function vanillaHandler() {
        document.querySelectorAll('.boarding-detail').forEach(function (b) {
          b.style.display = 'block';
        });
      }

      function markActiveLinks() {
        var path = location.pathname.split('/').pop();
        if (!path) path = 'index.html';
        document.querySelectorAll('a[href]').forEach(function (a) {
          var href = a.getAttribute('href');
          if (!href) return;
          // ignore external and javascript/mailto/tel anchors
          if (href.indexOf('http') === 0 || href.indexOf('javascript:') === 0 || href.indexOf('mailto:') === 0 || href.indexOf('tel:') === 0 || href.indexOf('#') === 0) return;
          var hrefFile = href.split('/').pop();
          if (hrefFile === path) a.classList.add('active'); else a.classList.remove('active');
        });
      }

      // wait for full window load, then init Swup (ensures plugins.bundle.js/jQuery are loaded)
      window.addEventListener('load', function () {
        if (typeof Swup === 'undefined') {
          console.warn('Swup not found. Page will work without transitions.');
          initSwupContent();
          return;
        }

        // create Swup instance to replace only #swup container
        var swup = new Swup({
          containers: ['#swup']
        });

        // run initial per-page init
        initSwupContent();

        // when content is replaced, re-run per-page initialization
        swup.on('contentReplaced', function () {
          // scroll to top of page content (optional)
          window.scrollTo(0, 0);
          initSwupContent();
        });
      });
    })();
  </script>

  <!-- Any other page-specific scripts (if required) -->
  <!-- Note: keep these AFTER the Swup init if they depend on jQuery or DOM) -->
</body>
</html>
