<?php include "header.php";?>
<link rel="stylesheet" href="css/jquery.dataTables.min.css">
<link rel="stylesheet" href="css/buttons.dataTables.min.css">





    <style>
    .table>tbody>tr>td, .table>tbody>tr>th

    {
      padding: 10px 24px !important;
    }
    /* Clean CSS structural reset */
      .state-card-option {
          display: block;
          margin: 0 0 4px 0;
          cursor: pointer;
      }
      /* Completely mask default radio circle buttons */
      .state-card-option input[type="radio"] {
          position: absolute;
          opacity: 0;
          width: 0;
          height: 0;
      }
      /* Elegant state container base design layout */
      .state-card-body {
          padding: 10px 12px;
          border-radius: 10px;
          background: transparent;
          border: 1px solid transparent;
          transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .state-title {
          font-size: 13px;
          color: #334155;
          font-weight: 500;
      }
      .status-marker-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          margin-right: 12px;
          flex-shrink: 0;
      }
      .micro-arrow {
          font-size: 10px;
          color: #94a3b8;
          opacity: 0;
          transition: all 0.15s ease;
          transform: translateX(-4px);
      }

      /* Interactive Hover Styling */
      .state-card-option:hover .state-card-body {
          background: #f8fafc;
          border-color: #e2e8f0;
      }
      .state-card-option:hover .micro-arrow {
          opacity: 1;
          transform: translateX(0);
      }

      /* Selected State: Creates the clean premium aesthetic */
      .state-card-option input[type="radio"]:checked + .state-card-body {
          background: #f0fdf4;
          border-color: #bbf7d0;
      }
      .state-card-option input[type="radio"]:checked + .state-card-body .state-title {
          color: #166534;
          font-weight: 600;
      }

      /* Special Handling rules for the Hot Lead Card */
      .priority-hot-card input[type="radio"]:checked + .state-card-body {
          background: #fef2f2 !important;
          border-color: #fecaca !important;
      }

      /* High-Performance Modern Submit Button Design */
      .premium-action-btn {
          width: 100%;
          border: none;
          background: #0f172a;
          color: #ffffff;
          padding: 12px 16px;
          font-size: 13px;
          font-weight: 600;
          display: flex;
          align-items: center;
          justify-content: space-between;
          cursor: pointer;
          transition: background 0.2s;
      }
      .premium-action-btn .icon-wrap {
          background: rgba(255, 255, 255, 0.15);
          width: 22px;
          height: 22px;
          border-radius: 6px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: transform 0.2s;
      }
      .premium-action-btn:hover {
          background: #1e293b;
      }
      .premium-action-btn:hover .icon-wrap {
          transform: scale(1.08);
          background: #1a73e8;
      }



    .popup {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
}

.form-container {
  background: white;
  width: 500px;
  padding: 20px;
  margin: 10% auto;
}

        .action-bar { display: flex; justify-content: flex-end; margin-bottom: 20px; }
        .btn-add { background-color: var(--accent-color); color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; text-decoration: none; transition: background 0.2s; }
        .btn-add:hover { background-color: var(--accent-hover); }


        /* --- DATATABLES COMPONENT STYLING OVERRIDES --- */
        .dataTables_wrapper .dataTables_length,
        .dataTables_wrapper .dataTables_filter {
            margin-bottom: 20px !important;
        }

        .dataTables_wrapper .dataTables_filter input {
            border: 1px solid var(--border-color) !important;
            border-radius: 6px !important;
            padding: 6px 10px !important;
            outline: none;
        }

        .dataTables_wrapper .dataTables_length select {
            border: 1px solid var(--border-color) !important;
            border-radius: 6px !important;
            padding: 4px 8px !important;
        }
        /* Datatable Styling */
        .table-container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            overflow: hidden;
            border: 1px solid var(--border-color);
                padding: 10px;
        }

        .user-table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            font-size: 0.95rem;
        }

        .user-table th {
            background-color: #f8fafc;
            color: var(--text-muted);
            padding: 16px 20px;
            font-weight: 600;
            border-bottom: 1px solid var(--border-color);
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 0.5px;
        }

        .user-table td {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-dark);
            vertical-align: middle;
        }

        .user-table tr:last-child td {
            border-bottom: none;
        }
        /* Styling Export Tools Layout Block */
        .dt-buttons {
            margin-bottom: 15px !important;
        }

        button.dt-button, div.dt-button, a.dt-button {
            background: white !important;
            border: 1px solid var(--border-color) !important;
            border-radius: 6px !important;
            color: var(--text-muted) !important;
            font-size: 0.85rem !important;
            font-weight: 600 !important;
            padding: 8px 14px !important;
            transition: all 0.2s ease;
        }

        button.dt-button:hover:not(.disabled) {
            background: var(--primary-bg) !important;
            color: var(--text-dark) !important;
            border-color: #cbd5e1 !important;
        }


