@extends(backpack_view('blank'))

@php

use App\Models\LlxSociete;
use Illuminate\Support\Facades\DB;

   /* $latestTransactions = LlxSociete::leftJoin('transactions', 'llx_societe.code_client', '=', 'transactions.idFamille')
    ->select('llx_societe.*', 'transactions.*')
    ->groupBy('llx_societe.code_client')
    ->havingRaw('transactions.created_at = MAX(transactions.created_at)')
    ->get();*/

	$latestTransactions = DB::table('llx_societe')
    ->join('transactions', 'llx_societe.code_client', '=', 'transactions.idFamille')
    ->select('llx_societe.code_client', 'llx_societe.nom', 'llx_societe.name_alias', 'transactions.lastLevCount', 'transactions.levCount', 'transactions.created_at', 'transactions.amount', 'transactions.typeOperation')
    ->orderBy('transactions.created_at', 'ASC')
	//->groupBy('llx_societe.code_client')
    //->having('transactions.created_at', '=', DB::raw('(SELECT MAX(created_at) FROM transactions WHERE idFamille = llx_societe.code_client)'))
    ->get()->groupBy(function($data) {
 return $data->code_client;
});

	/*$latestTransactions = LlxSociete::with('latestTransaction')
    ->get();*/



@endphp

@push('after_styles')
    <style>
        #pagination {
            margin-top: 20px;
        }

        #pagination li {
            display: inline;
            margin-right: 10px;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        th {
            background-color: #f2f2f2;
        }
		tfoot {
		  background-color: #f2f2f2;
		  font-weight: bold;
		}
		/* Target the text input by its ID */
		#search-input {
		  /* Adjust the size and padding */
		  width: 300px;
		  padding: 10px;

		  /* Modify the border */
		  border: 1px solid #ccc;
		  border-radius: 4px;

		  /* Customize the font */
		  font-family: Arial, sans-serif;
		  font-size: 14px;
		  color: #333;

		  /* Add some space between the input and the surrounding elements */
		  margin-bottom: 10px;
		}

		/* Style the placeholder text */
		#search-input::placeholder {
		  color: #999;
		}

		/* Apply additional styles when the input is focused */
		#search-input:focus {
		  border-color: #66afe9;
		  outline: none;
		}
		.myButton {
		  /* Adjust the size and padding */
		  width: 100px;
		  height: 30px;

		  /* Customize the background color */
		  background-color: #4CAF50;
		  color: white;

		  /* Modify the border */
		  border: none;
		  border-radius: 4px;

		  /* Add hover effect */
		  transition: background-color 0.3s ease;
		}

		/* Apply styles when hovering over the button */
		.myButton:hover {
		  background-color: #45a049;
		}

		/* Apply additional styles when the button is pressed */
		.myButton:active {
		  background-color: #3e8e41;
		}
		#pagination {
		  /* Center align the pagination */
		  text-align: center;
		}

		#pagination ul li a {
		  /* Adjust the size and padding */
		  display: inline-block;
		  padding: 6px 12px;
		  margin: 0 3px;

		  /* Customize the background color */
		  background-color: #f2f2f2;
		  color: #333;

		  /* Modify the border */
		  border: 1px solid #ccc;
		  border-radius: 4px;

		  /* Set font properties */
		  text-decoration: none;
		  font-size: 14px;
		}

		#pagination ul li a:hover {
		  /* Apply hover effect */
		  background-color: #ddd;
		}

	
    </style>
@endpush

@section('content')

<br>

<input type="text" id="search-input" placeholder="Chercher...">
        <table
		style="width: 100%"
          id="crudTable"
          class="bg-white table table-striped table-hover nowrap rounded shadow-xs border-xs mt-2"
          cellspacing="0">
            <thead style="width: 100%">
              <tr style="width: 100%">

                  <th>
                    ID Client
                  </th>
				  <th>
                    Nom
                  </th>
				  <th>
                    Prénom
                  </th>
               <th>
                    Ancien solde de LEVs
                  </th>
				  <th>
                    Solde actuel de LEVs
                  </th>
				  <th>
                    #
                  </th>

              </tr>
            </thead>
            <tbody style="width: 100%" id="table-body">


				@foreach ($latestTransactions as $key => $transaction)

				<tr style="width: 100%">
					<td>
                    {{$key}}
                  </td>
				  <td>
				  {{$transaction[count($transaction) - 1]->nom}}
                  </td>
				  <td>
                    {{$transaction[count($transaction) - 1]->name_alias}}
                  </td>
				  <td>
                   {{$transaction[count($transaction) - 1]->lastLevCount}}
                  </td>
				  <td>
                   {{$transaction[count($transaction) - 1]->levCount}}
                  </td>

				  <td>
						<button class="myButton"" ontouchstart="showDetails({{$latestTransactions[$key]}}, '{{$key}}')" onclick="showDetails({{$latestTransactions[$key]}}, '{{$key}}')"><i class="nav-icon la la-eye"></i> Afficher</button>
				  </td>
				@endforeach

            </tbody>

			<tfoot>
			 <tr>
      <td colspan="6"><span id="pagination"></span></td>
    </tr>
			</tfoot>
          </table>




<div id="details" style="display: none; width: 100%">
<div id="qrcode"></div>
<br>
<button onclick="hideDetails()" class="myButton"><i class="nav-icon la la-hand-point-left"></i> Retour</button>
  <br>
  
