@if($canCreate || $canUpdate)
<div class="card section-card  {{ $cssClasses ?? '' }}">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title ">
            {{ __('labels.select_groups') }} @if (isset($isRequire) && $isRequire)
                <span class="text-danger">*</span>
            @endif
        </h5>
    </div>
    @error('groups')
        <div class="alert alert-danger alert-dismissible fade show">
            <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none"
                stroke-linecap="round" stroke-linejoin="round" class="me-2">
                <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon>
                <line x1="15" y1="9" x2="9" y2="15"></line>
                <line x1="9" y1="9" x2="15" y2="15"></line>
            </svg>
            <strong>{{ __('labels.error') }}!</strong> {{ $message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i
                        class="fas fa-solid fa-xmark"></i></span>
            </button>
        </div>
    @enderror

    {{-- Bulk action controls --}}
    {{-- <div class="card-body border-bottom">
        <div class="row mb-3">
            <div class="col-md-4">
                <label class="form-label">{{ __('labels.bulk_assessable_level') }}</label>
                <div class="input-group">
                    <select id="bulk-assessable-level" class="form-select">
                        <option value="bronze">{{ __('labels.bronze') }}</option>
                        <option value="silver">{{ __('labels.silver') }}</option>
                        <option value="gold">{{ __('labels.gold') }}</option>
                    </select>
                    <button class="btn btn-outline-primary" type="button" id="apply-bulk-btn">
                        {{ __('labels.apply_to_selected') }}
                    </button>
                </div>
                <small class="text-muted">{{ __('labels.select_level_and_apply') }}</small>
                <div id="bulk-error-message" class="text-danger mt-2" style="display: none;"></div>
            </div>
        </div>
    </div> --}}

    <div class="table-responsive">
        <table id="datatabel3" class="table display">
            <thead>
                <tr>
                    <th style="width:50px;">
                        <div class="form-check custom-checkbox checkbox-success check-lg me-3">
                            <input type="checkbox" class="form-check-input" id="select-all-groups"
                                {{ isset($readonly) && $readonly ? 'disabled' : '' }} 
                                rel="tooltip" data-toggle="tooltip" data-placement="top"
                                data-bs-toggle="tooltip" title="{{ __('labels.select_all') }}"
                                >
                            <label class="form-check-label" for="select-all-users"></label>
                        </div>
                    </th>
                    <th><strong>#</strong></th>
                    <th><strong>{{ strtoupper(__('labels.name')) }}</strong></th>
                    {{-- <th><strong>{{ __('labels.assessable_level') }}</strong></th> --}}
                    <th><strong>{{ __('labels.description') }}</strong></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @if (isset($groups) && count($groups) > 0)
                    @foreach ($groups as $index => $group)
                        @php
                            $selectedGroup = null;
                            if (isset($selectedGroups)) {
                                $selectedGroup = collect($selectedGroups)->first(function ($value, $key) use ($group) {
                                    return $value['group_id'] == $group->id;
                                });
                            }
                        @endphp
                        <tr>
                            <td>
                                <div class="form-check custom-checkbox checkbox-success check-lg me-3">
                                    <input type="checkbox" class="form-check-input group-checkbox" 
                                        id="group_{{ $index }}"
                                        name="groups[{{ $index }}][group_id]" 
                                        value="{{ $group->id }}"
                                        {{ isset($readonly) && $readonly ? 'disabled' : '' }}
                                        @if (isset($selectedGroup)) checked="true" @endif>
                                    <label class="form-check-label" for="group_{{ $index }}"></label>
                                </div>
                            </td>
                            <td class="text-center">
                                <span class="table-index">
                                    {{ $index + 1 }}
                                </span>
                            </td>
                            <td>
                                <div class="item-name-cell">
                                    <div class="item-avatar">
                                        @if ($group->logo_path)
                                            <img src="{{ Storage::url($group->logo_path) }}" alt="{{ $group->name }}"
                                                class="item-avatar-img">
                                        @else
                                            <div class="item-avatar-default">
                                                {{ strtoupper(substr($group->name, 0, 2)) }}
                                            </div>
                                        @endif
                                    </div>
                                    <div class="item-info">
                                        <h6 class="item-title">{{ $group->name }}</h6>
                                    </div>
                                </div>
                            </td>
                            {{-- <td>
                                <select id="assessable_level_{{ $index }}" class="form-select assessable-level-select"
                                    name="groups[{{ $index }}][assessable_level]" style="max-width: 300px;"
                                    @if (!$selectedGroup || (isset($readonly) && $readonly)) disabled="true" @endif>
                                    <option value="bronze"
                                        {{ old('type', $selectedGroup['assessable_level'] ?? 'bronze') == 'bronze' ? 'selected' : '' }}>
                                        {{ __('labels.bronze') }}</option>
                                    <option value="silver"
                                        {{ old('type', $selectedGroup['assessable_level'] ?? 'bronze') == 'silver' ? 'selected' : '' }}>
                                        {{ __('labels.silver') }}</option>
                                    <option value="gold"
                                        {{ old('type', $selectedGroup['assessable_level'] ?? 'bronze') == 'gold' ? 'selected' : '' }}>
                                        {{ __('labels.gold') }}</option>
                                </select>
                            </td> --}}
                            <td>{{ Str::limit($group->description, 20, '...') }}</td>
                            <td>
                                <div class="d-flex justify-content-end">
                                    <div class="action-group">
                                        <a href="{{ route('groups.show', ['group' => $group->id]) }}" target="_blank"
                                            class="btn-action btn-view" rel="tooltip" data-toggle="tooltip"
                                            data-placement="top" title="{{ __('labels.details') }}"
                                            data-original-title="{{ __('labels.details') }}">
                                            <i class="fas fa fa-lg fa-eye"></i></a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                @endif
            </tbody>
        </table>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize elements
    const selectAllCheckbox = document.getElementById('select-all-groups');
    const groupCheckboxes = document.querySelectorAll('.group-checkbox');
    // const assessableSelects = document.querySelectorAll('.assessable-level-select');
    // const applyButton = document.getElementById('apply-bulk-btn');
    // const bulkLevelSelect = document.getElementById('bulk-assessable-level');
    const errorMessage = document.getElementById('bulk-error-message');
    

        const table = $('#datatabel3').DataTable();

        // To get all checkboxes across all pages
        function getAllGroupCheckboxes() {
            const checkboxes = [];
            table.rows().every(function () {
                const row = this.node();
                const checkbox = $(row).find('.group-checkbox')[0];
                if (checkbox) checkboxes.push(checkbox);
            });
            return checkboxes;
        }

        // Update your event listeners
        table.on('draw', function () {
            // Re-attach event listeners after table redraw
            attachCheckboxEvents();
        });

        function attachCheckboxEvents() {
            const allCheckboxes = getAllGroupCheckboxes();

            allCheckboxes.forEach((checkbox, index) => {
                // Remove existing listeners to avoid duplicates
                $(checkbox).off('change');

                $(checkbox).on('change', function () {
                    // handleGroupCheckboxChange(this, index);
                });

                // Initialize state for pre-checked checkboxes
                if (checkbox.checked) {
                    // handleGroupCheckboxChange(checkbox, index);
                }
            });
        }

    // Function to show error message
    function showBulkError(message) {
        console.log('showBulkError : ', message)
        errorMessage.textContent = message;
        errorMessage.style.display = 'block';
        setTimeout(() => {
            errorMessage.style.display = 'none';
        }, 5000);
    }
    
    // Function to update apply button state
    function updateApplyButtonState() {
        const selectedCount = document.querySelectorAll('.group-checkbox:checked').length;
        if (selectedCount === 0) {
            applyButton.setAttribute('disabled', 'true');
            applyButton.classList.add('disabled');
        } else {
            applyButton.removeAttribute('disabled');
            applyButton.classList.remove('disabled');
        }
    }
    
    // Function to handle group checkbox change
    function handleGroupCheckboxChange(checkbox, index) {
        const assessableSelect = document.getElementById(`assessable_level_${index}`);
            
        if (!assessableSelect) {
            console.warn(`assessable_level_${index} not found`);
            return;
        }

        if (checkbox.checked) {
            assessableSelect.removeAttribute('disabled');
            // Set to bulk level if not already set
            // if (assessableSelect.value === 'bronze') {
            //     assessableSelect.value = bulkLevelSelect.value;
            // }
        } else {
            assessableSelect.setAttribute('disabled', 'true');
        }
        
        // updateApplyButtonState();
    }
    
    // Function to apply bulk level to selected groups
    function applyBulkLevel() {
        const selectedValue = bulkLevelSelect.value;
        const selectedCheckboxes = document.querySelectorAll('.group-checkbox:checked');
        
        console.log('applyBulkLevel - selectedCheckboxes.length', selectedCheckboxes.length)
        // 
        if (selectedCheckboxes.length === 0) {
            showBulkError('{{ __("labels.no_groups_selected_please_select_groups_first") }}');
            return;
        }
        
        selectedCheckboxes.forEach(checkbox => {
            const row = checkbox.closest('tr');
            const assessableSelect = row.querySelector('.assessable-level-select');
            if (assessableSelect && !assessableSelect.disabled) {
                assessableSelect.value = selectedValue;
            }
        });
        
        // Show success message
        if (typeof showNotification === 'function') {
            showNotification(`{{ __('labels.assessable_level_changed_for') }} ${selectedCheckboxes.length} {{ __('labels.selected_items') }}`, 'success');
        } else {
            alert(`{{ __('labels.assessable_level_changed_for') }} ${selectedCheckboxes.length} {{ __('labels.selected_items') }}`);
        }
    }
    
    // Function to handle select all
        function handleSelectAll() {
            const isChecked = selectAllCheckbox.checked;

            const allCheckboxes = getAllGroupCheckboxes();
            allCheckboxes.forEach(checkbox => {
                if (!checkbox.disabled) {
                    checkbox.checked = isChecked;
                    const index = checkbox.id.replace('group_', '');
                    // handleGroupCheckboxChange(checkbox, index);
                }
            });
        }
    
    // Event listeners
    selectAllCheckbox.addEventListener('change', handleSelectAll);
    
        $(document).on('change', '.group-checkbox', function() {
            const checkbox = this;
            const index = $(checkbox).closest('tr').index();
            // handleGroupCheckboxChange(checkbox, index);
        });
    
    // applyButton.addEventListener('click', applyBulkLevel);
    
    // Initialize button state
    // updateApplyButtonState();
    
    // Show toast notification function if not exists
    if (typeof showNotification === 'undefined') {
        window.showNotification = function(message, type = 'success') {
            // Check if toastr is available
            if (typeof toastr !== 'undefined') {
                toastr[type](message);
            } 
            // Check if Bootstrap Toast is available
            else if (typeof bootstrap !== 'undefined') {
                const toastEl = document.createElement('div');
                toastEl.className = `toast align-items-center text-bg-${type} border-0`;
                toastEl.innerHTML = `
                    <div class="d-flex">
                        <div class="toast-body">${message}</div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                    </div>
                `;
                document.body.appendChild(toastEl);
                const toast = new bootstrap.Toast(toastEl);
                toast.show();
                setTimeout(() => toastEl.remove(), 5000);
            }
            // Fallback to alert
            else {
                alert(message);
            }
        };
    }
});

function toggleGroupVisibility(show = true)
{
    const groupSelection = document.querySelector('#group-selection');

    if(groupSelection) {
        if (show) {
            groupSelection.classList.remove('d-none');
        } else {
            groupSelection.classList.add('d-none');
        }
    }
}

</script>
@endif