@if ($histories->isEmpty())
    <div class="text-center py-5">
        <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
        <h5 class="text-muted">No records found</h5>
        <p class="text-muted">Try adjusting your search or filters</p>
    </div>
@else
    <!-- Desktop view -->
    <div class="table-responsive d-none d-lg-block">
        <table class="table table-hover mb-0">
            <thead class="table-light">
                <tr>
                    <th scope="col" width="50">#</th>
                    <th scope="col">User</th>
                    <th scope="col">Action</th>
                    <th scope="col">Module</th>
                    <th scope="col">Reference</th>
                    <th scope="col">IP Address</th>
                    <th scope="col">Date & Time</th>
                    <th scope="col" width="120">Status</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($histories as $key => $history)
                    <tr class="all-history-row" data-id="{{ $history->id }}"
                        data-user="{{ $history->user ? $history->user->name : '' }}" data-action="{{ $history->action }}">
                        <th scope="row">{{ $histories->firstItem() + $key }}</th>
                        <td>
                            <div class="d-flex align-items-center">
                                <div class="avatar-sm bg-light rounded-circle p-1 me-2">
                                    @if ($history->user)
                                        <img src="{{ $history->user->avatar_url ?? asset('images/default-avatar.png') }}"
                                            class="img-fluid rounded-circle" alt="{{ $history->user->name }}" width="25">
                                    @else
                                        <img src="{{ asset('images/default-avatar.png') }}" class="img-fluid rounded-circle"
                                            alt="System" width="25">
                                    @endif
                                </div>
                                <div>
                                    <h6 class="mb-0">
                                        @if ($history->user)
                                            {{ $history->user->name }}
                                        @else
                                            System
                                        @endif
                                    </h6>
                                    <small class="text-muted">{{ $history->user_type ?? 'System' }}</small>
                                </div>
                            </div>
                        </td>
                        <td>
                            @if (Lang::has("plugins/audit-log::history.$history->action"))
                                {{ trans("plugins/audit-log::history.$history->action") }}
                            @else
                                {{ $history->action }}
                            @endif
                        </td>
                        <td>
                            @if (Lang::has("plugins/audit-log::history.$history->module"))
                                {{ trans("plugins/audit-log::history.$history->module") }}
                            @else
                                {{ $history->module }}
                            @endif
                        </td>
                        <td>
                            @if ($history->reference_name)
                                <span title="{{ $history->reference_name }}">{{ Str::limit($history->reference_name, 30) }}</span>
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td>
                            <a href="https://ipinfo.io/{{ $history->ip_address }}" target="_blank" rel="nofollow"
                                class="text-decoration-none">
                                {{ $history->ip_address }}
                                <i class="fas fa-external-link-alt fa-xs"></i>
                            </a>
                        </td>
                        <td>
                            <div class="text-muted">
                                <small>{{ $history->created_at->format('M d, Y') }}</small>
                                <br>
                                <small>{{ $history->created_at->format('h:i A') }}</small>
                            </div>
                        </td>
                        <td>
                            @php
                                // Define action status options with badges
                                $actionStatusOptions = [
                                    'created' => ['name' => 'Created', 'class' => 'bg-success'],
                                    'updated' => ['name' => 'Updated', 'class' => 'bg-info'],
                                    'deleted' => ['name' => 'Deleted', 'class' => 'bg-danger'],
                                    'login' => ['name' => 'Login', 'class' => 'bg-primary'],
                                    'logout' => ['name' => 'Logout', 'class' => 'bg-secondary'],
                                ];

                                $actionStatusName = $history->action;
                                $actionBadgesClass = 'bg-secondary';

                                foreach ($actionStatusOptions as $action => $option) {
                                    if (str_contains($history->action, $action)) {
                                        $actionStatusName = $option['name'];
                                        $actionBadgesClass = $option['class'];
                                        break;
                                    }
                                }
                            @endphp
                            <span class="badge text-white {{ $actionBadgesClass }}">
                                {{ $actionStatusName }}
                            </span>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Mobile/Tablet view -->
    <div class="d-lg-none">
        @foreach ($histories as $key => $history)
            <div class="card mb-3 shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <div class="d-flex align-items-center">
                            <div class="avatar-sm bg-light rounded-circle p-1 me-2">
                                @if ($history->user)
                                    <img src="{{ $history->user->avatar_url ?? asset('images/default-avatar.png') }}"
                                        class="img-fluid rounded-circle" alt="{{ $history->user->name }}" width="25">
                                @else
                                    <img src="{{ asset('images/default-avatar.png') }}" class="img-fluid rounded-circle"
                                        alt="System" width="25">
                                @endif
                            </div>
                            <div>
                                <h6 class="mb-0">
                                    @if ($history->user)
                                        {{ $history->user->name }}
                                    @else
                                        System
                                    @endif
                                </h6>
                                <small class="text-muted">{{ $history->user_type ?? 'System' }}</small>
                            </div>
                        </div>
                        <span class="badge text-white {{ $actionBadgesClass }}">
                            {{ $actionStatusName }}
                        </span>
                    </div>

                    <div class="row">
                        <div class="col-6 mb-2">
                            <small class="text-muted d-block">Action</small>
                            @if (Lang::has("plugins/audit-log::history.$history->action"))
                                {{ trans("plugins/audit-log::history.$history->action") }}
                            @else
                                {{ $history->action }}
                            @endif
                        </div>
                        <div class="col-6 mb-2">
                            <small class="text-muted d-block">Module</small>
                            @if (Lang::has("plugins/audit-log::history.$history->module"))
                                {{ trans("plugins/audit-log::history.$history->module") }}
                            @else
                                {{ $history->module }}
                            @endif
                        </div>
                        <div class="col-12 mb-2">
                            <small class="text-muted d-block">Reference</small>
                            @if ($history->reference_name)
                                <span title="{{ $history->reference_name }}">{{ Str::limit($history->reference_name, 30) }}</span>
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </div>
                        <div class="col-6 mb-2">
                            <small class="text-muted d-block">IP Address</small>
                            <a href="https://ipinfo.io/{{ $history->ip_address }}" target="_blank" rel="nofollow"
                                class="text-decoration-none">
                                {{ $history->ip_address }}
                                <i class="fas fa-external-link-alt fa-xs"></i>
                            </a>
                        </div>
                        <div class="col-6 mb-2">
                            <small class="text-muted d-block">Date & Time</small>
                            <div class="text-muted">
                                <small>{{ $history->created_at->format('M d, Y') }}</small>
                                <br>
                                <small>{{ $history->created_at->format('h:i A') }}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@endif