@extends('layouts.admin')
@section('content')
<style>
    .audit-modal-wrapper {
        max-width: 100%;
        overflow-x: auto;
    }
</style>
<div class="card">
    <div class="card-header">
        {{ trans('cruds.auditLog.title_singular') }} {{ trans('global.list') }}
        @if($auditLogs->count())
            : Showing {{ $auditLogs->firstItem() }} to {{ $auditLogs->lastItem() }} entries
        @endif
    </div>

    <div class="card-body">
        <div class="row">
            <div class="col-md-12">
                <form action="{{ route('admin.audit-logs.index')}}" method="GET">
                    <div class="row d-flex flex-row flex-wrap justify-content-between align-items-center card-body">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="description">{{ trans('cruds.auditLog.fields.description') }}</label>
                                <input type="text" class="form-control" value="{{ request('description') }}" name="description">
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="subject_id">{{ trans('cruds.auditLog.fields.subject_id') }}</label>
                                <input class="form-control" value="{{ request('subject_id') }}" type="text" name="subject_id" id="subject_id">
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="subject_type">{{ trans('cruds.auditLog.fields.subject_type') }}</label>
                                <input class="form-control" value="{{ request('subject_type') }}" type="text" name="subject_type" id="subject_type">
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="user_id">{{ trans('cruds.auditLog.fields.user_id') }}</label>
                                <input class="form-control" value="{{ request('user_id') }}" type="text" name="user_id" id="user_id">
                            </div>
                        </div>

                        <div class="col-md-4 mt-3">
                            <div class="row">
                                <button type="submit" class="btn btn-success mr-3" style="padding: 6px 19px;">
                                    <i class="fa fa-search"></i>
                                </button>
                                <a href="{{ route('admin.audit-logs.index')}}" class="btn btn-danger">Clear</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-striped" id="clients-table">
                @if($auditLogs->count())
                <thead>
                    <tr>
                        <th>{{ trans('cruds.auditLog.fields.id') }}</th>
                        <th>{{ trans('cruds.auditLog.fields.description') }}</th>
                        <th>{{ trans('cruds.auditLog.fields.subject_id') }}</th>
                        <th>{{ trans('cruds.auditLog.fields.subject_type') }}</th>
                        <th>{{ trans('cruds.auditLog.fields.user_id') }}</th>
                        <th>{{ trans('cruds.auditLog.fields.created_at') }}</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($auditLogs as $index => $auditLog)
                    <tr>
                        <td>{{ $auditLogs->firstItem() + $index }}</td>
                        <td>{{ $auditLog->description }}</td>
                        <td>{{ $auditLog->subject_id }}</td>
                        <td>{{ $auditLog->subject_type ?? '' }}</td>
                        <td>{{ $auditLog->user_id ?? '' }}</td>
                        <td>{{ $auditLog->created_at ? globalDateTimeConverter($auditLog->created_at) : '' }}</td>
                        <td>
                            <a href="{{ route('admin.audit-logs.show', $auditLog->id) }}" 
                               class="btn btn-sm btn-info show-audit-log"
                               data-toggle="modal" 
                               data-audit-log-id="{{ $auditLog->id }}"
                               data-modal-id="auditLogModal_{{ $auditLog->id }}"
                               data-modal-title="Audit Log Details (ID: {{ $auditLog->id }})">
                                <i class="fa fa-eye"></i>
                            </a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
                @else
                    <tr>
                        <td colspan="7"><h5 class="text-center">No records found</h5></td>
                    </tr>
                @endif
            </table>
        </div>

        @if($auditLogs->hasPages())
            <div class="d-flex justify-content-between align-items-center mt-3">
                <div class="text-muted">
                    Showing {{ $auditLogs->firstItem() }} to {{ $auditLogs->lastItem() }} entries
                </div>
                <div>
                    <nav>
                        <ul class="pagination mb-0">
                            {{-- Previous Page Link --}}
                            @if($auditLogs->onFirstPage())
                                <li class="page-item disabled"><span class="page-link">&laquo;</span></li>
                            @else
                                <li class="page-item">
                                    <a class="page-link" href="{{ $auditLogs->appends(request()->query())->previousPageUrl() }}" rel="prev">&laquo;</a>
                                </li>
                            @endif

                            {{-- Simple page number links (limited for simplePaginate) --}}
                            @php
                                $current = $auditLogs->currentPage();
                                $showPages = 5; // Number of pages to show
                                $start = max(1, $current - 2);
                                $end = $start + $showPages - 1;
                            @endphp

                            @for ($i = $start; $i <= $end; $i++)
                                @if($i == $current)
                                    <li class="page-item active"><span class="page-link">{{ $i }}</span></li>
                                @else
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $auditLogs->appends(request()->query())->url($i) }}">{{ $i }}</a>
                                    </li>
                                @endif
                            @endfor

                            {{-- Next Page Link --}}
                            @if($auditLogs->hasMorePages())
                                <li class="page-item">
                                    <a class="page-link" href="{{ $auditLogs->appends(request()->query())->nextPageUrl() }}" rel="next">&raquo;</a>
                                </li>
                            @else
                                <li class="page-item disabled"><span class="page-link">&raquo;</span></li>
                            @endif
                        </ul>
                    </nav>
                </div>
            </div>
        @endif

    </div>
