@extends('layout.master')
@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
@endpush
@section('content')
<div class="container my-1">
    <div class="row mb-3">
        <div class="col-lg-12 ">
            <h1 class="display-6">Activity Logs</h1>
            <p class="text-muted">Gain insights into system usage and track every activity with powerful analytics and detailed logs.</p>
        </div>
    </div>
    <div class="row g-4 mb-3">
        <div class="col-lg-3 col-sm-6">
            <div class="card shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="icon bg-primary text-white rounded-circle mb-3 mx-auto" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-database fa-2x"></i>
                    </div>
                    <h5>Total Logs</h5>
                    <h2 class="text-primary" id="totalLogs">1,234</h2>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div class="card shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="icon bg-success text-white rounded-circle mb-3 mx-auto" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-user-check fa-2x"></i>
                    </div>
                    <h5>Successful Logins</h5>
                    <h2 class="text-success" id="successfulLogins">567</h2>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div class="card shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="icon bg-warning text-white rounded-circle mb-3 mx-auto" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-shield-alt fa-2x"></i>
                    </div>
                    <h5>Security Alerts</h5>
                    <h2 class="text-warning" id="securityAlerts">45</h2>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div class="card shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="icon bg-danger text-white rounded-circle mb-3 mx-auto" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-exclamation-triangle fa-2x"></i>
                    </div>
                    <h5>Failed Logins</h5>
                    <h2 class="text-danger" id="failedLogins">32</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-1">
        <div class="col-lg-12">
            <div class="card shadow-sm">
                <div class="card-body">

                    <!-- Filter Form with Card Design -->
                    <form class="row g-3 mb-4">
                        <div class="col-md-4">
                            <label for="filterUser" class="form-label">Filter by User</label>
                            <select class="form-select" id="filterUser">
                                <option value="">All Users</option>
                                <option value="user1">Ahmad Zaki</option>
                                <option value="user2">Siti Aisyah</option>
                                <option value="admin">Admin</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="filterAction" class="form-label">Filter by Action</label>
                            <select class="form-select" id="filterAction">
                                <option value="">All Actions</option>
                                <option value="login">Login</option>
                                <option value="update">Update</option>
                                <option value="delete">Delete</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="filterDate" class="form-label">Filter by Date</label>
                            <input type="date" class="form-control" id="filterDate">
                        </div>
                        <div class="col-md-12 text-end">
                            <button class="btn btn-primary" id="applyFilters">Apply Filters</button>
                        </div>
                    </form>

                    <!-- Activity Logs Table -->
                    <h3 class="card-title">Activity Logs</h3>
                    <div class="table-responsive">
                        <table id="dataTableExample" class="table table-hover table-bordered">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>User</th>
                                    <th>Action</th>
                                    <th>Date</th>
                                    <th>IP Address</th>
                                    <th>Details</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Ahmad Zaki</td>
                                    <td>Login</td>
                                    <td>2024-12-31 12:00 PM</td>
                                    <td>192.168.1.1</td>
                                    <td><button class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#logDetailsModal">View</button></td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Siti Aisyah</td>
                                    <td>Update</td>
                                    <td>2024-12-30 11:45 AM</td>
                                    <td>192.168.1.2</td>
                                    <td><button class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#logDetailsModal">View</button></td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>Mohd Faizal</td>
                                    <td>Delete</td>
                                    <td>2024-12-29 9:15 AM</td>
                                    <td>192.168.1.3</td>
                                    <td><button class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#logDetailsModal">View</button></td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>Aisyah Rosli</td>
                                    <td>Login</td>
                                    <td>2024-12-28 2:30 PM</td>
                                    <td>192.168.1.4</td>
                                    <td><button class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#logDetailsModal">View</button></td>
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td>Ahmad Zaki</td>
                                    <td>Update</td>
                                    <td>2024-12-27 3:00 PM</td>
                                    <td>192.168.1.5</td>
                                    <td><button class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#logDetailsModal">View</button></td>
                                </tr>
                                <tr>
                                    <td>6</td>
                                    <td>Fatimah Ismail</td>
                                    <td>Delete</td>
                                    <td>2024-12-26 4:00 PM</td>
                                    <td>192.168.1.6</td>
                                    <td><button class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#logDetailsModal">View</button></td>
                                </tr>
                                <tr>
                                    <td>7</td>
                                    <td>Rashidah Mohamed</td>
                                    <td>Login</td>
                                    <td>2024-12-25 11:00 AM</td>
                                    <td>192.168.1.7</td>
                                    <td><button class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#logDetailsModal">View</button></td>
                                </tr>
                                <tr>
                                    <td>8</td>
                                    <td>Siti Khadijah</td>
                                    <td>Update</td>
                                    <td>2024-12-24 1:30 PM</td>
                                    <td>192.168.1.8</td>
                                    <td><button class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#logDetailsModal">View</button></td>
                                </tr>
                                <tr>
                                    <td>9</td>
                                    <td>Mohammad Amir</td>
                                    <td>Login</td>
                                    <td>2024-12-23 10:30 AM</td>
                                    <td>192.168.1.9</td>
                                    <td><button class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#logDetailsModal">View</button></td>
                                </tr>
                                <tr>
                                    <td>10</td>
                                    <td>Nurul Huda</td>
                                    <td>Delete</td>
                                    <td>2024-12-22 5:00 PM</td>
                                    <td>192.168.1.10</td>
                                    <td><button class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#logDetailsModal">View</button></td>
                                </tr>
                                <tr>
                                    <td>11</td>
                                    <td>Aizat Rahman</td>
                                    <td>Login</td>
                                    <td>2024-12-21 9:45 AM</td>
                                    <td>192.168.1.11</td>
                                    <td><button class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#logDetailsModal">View</button></td>
                                </tr>
                                <tr>
                                    <td>12</td>
                                    <td>Leela Devi</td>
                                    <td>Update</td>
                                    <td>2024-12-20 2:00 PM</td>
                                    <td>192.168.1.12</td>
                                    <td><button class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#logDetailsModal">View</button></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="logDetailsModal" tabindex="-1" aria-labelledby="logDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="logDetailsModalLabel">Log Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>User:</strong> Ahmad Zaki</p>
                        <p><strong>Action:</strong> Login</p>
                        <p><strong>Date:</strong> 2024-12-31 12:00 PM</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>IP Address:</strong> 192.168.1.1</p>
                        <p><strong>Device:</strong> Desktop</p>
                        <p><strong>Browser:</strong> Google Chrome</p>
                    </div>
                </div>
                <hr>
                <h6>Additional Information:</h6>
                <p>User logged in from a new device and location.</p>
            </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">Download Log</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
  <script src="{{ asset('assets/js/data-table.js') }}"></script>
@endpush