@extends('layouts.master')
@section('content')
    <div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">

                <div>
                    EMPLOYEES

                </div>
            </div>

        </div>
        @if (isset($error) || session('error'))
            <div class="alert alert-danger">
                {{ $error ?? session('error') }}
            </div>
        @endif

        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
    </div>

    <div class="main-card mb-3 card">
        <div class="card-body">
            <a href="{{ route('pam-exports.index') }}"> <i class="fa fa-arrow-left"></i></a>
            <h4 class="card-title"></h4>
            <ul class="nav nav-tabs nav-justified">
                <li class="nav-item">
                    <a data-bs-toggle="tab" href="#tab-eg11-0" class="active nav-link">
                        <h6 class="card-title">{{ $title }} </h6>
                    </a>
                </li>
       
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab-eg11-0" role="tabpanel">

                    <table style="width: 100%;" id="dataTableActiveLoans"
                        class="display nowrap table table-hover table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Cost Center</th>
                                <th>Account Code</th>
                                <th>Description</th>
                                <th>Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($data as $item)
                                <tr>
                                    <td style="text-align: left;">{{ $item['date']}}</td>
                                    <td style="text-align: left;">{{ $item['cost_center'] }}</td>

                                    <td style="text-align: left;">
                                        {{ $item['gl_code'] }}
                                    </td>
                                    <td style="text-align: left;">
                                        {{ $item['description'] }}
                                    </td>
                                    <td style="text-align: left;">{{ number_format($item['amount'],2) }}</td>

                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <!-- Pagination Links -->
                    <div class="">
                        <hr>
                    </div>
                </div>
        
            </div>
        </div>
    </div>

    
@endsection


@section('scripts')
    <script>
        // table.destroy();
        $(document).ready(function() {

            var table = $('#dataTableUnlinked').DataTable({
                dom: 'Blfrtip',
                buttons: [
                    //'copyHtml5',
                    'excelHtml5',
                    'csvHtml5',
                    'pdfHtml5'
                ],

                'lengthChange': false,
                'select': {
                    'style': 'multi'
                },
                'order': [
                    [1, 'asc']
                ],
            });



        });
    </script>

    <script>
        let searchTimeout;

        document.getElementById('employeeInput').addEventListener('keyup', function () {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                document.getElementById('searchForm').submit();
            }, 3000); // 3 seconds delay
        });
    </script>

@endsection