@extends('layouts.app')

@section('page_title', 'User Management')

@section('content')
    <div id="user-table">
        @include('components.table-component', [
            'pageTitle' => 'User Management',
            'data' => [],
            'columns' => [
                ['name' => 'Username', 'key' => 'username', 'sortable' => true],
                ['name' => 'First Name', 'key' => 'firstName', 'sortable' => true],
                ['name' => 'Last Name', 'key' => 'lastName', 'sortable' => true],
                ['name' => 'User Role', 'key' => 'role', 'sortable' => true],
                ['name' => 'Email', 'key' => 'email', 'sortable' => true],
                ['name' => 'Status', 'key' => 'status', 'sortable' => true]
            ],
            'actions' => ['edit', 'view', 'delete'],
            'showAddButton' => true,
            'addButtonUrl' => '/add-user',
            'showCheckboxes' => true,
            'showBatchDelete' => true,
            'showEditModal' => true,
            'showViewModal' => true
        ])
        <div id="no-data-message" style="display: none; text-align: center; margin-top: 20px;">
            <p>No Data Found</p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const apiBaseUrl = '{{ config('app.api_base_url') }}'; // Fetch base URL from config/app.php
            const apiEndpoint = `${apiBaseUrl}/api/cms/admin`; // Construct the full API URL

            fetch(apiEndpoint, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'Authorization': 'Bearer ' + localStorage.getItem('token') // Adjust if authentication is needed
                }
            })
            .then(response => response.json())
            .then(data => {
                const noDataMessage = document.getElementById('no-data-message');
                const tableComponent = document.querySelector('table-component');

                if (data.data && Array.isArray(data.data) && data.data.length > 0) {
                    const users = data.data.map(admin => ({
                        id: admin.admin_id,
                        username: admin.username,
                        firstName: admin.firstname,
                        lastName: admin.lastname,
                        role: 'Admin', // Adjust if the API provides roles
                        email: admin.email,
                        status: admin.is_active ? 'Active' : 'Inactive'
                    }));

                    // Update the table component with the fetched data
                    if (tableComponent) {
                        tableComponent.setAttribute('data', JSON.stringify(users));
                    }
                    noDataMessage.style.display = 'none'; // Hide the message
                } else {
                    console.log('No data found or invalid response:', data);
                    noDataMessage.style.display = 'block'; // Show the message
                }
            })
            .catch(error => {
                console.error('Error fetching data:', error);
                const noDataMessage = document.getElementById('no-data-message');
                noDataMessage.style.display = 'block'; // Show the message on error
            });
        });
    </script>
@endsection