table.dataTable.display>tbody>tr.odd>.sorting_1, table.dataTable.order-column.stripe>tbody>tr.odd>.sorting_1{
      box-shadow: none !important;
          border-bottom: 1px solid #aeadad !important;
}
table.dataTable.display>tbody>tr.even>.sorting_1, table.dataTable.order-column.stripe>tbody>tr.even>.sorting_1{
      box-shadow: none !important;
}
table.dataTable.stripe>tbody>tr.odd>*, table.dataTable.display>tbody>tr.odd>*{
      box-shadow: none !important;
        border-bottom: 1px solid #aeadad !important;
}

table.dataTable.hover>tbody>tr:hover>*, table.dataTable.display>tbody>tr:hover>*{
      box-shadow: none !important;
}
div.dt-buttons>.dt-button, div.dt-buttons>div.dt-button-split .dt-button{
  color: white !important;
background-color: #182545 !important;
}
button.dt-button:hover:not(.disabled){
  color: white !important;
background-color: #182545 !important;
}
    </style>

<div class="container">
  <div class="page-inner">
    <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4"  >
      <div>
        <h3 class="fw-bold mb-3" style="margin-bottom: 0px !important;">View Lead Management</h3>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6 col-md-3">
        <div class="card card-stats card-primary card-round">
          <div class="card-body">
            <div class="row">
              <div class="col-5">
                <div class="icon-big text-center">
                  <i class="fas fa-users"></i>
                </div>
              </div>
              <div class="col-7 col-stats">
                <div class="numbers">
                  <p class="card-category">Total Leads</p>
                  <h4 class="card-title">1,294</h4>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="card card-stats card-info card-round">
          <div class="card-body">
            <div class="row">
              <div class="col-5">
                <div class="icon-big text-center">

                    <i class="far fa-check-circle"></i>
                </div>
              </div>
              <div class="col-7 col-stats">
                <div class="numbers">
                  <p class="card-category">Closed Leads</p>
                  <h4 class="card-title">903</h4>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="card card-stats card-success card-round">
          <div class="card-body">
            <div class="row">
              <div class="col-5">
                <div class="icon-big text-center">

                  <i class="fas fa-user-check"></i>
                </div>
              </div>
              <div class="col-7 col-stats">
                <div class="numbers">
                  <p class="card-category">New Leads</p>
                  <h4 class="card-title">$ 1,345</h4>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="card card-stats card-secondary card-round">
          <div class="card-body">
            <div class="row">
              <div class="col-5">
                <div class="icon-big text-center">
                  <i class="fas fa-chart-pie"></i>
                </div>
              </div>
              <div class="col-7 col-stats">
                <div class="numbers">
                  <p class="card-category">Accounts</p>
                  <h4 class="card-title">576</h4>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">



            <div class="w-full max-w-6xl mx-auto bg-white p-6 rounded-xl shadow-sm border border-gray-100">




              <div class="card" style="background: #f1f1f1; padding: 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">

                  <div class="table-responsive" style="position: relative; overflow: visible !important;">

                    <div class="card" style="background: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
    <div class="table-responsive table table-bordered">

        <table id="exportUserTable" class="display table table-striped table-hover" style="width:100%; border-collapse: collapse; font-family: sans-serif; font-size: 14px;">
            <thead style="background-color:black !important;">
                <tr style="background: #f9fafb; text-align: left; border-bottom: 2px solid #e5e7eb;">
                    <th style="padding: 12px;    background-color: #111111d4;color: white;">Name</th>
                    <th style="padding: 12px;background-color: #111111d4;color: white;">Email</th>
                    <th style="padding: 12px;background-color: #111111d4;color: white;">Mobile</th>
                    <th style="padding: 12px;background-color: #111111d4;color: white; width: 120px;">Lead Status</th>
                </tr>
            </thead>
            <tbody>
                <tr style="border-bottom: 1px solid #f3f4f6;">
                    <td style="padding: 12px;">Jane</td>
                    <td style="padding: 12px;">jane@gmail.com</td>
                    <td style="padding: 12px;">9999999999</td>
                    <td class="action-td" style="padding: 12px; position: relative; overflow: visible !important;">

                        <button type="button" class="edit-btn btn btn-sm btn-primary"  style="background: #1a73e8; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer;">
                          <i class="fa fa-pencil" aria-hidden="true"></i>
                        </button>

                    </td>
                </tr>
                <tr style="border-bottom: 1px solid #f3f4f6;">
                    <td style="padding: 12px;">Alex</td>
                    <td style="padding: 12px;">alex@gmail.com</td>
                    <td style="padding: 12px;">9898989898</td>
                    <td class="action-td" style="padding: 12px; position: relative; overflow: visible !important;">

                        <button type="button" class="edit-btn btn btn-sm btn-primary" style="background: #1a73e8; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer;">
                          <i class="fa fa-pencil" aria-hidden="true"></i>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>

        <div id="inlineEditPanel" style="    margin-top: 8px;display: none; position: absolute; z-index: 9999; width: 320px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15); font-family: sans-serif;">
            <div style="position: absolute; top: -6px; right: 40px; width: 12px; height: 12px; background: #ffffff; border-left: 1px solid #e5e7eb; border-top: 1px solid #e5e7eb; transform: rotate(45deg);"></div>



            <!-- The Ultimate Contextual Status Switcher Popover -->
            <div class="premium-status-menu shadow-lg"
                 style="width: 290px;
                        background: #ffffff;
                        border-radius: 14px;
                        border: 1px solid rgba(226, 232, 240, 0.9);
                        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
                        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                        overflow: hidden;">

                <!-- Header Block with Dynamic Context Indicator -->


                <div style="background: #f8fafc; border-bottom: 1px solid #f1f5f9; padding: 14px 16px;">
    <div class="d-flex align-items-center justify-content-between">
        <div>
            <span style="font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; display: block;">
                Update Lead Status
            </span>
        </div>
        <a href="javascript:void(0);" id="closePanelBtn" style="color: #64748b; font-size: 12px; font-weight: 600; text-decoration: none; transition: color 0.2s; padding: 2px 6px;" onmouseover="this.style.color='#ef4444'" onmouseout="this.style.color='#64748b'">
            <i class="fa fa-times" style="margin-right: 4px;"></i>Close
        </a>
    </div>
