@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Audit Trail</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#filterModal">
                            <i class="fas fa-filter"></i> Filter
                        </button>
                        <a href="{{ route('audit.export', request()->all()) }}" class="btn btn-sm btn-success">
                            <i class="fas fa-download"></i> Export
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <table id="audit-table" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Date/Time</th>
                                <th>User</th>
                                <th>Module</th>
                                <th>Action</th>
                                <th>Record ID</th>
                                <th>Remarks</th>
                                <th>Changes</th>
                                <th>IP Address</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Filter Modal -->
<div class="modal fade" id="filterModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Filter Audit Trail</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="filterForm">
                    <div class="mb-3">
                        <label>Module</label>
                        <select name="module" class="form-control">
                            <option value="">All Modules</option>
                            @foreach($modules as $module)
                                <option value="{{ $module }}">{{ ucfirst($module) }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label>Action</label>
                        <select name="action" class="form-control">
                            <option value="">All Actions</option>
                            @foreach($actions as $action)
                                <option value="{{ $action }}">{{ ucfirst($action) }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label>User</label>
                        <select name="user_id" class="form-control">
                            <option value="">All Users</option>
                            @foreach($users as $user)
                                <option value="{{ $user->id }}">{{ $user->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label>Date From</label>
                        <input type="date" name="date_from" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label>Date To</label>
                        <input type="date" name="date_to" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label>Record ID</label>
                        <input type="text" name="search_id" class="form-control" placeholder="Search by record ID">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="applyFilters()">Apply Filters</button>
                <button type="button" class="btn btn-warning" onclick="clearFilters()">Clear Filters</button>
            </div>
        </div>
    </div>
</div>

<!-- Changes Modal -->
<div class="modal fade" id="changesModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Changes Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="changesContent">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('customjs')
<script>
$(document).ready(function() {
    var table = $('#audit-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('audit.index') }}",
            data: function(d) {
                d.module = $('select[name="module"]').val();
                d.action = $('select[name="action"]').val();
                d.user_id = $('select[name="user_id"]').val();
                d.date_from = $('input[name="date_from"]').val();
                d.date_to = $('input[name="date_to"]').val();
                d.search_id = $('input[name="search_id"]').val();
            }
        },
        columns: [
            { data: 'timestamp', name: 'created_at' },
            { data: 'user_name', name: 'user.name' },
            { data: 'module_display', name: 'module' },
            { data: 'action_display', name: 'action' },
            { data: 'auditable_id', name: 'auditable_id' },
            { data: 'remarks', name: 'remarks' },
            { data: 'changes', name: 'changes', orderable: false, searchable: false },
            { data: 'ip_address', name: 'ip_address' }
        ],
        order: [[0, 'desc']]
    });

    // View changes
    $(document).on('click', '.view-changes', function() {
        var changes = $(this).data('changes');
        var html = '<table class="table table-sm"><thead><tr><th>Field</th><th>Old Value</th><th>New Value</th></tr></thead><tbody>';
        
        $.each(changes, function(field, values) {
            html += '<tr>';
            html += '<td><strong>' + field + '</strong></td>';
            html += '<td>' + (values.old || '-') + '</td>';
            html += '<td>' + (values.new || '-') + '</td>';
            html += '</tr>';
        });
        
        html += '</tbody></table>';
        $('#changesContent').html(html);
        $('#changesModal').modal('show');
    });
});

function applyFilters() {
    $('#audit-table').DataTable().ajax.reload();
    $('#filterModal').modal('hide');
}

function clearFilters() {
    $('#filterForm')[0].reset();
    $('#audit-table').DataTable().ajax.reload();
    $('#filterModal').modal('hide');
}
</script>
@endsection