Subversion Repositories SmartDukaan

    /* call-target drawer content (Called Partners / OOS Calls) */

    #rdrrCallDrawerBody {

      overflow-x: auto

    }

    #rdrrCallDrawerBody table {

      width: 100%;

      border-collapse: separate;

      border-spacing: 0;

      font-size: 12.5px;

      background: #fff;

      margin: 0

    }

    #rdrrCallDrawerBody table th {

      font-size: 10.5px;

      text-transform: uppercase;

      letter-spacing: .04em;

      color: var(--soft);

      font-weight: 700;

      padding: 9px 10px;

      background: #fafbfe;

      border-bottom: 1px solid var(--line);

      text-align: left;

      white-space: nowrap

    }

    #rdrrCallDrawerBody table td {

      padding: 9px 10px;

      border-bottom: 1px solid var(--line2);

      color: var(--ink);

      font-weight: 500;

      vertical-align: middle

    }

    #rdrrCallDrawerBody table tr:hover {

      background: #f6f8fd

    }

    #rdrrCallDrawerBody audio {

      max-width: 170px;

      height: 26px

    }

  <!-- RBM Call Target Summary — full interactive page injected via iframe srcdoc (no backend change) -->

  <div class="sectionlabel">RBM Call Target Summary</div>

  <div class="card">

    <div class="card-hd">

      <div>

        <h2>Today's Call Coverage per RBM</h2>

        <p class="desc">Full interactive view — all popups, drill-downs and downloads work exactly like the standalone

          page.</p>

      </div>

      <a class="badge-period" href="/indent/rbm_call_target" target="_blank" style="text-decoration:none">Open in new

        tab &rsaquo;</a>

    </div>

    <iframe id="rdrrCallFrame" title="RBM Call Target Summary"

            style="width:100%;min-height:800px;border:0;border-radius:10px;background:#fff;display:block"></iframe>

  </div>

<!-- call-target drill-down drawer (Called Partners / OOS Calls) -->

<div class="rdrr-back" id="rdrrCallDrawerBack">

  <div class="rdrr-panel">

    <button class="x" id="rdrrCallDrawerClose" aria-label="Close">&times;</button>

    <h3 id="rdrrCallDrawerTitle">&mdash;</h3>

    <p class="desc" id="rdrrCallDrawerDesc">&mdash;</p>

    <div id="rdrrCallDrawerBody">

      <div class="loading">

        <div class="spinner"></div>

        Loading…

      </div>

    </div>

  </div>

