@extends(backpack_view('blank'))

@php


    use App\Models\Lev;
    function getAffectationStatus($key)
        {
            $lev = Lev::with("clients")->where("key", "=", $key)->first();
            if(count($lev->clients)){
                return "Oui";
            }else{
                return "Non";
            }

        }
    $levs = Lev::all();

@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;
		}
		.styledButton {
		  /* Adjust the size and padding */
		  display: inline-block;
		  padding: 10px 20px;

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

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

		  /* Align the button to the right */
		  float: right;

		  /* Remove default link styles */
		  text-decoration: none;
		}

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

		/* Apply additional styles when the button is pressed */
		.styledButton:active {
		  background-color: #3e8e41;
		}
		.styledSelect {
		  /* Adjust the size and padding */
		  width: 100px;
		  height: 40px;
		  padding: 5px;

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

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

		  /* Customize the appearance */
		  appearance: none;
		  -webkit-appearance: none;
		  -moz-appearance: none;
		  background-image: url("dropdown-arrow.png"); /* Replace with the path to your dropdown arrow icon */
		  background-repeat: no-repeat;
		  background-position: right center;
		  background-size: 20px;
		  padding-right: 25px;
		}

		/* Apply additional styles when the select is focused */
		.styledSelect:focus {
		  border-color: #66afe9;
		  outline: none;
		}
		.add_icon{
			background-image: url("http://80.94.97.16/lev-up/public/img/add.png")
		}
    </style>
@endpush

@section('content')

    <br>

    <input type="text" id="search-input" placeholder="Chercher...">
    <span>  Filtrer: <select id="mySelect" class="styledSelect">
        <option value="tout">Tout</option>
        <option value="oui">Oui</option>
        <option value="non">Non</option>
    </select></span>
    <a href="{{route('lev.create_ui')}}" class="styledButton"><i class="nav-icon la la-plus"></i> Ajouter LEV</a>
    <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
            </th>
            <th>
                Montant
            </th>
            <th>
                Crée le
            </th>
            <th>
                Affecté
            </th>

            <th>
                #
            </th>

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


        @foreach ($levs as $lev)

            <tr style="width: 100%">
                <td>
                    {{$lev->id}}
                </td>
                <td>
                    {{$lev->amount}}
                </td>

                <td>
                    {{$lev->created_at}}
                </td>

                <td>
                    {{getAffectationStatus($lev->key)}}
                </td>

                <td>
                    <a href="{{route('lev.print', ['id_lev' => $lev->id])}}" target="_blank"><i class="nav-icon la la-print"></i> Imprimer</a>
                </td>

        @endforeach

        </tbody>

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



    <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 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 = key;
                headerRow.appendChild(th);
            });
            thead.appendChild(headerRow);

            // Create table rows
            array.forEach(function(obj) {
                var row = document.createElement("tr");
                Object.values(obj).forEach(function(value) {
                    var td = document.createElement("td");
					console.log(value);
                    if(value.toString().trim() == "Non"){
                        value = "<span style='display: inline-block; padding: 5px 10px; background-color: green; color: #fff; border-radius: 5px;'>Non</span>"
                        td.innerHTML = value;
                    }else{
                        if(value.toString().trim() == "Oui"){
                            value = "<span style='display: inline-block; padding: 5px 10px; background-color: red; color: #fff; border-radius: 5px;'>Oui</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();
                var affected = row.getElementsByTagName("td")[3].textContent.toLowerCase();
                if (id.includes(searchTerm) || name.includes(searchTerm) || aliasName.includes(searchTerm) || affected.includes(searchTerm)) {
                    row.style.display = "table-row";
                } else {
                    row.style.display = "none";

                }
            });

            if(searchTerm == ''){
                showPage(1);
            }
        });

        const selectElement = document.getElementById("mySelect");

        selectElement.addEventListener("change", function(event) {
            const selectedOption = event.target.value.toString().trim();
            tableRows.forEach(function(row) {
                var affected = row.getElementsByTagName("td")[3].textContent.toLowerCase().toString().trim();
                if (affected == selectedOption) {
                    row.style.display = "table-row";
                } else {
                    row.style.display = "none";

                }
            });

            if(selectedOption == 'tout'){
                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