</div>
@endsection

@section('scripts')
@parent
<script>
    $('.show-audit-log').click(function(e) {
        e.preventDefault();
        
        var auditLogId = $(this).data('audit-log-id');
        var modalId = $(this).data('modal-id');
        var modalTitle = $(this).data('modal-title');
        var url = $(this).attr('href');

        // Create a dynamic modal
        var dynamicModal = $(
            '<div class="modal fade" id="' + modalId + '" tabindex="-1" role="dialog" aria-labelledby="' + modalId + 'Label" aria-hidden="true">' +
            '    <div class="modal-dialog modal-lg" role="document">' +
            '        <div class="modal-content">' +
            '            <div class="modal-header">' +
            '                <h5 class="modal-title" id="' + modalId + 'Label">' + modalTitle + '</h5>' +
            '                <button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
            '                    <span aria-hidden="true">&times;</span>' +
            '                </button>' +
            '            </div>' +
            '            <div class="modal-body">' +
            '                <div id="' + modalId + 'Details" class="audit-modal-wrapper"></div>' +
            '            </div>' +
            '            <div class="modal-footer">' +
            '                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>' +
            '            </div>' +
            '        </div>' +
            '    </div>' +
            '</div>'
        );

        // Append the modal to the body
        $('body').append(dynamicModal);

        // Show loading state
        $('#' + modalId + 'Details').html('<div class="text-center py-4"><i class="fa fa-spinner fa-spin fa-3x"></i></div>');

        // Make an AJAX request
        $.ajax({
            url: url,
            method: 'GET',
            dataType: 'json',
            success: function(data) {
                var auditLogDetails = $("#" + modalId + "Details");
                auditLogDetails.empty();

                // Create a table and append it to the modal body
                var table = $('<table class="table table-bordered table-striped"></table>');
                var tbody = $('<tbody></tbody>');

                // Add basic info rows
                $.each([
                    ['Audit Log ID', data.id],
                    ['Description', data.description],
                    ['Subject ID', data.subject_id],
                    ['Subject Type', data.subject_type],
                    ['User ID', data.user_id],
                    ['Host', data.host],
                    ['Created at', data.created_at]
                ], function(i, row) {
                    tbody.append('<tr><th>' + row[0] + '</th><td>' + (row[1] || '') + '</td></tr>');
                });

                // Handle properties
                var properties = data.properties || {};
                if (Object.keys(properties).length > 0) {
                    tbody.append('<tr><th colspan="2" class="bg-light">Properties</th></tr>');
                    
                    if (typeof properties === 'string') {
                        tbody.append('<tr><td colspan="2"><pre>' + properties + '</pre></td></tr>');
                    } else {
                        $.each(properties, function(key, value) {
                            if (typeof value === 'object') {
                                value = JSON.stringify(value, null, 2);
                            }
                            tbody.append('<tr><th>' + key + '</th><td><pre>' + value + '</pre></td></tr>');
                        });
                    }
                }

                table.append(tbody);
                auditLogDetails.append(table);
            },
            error: function(xhr) {
                $("#" + modalId + "Details").html(
                    '<div class="alert alert-danger">Error loading audit log details</div>'
                );
            },
            complete: function() {
                // Show the modal after content is loaded
                $('#' + modalId).modal('show');
            }
        });
    });
</script>
@endsection