@section('page-specific-style')
<link href="{{asset('assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css')}}" rel="stylesheet" type="text/css" />

<link href="{{asset('assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css')}}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="{{ asset('assets/css/leads.css') }}">
<style>
    #history-datatable_paginate {
        float: right !important;
    }
</style>
@endsection
<form action="{{ url()->current() }}">
    <div class="row">
        <div class="col-3">
            <div class="select-wrapper position-relative">
                <select name="log_type" class="form-select">
                    <option value="">Select type</option>
                    <option value="create" @if(request()->log_type == 'create') selected @endif>Create</option>
                    <option value="update" @if (request()->log_type == 'update') selected @endif>Update</option>
                    <option value="delete" @if(request()->log_type == 'delete') selected @endif>Delete</option>
                    <option value="convert" @if(request()->log_type == 'convert') selected @endif>Convert</option>
                    <option value="download" @if(request()->log_type == 'download') selected @endif>Download</option>
                </select>
                <label for="log_type" class="flotting-label">Document Type</label>
            </div>
        </div>
        <div class="col-3">
            <div class="select-wrapper position-relative">
                <select name="user" class="form-select">
                    <option value="">Select user</option>
                    @forelse ($users as $user)
                        <option value="{{ $user->id }}" @if(request()->user == $user->id) selected @endif>
                            {{ $user->name }}
                        </option>
                    @empty
                        <option value="">User not found!</option>
                    @endforelse
                </select>
                <label for="user" class="flotting-label">User</label>
            </div>
        </div>
        <div class="col-3">
            <input type="text" name="date" class="form-control dp"
                       placeholder="Date"
                       value="{{ request()->date }}">
        </div>
        <div class="col-3 d-flex justify-content-start gap-2 h-100">
            <button class="btn btn-primary btn-md" type="submit">Search</button>
            <a href="{{ url()->current() }}" class="normal btn btn-md btn-secondary"><i class="bx bx-reset"></i></a>
        </div>
    </div>
</form>
<div class="table-container mt-4">
    <table id="history-datatable" class="table table-bordered dt-responsive nowrap w-100">
        <thead class="table-light">
        <tr>
            <th>Date</th>
            <th>Module</th>
            <th>Action</th>
            <th>Description</th>
            <th>By</th>
        </tr>
        </thead>
        <tbody>
            @forelse ($activityLogs as $log)
                <tr>
                    <td>{{ $log['date'] }}</td>
                    <td>{{ $log['log_name'] }}</td>
                    <td>{{ $log['category'] }}</td>
                    <td>{!! $log['description'] !!}</td>
                    <td>{{ $log['created_by'] }}</td>
                </tr>
            @empty

            @endforelse
        </tbody>
    </table>
</div>

@section('page-specific-script')
@parent
    <!-- Required datatable js -->
    <script src="{{asset('assets/libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js')}}"></script>

    <!-- Responsive examples -->
    <script src="{{asset('assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js')}}"></script>
        <script src="{{asset('assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js')}}"></script>

        <script src="{{asset('assets/libs/datatables.net-buttons/js/dataTables.buttons.min.js')}}"></script>
        <script src="{{asset('assets/libs/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js')}}"></script>
        <script src="{{asset('assets/libs/jszip/jszip.min.js')}}"></script>
        <script src="{{asset('assets/libs/pdfmake/build/pdfmake.min.js')}}"></script>
        <script src="{{asset('assets/libs/pdfmake/build/vfs_fonts.js')}}"></script>
        <script src="{{asset('assets/libs/datatables.net-buttons/js/buttons.html5.min.js')}}"></script>
        <script src="{{asset('assets/libs/datatables.net-buttons/js/buttons.print.min.js')}}"></script>
        <script src="{{asset('assets/libs/datatables.net-buttons/js/buttons.colVis.min.js')}}"></script>

    <!-- Date Range Picker -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

    <script>
        $(document).ready(function () {
            $('#history-datatable').DataTable({
                "order": [[0, 'desc']], // Sort by the first column (0-indexed) in descending order
                "columnDefs": [
                    {
                        "targets": 0, // Target the first column (index 0)
                        "type": "date", // Ensure that the column type is date
                        "render": function(data, type, row) {
                            return data; // Return date as-is, or format if necessary
                        }
                    }
                ]
            });

            $('input.dp').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear'
                }
            });

            $('input.dp').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
            });
            $('input.dp').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });
        })
    </script>

@endsection