@extends('layouts.app')
@php($pageTitle  = $pageTitle  ?? 'Activity Logs')
@php($adminTheme = $adminTheme ?? (object)['primary_color' => '#3c8dbc'])

@push('head-script')
    <link rel="stylesheet" href="//cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.min.css">
@endpush

@section('content')
    <div class="row">
        <div class="col-12">
            {{-- Filters: Job title, Username/Email, From, To --}}
            <div class="card">
                <div class="card-body">
                    <form id="filters" class="mb-2">
                        <div class="row g-2">
                            <div class="col-md-3">
                                <input class="form-control" id="f-job" placeholder="Job title">
                            </div>
                            <div class="col-md-3">
                                <input class="form-control" id="f-user" placeholder="Username or Email">
                            </div>
                            <div class="col-md-2">
                                <input type="date" class="form-control" id="f-from" placeholder="From date">
                            </div>
                            <div class="col-md-2">
                                <input type="date" class="form-control" id="f-to" placeholder="To date">
                            </div>
                            <div class="col-md-1">
                                <button type="button" id="btn-filter" class="btn btn-primary w-100">Filter</button>
                            </div>
                            <div class="col-md-1">
                                <button type="button" id="btn-reset" class="btn btn-outline-secondary w-100">Reset</button>
                            </div>
                        </div>
                    </form>

                    <div class="table-responsive m-t-20">
                        <table id="logsTable" class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>By</th>
                                <th>Action</th>
                                <th>Job</th>
                                <th>Date</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@push('footer-script')
    <script src="//cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
    <script src="//cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
    <script src="//cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap.min.js"></script>

    <script>
        var table = $('#logsTable').DataTable({
            responsive: true,
            serverSide: true,
            processing: true,
            ajax: {
                url: '{!! route('admin.logs.data') !!}',
                data: function (d) {
                    d.job       = $('#f-job').val();
                    d.user      = $('#f-user').val();
                    d.from_date = $('#f-from').val();
                    d.to_date   = $('#f-to').val();
                }
            },
            language: typeof languageOptions === 'function' ? languageOptions() : {},
            order: [[3, 'desc']], // sort by Date
            columns: [
                { data: 'by',          name: 'by',          orderable:false, searchable:false },
                { data: 'description', name: 'description', orderable:false, searchable:false },
                { data: 'job_title',   name: 'job_title',   orderable:false, searchable:false },
                { data: 'created_at',  name: 'created_at' }
            ]
        });

        new $.fn.dataTable.FixedHeader(table);

        $('#btn-filter').on('click', function() {
            table.ajax.reload();
        });

        $('#btn-reset').on('click', function() {
            $('#filters').find('input').val('');
            table.ajax.reload();
        });
    </script>
@endpush