@extends('layouts.mainlayout')
@section('title', 'Employee Leave Log Report')

@section('main')
<style>
.search input{
outline: 0;
width: 12.5rem;
padding: 0.5rem 0;
padding-right: 1.125rem;
font-size: .8125rem;
line-height: 1.5385;
color: #333;
background-color: transparent;
border: 1px solid #ddd;
border-width: 1px 0;
border-top-color: transparent;
transition: all ease-in-out .15s;
}
.search{
display:inline-block;
}
.searchField{
    outline: 0;
    width: 12.5rem;
    padding: 0.5rem 0;
    padding-right: 1.125rem;
    font-size: .8125rem;
    line-height: 1.5385;
    color: #333;
    background-color: transparent;
    border: 1px solid #ddd;
    border-width: 1px 0;
    border-top-color: transparent;
    transition: all ease-in-out .15s;
  }
.dataTables_filter{
    display:none;
}
.crossButton{
  font-size: 13px;
  font-weight: bold;
  color: #6e6ec6;
  margin-left: -32px;
  margin-top: 10px;
  cursor: pointer;
  position: absolute;
}
.icon {
  padding-left: 25px;
  background: url("https://static.thenounproject.com/png/101791-200.png") no-repeat right;
  background-size: 20px;
}
</style>
<div class="card"> <div class="card-header header-elements-inline"> <h5 class="card-title icon-vcard font-weight-bold">
    Leave Log Report</h5>
    </div> 
   <table class="table datatable-select-single"> <thead>
    <tr>
    <th>Name</th>
    <th>Team</th>
    <th>Engagement</th>
    <th>Balance</th>
    <th>Action</th>

    </tr>
    </thead>
    <tbody>
        @foreach ($users as $user)

        <tr class="clickable-row" data-user-id="{{ $user->id }}">
            <td>{{ $user->name . ' ' . $user->lastName }}</td>
            <td>
                {{ $user['team']}}
            </td>
            <td>
                {{$user['engagement']}}
            </td>
            @php
            $totalLeaveBalance = 0;
            foreach($user['leaveBalances'] as $leaveBalance) {
            $totalLeaveBalance += $leaveBalance['leave_balance'];
            }
            @endphp
            <td>
                {{ $totalLeaveBalance }}
            </td>

            <td >
            <span style="cursor:pointer"class="view-log">View Log</span>
            </td>
        </tr>
        @endforeach
    </tbody>
    </table>
</div>

@endsection

@section('js')
<script>
$(document).ready(function () {
    var mainTable = $('.datatable-select-single').DataTable({
    "aLengthMenu": [25, 50, 75, 100],
    "pageLength": 25,
    "destroy": true,
    "language": {
        "search": "Name: "
    },
    buttons: {
        dom: {
            button: {
                className: 'btn btn-light'
            }
        },
        buttons: []
    },
    "initComplete": function (settings, json) {
        var newFilterElement = '<div class="search">' +
        '<label style="padding-right: 12px;">Name:</label>' +
        '<input id="nameInput" type="text" placeholder="Type to filter ..." aria-controls="data" class="searchField icon">' +
        '</div>' +
        '<span id="clearButton" class="crossButton">X</span>'; 
        $('#DataTables_Table_0_filter').after(newFilterElement);
    }
    });

    // Function to show/hide the message based on the search results
    function showNoRecordsMessage(show) {
        if (show) {
            $('#noRecordsMessage').show();
        } else {
            $('#noRecordsMessage').hide();
        }
    }
    var searchValue = $(this).val().trim();
        if (searchValue === '') {
            $('#clearButton').hide();
        } else {
            $('#clearButton').show();
        }
    $('#clearButton').on('click', function () {
        $('#nameInput').val('');
        mainTable.search('').draw(); 
        showNoRecordsMessage(false);
        $('#clearButton').hide();
    });

    $('#nameInput').on('keyup', function () {
        var searchValue = $(this).val().trim();
        if (searchValue === '') {
            $('#clearButton').hide();
        } else {
            $('#clearButton').show();
        }
        mainTable.search('^' + searchValue, true, false, true).draw(); // Use regex search
        showNoRecordsMessage(mainTable.page.info().recordsDisplay === 0);
    });

    //inner-table
    $(document).on('click', '.clickable-row .view-log', function () {
        var userId = $(this).closest('.clickable-row').data('user-id');
        var url = '{{ route("user.view-log", ":id") }}'.replace(':id', userId);
        window.open(url, '_self');
    });
});
</script>
@endsection