@include('layouts.header')

<div class="container-fluid">
    <div class="row">
        <h6>Active - {{ $totalCount }}</h6>
         <div class="section-title">List of Memo and Warning</div>
        <div class="col-12">
         <a href="{{ url('export-mw') }}" class="btn btn-primary">Download Excel</a>
            <b>Location</b>
                <select name="location" id="location" class="custom-select loc-dropdown">
                    <option value="">ALL</option>
                    <option value="AMSC">CHENNAI</option>
                    <option value="AMSV">VELLORE</option>
                </select>

            <b>Filter By Type</b>
                <select name="type" id="type" class="custom-select type-dropdown">
                    <option value="">All</option>
                    <option value="Memo">Memo</option>
                    <option value="Oral Warning">Oral Warning</option>
                    <option value="Written Warning">Written Warning</option>
                </select>
            <a href="{{ url('total_mw') }}" class="cancel" target="_self">Back</a>
        </div>
    </div>

    <div class="card">
        <table class="table table-bordered" id='Employee_MW'>
            <thead>
                <th>#</th>
                <th>Employee Code</th>
                <th>Emp Name</th>
                 <th>Type</th>
                <th>Reason</th>
                <th>Date Created</th>
            </thead>
            <tbody>
              @foreach ($employees as $index => $employee)
                <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>{{ $employee->EmployeeCode }}</td>
                    <td>{{ $employee->EmployeeData->FirstName ?? '' }}</td>
                    <td>{{ $employee->type }}</td>
                    <td>{{ $employee->reason }}</td>
                    <td>{{ $employee->date_created }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-2.2.1/datatables.min.css" rel="stylesheet"> 
 <script src="https://cdn.datatables.net/v/dt/dt-2.2.1/datatables.min.js"></script>
<script>
$(document).ready(function() {
    var dataTable = $('#Employee_MW').DataTable({
   /*     "columnDefs": [{
            "targets": 0,
            "visible": false
        }],*/
    });

    $('.type-dropdown').on('change', function() {
        var type = $(this).val();
        console.log(type);
        dataTable.column(3).search(type).draw();
    });

    $('.loc-dropdown').on('change', function() {
        var location = $(this).val();
        dataTable.column(1).search(location).draw();
    });
});


function exportTableToExcel(tableID, filename = '') {
    var downloadLink;
    var dataType = 'application/vnd.ms-excel';

    $.ajax({
        url: '{{ url('hr.fetch') }}',
        type: 'GET',
        data: {
            type: $('#type').val(),
            location: $('#location').val()
        },
        success: function(data) {
            var tableHTML = generateTableHTML(data);
            filename = filename ? filename + '.xls' : 'Employee_MW.xls';

            downloadLink = document.createElement("a");
            document.body.appendChild(downloadLink);

            if (navigator.msSaveOrOpenBlob) {
                var blob = new Blob(['\ufeff', tableHTML], { type: dataType });
                navigator.msSaveOrOpenBlob(blob, filename);
            } else {
                downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
                downloadLink.download = filename;
                downloadLink.click();
            }
        }
    });
}

function generateTableHTML(data) {
    // Convert the data into a table format that can be exported.
    var tableHTML = '<table>';
    tableHTML += '<thead><th>#</th><th>Employee Code</th><th>First Name</th><th>Working Location</th><th>Type</th><th>Reason</th><th>Date Created</th></thead><tbody>';
    
    data.forEach(function(row, index) {
        tableHTML += `<tr><td>${index + 1}</td><td>${row.EmployeeCode}</td><td>${row.FirstName}</td><td>${row.WorkingLocation}</td><td>${row.type}</td><td>${row.reason}</td><td>${row.date_created}</td></tr>`;
    });

    tableHTML += '</tbody></table>';
    return tableHTML;
}
</script>
  @include('layouts.footer')