</div>

                <!-- Main Dynamic Form -->
                <form style="margin: 0;" method="POST" action="">
                    <div style="padding: 8px; max-height: 280px; overflow-y: auto;">

                        <!-- Card Option: New -->
                        <label class="state-card-option">
                            <input type="radio" name="lead_status" value="New" checked />
                            <div class="state-card-body d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center">
                                    <div class="status-marker-dot" style="background: #3b82f6;"></div>
                                    <span class="state-title">New</span>
                                </div>
                                <i class="fa fa-chevron-right micro-arrow"></i>
                            </div>
                        </label>

                        <!-- Card Option: Pipeline -->
                        <label class="state-card-option">
                            <input type="radio" name="lead_status" value="Pipeline" />
                            <div class="state-card-body d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center">
                                    <div class="status-marker-dot" style="background: #3b82f6;"></div>
                                    <span class="state-title">Pipeline</span>
                                </div>
                                <i class="fa fa-chevron-right micro-arrow"></i>
                            </div>
                        </label>

                        <!-- Card Option: Qualified -->
                        <label class="state-card-option">
                            <input type="radio" name="lead_status" value="Qualified" />
                            <div class="state-card-body d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center">
                                  <div class="status-marker-dot" style="background: #3b82f6;"></div>
                                    <span class="state-title">Qualified</span>
                                </div>
                                <i class="fa fa-chevron-right micro-arrow"></i>
                            </div>
                        </label>

                        <!-- Card Option: Closed -->
                        <label class="state-card-option priority-hot-card">
                            <input type="radio" name="lead_status" value="Closed" />
                            <div class="state-card-body d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center">
                                      <div class="status-marker-dot" style="background: #3b82f6;"></div>
                                    <span class="state-title">Closed</span>
                                </div>
                                  <i class="fa fa-chevron-right micro-arrow"></i>
                            </div>
                        </label>

                        <!-- Card Option: Lost -->
                        <label class="state-card-option">
                            <input type="radio" name="lead_status" value="Lost" />
                            <div class="state-card-body d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center">
                                    <div class="status-marker-dot" style="background: #3b82f6;"></div>
                                    <span class="state-title">Lost</span>
                                </div>
                                <i class="fa fa-chevron-right micro-arrow"></i>
                            </div>
                        </label>
                        <!-- Card Option: No Response -->
                        <label class="state-card-option">
                            <input type="radio" name="lead_status" value="Response" />
                            <div class="state-card-body d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center">
                                      <div class="status-marker-dot" style="background: #3b82f6;"></div>
                                    <span class="state-title">No Response</span>
                                </div>
                                <i class="fa fa-chevron-right micro-arrow"></i>
                            </div>
                        </label>

                    </div>

                    <!-- The Absolute Best: Full-Width Kinetic Action Strip -->
                    <button type="submit" class="premium-action-btn">
                        <span>Submit</span>

                    </button>
                </form>
            </div>




                  </div>
              </div>







  </div>
</div>
</div>


