/**
 * Fetch IKEA product name and canonical ID via Search API
 */
function getIkeaProductInfo($country, $productId) {
    $country = strtolower($country);
    $lang = ($country == 'ca') ? 'en' : 'en'; // Simple map for now
    $url = "https://sik.search.blue.cdtapps.com/{$country}/{$lang}/search-result-page?q={$productId}";

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_TIMEOUT, 10);
    curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36");
    curl_setopt($ch, CURLOPT_HTTPHEADER, [
        "Accept: application/json",
        "Referer: https://www.ikea.com/{$country}/{$lang}/"
    ]);
    
    $response = curl_exec($ch);
    $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    if ($httpCode != 200 || !$response) {
        return ['name' => "Article $productId", 'canonical_id' => $productId];
    }

    $data = json_decode($response, true);
    $items = $data['searchResultPage']['products']['main']['items'] ?? [];
    
    foreach ($items as $item) {
        $p = $item['product'] ?? [];
        $itemNo = $p['itemNo'] ?? '';
        $name = $p['name'] ?? '';
        $type = $p['typeName'] ?? '';
        
        if ($itemNo == $productId || stripos($name, $productId) !== false) {
            return [
                'name' => trim("$name $type"),
                'canonical_id' => $itemNo
            ];
        }
    }

    return ['name' => "Article $productId", 'canonical_id' => $productId];
}

/**
 * Fetch IKEA stock availability
 */
function getIkeaAvailability($country, $productId, $canonicalId, $storeId = null) {
    if (!$canonicalId) return ['stock' => 0, 'status' => "Invalid ID", 'restock' => null];
    
    $baseUrl = "https://api.ingka.ikea.com/cia/availabilities";
    $clientId = "da465052-7912-43b2-82fa-9dc39cdccef8";

    if ($storeId) {
        $url = "{$baseUrl}/sto/{$storeId}?itemNos={$canonicalId}&expand=Restocks";
    } else {
        $url = "{$baseUrl}/ru/" . strtolower($country) . "?itemNos={$canonicalId}&expand=Restocks";
    }

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, [
        "X-Client-ID: $clientId",
        "Accept: application/json;version=1",
        "Referer: https://www.ikea.com/",
        "Origin: https://www.ikea.com"
    ]);
    curl_setopt($ch, CURLOPT_TIMEOUT, 15);
    curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36");

    $response = curl_exec($ch);
    $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    if ($httpCode == 403) {
        return [
            'stock' => 0,
            'status' => "Blocked (403)",
            'restock' => null
        ];
    }

    if ($httpCode != 200 || !$response) {
        return [
            'stock' => 0,
            'status' => "API Error ($httpCode)",
            'restock' => null
        ];
    }

    $data = json_decode($response, true);
    $availabilities = $data['availabilities'] ?? [];
    
    if (empty($availabilities)) {
        return [
            'stock' => 0,
            'status' => "Not Found",
            'restock' => null
        ];
    }

    // Usually there's only one item in the list for a specific sto/ru call with one itemNo
    $item = $availabilities[0];
    
    $avail = $item['buyingOption']['cashCarry']['availability'] ?? null;
    if (!$avail && $item['classUnitKey']['classUnitType'] == 'RU') {
        $avail = $item['buyingOption']['homeDelivery']['availability'] ?? null;
    }
    
    if (!$avail) {
        return [
            'stock' => 0,
            'status' => "No Data",
            'restock' => null
        ];
    }

    $stock = $avail['quantity'] ?? 0;
    $prob = $avail['probability']['thisDay']['messageType'] ?? 'UNKNOWN';
    
    $restock = null;
    $restocks = $avail['restocks'] ?? [];
    if (!empty($restocks)) {
        $restock = $restocks[0]['earliestDate'] ?? $restocks[0]['date'] ?? null;
    }

    return [
        'stock' => $stock,
        'status' => strtoupper($prob),
        'restock' => $restock
    ];
}

/**
 * List of stores for selection
 */