<table id="array-table" style="width: 100%; margin-top: 10px;"></table>
<br>
  <br>
</div>

<script type="text/javascript" src="{{ asset('js/qrcode.js') }}"></script>
<script>
    // Number of items per page
    var itemsPerPage = 10;

    var table = document.getElementById("crudTable");
    var rows = table.tBodies[0].rows;
    var pageCount = Math.ceil(rows.length / itemsPerPage);

    function showPage(page) {
      var start = (page - 1) * itemsPerPage;
      var end = start + itemsPerPage;

      for (var i = 0; i < rows.length; i++) {
        rows[i].style.display = i >= start && i < end ? "table-row" : "none";
      }
    }

    function createPagination() {
      var pagination = document.getElementById("pagination");

      var pageList = document.createElement("ul");
      pageList.classList.add("pagination");

      for (var i = 1; i <= pageCount; i++) {
        var listItem = document.createElement("li");
        var link = document.createElement("a");
        link.href = "#";
        link.textContent = i;
        link.addEventListener("click", function (event) {
          event.preventDefault();
          showPage(parseInt(this.textContent));
        });
        listItem.appendChild(link);
        pageList.appendChild(listItem);
      }

      pagination.appendChild(pageList);
    }

    showPage(1);
    createPagination();

	function showDetails(data, qrCodeData) {
		generateArrayTable(data)
		document.getElementById("qrcode").innerHTML = "";
		var qrcodeContainer = document.getElementById("qrcode");
		var qrCode = new QRCode(qrcodeContainer, {
		  text: qrCodeData,
		  width: 128,
		  height: 128
		});

		showElement("details")
		hideElement("crudTable")
		hideElement("search-input")
	}

	function hideDetails() {
	  showElement("crudTable")
	  showElement("search-input")
	  hideElement("details")
	}

	function showElement(elementId) {
	  var element = document.getElementById(elementId);
	  if (element) {
		element.style.display = 'table';
	  }
	}

	function hideElement(elementId) {
	  var element = document.getElementById(elementId);
	  if (element) {
		element.style.display = 'none';
	  }
	}

function getTitleFromKey(key){
	switch (key) {
		case "code_client":
			return "Code client";

		case "nom":
			return "Nom";

		case "name_alias":
			return "Prénom";

		case "lastLevCount":
			return "Précédent solde";

		case "levCount":
			return "Solde actuel";

		case "typeOperation":
			return "Type de l'opération";

		case "amount":
			return "Montant de l'opération";

		case "created_at":
			return "Date de l'opération";
	}

}

function generateArrayTable(array) {
  var table = document.getElementById("array-table");
  var thead = document.createElement("thead");
  var tbody = document.createElement("tbody");

  // Create table header
  var headerRow = document.createElement("tr");
  Object.keys(array[0]).forEach(function(key) {
    var th = document.createElement("th");
    th.textContent = getTitleFromKey(key);
    headerRow.appendChild(th);
  });
  thead.appendChild(headerRow);

  // Create table rows
  array.reverse().forEach(function(obj) {
    var row = document.createElement("tr");
    Object.values(obj).forEach(function(value) {
      var td = document.createElement("td");
	  if(value == "recharge"){
			value = "<span style='display: inline-block; padding: 5px 10px; background-color: green; color: #fff; border-radius: 5px;'>Recharge</span>"
			td.innerHTML = value;
	  }else{
		if(value == "pay"){
			value = "<span style='display: inline-block; padding: 5px 10px; background-color: red; color: #fff; border-radius: 5px;'>Pay</span>"
			td.innerHTML = value;
		}else{
			td.textContent = value;
		}
	  }

      row.appendChild(td);
    });
    tbody.appendChild(row);
  });

  // Clear existing table content
  while (table.firstChild) {
    table.removeChild(table.firstChild);
  }

  // Append new table content
  table.appendChild(thead);
  table.appendChild(tbody);
}

var searchInput = document.getElementById("search-input");
var tableBody = document.getElementById("table-body");
var tableRows = Array.from(tableBody.getElementsByTagName("tr"));

searchInput.addEventListener("input", function() {
  var searchTerm = searchInput.value.toLowerCase();

  tableRows.forEach(function(row) {
    var id = row.getElementsByTagName("td")[0].textContent.toLowerCase();
	var name = row.getElementsByTagName("td")[1].textContent.toLowerCase();
	var aliasName = row.getElementsByTagName("td")[2].textContent.toLowerCase();
    if (id.includes(searchTerm) || name.includes(searchTerm) || aliasName.includes(searchTerm)) {
      row.style.display = "table-row";
    } else {
      row.style.display = "none";

    }
  });

  if(searchTerm == ''){
	  	  showPage(1);
  }
});
  </script>

@endsection

@section('after_styles')
  {{-- DATA TABLES --}}
  <link rel="stylesheet" type="text/css" href="{{ asset('packages/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}">
  <link rel="stylesheet" type="text/css" href="{{ asset('packages/datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.min.css') }}">
  <link rel="stylesheet" type="text/css" href="{{ asset('packages/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}">

  {{-- CRUD LIST CONTENT - crud_list_styles stack --}}
  @stack('crud_list_styles')
@endsection