<?
session_start();
include('includes/config.php');
include('defs.php');

if(strlen($_SESSION['aid'])==0)
  { header('location:index.php');
}

$usr=$_SESSION['uname'];



 ?>


 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>GLAKB  | Customer Ledger</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../dist/css/adminlte.min.css">
  <!--Function Email Availabilty---->

</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
  <!-- Navbar -->
<?php include_once("includes/navbar.php");?>
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
 <?php include_once("includes/sidebar.php");?>

 
  <div class="content-wrapper">

<?
$result12 = mysqli_query($link, "select Role from user_details where Name='$usr' ");
$row12=  mysqli_fetch_object($result12);
$role = $row12->Role;
if($role=='Operator')
{
$result = mysqli_query($link, "select Role from user_priv where Name='$usr' and Form='Cust-Ledger' ");
$row=  mysqli_fetch_object($result);
$role = $row->Role;
if($role=='0')
{
{
echo"<center>";
echo"<br><br><br><br><br>";
echo"<img src='users.png' width='160' height='160'><br>";
echo "<font size=6 color=red><b>ACCESS DENIED!</b><br>";
echo "<font size=4 color=darkblue><b>You Do Not Have Permission to View This Page.</b><br>";
goto a;
}
}
}


echo "                <form name='m_head' action='accounts_rep2.php?usr=$usr' target='_blank' method=POST>";


              ?>
              <html>
<head>
<style>
    
#customers1{
  font-family: Times-Roman;
  border-collapse: collapse;
  width: 60%;
}

#customers1 td, #customers1 th {
  border: 1px solid #4444;
  padding: 10px;
}

#customers1 tr:nth-child(even){background-color:gainsboro ;}


#customers1 th {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: center;
  background-color:dodgerblue;
  color: white;

}
 
#results {
    max-height: 600px;   /* adjust as needed */
    overflow-y: auto;    /* vertical scrollbar */
    border: 1px solid #ccc;
}

 #recordModal {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
        }
        #modalContent {
            background: #fff;
            margin: 5% auto;
            padding: 20px;
            width: 1000px;
            border-radius: 8px;
        }
        #searchBox {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            font-size: 25px;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
        
        tr:hover {
            background: #f5f5f5;
            cursor: pointer;
        }
   
        #suggestions {
            border: 2px solid #ccc;
            display: none;
            position: absolute;
            background-color: white;
            width: 300px;
            max-height: 250px;
            overflow-y: auto;
            z-index: 1000;
        }
        #suggestions div {
            padding: 3px;
            cursor: pointer;
        }
        #suggestions div:hover,
        #suggestions .selected {
            background-color: #f0f0f0;
        }

    </style>
<link rel="stylesheet" href="css/style.css">

<script language="javascript" type="text/javascript">

   window.onload= function show()
                        {
                                if(document.m_head.itemBox.value =="")
                                        {

                                                document.m_head.itemBox.focus()
                                        }
                                        }
                                        
function formconfirm() {
return confirm("Do You want to Continue?<? echo "$coursename";?>");
}

 







             







  </script>





 <table align="center" id="customers1">
       
<tr>
    <th colspan="6"><font size="5">CUSTOMER DETAIL LEDGER CRITERIA</th>

  </tr>               
       
 
  
<td colspan="1"><b><font size=4 color="black">Search Customer Name:</font></b></td>
<td>
<input type="text" id="itemBox" name="itemBox" placeholder="Press Enter to search" autocomplete="off" autofocus>

<div id="recordModal" style="display:none;">
    <div id="modalContent">
        <h3>Enter Customer Name to Search.....</h3>
        <input type="text" id="searchBox" placeholder="Type to search..." autocomplete="off">
        <div id="results"></div>
        <br>
        <button onclick="closeModal()">Close</button>
    </div>
</div>

<script>
const itemBox = document.getElementById("itemBox");
const modal = document.getElementById("recordModal");
const searchBox = document.getElementById("searchBox");
const results = document.getElementById("results");

let selectedIndex = -1;

// === Open modal on ENTER ===
itemBox.addEventListener("keydown", function(e) {
    if (e.key === "Enter") {
        e.preventDefault();
        openModal();
    }
});

function openModal() {
    modal.style.display = "block";
    searchBox.value = "";
    results.innerHTML = "";
    selectedIndex = -1;
    searchBox.focus();
}

function closeModal() {
    modal.style.display = "none";
    itemBox.focus();
}