function getIkeaStores($country) {
    // Subset of stores for CA as requested
    $stores = [
        'ca' => [
            ['buCode' => '216', 'name' => 'Calgary'],
            ['buCode' => '004', 'name' => 'Ottawa'],
            ['buCode' => '149', 'name' => 'Toronto North York'],
            ['buCode' => '039', 'name' => 'Montréal'],
            ['buCode' => '003', 'name' => 'Vancouver Richmond'],
            ['buCode' => '659', 'name' => 'Toronto Downtown'],
            ['buCode' => '313', 'name' => 'Coquitlam'],
            ['buCode' => '349', 'name' => 'Edmonton'],
            ['buCode' => '256', 'name' => 'Etobicoke'],
            ['buCode' => '529', 'name' => 'Halifax'],
            ['buCode' => '559', 'name' => 'Québec City'],
            ['buCode' => '372', 'name' => 'Vaughan'],
            ['buCode' => '249', 'name' => 'Winnipeg'],
            ['buCode' => '414', 'name' => 'Boucherville'],
            ['buCode' => '040', 'name' => 'Burlington'],
        ]
    ];
    
    return $stores[strtolower($country)] ?? [];
}
?>
<!DOCTYPE html>
<html lang="en" class="" data-bs-theme="">

<head>
	<!-- moved favicon to usersc/includes/head_tags.php -->
	<!-- Facebook sharing meta tags (delete if you don't want them) -->
<!-- Be sure to update this in .11 -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta property="og:url"                content="" /> <!-- URL for website (link address) -->
<meta property="og:type"               content="website" /> <!-- type of site -->
<meta property="og:title"              content="Userspice Site" /> <!-- title of site (title of share) -->
<meta property="og:description"        content="Powered by UserSpice" /> <!-- description of site (text which appears when sharing) -->
<meta property="og:image"              content="" /> <!-- URL for preview image -->
<link rel="shortcut icon" href="/favicon.ico">
	<style>
	.close {
	  position: absolute;
	  right: 2rem;
	  top: 2rem;
	  width: 2rem;
	  height: 2rem;
	  opacity: 0.3;
	}
	.close:hover {
	  opacity: 1;
	}
	.close:before, .close:after {
	  position: absolute;
	  left: 15px;
	  content: ' ';
	  height: 1.25rem;
	  width: 2px;
	  background-color: #333;
	}
	.close:before {
	  transform: rotate(45deg);
	}
	.close:after {
	  transform: rotate(-45deg);
	}
	</style>
	<script nonce="6BRZllpKbszALXE1VuEF9Q==" defer src="/users/js/messages.js"></script>
	<title> Outerregion</title>

<!-- Bootstrap 3 Glyphicons for Compatibility Reasons -->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="/usersc/templates/spadmin2-update/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="/usersc/templates/spadmin2-update/assets/css/style.css">

<!-- Table Sorting and Such -->
<link href="https://cdn.datatables.net/v/bs5/jszip-3.10.1/dt-2.1.7/af-2.7.0/b-3.1.2/b-colvis-3.1.2/b-html5-3.1.2/b-print-3.1.2/cr-2.0.4/date-1.5.4/fc-5.0.2/fh-4.0.1/kt-2.12.1/r-3.0.3/rg-1.5.0/rr-1.5.0/sc-2.4.3/sb-1.8.0/sp-2.3.2/sl-2.1.0/sr-1.4.1/datatables.min.css" rel="stylesheet">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/bs5/jszip-3.10.1/dt-2.1.7/af-2.7.0/b-3.1.2/b-colvis-3.1.2/b-html5-3.1.2/b-print-3.1.2/cr-2.0.4/date-1.5.4/fc-5.0.2/fh-4.0.1/kt-2.12.1/r-3.0.3/rg-1.5.0/rr-1.5.0/sc-2.4.3/sb-1.8.0/sp-2.3.2/sl-2.1.0/sr-1.4.1/datatables.min.js"></script>

<!-- DataTables v2 CDN -->
<link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.bootstrap5.min.css">
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.min.js"></script>
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.bootstrap5.min.js"></script>



<link href="/usersc/templates/spadmin2-update/assets/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link
    href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
    rel="stylesheet">

<!-- Custom styles for this template-->
<link href="/usersc/templates/spadmin2-update/assets/css/sb-admin-2.css" rel="stylesheet">
<!--<link href="/usersc/templates/spadmin2-update/assets/vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">-->

<!-- jQuery Fallback -->
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
  document.write(unescape("%3Cscript src='/users/js/jquery.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<style media="screen">
body {
font-family: 'Nunito', sans-serif !important;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js" integrity="sha512-CQBWl4fJHWbryGE+Pc7UAxWMUMNMWzWxF4SQo9CgkJIN1kx6djDQZjh3Y8SZ1d+6I+1zze6Z7kHXO7q3UyZAWw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<!-- Grab the initial menu work that UserSpice does for you -->
  
<!-- This file is a way of allowing the end user to customize stuff -->
<!-- without getting in the middle of the whole template itself -->


    <!-- Page Wrapper -->
    <div id="wrapper">
        <!-- Sidebar -->
        <!-- bartlebee--><ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

    <!-- Sidebar - Brand -->
    <a class="sidebar-brand d-flex align-items-center justify-content-center" href="/index.php">
<!-- Change logo in /usersc/templates/spadmin2-update/assets/functions/themenav.php on line 106-->
        Outerregion    </a>

    <!-- Divider -->
    <hr class="sidebar-divider my-0">

    <!-- Nav Item - Dashboard -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar"><li class="nav-item"><a class="nav-link" href="/"><span class="fa fa-fw fa-home"></span> Home</a></li><li class="nav-item"><a class="nav-link" href="/users/login.php"><span class="fa fa-fw fa-sign-in"></span> Log In</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" id="navbardrop" aria-haspopup="true" aria-expanded="false"><span class="fa fa-fw fa-life-ring"></span> Help</a><div class="dropdown-menu"><a class="dropdown-item" href="/users/forgot_password.php"><span class="fa fa-fw fa-wrench"></span> Forgot Password</a></div></li></ul>    

</ul>
        <!-- End of Sidebar -->

        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">

            <!-- Main Content -->
            <div id="content">
            <a id="page-top"></a>
            
                <!-- Topbar -->
                <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

                    <!-- Sidebar Toggle (Topbar) -->
                    <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                        <i class="fa fa-bars"></i>
                    </button>
                </nav>
                <!-- End of Topbar -->
                <!-- Begin Page Content -->
                <div class='container-fluid'>

<style>
#us-toast-container {
    padding-top: 4.6rem; 
    padding-left: .5rem;
    padding-right: 1rem;   
}

.us-toast {
    background: white !important;
    border: none !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    min-width: 30vw;
    max-width: 85vw;
    margin-bottom: 0.5rem !important; 
}

.us-toast-bar {
    height: 4px;
    width: 100%;
}

.us-toast-bar.success {
    background: linear-gradient(90deg, #28a745, #20c997);
}

.us-toast-bar.danger {
    background: linear-gradient(90deg, #dc3545, #fd7e14);
}

.us-toast-bar.warning {
    background: linear-gradient(90deg, #ffc107, #fd7e14);
}

.us-toast-bar.info {
    background: linear-gradient(90deg, #17a2b8, #6f42c1);
}

.us-toast-bar.primary {
    background: linear-gradient(90deg, #007bff, #6610f2);
}

.us-toast-bar.dark {
    background: linear-gradient(90deg, #343a40, #6c757d);
}

.us-toast-body {
    padding: 1rem 1.25rem;
    color: #495057 !important;
    font-weight: 500;
}

.us-toast .btn-close {
    margin: 0.75rem 0.75rem 0 0;
    opacity: 0.6;
}

.us-toast .btn-close:hover {
    opacity: 1;
}

.us-toast-left .btn-close {
    order: -1;
    margin: 0.75rem 0.75rem 0 0.75rem;
}

.toast-body > li {
    margin-left: 1rem;
    list-style-position: inside;
}

.us-toast-left .us-toast-body {
    padding-left: 0.75rem;
}
</style>

<!-- Bootstrap 5 Toast Container for UserSpice Messages -->
<div id="us-toast-container"
     class="toast-container position-fixed top-0 end-0"
     data-justify="right">
</div><div id="page-wrapper">
	<div class="container">
		<div class="jumbotron">
			<h1 align="center">Welcome To  Outerregion</h1>
			
			<p align="center">
                            				
Welcome to The Outerregion Network. On this website you will find the many different services and products that we offer. 
If you have any questions please feel free to contact us.<br><br>
									<a class="btn btn-warning" href="users/login.php" role="button">Log In &raquo;</a>
					<a class="btn btn-info" href="users/join.php" role="button">Register &raquo;</a>
							</p>
			<br>
			
		</div>
 
	</div>
</div>

<!-- Place any per-page javascript here -->


<!-- /.container-fluid -->

            </div>
            <!-- End of Main Content -->

         
        </div>
        <!-- End of Content Wrapper -->

    </div>
    <!-- End of Page Wrapper -->

    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
        <i class="fas fa-angle-up"></i>
    </a>
<div class="modal fade" id="logoutModal" tabindex="-1" aria-labelledby="exampleModalLabel" style="display: none;" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                <a class="btn btn-primary" href="/users/logout.php">Logout</a>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" style="display: none;" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Edit</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
                        <div class="modal-footer">
                
            </div>
        </div>
    </div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="/usersc/templates/spadmin2-update/assets/vendor/jquery/jquery.min.js"></script>
<script src="/usersc/templates/spadmin2-update/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>


<!-- Core plugin JavaScript-->
<script src="/usersc/templates/spadmin2-update/assets/vendor/jquery-easing/jquery.easing.min.js"></script>

<!-- Custom scripts for all pages-->
<script src="/usersc/templates/spadmin2-update/assets/js/sb-admin-2.min.js"></script>
<!-- Page level custom scripts -->


<!-- Page level plugins -->

<script>
  var coll = document.getElementsByClassName("signaturecollapsible");
  var i;

  for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.display === "block") {
        content.style.display = "none";
      } else {
        content.style.display = "block";
      }
    });
  }
</script>


<script>
  $(document).ready(function() {
    $('#dataTable').DataTable({
      page_length: 50,
      length_menu: [
        [10, 25, 50, 100, -1],
        [10, 25, 50, 100, "All"]
      ]
    });

    $('#hours').DataTable({
      order: [
        [0, 'asc']
      ],
      page_length: 25,
      scrollX: true,
      //   scrollY: 200
    });

    $('#results').DataTable({
      page_length: 50
    });

    $('#ssh').DataTable({
      page_length: 50
    });
  });
</script>

</body>

</html><link rel="stylesheet" type="text/css" href="/usersc/plugins/alerts/assets/default/toastify.min.css">
<script type="text/javascript" src="/usersc/plugins/alerts/assets/default/toastify-js.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
  let modals = [];
  console.log("");
    
    
    
    
    
});
</script>

<style>
  .openMessageButton:hover {
    cursor: pointer;
  }

  .plg-messaging-item:hover {
    background-color: transparent !important;
    cursor: pointer;
  }

  .plg-messaging-badge {
    position: relative;
    display: inline-block;
    border-radius: 0px;
  }

  .plg-messaging-badge-icon {
    position: relative;
    display: inline-block;
    font-size: 1rem;

  }
</style>
<script>
  </script>

<div class="modal fade messages-modal" id="messagesModal" tabindex="-1" aria-labelledby="messagesModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="max-width: 90vw; min-width:90vw;">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="messagesModalLabel"></h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close Messages"></button>
      </div>


      <div class="modal-body">

      <div class="category-buttons-responsive allBtn">

        <a href="#" data-category="all" class="btn btn-outline-primary btn-sm allBtn">All</a>
                <a href="#" data-category="1" class="btn btn-outline-primary btn-sm">Alerts</a>
                        <a href="#" data-category="2" class="btn btn-outline-primary btn-sm">Notifications</a>
                        <a href="#" data-category="3" class="btn btn-outline-primary btn-sm">Messages</a>
                </div>
        <div class="row">
          <div class="col-12 col-lg-2 email-navigation">
            <!-- Sidebar with category links -->
            <div class="card" style="min-height: 75vh;">
              <div class="card-header">
                <h5 class="allBtn">Categories</h5>
                <div class="input-group input-group-sm">
                </div>
              </div>
              <div class="card-body filter-meeting-card-body" style="background-color:white;">
                <div class="list-group list-group-flush">
                  <a href="#" data-category="all" class="list-group-item message-category close-message active d-flex align-items-center allBtn">
                    <i class='bx bxs-inbox me-3 font-20 allBtn'></i><span>All</span>
                  </a>
                                    <a href="#" data-category="1" class="list-group-item message-category close-message d-flex align-items-center">
                    <i class='bx bxs-alarm-snooze me-3 font-20'></i><span>Alerts</span>
                  </a>
                                                      <a href="#" data-category="2" class="list-group-item message-category close-message d-flex align-items-center">
                    <i class='bx bxs-send me-3 font-20'></i><span>Notifications</span>
                  </a>
                                                      <a href="#" data-category="3" class="list-group-item message-category close-message d-flex align-items-center">
                    <i class='bx bxs-star me-3 font-20'></i><span>Messages</span>
                  </a>
                                  </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-lg-10 mb-2 tighten-left tighten-right">
            <!-- Content area for messages -->
            <div class="card" style="min-height: 75vh; max-height: 75vh; overflow-y:scroll;">
              <div class="email-content" style="display: none; padding: 2rem;">
                <!-- Message content goes here -->
                <div class="card">
                  <div class="card-header message-header">
                    <div class="row">
                      <div class="col-12 col-md-6">
                        <p class="message-from" id="messageFrom">From: Sender Name</p>
                      </div>
                      <div class="col-12 col-md-6 text-md-end">
                        <p class="message-date" id="messageDate">Date: January 1, 2023</p>
                      </div>
                    </div>

                  </div>
                  <div class="card-body">
                    <!-- Add a subheading for the message title -->
                    <div class="row">
                      <div class="col-12">
                        <p><span class="message-icon" id="messageIcon"><b></span>Subject: </b><span class="message-title" id="messageTitle">Message Title</span></p>
                        <hr>
                      </div>
                    </div>
                    <div class="message-body" id="messageModalBody">
                      <!-- Message Content Goes Here -->
                    </div>
                    <div class="text-right text-end pull-right">
                      <button type="button" class="btn btn-secondary close-message btn-sm">Close Message</button>
                    </div>

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


              <table class="table omt-table email-list">
                <thead>
                  <tr>
                    <th></th>
                    <th>From</th>
                    <th>Subject</th>
                    <th>
                      <div class="d-flex justify-content-between align-items-center">
                        <span>Date Sent</span>
                        <button class="deleteChecked btn btn-outline-danger btn-sm ms-3 py-0">Delete Checked</button>
                      </div>
                    </th>

                    <th>
                      <input type="checkbox" id="checkAllMessageDelBoxes">

                    </th>
                  </tr>
                </thead>
                <tbody class="messagesHere">

                </tbody>
              </table>
              <div class="text-center no-messages email-list">

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

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close Messages</button>
      </div>
    </div>
  </div>
</div>
<style>
  .unread {
    font-weight: bold;
  }

  .hidden {
    display: none;
  }

  .message-category.active:hover {
    background-color: var(--bs-list-group-active-bg);
    cursor: pointer;
  }

  .message-row {
    cursor: pointer;
  }

  .type1,
  .type2,
  .type3 {
    display: none;
  }

  @media (max-width: 1199px) { 
  .email-navigation {
    display: none; /* Hide sidebar on smaller screens */
  }
  
  .category-buttons-responsive {
    display: block; /* Show the new buttons row */
    overflow-x: auto; /* Allows horizontal scrolling if there are many buttons */
    white-space: nowrap; /* Keeps buttons in one line */
    margin-bottom: 1rem; /* Adds some space below the buttons */
  }
  
  .col-12.col-md-10 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}



</style>
<script>
  let deleted = [];
  $(document).ready(function() {
    // Initialize modal display
    $('#messagesModal').modal({
      show: false
    });

    // Fetch all messages initially
    fetchMessages();

    // Function to display messages
    function displayMessages(category, messages) {
      let tableBody = $('.messagesHere');
      tableBody.empty(); // Clear existing messages

      messages.forEach(function(message) {
        let row = generateMessageRow(message);
        tableBody.append(row);
      });

      // Adjust visibility based on category
      filterMessagesByCategory(category, "189");
    }

    // Helper function to replace null with empty string or "System" and "Message"
    function replaceNullOrEmpty(value, replacement) {
      return value !== null ? value : replacement;
    }
    // Function to generate the HTML for a message row
    function generateMessageRow(message) {

      let fname = replaceNullOrEmpty(message.fname, 'System');
      let lname = replaceNullOrEmpty(message.lname, 'Message');
      console.log(message);
      return `
      <tr class="msg${message.id} type${message.msg_type} message-row" data-id="${message.id}">
        <td class="loadMessage" data-id="${message.id}">${getCategoryIcon(message.msg_type)}</td>
        <td class="loadMessage" data-id="${message.id}"><span class="${message.msg_read === 0 ? 'unread' : ''}" id="msg-${message.id}">${fname} ${lname}</span></td>
        <td class="loadMessage" data-id="${message.id}">${message.title}</td>
        <td class="loadMessage" data-id="${message.id}">${message.date}</td>
        <td><input class="messageDelBox" type="checkbox" data-id="${message.id}"></td>
      </tr>
    `;
    }

    // Function to filter messages by category
    function filterMessagesByCategory(category, diag = false) {
      console.log("filtering by category: " + category);
      console.log("Filtering diag: " + diag);
      if (category === 'all') {
        $('.type1').css('display', 'table-row');
        $('.type2').css('display', 'table-row');
        $('.type3').css('display', 'table-row');

      } else if (category == 1) {
        $('.type1').css('display', 'table-row');
        $('.type2').css('display', 'none');
        $('.type3').css('display', 'none');
      } else if (category == 2) {
        $('.type1').css('display', 'none');
        $('.type2').css('display', 'table-row');
        $('.type3').css('display', 'none');
      } else if (category == 3) {
        $('.type1').css('display', 'none');
        $('.type2').css('display', 'none');
        $('.type3').css('display', 'table-row');
      }
    }


    // Event listener for category filter clicks
    $('.message-category').click(function(e) {
      e.preventDefault();
      $('.message-category').removeClass('active');
      $(this).addClass('active');
      let category = $(this).data('category');
      filterMessagesByCategory(category, "244");
    });

    // Event listener for loading a specific message
    $(document).on("click", ".loadMessage", function() {
      var messageId = $(this).closest('tr').data("id");
      loadSpecificMessage(messageId);
    });

    function loadSpecificMessage(messageId) {
      var formData = {
        'id': messageId,
      };


      $.ajax({
          type: 'POST',
          url: '/usersc/plugins/messaging/assets/parsers/fetchMessage.php',
          data: formData,
          dataType: 'json',
        })
        .done(function(data) {
          console.log(data);
          if (data.success == false) {
            alert("Message not found");
          } else {
            console.log(data.msg);
            $("#id").val(messageId);

            // Set modal header background color and icon based on msg_type
            var msgType = data.msg.msg_type;
            var headerColor = "";
            var iconClass = "";

            switch (msgType) {
              case 1:
                headerColor = "#EF0000";
                iconClass = "fas fa-1x fa-exclamation-circle";
                break;
              case 2:
                headerColor = "#FFAC1D";
                iconClass = "fas fa-1x fa-bell";
                break;
              case 3:
                headerColor = "#007BFF";
                iconClass = "fas fa-1x fa-envelope";
                break;
              default:
                // Handle other cases if needed
                break;
            }

            // Set the modal header content and background color
            // var modalHeader = $(".modal-header");
            // modalHeader.css('background-color', headerColor);
            $(".message-title").html(`${data.msg.title}`);
            $(".message-icon").html(`<i class="${iconClass} me-2" style="color: ${headerColor}"></i>`);

            showMessageContent();

            $("#messageModalBody").html(data.msg.message);
            console.log(data.msg.from_name);
            $("#messageFrom").html(data.msg.from_name);
            $("#messageDate").html(data.msg.date);
            $("#messageBody").html(data.msg.message);
            $("#msg-" + messageId).removeClass("unread");
          }
        });
    }


    // Delete checkboxes
    $("#checkAllMessageDelBoxes").click(function() {
      $(".messageDelBox").prop('checked', $(this).prop('checked'));
    });

    //deleteMessages ajax call
    $(document).on("click", ".deleteChecked", function() {
      console.log("attempting to delete messages");
      var checked = [];
      $(".messageDelBox:checked").each(function() {
        checked.push($(this).data('id'));
      });
      console.log(checked);
      if (checked.length > 0) {

        var formData = {
          'checked': checked,
        };

        $.ajax({
            type: 'POST',
            url: '/usersc/plugins/messaging/assets/parsers/deleteMessages.php',
            data: formData,
            dataType: 'json',
          })
          .done(function(data) {
            console.log(data);
            $("#checkAllMessageDelBoxes").prop('checked', false);
            if (data.success == false) {
              alert("Message not found");
            } else {
              console.log(data.msg);
              //remove row from table
              for (var i = 0; i < checked.length; i++) {
                let messageId = checked[i];
                // Remove the rows from all tables with the matching data-id
                $(".msg" + messageId).remove();
                console.log("msg" + messageId);
                deleted.push(messageId);
                console.log(deleted);
              }

            }
          });
      }
    });

    $(document).on("click", ".openMessageButton", function() {
      let initialCategory = $(this).data('initial-category') || 'all';
      console.log("Initial category: ", initialCategory);

      // Fetch messages first
      fetchMessages(function() {
        // Pre-select the category before showing the modal
        preSelectCategory(initialCategory, function() {
          $('#messagesModal').modal('show');
        });
      });
    });

    // Adjust fetchMessages function to accept a callback
    function fetchMessages(callback) {
      var formData = {
        'method': 'fetchMessages'
      };
      $.ajax({
        type: 'POST',
        url: '/usersc/plugins/messaging/assets/parsers/fetchMessages.php',
        data: formData,
        dataType: 'json',
      }).done(function(data) {
        if (data.success == true) {
          displayMessages('all', data.messages); // Display all messages initially
          if (typeof callback === "function") {
            callback(); // Call the callback function if provided
          }
        }
      });
    }

    // Adjust preSelectCategory function to use a callback for modal display
    function preSelectCategory(category, callback) {
      $('.message-category').removeClass('active');
      $(`.message-category[data-category="${category}"]`).addClass('active');
      filterMessagesByCategory(category);

      if (typeof callback === "function") {
        callback(); // Ensure modal is shown after category selection
      }
    }


    // Helper function to get the icon based on message type
    function getCategoryIcon(msgType) {
      switch (msgType) {
        case 1:
          return '<i class="ms-2 fas fa-exclamation-circle text-danger"></i>';
        case 2:
          return '<i class="ms-2 fas fa-bell text-warning"></i>';
        case 3:
          return '<i class="ms-2 fas fa-envelope text-primary"></i>';
        default:
          return '';
      }
    }

    $(document).on("click", ".close-message", function() {
      hideMessageContent(); // Hide the message content and show the list
    });

    function showMessageContent() {
      $('.email-content').show();
      $('.email-list').hide();
    }

    // Function to hide message content and show message list
    function hideMessageContent() {
      $('.email-content').hide();
      $('.email-list').show();
    }

    //responsive buttons
    adjustCategoryButtonsVisibility();
    $(window).resize(adjustCategoryButtonsVisibility);

    // Listen for the modal show event
    $('#messagesModal').on('show.bs.modal', function () {
      updateCategoryButtonActiveState();
    });

    function adjustCategoryButtonsVisibility() {
  if ($(window).width() < 1200) { // Adjusted from 920 to 1200
    $('.category-buttons-responsive').removeClass('d-none');
  } else {
    $('.category-buttons-responsive').addClass('d-none');
  }
}

    $('.category-buttons-responsive a').on('click', function(e) {
      e.preventDefault();
      var category = $(this).data('category');
      filterMessagesByCategory(category.toString(), "Dynamically updated");
      updateActiveCategoryButton($(this));
    });

    function updateCategoryButtonActiveState() {
      // Assuming 'activeCategory' is the variable holding the current category
      var activeCategory = $('.message-category.active').data('category'); 
      $('.category-buttons-responsive a').each(function() {
        var category = $(this).data('category');
        if (category == activeCategory) {
          updateActiveCategoryButton($(this));
        }
      });
    }

    function updateActiveCategoryButton(activeButton) {
      $('.category-buttons-responsive a').removeClass('btn-primary').addClass('btn-outline-primary');
      activeButton.removeClass('btn-outline-primary').addClass('btn-primary');
    }
  });
</script><script nonce="6BRZllpKbszALXE1VuEF9Q==" type="text/javascript">
setTimeout(function(){
$(".errSpan").html("<h4><br></h4>");
} , "15000");


var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

var tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
var tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

</script>