@extends('user.layouts.template')

@section('content')
    @php
        $permission = session()->get('permissions');
    @endphp
    <!-- Content Start -->
    <div class="content__boxed">
        <div class="content__wrap">
            <div class="main-container">
                <div class="table-responsive">
                    <table id="historyTable" class="table table-striped table-hover">
                        <thead class="thead-dark">
                            <tr>
                                <th>Property</th>
                                <th>Source</th>
                                <!-- <th>Entry ID</th> -->
                                <th>Type</th>
                                <th>User Name</th>
                                <!-- <th>JSON Data</th> -->
                                <th>Timestamp</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Data will be loaded via AJAX -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- Content End -->
@endsection

@section('script')
    <!-- sweetalert -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- DataTables JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/dataTables.bootstrap4.min.js"></script>

    <script>
        function initHistoryTable() {
            return $('#historyTable').DataTable({
                processing: true,
                serverSide: false,
                responsive: true,
                ajax: {
                    url: '/api/history-data', // your API endpoint
                    type: 'GET',
                    error: function (xhr, error, code) {
                        console.log('Ajax error:', error);
                    }
                },
                columns: [
                    { data: 'prop_id', width: '8%' },
                    {
                        data: 'source_table', width: '10%', render: function (data, type, row) {
                            const badges = {
                                'floor': '<span class="text-dark h5">Floor</span>',
                                'property': '<span class="text-dark h5">Property</span>',
                                'suite': '<span class="text-dark h5">Suite</span>',
                                'tenant': '<span class="text-dark h5">Tenant</span>'
                            };
                            return badges[data] || data;
                        }
                    },
                    {
                        data: 'type', width: '10%', render: function (data, type, row) {
                            const badges = {
                                'update': '<span class="text-dark h5 text-uppercase">Update</span>',
                                'insert': '<span class="text-dark h5 text-uppercase">Insert</span>',
                                'delete': '<span class="text-dark h5 text-uppercase">Delete</span>',
                            };
                            return badges[data] || data;
                        }
                    },
                    { data: 'user_name', width: '8%' },
                    {
                        data: 'created_at',
                        width: '12%',
                        render: function (data) {
                            if (!data) return '-';
                            const date = new Date(data);
                            return formatDateString(date) +
                                '<br><small class="text-muted">' + date.toLocaleTimeString() + '</small>';
                        }
                    }
                ],
                order: [[4, 'desc']] // created_at column
            });
        }
        $(document).ready(function () {
            let table = initHistoryTable();

            // optional auto refresh every 30s
            // setInterval(function () {
            //     table.ajax.reload(null, false);
            // }, 30000);
        });

    </script>
    <style>
        .main-container {
            background: white;
            border-radius: 10px;
            padding: 20px;
        }

        .table-responsive {
            border-radius: 8px;
            overflow: hidden;
        }

        .dataTables_wrapper {
            padding: 8px;
        }

        .dataTables_wrapper .dataTables_paginate {
            padding-top: 1.25em;
        }

        .dataTables_wrapper .dataTables_info {
            padding-top: 2em;
        }

        .paginate_button.page-item:hover {
            border: none !important;
            background-color: #ff3b3b !important;
            background: transparent !important;
        }

        .paginate_button.page-item .page-link {
            border-radius: 4px;
            overflow: hidden;
            border: 0;
        }

        #historyTable_length label {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        #historyTable_length select {
            width: 30px;
            padding: 5px;
            margin: 0px 8px;

        }

        #historyTable_length label::before {
            position: absolute;
            content: '<';
            top: 7px;
            left: 52px;
            width: 12px;
            height: 12px;
            font-size: 9px;
            z-index: 999;
            transform: rotate(270deg);
            font-weight: bold;
            color: #949494;
        }
    </style>
@endsection