@extends('layouts.default')
@section('content')
<style>
    .pagination {
        margin-top: 20px;
    }

    .pagination .page-item {
        display: inline-block;
        margin-right: 5px;
    }

    .pagination .page-link {
        padding: 5px 10px;
        background-color: #007BFF;
        color: #fff;
        border: 1px solid #007BFF;
        border-radius: 3px;
        text-decoration: none;
        transition: background-color 0.3s;
    }

    .pagination .page-link:hover {
        background-color: #0056b3;
    }

    .pagination .page-item.disabled .page-link {
        background-color: #f8f9fa;
        color: #6c757d;
        border-color: #dee2e6;
    }
</style>

<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">User Logs</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Dashboard</li>
                    </ol>
                </div>
            </div </div>
        </div>
        <br>
        <section class="content">
            <div class="container-fluid">
                @if ($message = Session::get('success'))
                <div class="alert alert-success">
                    <p>{{ $message }}</p>
                </div>
                @endif
                @if ($message = Session::get('error'))
                <div class="alert alert-danger">
                    <p>{{ $message }}</p>
                </div>
                @endif
                <div>
                    <label class="btn btn-sm btn-primary" style="float: inline-end;">
                        <input type="checkbox" id="showAll" style="display: none;">
                        View All Data</label>
                    <label class="btn btn-sm btn-primary" style="float: inline-end;">
                        <input type="checkbox" id="checkAction" style="display: none;">
                        Select All</label>
                    <table class="table table-striped table-hover table-list stateChange" id="myTable">
                        <thead>
                            <tr class="bg-dark" style>
                                <th scope="col">ID</th>
                                <th scope="col">Created At</th>
                                <th scope="col">User Id</th>
                                <th scope="col">Email</th>
                                <th scope="col">Login time</th>
                                <th scope="col">Logout time</th>
                                <th scope="col">status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($user_logs as $value )
                            <tr>
                                <td>{{$value->id}}</td>
                                <td>{{$value->created_at}}</td>
                                <td>{{$value->user_id}}</td>
                                <td>{{$value->email}}</td>
                                <td>{{$value->logintime}}</td>
                                <td>{{$value->logouttime}}</td>
                                <td><button class="btn btn-primary btn-sm" style="width: -webkit-fill-available">{{$value->status}}</button></td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="col-md-12">
                        <ul class="pagination justify-content-center">
                    </div>
                </div>
        </section>
    </div>
    <aside class="control-sidebar control-sidebar-dark">
    </aside>
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
    <script>

        $('body').on('click', '#checkAction', function () {
            var val = this.value;
            $(".boxaction").prop('checked', this.checked);
        });


        $(document).ready(function () {
            $('#myTable').DataTable({
                "paging": false,            // Disable paging
                "searching": false,         // Disable searching
                "info": false,              // Disable table information display
                "ordering": false,          // Disable column ordering
                "lengthChange": true,       // Enable length change
                "lengthMenu": [500, 1000],  // Add custom length menu options
            });


        });

        let table = new DataTable('#myTable');
        $(document).ready(function () {
            $('#myTable').DataTable();
        });

        $('#showAll').on('click', function () {
            table.page.len(-1).draw();
        });


        setTimeout(function () {
            $(".alert").hide();
        }, 5000);


        $('#deals_in').select2();

    </script>

    @stop