</div>

    // ------------------------- RBM Call Target iframe -------------------------

    // The /indent/rbm_call_target endpoint returns a Velocity FRAGMENT (no <html>,

    // no Bootstrap/jQuery). When loaded directly in an iframe, Bootstrap modals

    // collapse and their inner Loading… contents render inline. Fix: fetch the

    // fragment, wrap it in a self-contained document that loads jQuery + Popper +

    // Bootstrap, then hand it to the iframe via srcdoc. Zero backend change.

    function loadCallTargetIframe() {

      $.ajax({

        url: "/indent/rbm_call_target",

        type: "GET",

        dataType: "html",

        success: function (fragment) {

          var doc = [

            '<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">',

            '<meta name="viewport" content="width=device-width,initial-scale=1">',

            '<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">',

            '<style>body{margin:0;padding:16px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:#fff}</style>',

            '</head><body>',

            fragment,

            '<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></' + 'script>',

            '<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></' + 'script>',

            '<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></' + 'script>',

            '</body></html>'

          ].join("");

          var frame = document.getElementById("rdrrCallFrame");

          frame.onload = function () {

            hookCallTargetDrawer(frame);

          };

          frame.srcdoc = doc;

        },

        error: function () {

          document.getElementById("rdrrCallFrame").srcdoc =

                  '<div style="padding:24px;font-family:system-ui;color:#97a1b5">Failed to load call-target view.</div>';

        }

      });

    }

    // Redirect the iframe's Bootstrap-modal drill-downs into a slide-in parent drawer

    // that matches the dashboard style. srcdoc iframes inherit the parent origin so

    // we can freely reach into the iframe's window and override its functions.

    function hookCallTargetDrawer(frame) {

      var iw = frame.contentWindow;

      if (!iw) return;

      // Give the source's own <script> a moment to run and define the functions.

      setTimeout(function () {

        try {

          iw.showCalledPartnerDetails = function (authId, rbmName) {

            openCallTargetDrawer("called", authId, rbmName, iw.pageQueryDate);

          };

          iw.showOutOfSequenceDetails = function (authId, rbmName) {

            openCallTargetDrawer("oos", authId, rbmName, iw.pageQueryDate);

          };

        } catch (e) {

          // If cross-origin ever kicks in (shouldn't with srcdoc same-origin),

          // fall back to the iframe's native Bootstrap modal — no crash.

        }

      }, 50);

    }

    function openCallTargetDrawer(kind, authId, rbmName, dateStr) {

      var titleWho = rbmName + (dateStr ? " (" + dateStr + ")" : "");

      var title = (kind === "oos" ? "Out of Sequence Calls — " : "Called Partners — ") + titleWho;

      $("#rdrrCallDrawerTitle").text(title);

      $("#rdrrCallDrawerDesc").text(kind === "oos"

              ? "Calls placed outside the recommended sequence."

              : "All calls made by this RBM today, with recordings.");

      $("#rdrrCallDrawerBody").html('<div class="loading"><div class="spinner"></div>Loading&hellip;</div>');

      $("#rdrrCallDrawerBack").addClass("show");

      var url;

      if (kind === "oos") {

        url = "/indent/rbm_call_target/oos_details?authId=" + encodeURIComponent(authId);

      } else {

        var dp = dateStr ? "&date=" + encodeURIComponent(dateStr) : "";

        url = "/indent/rbm_call_target/called_details?authId=" + encodeURIComponent(authId)

                + "&agentName=" + encodeURIComponent(rbmName) + dp;

      }

      $.ajax({

        url: url, type: "GET", dataType: "json",

        success: function (data) {

          if (!data || data.length === 0) {

            $("#rdrrCallDrawerBody").html('<div class="empty"><div class="ei">📭</div>No entries.</div>');

            return;

          }

          $("#rdrrCallDrawerBody").html(kind === "oos" ? renderOosTable(data) : renderCalledTable(data));

        },

        error: function () {

          $("#rdrrCallDrawerBody").html('<div class="empty">Failed to load details.</div>');

        }

      });

    }

    function renderOosTable(data) {

      var html = '<table><thead><tr><th>S.No</th><th>Party Name</th><th>Code</th><th>Time</th></tr></thead><tbody>';

      data.forEach(function (r, i) {

        html += '<tr><td>' + (i + 1) + '</td><td>' + escapeHtml(r.partyName || "-") +

                '</td><td>' + escapeHtml(r.code || "-") + '</td><td>' + escapeHtml(r.time || "-") + '</td></tr>';

      });

      return html + '</tbody></table>';

    }

    function renderCalledTable(data) {

      var html = '<table><thead><tr>' +

              '<th>S.No</th><th>Party Name</th><th>Code</th><th>Remark</th>' +

              '<th>Call Status</th><th>Duration</th><th>Date/Time</th><th>Recording</th>' +

              '</tr></thead><tbody>';

      data.forEach(function (r, i) {

        var rowStyle = "";

        var recording = "-";

        if (r.breakLog) {

          var status = (r.breakStatus || "").toLowerCase();

          if (status.indexOf("available") >= 0) rowStyle = 'style="background:#fdecec;color:#721c24"';

          else if (status.indexOf("trying") >= 0) rowStyle = 'style="background:#fff5d6;color:#856404"';

          else if (status.indexOf("logged out") >= 0 || status.indexOf("logout") >= 0) rowStyle = 'style="background:#eef0f4;color:#383d41"';

          else if (status.indexOf("break") >= 0) rowStyle = 'style="background:#ffe5cc;color:#c45200"';

        }

        if (r.recordingUrl) {

          recording = '<audio controls preload="none" src="' + escapeHtml(r.recordingUrl) + '"></audio>';

        }

        html += '<tr ' + rowStyle + '>' +

                '<td>' + (i + 1) + '</td>' +

                '<td>' + escapeHtml(r.partyName || (r.breakLog ? (r.breakStatus || "-") : "-")) + '</td>' +

                '<td>' + escapeHtml(r.code || "-") + '</td>' +

                '<td>' + escapeHtml(r.remark || "-") + '</td>' +

                '<td>' + escapeHtml(r.callStatus || "-") + '</td>' +

                '<td>' + escapeHtml(r.callDuration || "-") + '</td>' +

                '<td>' + escapeHtml(r.callDateTime || "-") + '</td>' +

                '<td>' + recording + '</td>' +

                '</tr>';

      });

      return html + '</tbody></table>';

    }

    $("#rdrrCallDrawerClose").on("click", function () {

      $("#rdrrCallDrawerBack").removeClass("show");

    });

    $("#rdrrCallDrawerBack").on("click", function (e) {

      if (e.target === this) $(this).removeClass("show");

    });

    loadCallTargetIframe();