@extends('layouts/base_view')
@section('title')
<li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
<li class="breadcrumb-item active">Activity Logs</li>
@endsection
@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card card-outline card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Activity Logs</h3>
                    </div>
                    <div class="card-body">
                        <!-- Filter Section -->
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <label>Date Range</label>
                                <div class="input-group">
                                    <input type="text" id="start_date" class="form-control form-control-sm calendar-picker-date" placeholder="Start Date">
                                    <div class="input-group-append input-group-prepend">
                                        <span class="input-group-text">to</span>
                                    </div>
                                    <input type="text" id="end_date" class="form-control form-control-sm calendar-picker-date" placeholder="End Date">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <label>Activity Type</label>
                                <select id="activity_type" class="form-control form-control-sm">
                                    <option value="">All Types</option>
                                    @foreach($activityTypes as $type)
                                    <option value="{{ $type }}">{{ ucfirst(str_replace('_', ' ', $type)) }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label>Module</label>
                                <select id="module" class="form-control form-control-sm">
                                    <option value="">All Modules</option>
                                    @foreach($modules as $module)
                                    <option value="{{ $module }}">{{ ucfirst(str_replace('_', ' ', $module)) }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label>Status</label>
                                <select id="status" class="form-control form-control-sm">
                                    <option value="">All Status</option>
                                    <option value="200">200 (Success)</option>
                                    <option value="201">201 (Created)</option>
                                    <option value="400">400 (Bad Request)</option>
                                    <option value="401">401 (Unauthorized)</option>
                                    <option value="403">403 (Forbidden)</option>
                                    <option value="404">404 (Not Found)</option>
                                    <option value="500">500 (Server Error)</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label>&nbsp;</label>
                                <div>
                                    <button id="btn_filter" class="btn btn-sm btn-primary">
                                        <i class="fas fa-filter"></i> Filter
                                    </button>
                                    <button id="btn_reset" class="btn btn-sm btn-secondary">
                                        <i class="fas fa-redo"></i> Reset
                                    </button>
                                    <button id="btn_export" class="btn btn-sm btn-success">
                                        <i class="fas fa-file-excel"></i> Export
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- DataTable -->
                        <div class="table-responsive">
                            <table id="dataTable" class="table table-hover table-sm">
                                <thead class="bg-primary">
                                    <tr>
                                        <th width="10%">Timestamp</th>
                                        <th width="10%">User</th>
                                        <th width="8%">Activity Type</th>
                                        <th width="10%">Module</th>
                                        <th width="10%">Action</th>
                                        <th width="5%">Method</th>
                                        <th width="25%">URL</th>
                                        <th width="5%">Status</th>
                                        <th width="7%">Duration (ms)</th>
                                        <th width="10%">Actions</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
$(document).ready(function() {
    // Initialize DataTable
    var table = $('#dataTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('activity-logs.index') }}",
            type: "GET",
            data: function(d) {
                d.start_date = $('#start_date').val();
                d.end_date = $('#end_date').val();
                d.activity_type = $('#activity_type').val();
                d.module = $('#module').val();
                d.status = $('#status').val();
            }
        },
        columns: [
            {
                data: 'created_at',
                name: 'created_at',
                render: function(data) {
                    if (!data) return '-';
                    var date = new Date(data);
                    return date.toLocaleString('id-ID', {
                        year: 'numeric',
                        month: '2-digit',
                        day: '2-digit',
                        hour: '2-digit',
                        minute: '2-digit',
                        second: '2-digit'
                    });
                }
            },
            {
                data: 'user',
                name: 'user.fullname',
                render: function(data) {
                    if (!data) return '<span class="text-muted">System</span>';
                    return data.fullname || data.email || '-';
                }
            },
            {
                data: 'activity_type',
                name: 'activity_type',
                render: function(data) {
                    var badgeClass = 'badge-secondary';
                    switch(data) {
                        case 'login': badgeClass = 'badge-success'; break;
                        case 'logout': badgeClass = 'badge-secondary'; break;
                        case 'page_view': badgeClass = 'badge-info'; break;
                        case 'create': badgeClass = 'badge-primary'; break;
                        case 'update': badgeClass = 'badge-warning'; break;
                        case 'delete': badgeClass = 'badge-danger'; break;
                    }
                    return '<span class="badge ' + badgeClass + '">' + data.replace('_', ' ').toUpperCase() + '</span>';
                }
            },
            {
                data: 'module',
                name: 'module',
                render: function(data) {
                    return data ? data.replace('_', ' ') : '-';
                }
            },
            {
                data: 'action',
                name: 'action'
            },
            {
                data: 'method',
                name: 'method',
                render: function(data) {
                    var colorClass = 'text-secondary';
                    switch(data) {
                        case 'GET': colorClass = 'text-info'; break;
                        case 'POST': colorClass = 'text-success'; break;
                        case 'PUT':
                        case 'PATCH': colorClass = 'text-warning'; break;
                        case 'DELETE': colorClass = 'text-danger'; break;
                    }
                    return '<span class="' + colorClass + '"><strong>' + data + '</strong></span>';
                }
            },
            {
                data: 'url',
                name: 'url',
                render: function(data) {
                    if (!data) return '-';
                    var maxLength = 50;
                    if (data.length > maxLength) {
                        return '<span title="' + data + '">' + data.substring(0, maxLength) + '...</span>';
                    }
                    return data;
                }
            },
            {
                data: 'response_status',
                name: 'response_status',
                render: function(data) {
                    if (!data) return '-';
                    var badgeClass = 'badge-secondary';
                    if (data >= 200 && data < 300) badgeClass = 'badge-success';
                    else if (data >= 300 && data < 400) badgeClass = 'badge-info';
                    else if (data >= 400 && data < 500) badgeClass = 'badge-warning';
                    else if (data >= 500) badgeClass = 'badge-danger';
                    return '<span class="badge ' + badgeClass + '">' + data + '</span>';
                }
            },
            {
                data: 'duration_ms',
                name: 'duration_ms',
                render: function(data) {
                    if (!data) return '-';
                    return parseFloat(data).toFixed(2);
                }
            },
            {
                data: 'id',
                name: 'id',
                orderable: false,
                searchable: false,
                render: function(data) {
                    return '<a href="/activity-logs/' + data + '" class="btn btn-xs btn-info" title="View Details">' +
                           '<i class="fas fa-eye"></i> Details</a>';
                }
            }
        ],
        order: [[0, 'desc']],
        pageLength: 25,
        responsive: false,
        language: {
            processing: "Loading...",
            search: "Search:",
            lengthMenu: "Show _MENU_ entries",
            info: "Showing _START_ to _END_ of _TOTAL_ entries",
            infoEmpty: "Showing 0 to 0 of 0 entries",
            infoFiltered: "(filtered from _MAX_ total entries)",
            paginate: {
                first: "First",
                last: "Last",
                next: "Next",
                previous: "Previous"
            }
        }
    });

    // Filter button click
    $('#btn_filter').on('click', function() {
        table.ajax.reload();
    });

    // Reset button click
    $('#btn_reset').on('click', function() {
        $('#start_date').val('');
        $('#end_date').val('');
        $('#activity_type').val('');
        $('#module').val('');
        $('#status').val('');
        table.ajax.reload();
    });

    // Export button click
    $('#btn_export').on('click', function() {
        var params = {
            start_date: $('#start_date').val(),
            end_date: $('#end_date').val(),
            activity_type: $('#activity_type').val(),
            module: $('#module').val(),
            status: $('#status').val()
        };

        var queryString = $.param(params);
        window.location.href = "{{ route('activity-logs.export') }}?" + queryString;
    });

    // Trigger filter on Enter key
    $('#start_date, #end_date, #activity_type, #module, #status').on('keypress', function(e) {
        if (e.which === 13) {
            $('#btn_filter').click();
        }
    });
});
</script>
@endsection