@extends('layouts.sidebar')

@section('content')
    <div class="container mx-auto mt-10">
        <!-- Modal Structure -->
        <div id="deleteAllModal" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-gray-800 bg-opacity-50">

            <div class="w-1/3 p-6 bg-white rounded-lg shadow-lg">
                <h2 class="mb-4 text-xl font-bold">Confirm Deletion</h2>
                <p class="mb-4">Are you sure you want to delete all logs? This action cannot be undone.</p>
                <form action="{{ route('logs.deleteAll') }}" method="POST" id="deleteAllForm">
                    @csrf
                    <input type="hidden" name="confirm" value="1">
                    <div class="flex justify-end">
                        <button type="button" onclick="closeModal()"
                            class="px-4 py-2 mr-2 font-bold text-white bg-gray-500 rounded hover:bg-gray-700">Cancel</button>
                        <button type="submit"
                            class="px-4 py-2 font-bold text-white bg-red-500 rounded hover:bg-red-700">Delete All
                            Logs</button>
                    </div>
                </form>
            </div>

        </div>
        @php
            $user = auth()->user();
        @endphp

        @if ($user && $user->role === 'Admin')
            <button type="button" onclick="openModal()"
                class="px-4 py-2 font-bold text-white bg-red-500 rounded hover:bg-red-700">
                Delete All Logs
            </button>
        @endif

        <table id="logsTable" class="min-w-full text-center bg-white border-collapse rounded shadow-md">
            <thead class="">
                <tr>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">User</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Action</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Details</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Date Created</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Actions</th>
                </tr>
            </thead>
            <tbody class="text-sm text-gray-600">

                <!-- DataTables will populate this tbody -->
            </tbody>
        </table>
    </div>
@endsection

@section('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#logsTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('logs.index') }}', // Ensure this route is defined in your web.php
                columns: [{
                        data: 'user.admin.admin_name',
                        data: 'user.admin.admin_name',
                    }, // Adjusted to use 'user_id'
                    {
                        data: 'action',
                        name: 'action'
                    },
                    {
                        data: 'details',
                        name: 'details'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
        });
    </script>
    <script>
        function openModal() {
            document.getElementById('deleteAllModal').classList.remove('hidden');
        }

        function closeModal() {
            document.getElementById('deleteAllModal').classList.add('hidden');
        }
    </script>
@endsection