<?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;
    }
    /* Container Alignment */
    .toggle-container {
        display: inline-block;
        vertical-align: middle;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    /* Base Hidden Checkbox */
    .status-toggle {
        position: relative;
        display: inline-block;
        width: 90px;
        height: 32px;
        cursor: pointer;
    }

    .status-toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    /* Elegant Track Design */
    .slider-track {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: #ef4444; /* Default Inactive: Red */
        border-radius: 30px;
        transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    /* Premium Sliding Circle Thumb */
    .slider-thumb {
        position: absolute;
        height: 26px;
        width: 26px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        border-radius: 50%;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
        z-index: 2;
    }

    /* Status Text Labels inside track */
    .text-active, .text-inactive {
        position: absolute;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        user-select: none;
        transition: opacity 0.2s ease;
    }

    .text-active {
        color: #ffffff;
        left: 7px;
        opacity: 0; /* Hidden when unchecked (Inactive) */
    }

    .text-inactive {
        color: #ffffff;
        right: 4px;
        opacity: 1; /* Visible when unchecked (Inactive) */
    }

    /* --- INTERACTIVE STATES --- */

    /* Checked State: Active (Green Track & Slide Right) */
    .status-toggle input:checked + .slider-track {
        background-color: #22c55e; /* Active: Vibrant Green */
    }

    .status-toggle input:checked + .slider-track .slider-thumb {
        transform: translateX(58px); /* Moves thumb smoothly to the right */
    }

    .status-toggle input:checked + .slider-track .text-active {
        opacity: 1; /* Show "Active" text */
    }

    .status-toggle input:checked + .slider-track .text-inactive {
        opacity: 0; /* Hide "Inactive" text */
    }

    /* Focus/Hover subtle Ring Accent */
    .status-toggle:hover .slider-track {
        filter: brightness(1.05);
    }


    .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 User 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="fa fa-user" aria-hidden="true"></i>
                </div>
              </div>
              <div class="col-7 col-stats">
                <div class="numbers">
                  <p class="card-category">RM</p>
                  <h4 class="card-title">12</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="fa fa-user-circle-o" aria-hidden="true"></i>
                </div>
              </div>
              <div class="col-7 col-stats">
                <div class="numbers">
                  <p class="card-category">AM</p>
                  <h4 class="card-title">9</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="fa fa-shopping-cart" aria-hidden="true"></i>
                </div>
              </div>
              <div class="col-7 col-stats">
                <div class="numbers">
                  <p class="card-category">Sales</p>
                  <h4 class="card-title">150</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="fa fa-user-plus" aria-hidden="true"></i>
                </div>
              </div>
              <div class="col-7 col-stats">
                <div class="numbers">
                  <p class="card-category">Dealers</p>
                  <h4 class="card-title">7</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="exportUserTables" 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;">Action</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 style="padding: 12px;">
                      <div class="toggle-container">
                          <label class="status-toggle">
                              <input type="checkbox" id="statusSlider" checked>
                              <span class="slider-track">
                                  <span class="slider-thumb"></span>
                                  <span class="text-active">Active</span>
                                  <span class="text-inactive">Inactive</span>
                              </span>
                          </label>
                      </div>
                    </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 style="padding: 12px;">
                      <div class="toggle-container">
                          <label class="status-toggle">
                              <input type="checkbox" id="statusSlider" checked>
                              <span class="slider-track">
                                  <span class="slider-thumb"></span>
                                  <span class="text-active">Active</span>
                                  <span class="text-inactive">Inactive</span>
                              </span>
                          </label>
                      </div>
                    </td>
                </tr>
            </tbody>
        </table>


              </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('#exportUserTables')) {
        $('#exportUserTables').DataTable().destroy();
    }
    $('#exportUserTables').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..."
      }
    });



});


document.getElementById('statusSlider').addEventListener('change', function() {
    if(this.checked) {
        console.log("Status changed to: Active");
        // Trigger your backend update script here
    } else {
        console.log("Status changed to: Inactive");
        // Trigger your backend update script here
    }
});
</script>

</body>
</html>