// === Live search ===
searchBox.addEventListener("keyup", function(e) {
    let q = this.value.trim();

    // Ignore navigation keys
    if (["ArrowUp", "ArrowDown", "Enter", "Escape"].includes(e.key)) return;

    if (q.length > 0) {
        fetch("search4.php?q=" + encodeURIComponent(q))
        .then(res => res.text())
        .then(data => {
            results.innerHTML = data;
            selectedIndex = -1;
        });
    } else {
        results.innerHTML = "";
    }
});

// === Keyboard navigation inside modal ===
searchBox.addEventListener("keydown", function(e) {
    const rows = results.querySelectorAll("tr");
    if (!rows.length) return;

    if (e.key === "ArrowDown") {
        e.preventDefault();
        selectedIndex = (selectedIndex + 1) % rows.length;
        highlightRow(rows);
    } else if (e.key === "ArrowUp") {
        e.preventDefault();
        selectedIndex = (selectedIndex - 1 + rows.length) % rows.length;
        highlightRow(rows);
    } else if (e.key === "Enter" && selectedIndex >= 0) {
        e.preventDefault();
        selectRow(rows[selectedIndex]);  // ✅ fixed line — calls function directly
    } else if (e.key === "Escape") {
        closeModal();
    }
});

function highlightRow(rows) {
    rows.forEach((row, i) => {
        row.style.backgroundColor = i === selectedIndex ? "#d0ebff" : "";
    });
    rows[selectedIndex].scrollIntoView({ block: "nearest" });
}

// === Select row function (works for both click & enter) ===
function selectRow(row) {
    let code = row.getAttribute("data-code");
    if (!code) return;

    document.getElementById("cid").value = code;
    closeModal();

    fetch("get_customer.php?id=" + encodeURIComponent(code))
    .then(res => res.json())
    .then(data => {
        if (data) {
            document.getElementById("name").value = data.name;
            document.getElementById("adr").value = data.address;
            document.getElementById("prov").value = data.prov;
            document.getElementById("city").value = data.city;
            document.getElementById("cper").value = data.cper;
            document.getElementById("cont").value = data.cont;
            document.getElementById("ware").value = data.ware;
            document.getElementById("itype").value = data.ctype;
            document.getElementById("sman").value = data.sman;
            document.getElementById("dued").value = data.dued;
            document.getElementById("cr").value = data.clmt;
        }
    })
    .catch(err => console.error(err));
}

// === Click handler for selecting a record ===
results.addEventListener("click", function(e) {
    const row = e.target.closest("tr");
    if (row) selectRow(row);
});
</script>





<TR>


<td colspan="1"><b><font size=4 color="black">Customer-ID:</b></td>

<?
echo "<td align=left><b><input type='text' name='cid' size='30' style='color: black; font-family: Times-Roman; font-size:2' id='cid' readonly>";


?>
<tr>



<td colspan="1"><b><font size=4 color="black">Customer Name:</b></td>

<?
echo "<td align=left><b><input type='text' name='name' size='30' style='color: black; font-family: Times-Roman; font-size:2' id='name' readonly >";


?>
<tr>


<td colspan="1"><b><font size=4 color="black">Province:</b></td>

<?
echo "<td align=left><b><input type='text' name='prov' size='30' style='color: black; font-family: Times-Roman; font-size:2' id='prov' readonly>";


?>


<TR>
<td colspan="1"><b><font size=4 color="black">City:</b></td>

<?
echo "<td align=left><b><input type='text' name='city' size='45' style='color: black; font-family: Times-Roman; font-size:2' id='city' readonly>";


?>
<TR>
<td colspan="1"><b><font size=4 color="black">Address:</b></td>

<?
echo "<td align=left><b><input type='text' name='adr' size='45' style='color: black; font-family: Times-Roman; font-size:2' id='adr' readonly>";
?>

<tr>
<?



 AddDate("<font size=3 color=black><b>From Date : </b>", "strFrom", "$strvoucher", 25, 10, 0);
  echo "<tr>";
$strvoucher= Date("Y-m-d");
 AddDate("<font size=3 color=black><b>To Date : </b>", "strTo", "$strvoucher", 25, 10, 0);       

?>
 

<tr>
           <td colspan="6" align="center">

<input type="submit" name="save" value="View Details" style="background: none; color:#007BFF; border:2px solid #007BFF; padding:2px 20px; border-radius:5px;">
</td>

</form>
</table>


 <?


a:


            include "footer.php";
?>

</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- bs-custom-file-input -->
<script src="../plugins/bs-custom-file-input/bs-custom-file-input.min.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../dist/js/demo.js"></script>
<!-- Page specific script -->
<script>
$(function () {
  bsCustomFileInput.init();
});
</script>
</body>
</html>
<?php  ?>