@extends('layouts.app')

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        <!-- begin #header -->
        @include('partials.header')
        <!-- end #header -->

        <!-- begin #sidebar -->
        @include('partials.sidebar')
        <!-- end #sidebar -->

        <!-- begin #content -->
        <div id="content" class="content">
            <!-- begin breadcrumb -->
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:;">Management</a></li>
                <li class="breadcrumb-item active">Activity Logs</li>
            </ol>
            <!-- end breadcrumb -->
            <!-- begin page-header -->
            <h1 class="page-header">Activity Logs</h1>
            <!-- end page-header -->
            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Activity Logs</h4>
                </div>
                <div class="panel-body">
                    <!-- Filters -->
                    <form method="GET" action="{{ route('activity.index') }}" class="mb-4">
                        <div class="row g-3">
                            <div class="col-md-2">
                                <label for="subject_type" class="form-label">Module</label>
                                <select name="subject_type" id="subject_type" class="form-control">
                                    <option value="">All Modules</option>
                                    <option value="background_img"
                                        {{ request('subject_type') == 'background_img' ? 'selected' : '' }}>Background
                                        Images</option>
                                    <option value="room" {{ request('subject_type') == 'room' ? 'selected' : '' }}>Room
                                    </option>
                                    <!-- Add more options for other modules -->
                                </select>
                            </div>

                            <div class="col-md-2">
                                <label for="event" class="form-label">Event</label>
                                <select name="event" id="event" class="form-control">
                                    <option value="">All Events</option>
                                    <option value="created" {{ request('event') == 'created' ? 'selected' : '' }}>Created
                                    </option>
                                    <option value="updated" {{ request('event') == 'updated' ? 'selected' : '' }}>Updated
                                    </option>
                                    <option value="deleted" {{ request('event') == 'deleted' ? 'selected' : '' }}>Deleted
                                    </option>
                                </select>
                            </div>

                            <div class="col-md-2">
                                <label for="causer_id" class="form-label">User</label>
                                <select name="causer_id" id="causer_id" class="form-control">
                                    <option value="">All Users</option>
                                    @foreach ($users as $user)
                                        <option value="{{ $user->id }}"
                                            {{ request('causer_id') == $user->id ? 'selected' : '' }}>
                                            {{ $user->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-2">
                                <label for="date_from" class="form-label">Date From</label>
                                <input type="date" class="form-control" id="date_from" name="date_from"
                                    value="{{ request('date_from') }}">
                            </div>

                            <div class="col-md-2">
                                <label for="date_to" class="form-label">Date To</label>
                                <input type="date" class="form-control" id="date_to" name="date_to"
                                    value="{{ request('date_to') }}">
                            </div>

                            <div class="col-md-2 d-flex align-items-end">
                                <button type="submit" class="btn btn-primary mr-2">Filter</button>
                                <a href="{{ route('activity.index') }}" class="btn btn-secondary">Reset</a>
                            </div>
                        </div>
                    </form>

                    <!-- Activity Log Table -->
                    <div class="table-responsive">
                        <table id="data-table-default" class="table table-striped table-bordered table-td-valign-middle">
                            <thead>
                                <tr>
                                    <th>Date & Time</th>
                                    <th>User</th>
                                    <th>Action</th>
                                    <th>Module</th>
                                    <th>Details</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($logs as $log)
                                    <tr>
                                        <td>{{ $log->created_at ? $log->created_at->format('Y-m-d H:i:s') : 'N/A' }}</td>
                                        <td>
                                            @if ($log->causer && isset($log->causer->name))
                                                {{ $log->causer->name }}
                                            @else
                                                System
                                            @endif
                                        </td>
                                        <td>{{ ucfirst($log->description ?? 'unknown action') }}</td>
                                        <td>
                                            @if ($log->subject_type)
                                                {{ class_basename($log->subject_type) }}
                                                @if ($log->subject_id)
                                                    #{{ $log->subject_id }}
                                                @endif
                                            @else
                                                -
                                            @endif
                                        </td>
                                        <td>
                                            <a href="{{ route('activity.show', $log->id) }}"
                                                class="btn btn-sm btn-info">View Details</a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center">No activity logs found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    {{-- <div class="d-flex justify-content-center mt-4">
                        {{ $logs->appends(request()->query())->links() }}
                    </div> --}}
                </div>
            </div>
            <!-- end panel -->
        </div>
        <!-- end #content -->

        <!-- begin scroll to top btn -->
        <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" data-click="scroll-top"><i
                class="fa fa-angle-up"></i></a>
        <!-- end scroll to top btn -->
    </div>
@endsection