@extends('layouts.master')

@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css/animate.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/scrollbar.css') }}">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">


  <style>

table.dataTable thead>tr>th.sorting:after {
    right: 24px !important;
}
    table#customer-table th,table#customer-table td  {
    border: none !important;
}
table#customer-table thead {
    border-bottom: var(--light-border) !important;
}
table#customer-table thead {
    border-bottom: var(--light-border) !important;
}
.table-bordered>:not(caption)>*{
    border-bottom: var(--light-border) !important;
    border-width: inherit !important;
}
table.dataTable>tbody>tr{
    border-bottom: var(--light-border) !important;
}
body #toast-container.custom-toast .toast{
    background-color: #43b9b2 !important;
}
.custom-toast .toast .toast-message
{
    color: #fff !important;
}
div.dataTables_wrapper div.dataTables_paginate{
    border: none;
}
table.table-bordered.dataTable th:first-child, table.table-bordered.dataTable th:first-child, table.table-bordered.dataTable td:first-child, table.table-bordered.dataTable td:first-child,table.table-bordered.dataTable thead tr:first-child th, table.table-bordered.dataTable thead tr:first-child td{
        border-left-width: 0px !important;
        border-top-width: 0px !important;
        border-bottom-width: 1px !important;
}
.table-bordered>:not(caption)>*>*{
    border-width: 0 !important;
}
.dataTables_wrapper button {
    background: transparent !important;
    border: none;
    padding: 0 !important;
}
.outer-delete-btn {
    text-align: end;
    margin-bottom: 20px;
}
select.form-select.form-select-sm{
    width: 75px !important;
}
  </style>  
@endsection

@section('main_content')
<div class="container-fluid d-flex flex-column vh-100">
    <div class="row page-title">
        <div class="col-sm-6">
            <h3>Activity Log</h3>
        </div>
        <div class="col-sm-6">
            <nav>
                <ol class="breadcrumb justify-content-sm-end align-items-center">
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.dashboard') }}">
                            <svg class="svg-color">
                                <use href="{{ asset('assets/svg/iconly-sprite.svg#Home') }}"></use>
                            </svg>
                        </a>
                    </li>
                    <li class="breadcrumb-item active">Activity Log</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="row flex-grow-1">
        <div class="col-lg-12 d-flex">
            <div class="card flex-grow-1">
                <div class="card-body">
                    <table id="activity-log-table" class="table table-bordered">
                        <thead>
                            <tr>
                                 <th>ID</th>
                                 <th>Employee</th>
                                <th>Date & Time</th>
                                <th>Domain</th>
                                <th>Activity</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($logs as $log)
                                <tr>
                                    <td>{{ $loop->iteration }}</td> 
                                    <td>{{ $log->user ? ucfirst($log->user->first_name) : 'N/A' }}</td>
                                    <td>{{ $log->date_time }}</td>
                                    <td>{{ $log->domain }}</td>
                                    <td>{{ ucfirst($log->module) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<script>
    $(document).ready(function () {
        $('#activity-log-table').DataTable({
            "paging": true,
            "searching": true,
            "ordering": true,
            "pageLength": 10,
            "lengthMenu": [5, 10, 25, 50],
            "columnDefs": [
            { "orderable": false, "targets": 0 } // Disable sorting for the first column (ID)
        ]
        });
        $('#activity-log-table thead th:first-child').removeClass('sorting sorting_asc sorting_desc');
    });
</script>
@endsection