</div>


</div>
</div>





</div>
</div>

<footer class="footer">
  <div class="container-fluid d-flex justify-content-between">


    <div style="  padding-left: 270px;">
      Copyright © 2026. All rights reserved.
      <!--<a target="_blank" href="">Copyright © 2026. All rights reserved.</a>.-->
    </div>
  </div>
</footer>
</div>


<!-- End Custom template -->
</div>

<!--   Core JS Files   -->
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>



<script src="js/jquery-3.7.0.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>

<!-- datatable buttons -->
<script src="js/dataTables.buttons.min.js"></script>
<script src="js/jszip.min.js"></script>
<script src="js/pdfmake.min.js"></script>
<script src="js/vfs_fonts.js"></script>
<script src="js/buttons.html5.min.js"></script>
<script src="js/buttons.print.min.js"></script>

<script src="layouts.js"></script>
<script>
jQuery(document).ready(function($) {
    // 1. DataTables standard configuration setup
    if ($.fn.DataTable.isDataTable('#exportUserTable')) {
        $('#exportUserTable').DataTable().destroy();
    }
    $('#exportUserTable').DataTable({
      "pageLength": 10,   // Default view size to exactly 10 row items
      "lengthMenu": [ [5, 10, 25, 50, -1], [5, 10, 25, 50, "All"] ], // Dropdown selectors
      "dom": 'Bfrtip',    // Framework structure map: Buttons (B), Filter (f), Table (r/t), Info (i), Pagination (p)
      "buttons": [
          {
              extend: 'copy',
              text: '<i class="fa-regular fa-copy"></i> Copy',
              exportOptions: { columns: [0, 1] } // Ignores status & actions column elements on export
          },
          {
              extend: 'csv',
              text: '<i class="fa-solid fa-file-csv"></i> CSV',
              exportOptions: { columns: [0, 1] }
          },
          {
              extend: 'excel',
              text: '<i class="fa-regular fa-file-excel"></i> Excel',
              exportOptions: { columns: [0, 1] }
          },
          {
              extend: 'pdf',
              text: '<i class="fa-regular fa-file-pdf"></i> PDF',
              exportOptions: { columns: [0, 1] }
          },
          {
              extend: 'print',
              text: '<i class="fa-solid fa-print"></i> Print',
              exportOptions: { columns: [0, 1] }
          }
      ],
      "language": {
          "search": "",
          "searchPlaceholder": "Quick Search..."
      }
    });

    const panel = document.getElementById('inlineEditPanel');

    // 2. Open Handler Context Configuration
    $(document).on('click', '.edit-btn', function(e) {
        e.preventDefault();
        e.stopPropagation(); // Shield page background hooks from breaking triggers

        const btn = $(this);
        const parentTd = btn.closest('.action-td');

        // Extract value fields
        $('#view_name').val(btn.data('name'));
        $('#view_email').val(btn.data('email'));
        $('#view_mobile').val(btn.data('role'));

        // CALCULATE POSITION: Calculate relative to the common table-responsive parent wrapper
        const tdPosition = parentTd.position();
        const tdHeight = parentTd.outerHeight();
        const tdWidth = parentTd.outerWidth();
        const panelWidth = $(panel).outerWidth();

        // Target placement metrics right below the cell bounding box
        panel.style.top = (tdPosition.top + tdHeight + 6) + 'px';

        // Right-aligns the popup panel with the right edge boundary of your <td> column box
        panel.style.left = (tdPosition.left + tdWidth - panelWidth) + 'px';

        panel.style.display = 'block';
    });

    // 3. Clean Event Listener Control Functions for Toggles & Close Triggers
    function closePopupBox(event) {
        if (event) {
            event.preventDefault();
            event.stopPropagation();
        }
        panel.style.display = 'none';
    }

    const closeCrossIcon = document.getElementById('closePanelBtn');
    const cancelActionBtn = document.getElementById('cancelPanelBtn');

    if (closeCrossIcon) closeCrossIcon.addEventListener('click', closePopupBox);
    if (cancelActionBtn) cancelActionBtn.addEventListener('click', closePopupBox);

    // Stop internal menu interaction inputs from triggering parent window layout dismissals
    if (panel) {
        panel.addEventListener('click', function(e) {
            e.stopPropagation();
        });
    }

    // Safely hide display layers if user logs empty page backdrop clicks
    document.addEventListener('click', function(e) {
        if (panel.style.display === 'block' && !e.target.closest('.edit-btn')) {
            panel.style.display = 'none';
        }
    });

    // Handle Form Submit Submissions
    $('#view_leadform').on('submit', function(e) {
        e.preventDefault();
        alert("Changes saved inside table limits!");
        closePopupBox();
    });
});
</script>

</body>
</html>
