@extends('layouts.app')

@section('content')
    <div class="row">
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="">
                        <h4>Activity Log</h4>
                        <p class="f-m-light mt-1">Page for Activity Log</p>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive theme-scrollbar">
                    <table class="display" id="basic-1">
                        <thead>
                            <tr class="bg-light-primary text-dark">
                                <th class="d-none"></th>
                                <th>Log</th>
                                <th>Detail</th>
                                <th>Timestamp</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $("#basic-1").DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('datatable.activity-log.index') }}",
                type: 'GET',
            },
            order: [
                [0, 'desc']
            ],
            columns: [{
                    data: 'id',
                    name: 'id',
                    visible: false,
                },
                {
                    data: 'description',
                    name: 'description',
                },
                {
                    data: 'properties',
                    name: 'properties',
                    render: function(data, type, row) {
                        // Create button to modal to show details
                        return `<button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#detailModal${row.id}">View Details</button>
                        <div class="modal fade" id="detailModal${row.id}" tabindex="-1" aria-labelledby="detailModalLabel${row.id}" aria-hidden="true">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="detailModalLabel${row.id}">Activity Log Details</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <pre>${JSON.stringify(data, null, 2)}</pre>
                                    </div>
                                </div>
                            </div>
                        </div>`;

                    },
                },
                {
                    data: 'created_at',
                    name: 'created_at',
                    render: function(data, type, row) {
                        if (data) {
                            let date = new Date(data);
                            let day = String(date.getDate()).padStart(2, '0');
                            let month = date.toLocaleString('en-US', {
                                month: 'long'
                            });
                            let year = date.getFullYear();
                            let hours = String(date.getHours()).padStart(2, '0');
                            let minutes = String(date.getMinutes()).padStart(2, '0');
                            let seconds = String(date.getSeconds()).padStart(2, '0');
                            return `${day} ${month} ${year}, ${hours}:${minutes}:${seconds}`;
                        }
                        return data;
                    },
                },
            ]
        });
    </script>
@endsection