@if($canCreate || $canUpdate)
<div class="card section-card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title ">
            {{ __('labels.industry_groups') }} @if (isset($isRequire) && $isRequire)
                <span class="text-danger">*</span>
            @endif
        </h5>
    </div>
    @error('industry_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

    <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.description') }}</strong></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>

                @php 
                    $industryGroups = App\Models\IndustryGroup::active()
                                                               ->get();
                @endphp
                @if (isset($industryGroups) && count($industryGroups) > 0)
                    @foreach ($industryGroups as $index => $group)
                        @php
                            $selectedGroup = null;
                            if (isset($selectedGroups)) {
                                $selectedGroup = collect($selectedGroups)->first(function ($value, $key) use ($group) {
                                    return $value['industry_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="industry_groups[{{ $index }}][industry_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>
                                            <div class="description-cell" title="{{ $group->description ?? '' }}">
                                                @if($group->description)
                                                    <span class="description-text">
                                                        {{ Str::limit($group->description, 30, '...') }}
                                                    </span>
                                                @else
                                                    <span class="description-empty">-</span>
                                                @endif
                                            </div>
                                        </td>
                                        
                            <td>
                                <div class="d-flex justify-content-end">
                                    <div class="action-group">
                                        <a href="{{ route('industry-groups.show', ['industry_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);
    }
    
    
    // Event listeners
    selectAllCheckbox.addEventListener('change', handleSelectAll);
    
    // 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_', '');
                }
            });
        }
    


    // 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);
            }
        };
    }
});
</script>
@endif