@php
$role = auth()->user()->currentRole;
// 'can_manage_roles'
// 'can_manage_ipass'
// 'can_manage_users'
// 'can_manage_adhoc'
// 'can_manage_documents'
@endphp
<div x-data="{
        sectionVisibility: {},
        init() {
            {{-- let cookieValue = this.getCookie(this.cookieName); --}}
            {{-- this.showForm = (cookieValue !== undefined) ? (cookieValue === 'true') : true; --}}

            @foreach ($formData as $formLabel => $fields)
                this.sectionVisibility['{{ $formLabel }}'] = this.getCookie('{{ $recordtypestring }}_{{ $formLabel }}_visibility') === 'true';
            @endforeach
            @foreach ($formSublists as $sublist)
                this.sectionVisibility['sublist_{{ $sublist['label'] }}'] = this.getCookie('{{ $recordtypestring }}_sublist_{{ $sublist['label'] }}_visibility') === 'true';
            @endforeach

        },
        toggleSection(section) {
            this.sectionVisibility[section] = !this.sectionVisibility[section];
            this.setCookie('{{ $recordtypestring }}_' + section + '_visibility', this.sectionVisibility[section], 7);
        },
        getCookie(name) {
            let value = `; ${document.cookie}`;
            let parts = value.split(`; ${name}=`);
            if (parts.length === 2) return parts.pop().split(';').shift();
        },
        setCookie(name, value, days) {
            let expires = '';
            if (days) {
                let date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                expires = `; expires=${date.toUTCString()}`;
            }
            document.cookie = `${name}=${value || ''}${expires}; path=/`;
        }
    }" x-init="init" x-cloak>

    <div wire:ignore class="mx-auto py-6 py-6 px-4 sm:px-6 lg:px-8">

        <div class="space-y-4 md:space-y-6">
            <div x-cloak>
                @foreach ($formData as $formLabel => $fields)
                    @if($fields)
                        @php
                            $showSection = false;
                            foreach ($fields as $field) {
                                // For clients, check both visibility and is_visible_to_client
                                if ($isClientView) {
                                    if ($field['visibility'] === true && ($field['is_visible_to_client'] ?? false)) {
                                        $showSection = true;
                                        break;
                                    }
                                } else {
                                    // For non-clients, just check visibility
                                    if ($field['visibility'] === true) {
                                        $showSection = true;
                                        break;
                                    }
                                }
                            }
                        @endphp
                        <div class="mb-6 mb:mb-8 bg-white shadow-sm ring-1 ring-gray-900/5 lg:col-span-2 overflow-hidden rounded-lg @if(!$showSection) hidden @endif">
                            <div class="p-4 sm:px-8  dark-bg flex justify-between items-center">
                                <h2 class="text-base font-semibold leading-3 text-white ">{{ $formLabel }}</h2>
                                <button class="btn btn-outline whitespace-nowrap sm" @click="toggleSection('{{ $formLabel }}')">
                                    <span x-text="sectionVisibility['{{ $formLabel }}'] ? 'Hide Section' : 'Show Section'"></span>
                                </button>
                            </div>
                            <div class="px-4 sm:px-8 sm:py-5" x-show="sectionVisibility['{{ $formLabel }}']">
                                <div class="gap-4 sm:gap-5  grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-4">
                                    @foreach ($fields as $field)
                                        @php
                                            // For clients, hide field if not visible to client
                                            $hideField = !$field['visibility'];
                                            if ($isClientView && !($field['is_visible_to_client'] ?? false)) {
                                                $hideField = true;
                                            }
                                        @endphp
                                        <div class="gap:mb-4  break-inside-avoid @if (is_array($field) && in_array($field['contentType'] ?? '', ['long_text', 'text_area', 'rich_text'])) sm:col-span-2 @endif"  @if ($hideField) hidden @endif>


                                            <label for="{{ $field['fieldname'] }}" class="input-label @if ($field['is_required']) required @endif">{{ $field['title'] }}</label>
                                            @switch($field['contentType'])
                                                @case('free_form_text')
                                                @case('long_text')
                                                @case('text_area')
                                                    @isset($field['value'])
                                                        @if(is_string($field['value']))
                                                            <div class="">{{ $field['value'] }}</div>
                                                        @else
                                                            <div class="">Value is not a string</div>
                                                        @endif
                                                    @endisset
                                                    @break
                                                @case('integer_number')
                                                    @isset($field['value'])
                                                        <div class="">{{ $field['value'] }}</div>
                                                    @endisset
                                                    @break
                                                @case('percent')
                                                    @isset($field['value'])
                                                        <div class="">{{ number_percent($field['value'] )}}</div>
                                                    @else
                                                        <div class="">{{ number_percent(0)}}</div>
                                                    @endisset
                                                    @break
                                                @case('decimal_number')
                                                    @isset($field['value'])
                                                        <div class="">{{ $field['value'] }} </div>
                                                    @else
                                                        <div class="">0</div>
                                                    @endisset
                                                    @break
                                                @case('currency')

                                                    @isset($field['value'])
                                                        @php
                                                            $value = $field['value'] ?? '';
                                                            $value = trim($value);
                                                            $isValidNumber = ($value !== '' && is_numeric($value)) || (is_string($value) && $value !== '' && preg_match('/^-?\d*\.?\d+$/', $value));
                                                        @endphp

                                                        @if($value === '' || $value === null)
                                                            <div class="">{{ number_currency(0) }}</div>
                                                        @elseif(is_string($field['value']) && !$isValidNumber)
                                                            <div class="">
                                                                <span class="text-warning">Incorrect field type. Please convert to Free Text Field:</span><br>
                                                                {{ $field['value'] }}
                                                            </div>
                                                        @else
                                                            <div class="">{{ number_currency($value) }}</div>
                                                        @endif
                                                    @else
                                                        <div class="">{{ number_currency(0) }}</div>
                                                    @endisset
                                                @break
                                                @case('date')
                                                    @if(isset($field['value']) && $field['value'] !== '0000-00-00' && !empty($field['value']))
                                                        <div class="">{{ Carbon\Carbon::parse($field['value'])->format('M d, Y') }}</div>
                                                    @endif
                                                @break

                                                @case('date_time')
                                                    @if(isset($field['value']) && $field['value'] !== '0000-00-00' && !str_starts_with($field['value'], '0000-00-00') && !empty($field['value']))
                                                        <div class="">{{ Carbon\Carbon::parse($field['value'])->format('M d, Y, h:i a') }}</div>
                                                    @endif
                                                @break

                                                @case('time_of_day')
                                                    <div class="">{{ Carbon\Carbon::parse($field['value'])->format('h:i a') }}</div>
                                                    @break

                                                @case('hyperlink')
                                                    @if($isClientView)
                                                        <div class="">{{ isset($field) && is_string($field['value']) ? $field['value'] : '' }}</div>
                                                    @else
                                                        <a href="{{ isset($field) && is_string($field['value']) ? $field['value'] : '' }}" target="_blank" class="link max-w-xs truncate block" >{{ isset($field) && is_string($field['value']) ? $field['value'] : '' }}</a>
                                                    @endif
                                                    @break

                                                @case('password')
                                                    <div x-data="{ showPassword: false }" class="flex">
                                                        <div x-show="!showPassword">@for ($i = 0; $i < strlen($field['value']); $i++) • @endfor </div>
                                                        <div x-show="showPassword">{{ $field['value'] }}</div>
                                                        <button @click="showPassword = !showPassword" class="ml-2">
                                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
                                                                <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
                                                                <path fill-rule="evenodd" d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" clip-rule="evenodd" />
                                                            </svg>
                                                        </button>
                                                    </div>
                                                    @break

                                                @case('phone_number')
                                                    @if($isClientView)
                                                        <div class="">{{ $field['value'] }}</div>
                                                    @else
                                                        <a href="tel:+{{ $field['value'] }}" target="_blank" class="link">{{ $field['value'] }}</a>
                                                    @endif
                                                    @break

                                                @case('email_address')
                                                    @if($isClientView)
                                                        <div class="">{{ $field['value'] }}</div>
                                                    @else
                                                        <a href="mailto:{{ $field['value'] }}" class="link">{{ $field['value'] }}</a>
                                                    @endif
                                                    @break
                                                @case('list')
                                                    @if($isClientView)
                                                        @php
                                                            $selectedValue = is_array($field['value']) ? $field['value'] : [$field['value']];
                                                            $options = $field['listoptions'] ?? [];
                                                            $selectedLabel = collect($options)
                                                                ->whereIn('refid', $selectedValue)
                                                                ->pluck('value')
                                                                ->first();
                                                        @endphp
                                                        <div class="">{{ $selectedLabel ?? '' }}</div>
                                                    @else
                                                        <livewire:form-builder.fields.list-ref :field="$field" :value="isset($record) ? $field['value'] : ''" :form="false" />
                                                    @endif
                                                    @break
                                                @case('multiple_select')
                                                    @if($isClientView)
                                                        @php
                                                            $selectedValues = is_array($field['value']) ? $field['value'] : [$field['value']];
                                                            $options = $field['listoptions'] ?? [];
                                                            $selectedLabels = collect($options)
                                                                ->whereIn('refid', $selectedValues)
                                                                ->pluck('value')
                                                                ->toArray();
                                                        @endphp
                                                        <div class="">{{ implode(', ', $selectedLabels) }}</div>
                                                    @else
                                                        <livewire:form-builder.fields.list-ref :field="$field" :value="isset($record) ? $field['value'] : ''" :form="false" :multiselect="true" />
                                                    @endif
                                                    @break
                                                @case('record')
                                                    @if($isClientView)
                                                        @php
                                                            $titleKey = $field['scriptid'] . '_title';
                                                            $preloadedTitle = $record->$titleKey ?? null;
                                                        @endphp
                                                        <div class="">{{ $preloadedTitle ?? (isset($field['value']) ? $field['value'] : '') }}</div>
                                                    @else
                                                        <livewire:form-builder.fields.record-ref
                                                            :field="$field"
                                                            :externalid="isset($record) && $record->external_id ? $record->external_id : ''"
                                                            :refid="isset($record) ? $record->refid : ''"
                                                            :form="false"
                                                            :pagetype="$recordtypestring"
                                                            key="{{ $field['scriptid'] }}-{{ now() }}" />
                                                    @endif
                                                    @break

                                                @case('check_box')
                                                    <div class="relative flex items-start">
                                                        <div class="flex h-6 items-center">
                                                            <input type="checkbox" class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600" disabled @if ($field['value']=='on' || $field['value']=='true' || $field['value']==true && $field['value'] !='false' ) checked @endif />
                                                        </div>
                                                    </div>
                                                    @break

                                                @case('tag')
                                                    <livewire:tags.filter :record="$record" :field="$field" key="{{ $field['scriptid'] }}-{{ now() }}" />
                                                    @break

                                                @case('document')
                                                    @if ($field['value'])
                                                        @if ($file = $record->files->firstWhere('id', $field['value']))
                                                            <div class="relative flex items-start">
                                                                <div class="flex h-6 items-center">
                                                                    <a href="{{ str_replace('/' . env('APP_URL') . '/', '/', $file->getFullUrl()) }}"
                                                                        download="{{ $file->file_name }}"
                                                                        class="font-medium text-blue-600 dark:text-blue-500 hover:underline">
                                                                        {{ $file->file_name }}
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endif
                                                    @break

                                                @case('timeduration')
                                                    @isset($field['value'])
                                                        <div class="">{{ convertDecimalToTime($field['value']) }}</div>
                                                    @endisset
                                                    @break

                                                @case('rich_text')
                                                    @isset($field['value'])
                                                        <div class="tiptap-wrapper ">{!! $field['value'] !!}</div>
                                                    @endisset
                                                @break

                                                @default
                                                {{ $field['contentType'] }}
                                            @endswitch
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>

            @if ($sublistView != '1')
                @php
                    $groupedSublists = [];
                    foreach ($formSublists as $sublist) {
                        $row = $sublist['row'];
                        if (!isset($groupedSublists[$row])) {
                            $groupedSublists[$row] = [];
                        }
                        $groupedSublists[$row][] = $sublist;
                    }
                @endphp
                <div class="sublist-wrapper space-y-4 md:space-y-6" wire:ignore.self>
                    @foreach ($groupedSublists as $row => $sublists)

                        <div class="row-{{ $row }} grid grid-cols-12 gap-4 md:gap-6">
                            @foreach ($sublists as $sublist)
                                @php
                                // Assuming width is given in number of columns
                                    $colSpan = $sublist['width'];
                                @endphp
                            {{-- /********************** UPDATE HERE *********************/ --}}
                                <div class="overflow-hidden bg-white shadow-sm ring-1 ring-gray-900/5 rounded-lg col-span-12 md:col-span-{{ $colSpan }}">
                                    <div class="p-4 sm:px-8  dark-bg flex justify-between items-center">
                                        <h2 class="text-base font-semibold leading-3 text-white ">{{ $sublist['label'] }}</h2>
                                        <button class="btn btn-outline whitespace-nowrap sm" @click="toggleSection('sublist_{{ $sublist['label'] }}')">
                                            <span x-text="sectionVisibility['sublist_{{ $sublist['label'] }}'] ? 'Hide Section' : 'Show Section'"></span>
                                        </button>
                                    </div>
                                    <div class="w-full" x-show="sectionVisibility['sublist_{{ $sublist['label'] }}']">

                                        @if($sublist['label'] != 'Documents' && $sublist['label'] != 'Gantt' && $sublist['label'] != 'Comments' && $sublist['label'] != 'Forms')
                                            @php
                                                $canViewTable = true;
                                                $tableExistsButRestricted = false;
                                                $useReactTable = false; // Flag to determine if we use React Table

                                                // Get the sublist record type
                                                $sublistRecordType = \Domain\RecordTypes\Models\RecordType::find($sublist['recordtype']);

                                                // Check if this should use React Table (e.g., for projecttask)
                                                if ($sublistRecordType && in_array($sublistRecordType->recordType, ['projecttask'])) {
                                                    $useReactTable = true;
                                                }
                                                
                                                if ($isClientView && !empty($sublist['table'])) {
                                                    $clientRole = auth()->user()->currentRole;
                                                    
                                                    // First check if table exists at all
                                                    $tableExists = \Domain\TableBuilders\Models\TableBuilder::where('id', $sublist['table'])->exists();
                                                    
                                                    if ($tableExists) {
                                                        // Table exists, check if user has access
                                                        $tableBuilder = \Domain\TableBuilders\Models\TableBuilder::where('id', $sublist['table'])
                                                            ->where(function($query) use ($clientRole) {
                                                                $query->whereDoesntHave('roles')
                                                                      ->orWhereHas('roles', function($roleQuery) use ($clientRole) {
                                                                          $roleQuery->where('role_id', $clientRole->id);
                                                                      });
                                                            })
                                                            ->first();
                                                        
                                                        if ($tableBuilder === null) {
                                                            // Table exists but user doesn't have access
                                                            $canViewTable = false;
                                                            $tableExistsButRestricted = true;
                                                        }
                                                    }
                                                    // If table doesn't exist, let it fall through - BuildTableData will use fallback
                                                }

                                                // Build table data for React Table if needed and accessible
                                                $sublistTableData = null;
                                                if ($useReactTable && ($canViewTable || !$tableExistsButRestricted)) {
                                                    $sublistTableData = \Domain\TableBuilders\Actions\BuildTableData::execute(
                                                        $sublistRecordType,
                                                        $sublist['table'] ?? null,
                                                        [],
                                                        false,
                                                        null,
                                                        $sublist['filters'] ?? null,
                                                        true,
                                                        null,
                                                        $isClientView
                                                    );

                                                    // Prepare data for JSON encoding
                                                    if ($sublistTableData && isset($sublistTableData['tableFields'])) {
                                                        $sublistTableData['tableFields'] = collect($sublistTableData['tableFields'])->map(function ($field) {
                                                            if (isset($field['listoptions']) && $field['listoptions'] instanceof \Illuminate\Support\Collection) {
                                                                $field['listoptions'] = $field['listoptions']->toArray();
                                                            }
                                                            return $field;
                                                        })->toArray();
                                                    }
                                                    if ($sublistTableData && isset($sublistTableData['lists'])) {
                                                        $sublistTableData['lists'] = collect($sublistTableData['lists'])->map(function ($list) {
                                                            if (is_string($list)) {
                                                                return json_decode($list, true);
                                                            }
                                                            return $list instanceof \Illuminate\Support\Collection ? $list->toArray() : $list;
                                                        })->toArray();
                                                    }
                                                    if ($sublistTableData && isset($sublistTableData['filterbuilder'])) {
                                                        $sublistTableData['filterbuilder'] = collect($sublistTableData['filterbuilder'])->map(function ($filter) {
                                                            if (isset($filter['options']) && $filter['options'] instanceof \Illuminate\Support\Collection) {
                                                                $filter['options'] = $filter['options']->toArray();
                                                            }
                                                            return $filter;
                                                        })->toArray();
                                                    }
                                                }
                                            @endphp
                                            
                                            @if($canViewTable || !$tableExistsButRestricted)
                                                @if($useReactTable && $sublistTableData)
                                                    {{-- Use React Table Component --}}
                                                    <div class="p-4 sm:p-6">
                                                        @php
                                                                // Determine feature flags for React table
                                                                $sublistModelClass = GetModel($sublistRecordType->model_name);
                                                                $sublistHasSubtasks = $sublistModelClass && method_exists($sublistModelClass, 'subtasks');
                                                                $sublistHasComments = $sublistModelClass && in_array(\AliBayat\LaravelCommentable\Commentable::class, class_uses($sublistModelClass));
                                                                $sublistHasTimeEntry = $sublistRecordType->recordType === 'projecttask' || $sublistRecordType->recordType === 'assignee';
                                                                $sublistHasAssignees = $sublistRecordType->recordType === 'projecttask' && in_array('assignee', activeRecordTypes());
                                                                $sublistHasMedia = $sublistModelClass && method_exists($sublistModelClass, 'media');

                                                                // Get related record types for route building
                                                                $sublistSubtaskRecordType = $sublistHasSubtasks ? GetRecordType('Subtask') : null;
                                                                $sublistTimeEntryRecordType = $sublistHasTimeEntry ? GetRecordType('TimeEntry') : null;
                                                                $sublistAssigneeRecordType = $sublistHasAssignees ? GetRecordType('Assignee') : null;
                                                        @endphp
                                                        <div
                                                            data-react-table
                                                            data-record-type="{{ $sublistRecordType->recordType }}"
                                                            data-record-type-id="{{ $sublistRecordType->id }}"
                                                            data-model-name="{{ $sublistRecordType->model_name }}"
                                                            data-title="{{ $sublist['label'] }}"
                                                            data-table-data="{{ json_encode($sublistTableData) }}"
                                                            data-table-builder-id="{{ $sublist['table'] ?? '' }}"
                                                            data-nestable="{{ $sublistRecordType->nestable ? 'true' : 'false' }}"
                                                            data-create-url="{{ !$isClientView ? route($sublistRecordType->recordType . '.create') : '#' }}"
                                                            data-show-route-base="{{ route($sublistRecordType->recordType . '.show', ['id' => '__ID__']) }}"
                                                            data-page-model="{{ $recordType->model_name }}"
                                                            data-page-record-refid="{{ $record->refid }}"
                                                            @if($sublistSubtaskRecordType)
                                                            data-subtask-show-route-base="{{ route($sublistSubtaskRecordType->recordType . '.show', ['id' => '__ID__']) }}"
                                                            @endif
                                                            @if($sublistTimeEntryRecordType)
                                                            data-timeentry-show-route-base="{{ route($sublistTimeEntryRecordType->recordType . '.show', ['id' => '__ID__']) }}"
                                                            @endif
                                                            data-is-sublist="true"
                                                            data-sublist-filters="{{ json_encode($sublist['filters'] ?? []) }}"
                                                            data-has-subtasks="{{ $sublistHasSubtasks ? 'true' : 'false' }}"
                                                            data-has-comments="{{ $sublistHasComments ? 'true' : 'false' }}"
                                                            data-has-time-entry="{{ $sublistHasTimeEntry ? 'true' : 'false' }}"
                                                            data-has-assignees="{{ $sublistHasAssignees ? 'true' : 'false' }}"
                                                            data-has-media="{{ $sublistHasMedia ? 'true' : 'false' }}"
                                                            @if($sublistAssigneeRecordType)
                                                            data-assignee-show-route-base="{{ route($sublistAssigneeRecordType->recordType . '.show', ['id' => '__ID__']) }}"
                                                            @endif
                                                        ></div>
                                                    </div>
                                                @else
                                                    {{-- Use Livewire Component --}}
                                                    <livewire:records.index
                                                        :key="'tableindex-{{$record->refid}}-{{ now() }}'"
                                                        wire:key="tableindex-{{ now() }}"
                                                        :recordTypeId="$sublist['recordtype']"
                                                        wire:ignore.self
                                                        :sublistfilters="$sublist['filters'] ?? null"
                                                        :count="5"
                                                        :tableBuilderId="$sublist['table']"
                                                        :sublist="true"
                                                        :sublistRecord="$record"
                                                        :pagetypemodel="$recordType->model_name"
                                                        :pagetype="$recordtypestring"
                                                        :pagetypeid="$record->id"
                                                        :pagetyperefid="$record->refid"
                                                        :pagetypexternalid="$record->refid"
                                                        :activeRecordTypes="$activeRecordTypes"
                                                        :isClientView="$isClientView" />
                                                @endif
                                            @else
                                                <div class="p-6 text-center text-gray-500">
                                                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                                                    </svg>
                                                    <p class="mt-2 text-sm font-medium">This table is not available for client view</p>
                                                </div>
                                            @endif
                                        @endif
                                        @if($sublist['label'] == 'Comments')
                                            <div class="p-4 sm:p-6">
                                                <livewire:comments.comment-list
                                                    :record="$record"
                                                    :model="get_class($record)"
                                                    :key="'comments-tab-' . $record->id . '-' . now()"
                                                    wire:key="comments-tab-{{ $record->id }}-{{ now() }}" />
                                            </div>
                                        @endif
                                        @if($sublist['label'] == 'Forms')
                                            <div class="p-4 sm:p-6 sublist-wrapper">
                                                <livewire:linked-forms-table
                                                    :recordId="$record->id"
                                                    :recordType="$recordtypestring"
                                                    :key="'forms-tab-' . $recordtypestring . '-' . $record->id"
                                                    wire:key="forms-tab-{{ $recordtypestring }}-{{ $record->id }}" />
                                            </div>
                                        @endif
                                        @if($sublist['label'] == 'Documents')
                                            @php
                                                $hasDocs = HasMethod($record, 'documents');
                                            @endphp
                                            <livewire:documents.table :record="$record" :hasdocuments="$hasDocs" :recordType="$recordType" />
                                        @endif
                                        @if($sublist['label'] == 'Gantt')

<!-- Add this to your Blade template where the Gantt chart is displayed -->
<div x-data="ganttComponent()" x-init="init()" class="gantt-container">
    <!-- Control Bar -->
    <div class="gantt-controls mb-4 flex items-center justify-between bg-gray-100 p-4 rounded">
        <!-- Zoom Controls -->
        <div class="zoom-controls flex items-center space-x-2">
            <button @click="zoomGantt('in')" class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">
                Zoom In
            </button>
            <button @click="zoomGantt('out')" class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">
                Zoom Out
            </button>
            <button @click="toFit()" class="zoom_toggle px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">
                Zoom to Fit
            </button>
        </div>

        <!-- Save Controls (hidden for clients) -->
        <div x-show="!isClientView" class="save-controls flex items-center space-x-2">
            <!-- Unsaved changes indicator -->
            <div x-show="hasUnsavedChanges" class="flex items-center text-orange-600">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                </svg>
                <span x-text="`${pendingChanges.size} unsaved changes`" class="text-sm"></span>
            </div>

            <!-- Save Button -->
            <button
                @click="saveAllChanges()"
                :disabled="!hasUnsavedChanges || isSaving"
                class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center">

                <!-- Loading spinner -->
                <svg x-show="isSaving" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>

                <span x-text="isSaving ? 'Saving...' : 'Save Changes'"></span>
            </button>

            <!-- Discard Button -->
            <button
                @click="discardChanges()"
                :disabled="!hasUnsavedChanges || isSaving"
                class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 disabled:bg-gray-400 disabled:cursor-not-allowed">
                Discard Changes
            </button>
        </div>
    </div>

    <!-- Gantt Chart Container -->
    <div id="gantt_here" class="gantt-body" style="height: 700px; width: 100%; min-height: 600px;"></div>

    <!-- Toast Notification Container -->
    <div id="toast-container" style="position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column;"></div>
</div>

                                       {{--      <div x-data="ganttComponent()" class="gantt-container">
                                                <div class="gantt-main-container col-12">
                                                    <div class="header gantt-header">
                                                        <button class='zoom_toggle btn btn-dark btn-sm mr-1' @click.prevent="toFit()">Zoom to Fit</button>
                                                        <button class="btn btn-dark btn-sm mr-1" type="button" @click.prevent="zoomGantt('in')">Zoom In</button>
                                                        <button class="btn btn-dark btn-sm mr-1" type="button" @click.prevent="zoomGantt('out')">Zoom Out</button>
                                                    </div>
                                                </div>
                                                <div id="gantt_here" class="gantt-body"></div>
                                            </div> --}}
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endforeach

                </div>
            @else
                @if ($formSublists || $recordType == '-1')
                    @if($recordType == '-1' && !$formview)
                        <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
                            @if($formSublists)
                                @foreach ($formSublists as $index => $sublist)
                                    <div class="col-span-2">
                                        <div class="flow-root overflow-x-auto">
                                            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 rounded-lg md:col-span-2 ">
                                                <div class="px-4 pt-4 sm:px-8 sm:pt-6">
                                                    {{ $sublist['label'] }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    @else
                    <div class="submenu-wrap rounded-lg" wire:ignore x-data="{
                                        subMenu: 'sublist_0',
                                        setSubMenu(menu) {
                                        this.subMenu = menu;
                                        },
                                        subTabs: [],
                                        }">
                        <nav class=" border-b border-gray-200 dark-bg">
                            <div class="">
                                <div class="flex items-center">
                                    <ul class="flex items-center text-sm text-gray-900 font-medium items-stretch">
                                        @if ($formSublists)
                                            @foreach ($formSublists as $index => $sublist)
                                                @if($sublist['label'] != 'Documents' && $sublist['label'] != 'Gantt' && $sublist['label'] != 'Comments' && $sublist['label'] != 'Roles' && $sublist['label'] != 'Forms')
                                                    @if (auth()->user()->hasPermissionForRecordType('can_read', $sublist['recordtypestring']))
                                                        <li class="block flex relative">
                                                            <button @click.prevent="setSubMenu('sublist_{{ $index }}')"
                                                                :class="{ 'bg-gray-600': subMenu === 'sublist_{{ $index }}' }"
                                                                class="subnav-dd p-2">{{ $sublist['label'] }}</button>
                                                        </li>
                                                    @endif
                                                @elseif($sublist['label'] == 'Forms')
                                                    <li class="block flex relative">
                                                        <button @click.prevent="setSubMenu('sublist_{{ $index }}')"
                                                            :class="{ 'bg-gray-600': subMenu === 'sublist_{{ $index }}' }"
                                                            class="subnav-dd p-2">{{ $sublist['label'] }}</button>
                                                    </li>
                                                @elseif($sublist['label'] == 'Gantt' )
                                                    <li class="block flex relative">
                                                        <button @click.prevent="setSubMenu('sublist_{{ $index }}')"
                                                            :class="{ 'bg-gray-600': subMenu === 'sublist_{{ $index }}' }"
                                                            class="subnav-dd p-2">{{ $sublist['label'] }}</button>
                                                    </li>
                                                @elseif($sublist['label'] == 'Kanban' )
                                                    <li class="block flex relative">
                                                        <button @click.prevent="setSubMenu('sublist_{{ $index }}')"
                                                            :class="{ 'bg-gray-600': subMenu === 'sublist_{{ $index }}' }"
                                                            class="subnav-dd p-2">{{ $sublist['label'] }}</button>
                                                    </li>
                                                @elseif($sublist['label'] == 'Documents' && $role->can_manage_documents )
                                                    <li class="block flex relative">
                                                        <button @click.prevent="setSubMenu('sublist_{{ $index }}')"
                                                            :class="{ 'bg-gray-600': subMenu === 'sublist_{{ $index }}' }"
                                                            class="subnav-dd p-2">{{ $sublist['label'] }}</button>
                                                    </li>
                                                @elseif($sublist['label'] == 'Roles' && $role->can_manage_roles )
                                                    <li class="block flex relative">
                                                        <button @click.prevent="setSubMenu('sublist_{{ $index }}')"
                                                            :class="{ 'bg-gray-600': subMenu === 'sublist_{{ $index }}' }"
                                                            class="subnav-dd p-2">{{ $sublist['label'] }}</button>
                                                    </li>
                                                @elseif($sublist['label'] == 'Comments')
                                                    <li class="block flex relative">
                                                        <button @click.prevent="setSubMenu('sublist_{{ $index }}')"
                                                            :class="{ 'bg-gray-600': subMenu === 'sublist_{{ $index }}' }"
                                                            class="subnav-dd p-2">{{ $sublist['label'] }}</button>
                                                    </li>
                                                @endif
                                            @endforeach
                                        @endif
                                    </ul>
                                </div>
                            </div>
                        </nav>

                        @if($formSublists)
                            @foreach ($formSublists as $index => $sublist)
                                <div class="flow-root overflow-x-auto"
                                    x-show="subMenu === 'sublist_{{ $index }}'">
                                    @if($sublist['label'] != 'Documents' && $sublist['label'] != 'Gantt' && $sublist['label'] != 'Comments' && $sublist['label'] != 'Roles' && $sublist['label'] != 'Forms' && $sublist['label'] != 'Kanban')
                                        @if( $sublist['label'] != 'Assignee' || $sublist['label'] == 'Assignee' && !$record->isparent)
                                            @if (auth()->user()->hasPermissionForRecordType('can_read', $sublist['recordtypestring']))
                                                @php
                                                    $canViewTable = true;
                                                    $tableExistsButRestricted = false;
                                                    $useReactTable = true;

                                                    // Get the sublist record type
                                                    $sublistRecordType = \Domain\RecordTypes\Models\RecordType::find($sublist['recordtype']);

                                                    // Check if this should use React Table
                                                    // React Table is disabled by default - enable only for specific record types as needed
                                                    // if ($sublistRecordType && in_array($sublistRecordType->recordType, ['projecttask'])) {
                                                    //     $useReactTable = true;
                                                    // }
                                                    
                                                    if ($isClientView && !empty($sublist['table'])) {
                                                        $clientRole = auth()->user()->currentRole;
                                                        
                                                        // First check if table exists at all
                                                        $tableExists = \Domain\TableBuilders\Models\TableBuilder::where('id', $sublist['table'])->exists();
                                                        
                                                        if ($tableExists) {
                                                            // Table exists, check if user has access
                                                            $tableBuilder = \Domain\TableBuilders\Models\TableBuilder::where('id', $sublist['table'])
                                                                ->where(function($query) use ($clientRole) {
                                                                    $query->whereDoesntHave('roles')
                                                                          ->orWhereHas('roles', function($roleQuery) use ($clientRole) {
                                                                              $roleQuery->where('role_id', $clientRole->id);
                                                                          });
                                                                })
                                                                ->first();
                                                            
                                                            if ($tableBuilder === null) {
                                                                // Table exists but user doesn't have access
                                                                $canViewTable = false;
                                                                $tableExistsButRestricted = true;
                                                            }
                                                        }
                                                        // If table doesn't exist, let it fall through - BuildTableData will use fallback
                                                    }

                                                    // Build table data for React Table if needed and accessible
                                                    $sublistTableData = null;
                                                    if ($useReactTable && ($canViewTable || !$tableExistsButRestricted)) {
                                                        $sublistTableData = \Domain\TableBuilders\Actions\BuildTableData::execute(
                                                            $sublistRecordType,
                                                            $sublist['table'] ?? null,
                                                            [],
                                                            false,
                                                            null,
                                                            $sublist['filters'] ?? null,
                                                            true,
                                                            null,
                                                            $isClientView
                                                        );

                                                        // Prepare data for JSON encoding
                                                        if ($sublistTableData && isset($sublistTableData['tableFields'])) {
                                                            $sublistTableData['tableFields'] = collect($sublistTableData['tableFields'])->map(function ($field) {
                                                                if (isset($field['listoptions']) && $field['listoptions'] instanceof \Illuminate\Support\Collection) {
                                                                    $field['listoptions'] = $field['listoptions']->toArray();
                                                                }
                                                                return $field;
                                                            })->toArray();
                                                        }
                                                        if ($sublistTableData && isset($sublistTableData['lists'])) {
                                                            $sublistTableData['lists'] = collect($sublistTableData['lists'])->map(function ($list) {
                                                                if (is_string($list)) {
                                                                    return json_decode($list, true);
                                                                }
                                                                return $list instanceof \Illuminate\Support\Collection ? $list->toArray() : $list;
                                                            })->toArray();
                                                        }
                                                        if ($sublistTableData && isset($sublistTableData['filterbuilder'])) {
                                                            $sublistTableData['filterbuilder'] = collect($sublistTableData['filterbuilder'])->map(function ($filter) {
                                                                if (isset($filter['options']) && $filter['options'] instanceof \Illuminate\Support\Collection) {
                                                                    $filter['options'] = $filter['options']->toArray();
                                                                }
                                                                return $filter;
                                                            })->toArray();
                                                        }
                                                    }
                                                @endphp
                                                
                                                @if($canViewTable || !$tableExistsButRestricted)
                                                    @if($useReactTable && $sublistTableData)
                                                        {{-- Use React Table Component --}}
                                                        <div class="py-4 sm:py-6">
                                                            @php
                                                                // Determine feature flags for React table
                                                                $sublistModelClass = GetModel($sublistRecordType->model_name);
                                                                $sublistHasSubtasks = $sublistModelClass && method_exists($sublistModelClass, 'subtasks');
                                                                $sublistHasComments = $sublistModelClass && in_array(\AliBayat\LaravelCommentable\Commentable::class, class_uses($sublistModelClass));
                                                                $sublistHasTimeEntry = $sublistRecordType->recordType === 'projecttask' || $sublistRecordType->recordType === 'assignee';
                                                                $sublistHasAssignees = $sublistRecordType->recordType === 'projecttask' && in_array('assignee', activeRecordTypes());
                                                                $sublistHasMedia = $sublistModelClass && method_exists($sublistModelClass, 'media');

                                                                // Get related record types for route building
                                                                $sublistSubtaskRecordType = $sublistHasSubtasks ? GetRecordType('Subtask') : null;
                                                                $sublistTimeEntryRecordType = $sublistHasTimeEntry ? GetRecordType('TimeEntry') : null;
                                                                $sublistAssigneeRecordType = $sublistHasAssignees ? GetRecordType('Assignee') : null;
                                                            @endphp
                                                            <div
                                                                data-react-table
                                                                data-record-type="{{ $sublistRecordType->recordType }}"
                                                                data-record-type-id="{{ $sublistRecordType->id }}"
                                                                data-model-name="{{ $sublistRecordType->model_name }}"
                                                                data-title="{{ $sublist['label'] }}"
                                                                data-table-data="{{ json_encode($sublistTableData) }}"
                                                                data-table-builder-id="{{ $sublist['table'] ?? '' }}"
                                                                data-nestable="{{ $sublistRecordType->nestable ? 'true' : 'false' }}"
                                                                data-create-url="{{ !$isClientView ? route($sublistRecordType->recordType . '.create') : '#' }}"
                                                                data-show-route-base="{{ route($sublistRecordType->recordType . '.show', ['id' => '__ID__']) }}"
                                                                data-page-model="{{ $recordType->model_name }}"
                                                                data-page-record-refid="{{ $record->refid }}"
                                                                @if($sublistSubtaskRecordType)
                                                                data-subtask-show-route-base="{{ route($sublistSubtaskRecordType->recordType . '.show', ['id' => '__ID__']) }}"
                                                                @endif
                                                                @if($sublistTimeEntryRecordType)
                                                                data-timeentry-show-route-base="{{ route($sublistTimeEntryRecordType->recordType . '.show', ['id' => '__ID__']) }}"
                                                                @endif
                                                                data-is-sublist="true"
                                                                data-sublist-filters="{{ json_encode($sublist['filters'] ?? []) }}"
                                                                data-has-subtasks="{{ $sublistHasSubtasks ? 'true' : 'false' }}"
                                                                data-has-comments="{{ $sublistHasComments ? 'true' : 'false' }}"
                                                                data-has-time-entry="{{ $sublistHasTimeEntry ? 'true' : 'false' }}"
                                                                data-has-assignees="{{ $sublistHasAssignees ? 'true' : 'false' }}"
                                                                data-has-media="{{ $sublistHasMedia ? 'true' : 'false' }}"
                                                                @if($sublistAssigneeRecordType)
                                                                data-assignee-show-route-base="{{ route($sublistAssigneeRecordType->recordType . '.show', ['id' => '__ID__']) }}"
                                                                @endif
                                                            ></div>
                                                        </div>
                                                    @else
                                                        {{-- Use Livewire Component --}}
                                                        <livewire:records.index
                                                            :recordTypeId="$sublist['recordtype']"
                                                            :sublistfilters="$sublist['filters'] ?? null"
                                                            :tableBuilderId="$sublist['table']"
                                                            :sublist="true"
                                                            :sublistRecord="$record"
                                                            :pagetype="$recordtypestring"
                                                            :pagetypemodel="$recordType->model_name"
                                                            :sublistRecord="$record"
                                                            :pagetypeid="$record->id"
                                                            :pagetypexternalid="$record->refid"
                                                            :pagetyperefid="$record->refid"
                                                            :activeRecordTypes="$activeRecordTypes"
                                                            :isClientView="$isClientView" />
                                                    @endif
                                                @else
                                                    <div class="p-6 text-center text-gray-500">
                                                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                                                        </svg>
                                                        <p class="mt-2 text-sm font-medium">This table is not available for client view</p>
                                                    </div>
                                                @endif
                                            @endif
                                        @else
                                        <div class="my-6">
                                            Cannot add assignees to parent records.
                                        </div>
                                        @endif
                                    @endif
                                    @if($sublist['label'] == 'Documents')
                                        @php
                                            $hasDocs = HasMethod($record, 'documents');
                                        @endphp
                                        <livewire:documents.table :record="$record" :hasdocuments="$hasDocs" :recordType="$recordType" />
                                    @endif
                                    @if($sublist['label'] == 'Forms')
                                        <div class="p-4 sublist-wrapper">
                                            <livewire:linked-forms-table
                                                :recordId="$record->id"
                                                :recordType="$recordtypestring"
                                                :key="'forms-tab-' . $recordtypestring . '-' . $record->id"
                                                wire:key="forms-tab-{{ $recordtypestring }}-{{ $record->id }}" />
                                        </div>
                                    @endif
                                    @if($sublist['label'] == 'Roles')
                                        <livewire:roles.table :record="$record" />
                                    @endif
                                    @if($sublist['label'] == 'Gantt')
                                    <div x-data="ganttComponent()" x-init="init()" class="gantt-container">
                                        <div class="gantt-controls mb-4 flex items-center justify-between bg-gray-100 p-4 rounded">
                                            <div class="flex items-center space-x-2">
                                            <div class="zoom-controls flex items-center space-x-2">
                                                <button @click="zoomGantt('in')" class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">
                                                    Zoom In
                                                </button>
                                                <button @click="zoomGantt('out')" class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">
                                                    Zoom Out
                                                </button>
                                                <button @click="toFit()" class="zoom_toggle px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">
                                                    Zoom to Fit
                                                </button>
                                                </div>

                                                <!-- Column Settings -->
                                                <div class="relative ml-2">
                                                    <button
                                                        @click="showColumnSettings = !showColumnSettings"
                                                        class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded text-sm font-medium flex items-center border border-gray-300"
                                                        title="Column Settings">
                                                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4" />
                                                        </svg>
                                                        Columns
                                                    </button>

                                                    <template x-if="showColumnSettings">
                                                        <div>
                                                            <!-- Click outside overlay -->
                                                            <div
                                                                class="fixed inset-0 z-5"
                                                                @click="showColumnSettings = false">
                                                            </div>
                                                            <!-- Dropdown Menu -->
                                                            <div class="absolute left-0 mt-2 w-56 bg-white rounded-md shadow-lg z-10 border border-gray-200">
                                                                <div class="p-3">
                                                                    <h3 class="text-sm font-medium text-gray-900 mb-3">Visible Columns</h3>
                                                                    <div class="space-y-2">
                                                                        <template x-for="column in availableColumns" :key="column.id">
                                                                            <label class="flex items-center cursor-pointer">
                                                                                <input
                                                                                    type="checkbox"
                                                                                    :checked="visibleColumns[column.id]"
                                                                                    @change="toggleColumnVisibility(column.id)"
                                                                                    class="mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded cursor-pointer">
                                                                                <span class="text-sm text-gray-700" x-text="column.label"></span>
                                                                            </label>
                                                                        </template>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </template>
                                                </div>
                                            </div>

                                            <!-- Save Controls (hidden for clients) -->
                                            <div  class="save-controls flex items-center space-x-4">
                                                <!-- Date Field Toggle Buttons -->
                                                <div class="flex items-center space-x-2">
                                                    <span class="text-sm font-medium text-gray-700">Date Field:</span>
                                                    <div class="flex rounded-md shadow-sm">
                                                    <button
                                                        type="button"
                                                            @click="setDateField(true)"
                                                            :class="useFinishByDate ? 'bg-indigo-600 text-white' : 'bg-white text-gray-700'"
                                                            class="px-3 py-1 text-sm font-medium border border-gray-300 rounded-l-md hover:bg-gray-200 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                                            End No Later Than
                                                        </button>
                                                        <button
                                                            type="button"
                                                            @click="setDateField(false)"
                                                            :class="!useFinishByDate ? 'bg-indigo-600 text-white' : 'bg-white text-gray-700'"
                                                            class="px-3 py-1 text-sm font-medium border-t border-b border-r border-gray-300 rounded-r-md hover:bg-gray-200 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                                            End Date
                                                    </button>
                                                    </div>
                                                </div>

                                                <div x-show="hasUnsavedChanges" class="flex items-center text-orange-600">
                                                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                                                    </svg>
                                                    <span x-text="`${pendingChanges.size} unsaved changes`" class="text-sm"></span>
                                                </div>
                                                <button
                                                    @click="saveAllChanges()"
                                                    :disabled="!hasUnsavedChanges || isSaving"
                                                    class="btn btn-primary sm disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center">
                                                    <svg x-show="isSaving" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                                    </svg>
                                                    <span x-text="isSaving ? 'Saving...' : 'Save Changes'"></span>
                                                </button>
                                                <button
                                                    @click="discardChanges()"
                                                    :disabled="!hasUnsavedChanges || isSaving"
                                                    class="btn btn-danger sm disabled:bg-gray-400 disabled:cursor-not-allowed">
                                                    Discard Changes
                                                </button>
                                            </div>
                                        </div>

                                        <div id="gantt_here" class="gantt-body" style="height: 700px; width: 100%; min-height: 600px;"></div>

                                        <!-- Toast Notification Container -->
                                        <div id="toast-container" style="position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column;"></div>

                                        <!-- 📡 External Changes Overlay -->
                                        <div x-show="hasExternalChanges"
                                             x-transition:enter="transition ease-out duration-300"
                                             x-transition:enter-start="opacity-0 translate-y-4"
                                             x-transition:enter-end="opacity-100 translate-y-0"
                                             x-transition:leave="transition ease-in duration-200"
                                             x-transition:leave-start="opacity-100 translate-y-0"
                                             x-transition:leave-end="opacity-0 translate-y-4"
                                             style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10000; width: 90%; max-width: 500px;">

                                            <!-- Backdrop -->
                                            <div style="position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 9999;" @click="dismissExternalChanges()"></div>

                                            <!-- Modal Content -->
                                            <div style="position: relative; z-index: 10000; background: white; border-radius: 12px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); padding: 24px;">
                                                <!-- Icon & Title -->
                                                <div style="display: flex; align-items: start; gap: 16px; margin-bottom: 16px;">
                                                    <div style="flex-shrink: 0; width: 48px; height: 48px; background: #3b82f6; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                                        <svg style="width: 24px; height: 24px; color: white;" fill="currentColor" viewBox="0 0 20 20">
                                                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                                                        </svg>
                                                    </div>
                                                    <div style="flex: 1;">
                                                        <h3 style="font-size: 18px; font-weight: 600; color: #111827; margin: 0;">
                                                            Gantt Data Updated
                                                        </h3>
                                                        <p style="margin-top: 8px; font-size: 14px; color: #6b7280; line-height: 1.5;">
                                                            <span x-text="externalChangesCount"></span> change<span x-show="externalChangesCount > 1">s</span> detected from other users.
                                                            <br><strong>Click "Load Changes" to update your view</strong> or continue working and load them later.
                                                        </p>
                                                    </div>
                                                </div>

                                                <!-- Warning if user has unsaved changes -->
                                                <div x-show="hasUnsavedChanges" style="margin-bottom: 16px; padding: 12px; background: #fef3c7; border-left: 4px solid #f59e0b; border-radius: 4px;">
                                                    <div style="display: flex; align-items: start; gap: 8px;">
                                                        <svg style="width: 20px; height: 20px; color: #f59e0b; flex-shrink: 0;" fill="currentColor" viewBox="0 0 20 20">
                                                            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                                                        </svg>
                                                        <p style="margin: 0; font-size: 13px; color: #92400e; line-height: 1.4;">
                                                            <strong>You have unsaved changes.</strong> Save or discard them before loading external changes to avoid conflicts.
                                                        </p>
                                                    </div>
                                                </div>

                                                <!-- Action Buttons -->
                                                <div style="display: flex; gap: 12px; justify-content: flex-end;">
                                                    <button @click="dismissExternalChanges()"
                                                            style="padding: 8px 16px; font-size: 14px; font-weight: 500; color: #6b7280; background: white; border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer; transition: all 0.2s;">
                                                        Later
                                                    </button>
                                                    <button @click="loadExternalChanges()"
                                                            :disabled="hasUnsavedChanges"
                                                            :style="hasUnsavedChanges ? 'opacity: 0.5; cursor: not-allowed;' : ''"
                                                            style="padding: 8px 20px; font-size: 14px; font-weight: 600; color: white; background: #3b82f6; border: none; border-radius: 6px; cursor: pointer; transition: all 0.2s;">
                                                        Load Changes
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                    @if($sublist['label'] == 'Kanban')
                                        <div class="p-4">
                                            <div id="kanban-board-root" data-project-id="{{ $record->id }}"></div>
                                        </div>
                                    @endif
                                    @if($sublist['label'] == 'Comments')
                                        <div class="p-4 sm:p-6">
                                            <livewire:comments.comment-list
                                                :record="$record"
                                                :model="get_class($record)"
                                                :key="'comments-tab-' . $record->id . '-' . now()"
                                                wire:key="comments-tab-{{ $record->id }}-{{ now() }}" />
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        @endif
                    </div>
                    @endif
                @endif
            @endif
        </div>

    </div>

    <div class="col-span-9 col-span-6 col-span-3 col-span-8 col-span-4 col-span-12 md:col-span-9 md:col-span-6 md:col-span-3 md:col-span-8 md:col-span-4 md:col-span-12  hidden"></div>
</div>

@prepend('dhtmlxgantt')
    {{-- ✅ VERSIÓN PRO: Archivos locales de DHTMLX Gantt PRO --}}
    <style>
        /* 🔥 CRITICAL PATH: Estilos para tareas críticas */
        .gantt_critical_task {
            background-color: #ff4444 !important;
            border: 2px solid #cc0000 !important;
        }

        .gantt_critical_task .gantt_task_content {
            background-color: #ff4444 !important;
            color: white !important;
            font-weight: bold !important;
        }

        /* 📊 STATUS DROPDOWN: Estilos para dropdown personalizado */
        .gantt-status-custom-dropdown:hover > div {
            border-color: #3b82f6 !important;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .gantt-status-dropdown-menu {
            animation: fadeIn 0.15s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-5px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

                    /* Estilo para las líneas de conexión críticas */
            .gantt_critical_link {
                stroke: #ff4444 !important;
                stroke-width: 3px !important;
            }

            /* Mejorar visibilidad de las líneas de dependencia */
            .gantt_link_line {
                stroke-width: 2px !important;
            }

            /* Líneas de dependencia Finish-to-Start (tipo 0) */
            .gantt_link_line[data-link-type="0"] {
                stroke: #2196F3 !important;
                stroke-width: 2px !important;
            }

            /* Líneas de dependencia Start-to-Start (tipo 1) */
            .gantt_link_line[data-link-type="1"] {
                stroke: #4CAF50 !important;
                stroke-width: 2px !important;
            }

            /* Flechas de las dependencias más visibles */
            .gantt_link_arrow {
                fill: #333 !important;
                stroke: #333 !important;
            }

            /* Estilos específicos por tipo de dependencia */
            .gantt_fs_link .gantt_link_line {
                stroke: #2196F3 !important; /* Azul para Finish-to-Start */
                stroke-width: 2px !important;
            }

            /* 🔒 CONSTRAINT TYPES: Estilos para diferenciar tareas por tipo de restricción (INVERTIDO) */
            /* ASAP: Tareas bloqueadas que NO se pueden mover - Totalmente opaco (100%) */
            .asap-task .gantt_task_content {
                opacity: 1 !important;
                border: 2px solid #444 !important;
                border-radius: 6px !important;
                cursor: not-allowed !important;
                /* Mantener color de texto por defecto del tema */
            }

            /* FIXEDSTART: Tareas movibles - Azul más claro con texto oscuro para accesibilidad */
            .fixed-task .gantt_task_content {
                opacity: 0.85 !important;
                background-color: #90CAF9 !important; /* Azul 20% más claro */
                border: 2px dashed #1976D2 !important; /* Borde más grueso y azul oscuro */
                border-radius: 6px !important;
                color: #111 !important; /* Texto oscuro SOLO para fondo azul claro - Cumple WCAG AA */
                cursor: grab !important;
            }

            /* FIXEDSTART: Cuando se está arrastrando, cambiar a cursor "grabbing" */
            .fixed-task .gantt_task_content:active {
                cursor: grabbing !important;
            }

            /* Bordes redondeados para TODAS las tareas del Gantt (aplicación global) */
            .gantt_task_content {
                border-radius: 6px !important;
            }

            .gantt_ss_link .gantt_link_line {
                stroke: #4CAF50 !important; /* Verde para Start-to-Start */
                stroke-width: 2px !important;
            }

            .gantt_ff_link .gantt_link_line {
                stroke: #FF9800 !important; /* Naranja para Finish-to-Finish */
                stroke-width: 2px !important;
            }

            .gantt_sf_link .gantt_link_line {
                stroke: #9C27B0 !important; /* Morado para Start-to-Finish */
                stroke-width: 2px !important;
            }

            /* Links críticos siempre en rojo */
            .gantt_critical_link .gantt_link_line {
                stroke: #ff4444 !important;
                stroke-width: 3px !important;
            }

        /* Resaltar tareas críticas en el grid también */
        .gantt_critical_task .gantt_cell {
            background-color: #ffe6e6 !important;
            font-weight: bold !important;
        }

        /* 📅 WEEKENDS: Sombrear fines de semana para mejor visualización */
        .weekend {
            background-color: #f5f5f5 !important;
        }

        /* Aplicar el gris más oscuro en modo hover para mantener visibilidad */
        .weekend:hover {
            background-color: #eeeeee !important;
        }
    </style>
    <link href="{{ secure_asset('assets/css/dhtmlxgantt.css') }}" rel="stylesheet">
@endprepend
<script src="{{ secure_asset('assets/js/dhtmlxgantt.js') }}"></script>
<script>
    function ganttComponent() {
        return {
            ganttData: [],
            apiUrl: "/api",
            updateUrl: "{{ route('ganttUpdate') }}",
            projectId: {{ $record->id }},
            pendingChanges: new Map(), // Store pending changes by task id (incluye tasks Y links)
            hasUnsavedChanges: false,
            isSaving: false,
            isInitialLoad: true, // 🚩 Flag to ignore changes during initial load
            useFinishByDate: true, // Toggle between 'enddate' and 'finishbydate' (true = finishbydate, false = enddate)
            isClientView: {{ $isClientView ? 'true' : 'false' }}, // 🔒 Read-only mode for clients

            // Cookie helper methods
            setCookie(name, value, days = 30) {
                const expires = new Date();
                expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
                document.cookie = name + '=' + JSON.stringify(value) + ';expires=' + expires.toUTCString() + ';path=/';
            },

            getCookie(name) {
                const nameEQ = name + '=';
                const ca = document.cookie.split(';');
                for (let i = 0; i < ca.length; i++) {
                    let c = ca[i];
                    while (c.charAt(0) === ' ') c = c.substring(1, c.length);
                    if (c.indexOf(nameEQ) === 0) {
                        try {
                            return JSON.parse(c.substring(nameEQ.length, c.length));
                        } catch (e) {
                            return null;
                        }
                    }
                }
                return null;
            },

            // 📡 Real-time synchronization
            tabId: null, // Unique identifier for this specific tab
            hasExternalChanges: false,
            externalChangesCount: 0,
            externalChangesThrottle: null,
            echoChannel: null,
            _processedEvents: new Set(), // Track processed events to prevent duplicates
            zoomConfig: {
                levels: [{
                        name: "day",
                        scale_height: 60,
                        min_column_width: 60,
                        scales: [{
                                unit: "month",
                                step: 1,
                                format: "%M %Y"
                            },
                            {
                                unit: "day",
                                step: 1,
                                format: function(date) {
                                    const month = date.getMonth() + 1;
                                    const day = date.getDate();
                                    const year = date.getFullYear().toString().slice(-2);
                                    return month + "/" + day + "/" + year;
                                }
                            }
                        ]
                    },
                    {
                        name: "week",
                        scale_height: 60,
                        min_column_width: 90,
                        scales: [{
                                unit: "year",
                                step: 1,
                                format: "%Y"
                            },
                            {
                                unit: "week",
                                step: 1,
                                format: function(date) {
                                    var dateToStr = gantt.date.date_to_str("%M %d");
                                    var endDate = gantt.date.add(date, 6, "day");
                                    return dateToStr(date) + " - " + dateToStr(endDate);
                                }
                            },
                        ]
                    },
                    {
                        name: "month",
                        scale_height: 60,
                        min_column_width: 50,
                        scales: [{
                                unit: "year",
                                step: 1,
                                format: "%Y"
                            },
                            {
                                unit: "month",
                                step: 1,
                                format: "%M"
                            }
                        ]
                    },
                    {
                        name: "quarter",
                        scale_height: 60,
                        min_column_width: 100,
                        scales: [{
                                unit: "year",
                                step: 1,
                                format: "%Y"
                            },
                            {
                                unit: "quarter",
                                step: 1,
                                format: function(date) {
                                    var dateToStr = gantt.date.date_to_str("%M");
                                    var endDate = gantt.date.add(gantt.date.add(date, 3, "month"), -1, "day");
                                    return dateToStr(date) + " - " + dateToStr(endDate);
                                }
                            }
                        ]
                    },
                    {
                        name: "year",
                        scale_height: 60,
                        min_column_width: 120,
                        scales: [{
                                unit: "year",
                                step: 1,
                                format: "%Y"
                            },
                            {
                                unit: "quarter",
                                step: 1,
                                format: function(date) {
                                    var quarter = Math.floor(date.getMonth() / 3) + 1;
                                    return "Q" + quarter;
                                }
                            }
                        ]
                    }
                ],
                useKey: "ctrlKey",
                trigger: "wheel",
                element: function() {
                    return gantt.$root.querySelector(".gantt_task");
                }
            },

            // Column visibility state
            showColumnSettings: false,
            visibleColumns: {
                status: true,        // Previously visible
                constrainttype: true, // Previously visible
                start_date: true,    // Previously visible
                finishbydate: false, // Hidden by default
                enddate: false,      // Hidden by default
                duration: true,      // Previously visible
                progress: false,     // Hidden by default
                plannedwork: false,
                actualwork: false,
                remainingwork: false
            },

            // Load user preferences from cookies
            loadUserPreferences() {
                // Load date field preference
                const savedDateField = this.getCookie('gantt_date_field_preference');
                if (savedDateField !== null) {
                    this.useFinishByDate = savedDateField;
                }

                // Load column visibility preferences
                const savedColumns = this.getCookie('gantt_column_visibility');
                if (savedColumns && typeof savedColumns === 'object') {
                    this.visibleColumns = { ...this.visibleColumns, ...savedColumns };
                }
            },

            // Save user preferences to cookies
            saveUserPreferences() {
                this.setCookie('gantt_date_field_preference', this.useFinishByDate);
                this.setCookie('gantt_column_visibility', this.visibleColumns);
            },
            availableColumns: [
                { id: 'status', label: 'Status' },
                { id: 'constrainttype', label: 'Constraint' },
                { id: 'start_date', label: 'Start Time' },
                { id: 'finishbydate', label: 'End No Later Than' },
                { id: 'enddate', label: 'End Date' },
                { id: 'duration', label: 'Duration' },
                { id: 'progress', label: 'Progress' },
                { id: 'plannedwork', label: 'Planned Work' },
                { id: 'actualwork', label: 'Actual Work' },
                { id: 'remainingwork', label: 'Remaining Work' }
            ],

            toggleColumnVisibility(columnId) {
                this.visibleColumns[columnId] = !this.visibleColumns[columnId];
                this.updateGanttColumns();

                // Save preference to cookie
                this.saveUserPreferences();
            },

            buildGanttColumns() {
                // Build columns array based on visibility settings
                const columns = [];

                // Task name column (always visible)
                columns.push({
                            name: "text",
                            label: "Task name",
                            width: 300,
                            min_width: 200,
                            tree: true,
                            resize: true
                });

                // Status column with custom dropdown (conditionally visible)
                if (this.visibleColumns.status) {
                    columns.push({
                            name: "status",
                            label: "Status",
                            align: "center",
                            width: 120,
                            template: function(task) {
                                const statusMap = {
                                    'NOTSTART': 'Not Started',
                                    'PROGRESS': 'In Progress',
                                    'COMPLETE': 'Complete',
                                '1': 'Not Started',
                                    '2': 'In Progress',
                                    '3': 'Complete'
                                };

                                const currentStatus = task.status || 'NOTSTART';
                                const displayText = statusMap[currentStatus] || 'Not Started';

                                return `
                                    <div class="gantt-status-custom-dropdown" style="position: relative; width: 100%;">
                                        <div
                                            onclick="window.ganttInstance.toggleStatusDropdown(event, ${task.id}, '${currentStatus}')"
                                            style="
                                                width: 100%;
                                                padding: 6px 8px;
                                                border: 1px solid #ddd;
                                                border-radius: 4px;
                                                background: white;
                                                cursor: pointer;
                                                font-size: 13px;
                                                text-align: center;
                                                user-select: none;
                                            "
                                        >
                                            ${displayText}
                                        </div>
                                    </div>
                                `;
                            }
                    });
                }

                // Constraint type column (conditionally visible)
                if (this.visibleColumns.constrainttype) {
                    columns.push({
                name: "constrainttype",
                label: "Constraint",
                width: 100,
                align: "center",
                template: function(task) {
                    return task.constrainttype || 'ASAP';
                }
                    });
                }

                // Start date column (conditionally visible)
                if (this.visibleColumns.start_date) {
                    columns.push({
                        name: "start_date",
                        label: "Start time",
                        align: "center",
                        width: 100,
                        template: function(task) {
                            if (!task.start_date) return "-";

                            // Use dhtmlx date formatting to avoid locale-dependent JS parsing/formatting
                            try {
                                const format = gantt.date.date_to_str("%n/%j/%Y");
                                // In dhtmlx, `task.start_date` is a Date object after parsing
                                return format(task.start_date);
                            } catch (e) {
                                // Fallback if something unexpected is in start_date
                                const date = new Date(task.start_date);
                                if (isNaN(date.getTime())) return "-";
                                const mm = String(date.getMonth() + 1);
                                const dd = String(date.getDate());
                                const yyyy = String(date.getFullYear());
                                return `${mm}/${dd}/${yyyy}`;
                            }
                        }
                    });
                }

                // End No Later Than column (conditionally visible)
                if (this.visibleColumns.finishbydate) {
                    columns.push({
                        name: "finishbydate",
                        label: "End No Later Than",
                        align: "center",
                        width: 120,
                        template: function(task) {
                            if (!task.finishbydate) return "-";

                            // `finishbydate` is a custom field coming from the API as a string;
                            // parse it using the same format gantt uses for task dates.
                            try {
                                const parse = gantt.date.str_to_date(gantt.config.date_format);
                                const format = gantt.date.date_to_str("%n/%j/%Y");
                                const parsed = parse(task.finishbydate);
                                return parsed ? format(parsed) : "-";
                            } catch (e) {
                                const date = new Date(task.finishbydate);
                                if (isNaN(date.getTime())) return "-";
                                const mm = String(date.getMonth() + 1);
                                const dd = String(date.getDate());
                                const yyyy = String(date.getFullYear());
                                return `${mm}/${dd}/${yyyy}`;
                            }
                        }
                    });
                }

                // End Date column (conditionally visible)
                if (this.visibleColumns.enddate) {
                    columns.push({
                        name: "enddate",
                        label: "End Date",
                        align: "center",
                        width: 100,
                        template: function(task) {
                            if (!task.enddate) return "-";

                            // `enddate` is a custom field coming from the API as a string;
                            // parse it using the same format gantt uses for task dates.
                            try {
                                const parse = gantt.date.str_to_date(gantt.config.date_format);
                                const format = gantt.date.date_to_str("%n/%j/%Y");
                                const parsed = parse(task.enddate);
                                return parsed ? format(parsed) : "-";
                            } catch (e) {
                                const date = new Date(task.enddate);
                                if (isNaN(date.getTime())) return "-";
                                const mm = String(date.getMonth() + 1);
                                const dd = String(date.getDate());
                                const yyyy = String(date.getFullYear());
                                return `${mm}/${dd}/${yyyy}`;
                            }
                        }
                    });
                }

                // Duration column (conditionally visible)
                if (this.visibleColumns.duration) {
                    columns.push({
                            name: "duration",
                            label: "Duration",
                            align: "center"
                    });
                }

                // Progress column (conditionally visible)
                if (this.visibleColumns.progress) {
                    columns.push({
                        name: "progress",
                        label: "Progress",
                        align: "center",
                        width: 80,
                        template: function(task) {
                            return Math.round(task.progress * 100) + "%";
                        }
                    });
                }

                // Planned work column (conditionally visible)
                if (this.visibleColumns.plannedwork) {
                    columns.push({
                        name: "plannedwork",
                        label: "Planned Work",
                        align: "center",
                        width: 100,
                        template: function(task) {
                            return task.plannedwork ? task.plannedwork + " hrs" : "-";
                        }
                    });
                }

                // Actual work column (conditionally visible)
                if (this.visibleColumns.actualwork) {
                    columns.push({
                        name: "actualwork",
                        label: "Actual Work",
                        align: "center",
                        width: 100,
                        template: function(task) {
                            return task.actualwork ? task.actualwork + " hrs" : "-";
                        }
                    });
                }

                // Remaining work column (conditionally visible)
                if (this.visibleColumns.remainingwork) {
                    columns.push({
                        name: "remainingwork",
                        label: "Remaining Work",
                        align: "center",
                        width: 100,
                        template: function(task) {
                            return task.remainingwork ? task.remainingwork + " hrs" : "-";
                        }
                    });
                }

                return columns;
            },

            updateGanttColumns() {
                // Check if gantt is initialized
                if (typeof gantt === 'undefined' || !gantt.$initialized) {
                    console.log('Gantt not yet initialized, skipping column update');
                    return;
                }

                try {
                    // Temporarily disable critical path calculation during column update
                    const criticalPathEnabled = gantt.config.highlight_critical_path;
                    gantt.config.highlight_critical_path = false;

                    // Build and update gantt columns
                    gantt.config.columns = this.buildGanttColumns();

                    // Force a full refresh of the grid
                    gantt.render();
                    gantt.refreshData();

                    // Re-enable critical path if it was enabled
                    if (criticalPathEnabled) {
                        gantt.config.highlight_critical_path = true;
                        // Force recalculation by triggering a render again
                        setTimeout(() => {
                            gantt.render();
                        }, 50);
                    }
                } catch (error) {
                    console.error('Error updating gantt columns:', error);
                }
            },

            initializeGantt() {
                let getGantt = document.getElementById('gantt_here');
                const self = this;

                if (getGantt) {
                    // 🔥 CRITICAL PATH: Habilitar plugin y configuración
                    gantt.plugins({
                        critical_path: true,
                        auto_scheduling: true  // ← Habilitar Auto Scheduling PRO
                    });
                    // Start with critical path disabled - will enable after data loads
                    gantt.config.highlight_critical_path = false;

                    // 🔒 CLIENT VIEW: Set read-only mode for clients
                    if (this.isClientView) {
                        gantt.config.readonly = true;
                        gantt.config.drag_move = false;
                        gantt.config.drag_resize = false;
                        gantt.config.drag_progress = false;
                        gantt.config.drag_links = false;
                    }

                    // 🚀 AUTO SCHEDULING: Configuración según documentación oficial
                    gantt.config.auto_scheduling = true;
                    gantt.config.auto_scheduling_strict = false; // Permitir gaps (no colapsar fechas al mínimo posible)
                    gantt.config.auto_scheduling_initial = true; // Auto scheduling al cargar datos

                    gantt.config.fit_tasks = true;
                    gantt.config.grid_resize = true; // Allow resizing the grid/timeline split
                    gantt.config.grid_width = 450; // Set initial grid width for more space
                    gantt.ext.zoom.init(this.zoomConfig);
                    gantt.ext.zoom.setLevel("month");
                    gantt.$zoomToFit = true;
                    
                    // Initialize columns - will be updated after gantt.init()
                    gantt.config.columns = this.buildGanttColumns();
                    
                    gantt.config.scales = [{
                            unit: "month",
                            step: 1,
                            format: "%M"
                        },
                        {
                            unit: "year",
                            step: 1,
                            format: "%Y"
                        }
                    ];
                    gantt.config.date_format = "%m-%d-%Y";

                    // 🔥 CRITICAL PATH: Configuración para versión PRO
                    // Esta función se activará automáticamente cuando tengamos la versión PRO

                    // 🔥 CRITICAL PATH: Implementar eachSuccessor personalizado (como en la documentación)
                    gantt.eachSuccessor = function (callback, root) {
                        if (!this.isTaskExists(root)) {
                            return;
                        }

                        // remember tasks we've already iterated in order to avoid infinite loops
                        const traversedTasks = arguments[2] || {};
                        if (traversedTasks[root]) {
                            return;
                        }
                        traversedTasks[root] = true;

                        const rootTask = this.getTask(root);
                        const links = rootTask.$source;
                        if (links) {
                            for (let i = 0; i < links.length; i++) {
                                const link = this.getLink(links[i]);
                                if (this.isTaskExists(link.target) && !traversedTasks[link.target]) {
                                    callback.call(this, this.getTask(link.target));

                                    // iterate the whole branch, not only first-level dependencies
                                    this.eachSuccessor(callback, link.target, traversedTasks);
                                }
                            }
                        }
                    };

                    // 🔥 CRITICAL PATH & CONSTRAINT TYPES: Personalizar clases de tareas
                    gantt.templates.task_class = function (start, end, task) {
                        let classes = [];

                        // 🔥 CRITICAL PATH: Verificar si es tarea crítica (only if enabled)
                        let isCritical = false;
                        if (gantt.config.highlight_critical_path) {
                            try {
                                // Check if isCriticalTask is available and working
                                if (typeof gantt.isCriticalTask === 'function') {
                                    isCritical = gantt.isCriticalTask(task);
                                }
                            } catch (e) {
                                // Ignore errors from isCriticalTask - may occur if data structure is incomplete
                                // console.warn('Critical path calculation failed for task:', task.id, e);
                            }
                        }

                        if (isCritical) {
                            classes.push("gantt_critical_task");
                        }

                        // 🔒 CONSTRAINT TYPE: Agregar clase según tipo de restricción
                        const constraintType = (task.constrainttype || "").toUpperCase();
                        if (constraintType === "FIXEDSTART") {
                            classes.push("fixed-task");
                        } else if (constraintType === "ASAP" || !constraintType) {
                            classes.push("asap-task");
                        }

                        return classes.join(" ");
                    };

                    // 🔗 DEPENDENCIAS: Personalizar clases de links para mejor visualización
                    gantt.templates.link_class = function(link) {
                        let classes = [];

                        // Verificar si es un link crítico (only if enabled and function exists)
                        if (gantt.config.highlight_critical_path && typeof gantt.isCriticalLink === 'function') {
                            try {
                                if (gantt.isCriticalLink(link)) {
                                    classes.push("gantt_critical_link");
                                }
                            } catch (e) {
                                // Ignore critical path errors - keep link styling simple
                            }
                        }

                        // Agregar clase según tipo de dependencia
                        switch(link.type) {
                            case 0: classes.push("gantt_fs_link"); break; // Finish-to-Start
                            case 1: classes.push("gantt_ss_link"); break; // Start-to-Start
                            case 2: classes.push("gantt_ff_link"); break; // Finish-to-Finish
                            case 3: classes.push("gantt_sf_link"); break; // Start-to-Finish
                        }

                        return classes.join(" ");
                    };

                    // 📅 WEEKENDS: Sombrear fines de semana SOLO en vista de día
                    gantt.templates.timeline_cell_class = function(task, date) {
                        // Solo aplicar weekend shading cuando estamos en zoom "day"
                        // getCurrentLevel() devuelve el índice del nivel: 0=day, 1=week, 2=month, 3=quarter, 4=year
                        var currentZoomLevel = gantt.ext.zoom.getCurrentLevel();

                        // Verificar si estamos en el nivel 0 (day view)
                        var isDayView = currentZoomLevel === 0;

                        if (isDayView) {
                            var day = date.getDay();
                            // 0 = Domingo, 6 = Sábado
                            if (day === 0 || day === 6) {
                                return "weekend";
                            }
                        }

                        return "";
                    };

                    // 🔥 CRITICAL PATH: eachSuccessor viene incluido en la versión PRO

                    // 🚀 AUTO SCHEDULING: Eventos para monitoreo y control
                    gantt.attachEvent("onBeforeAutoSchedule", function(taskId) {
                        return true; // Permitir auto scheduling
                    });

                    gantt.attachEvent("onAfterAutoSchedule", function(taskId, updatedTasks) {
                        // 🚩 SKIP auto-schedule changes during initial load
                        if (self.isInitialLoad) {
                            return;
                        }

                        // Marcar cambios como pendientes para todas las tareas afectadas
                        updatedTasks.forEach(function(task) {
                            // Validar que task sea un objeto válido antes de enviarlo
                            if (task && typeof task === 'object' && task.id) {
                                self.trackTaskChange("update", task, task.id);
                            }
                        });
                    });

                    gantt.attachEvent("onCircularLinkError", function(link, group) {
                        alert("Error: Se detectó una dependencia circular. Por favor revise las conexiones entre tareas.");
                        return false;
                    });

                    // 🔄 FALLBACK MANUAL: Si auto scheduling falla, usar implementación manual
                    let autoSchedulingFailed = false;

                    gantt.attachEvent("onAfterTaskDrag", function(id, mode, e) {
                        const task = gantt.getTask(id);
                        const constraintType = (task.constraint_type || "").toUpperCase();

                        // 🚀 AUTO SCHEDULING CONDICIONAL: Solo para tareas FIXEDSTART (INVERTIDO)
                        if (constraintType === "FIXEDSTART") {
                            if (gantt.config.auto_scheduling) {
                                // Ejecutar auto scheduling para esta tarea y sus dependientes
                                gantt.autoSchedule(task.id);
                            } else {
                                // Fallback manual si auto scheduling está deshabilitado
                                if (mode == gantt.config.drag_mode.move) {
                                    const movedTask = gantt.getTask(id);
                                    const originalTask = gantt.getTask(id);

                                    const timeDiff = movedTask.start_date.getTime() - originalTask.start_date.getTime();

                                    if (timeDiff !== 0) {
                                        gantt.eachSuccessor(function(child) {
                                            const newStartDate = new Date(child.start_date.getTime() + timeDiff);
                                            const newEndDate = gantt.calculateEndDate(newStartDate, child.duration);

                                            child.start_date = newStartDate;
                                            child.end_date = newEndDate;

                                            gantt.updateTask(child.id);
                                            self.trackTaskChange("update", child, child.id);
                                        }, id);
                                    }
                                }
                            }
                        }
                        // 🔒 ASAP: No hacer nada (ya está bloqueado por onBeforeTaskDrag - INVERTIDO)

                        return true;
                    });

                    // 🔒 NORMALIZAR CONSTRAINT TYPE: Al cargar datos
            gantt.attachEvent("onParse", function() {
                gantt.eachTask(function(task) {
                    const type = (task.constrainttype || "").trim().toUpperCase();
                    task.constrainttype = type || "ASAP";
                });
            });

// Add this configuration BEFORE gantt.init(getGantt);

// 🔄 VERTICAL REORDERING: Enable drag-and-drop reordering within groups
gantt.config.order_branch = true;  // Enable vertical reordering
gantt.config.order_branch_free = false;  // Keep within same level/parent

// Optional: Add visual feedback during drag
gantt.config.show_drag_vertical = true;  // Show vertical drag indicator

// Your existing onBeforeTaskMove handler already restricts movement to same parent:
gantt.attachEvent("onBeforeTaskMove", function(id, parent, tindex) {
    const task = gantt.getTask(id);
    const normalizeParent = (val) => {
        if (val === undefined || val === null || val === '' || val === 0 || val === '0') {
            return null;
        }
        return String(val);
    };

    const currentParent = normalizeParent(task.parent);
    const targetParent = normalizeParent(parent);

    // Block movement if trying to change groups
    if (currentParent !== targetParent) {
        return false;
    }

    return true;
});


                    gantt.init(getGantt);
                    
                    // Mark gantt as initialized for column visibility checks
                    gantt.$initialized = true;

                    // Replace automatic data processor with change tracking
                    gantt.createDataProcessor(function(entity, action, data, id) {
                        // 🚩 SKIP changes during initial load
                        if (self.isInitialLoad) {
                            return false;
                        }

                        // Don't auto-submit, just track changes
                        self.trackChange(entity, action, data, id);
                        return false; // Prevent automatic submission
                    });

                    // Add event listeners for tracking changes
                    gantt.attachEvent("onAfterTaskUpdate", function(id, task) {
                        // 🚩 SKIP changes during initial load to prevent false "unsaved changes"
                        if (self.isInitialLoad) {
                            return true;
                        }

                        // Si task no es un objeto válido, obtener la tarea completa
                        if (!task || typeof task !== 'object' || !task.id) {
                            task = gantt.getTask(id);
                        }
                        self.trackTaskChange("update", task, id);
                        return true;
                    });

                    gantt.attachEvent("onAfterTaskAdd", function(id, task) {
                        // 🚩 SKIP changes during initial load
                        if (self.isInitialLoad) {
                            return true;
                        }

                        // Si task no es un objeto válido, obtener la tarea completa
                        if (!task || typeof task !== 'object' || !task.id) {
                            task = gantt.getTask(id);
                        }
                        self.trackTaskChange("create", task, id);
                        return true;
                    });

                    gantt.attachEvent("onAfterTaskDelete", function(id, task) {
                        // 🚩 SKIP changes during initial load
                        if (self.isInitialLoad) {
                            return true;
                        }

                        // Para delete, task puede ser null, usar el ID directamente
                        if (!task || typeof task !== 'object') {
                            task = { id: id }; // Crear objeto mínimo para delete
                        }
                        self.trackTaskChange("delete", task, id);
                        return true;
                    });

                    // 🔗 EVENTOS DE LINKS (Predecesores/Dependencias)
                    // NOTA: createDataProcessor ya rastrea los cambios de links automáticamente en pendingChanges
                    // Estos eventos SOLO son para mostrar notificaciones al usuario

                    // Flag GLOBAL para evitar notificaciones duplicadas (fuera del scope de Alpine)
                    if (typeof window.ganttLinkAddFlag === 'undefined') {
                        window.ganttLinkAddFlag = false;
                    }

                    // Cuando se crea un nuevo link (arrastrando de una tarea a otra)
                    gantt.attachEvent("onAfterLinkAdd", function(id, link) {
                        // Si ya estamos procesando, ignorar (evento duplicado)
                        if (window.ganttLinkAddFlag) {
                            return true;
                        }

                        // Marcar como procesando
                        window.ganttLinkAddFlag = true;

                        // Mostrar notificación UNA SOLA VEZ
                        self.showToast('Relationship created. Click "Save Changes" to confirm.', 'info');

                        // Reset después de 100ms (suficiente para que pasen ambos eventos)
                        setTimeout(() => {
                            window.ganttLinkAddFlag = false;
                        }, 100);

                        return true;
                    });

                    // Antes de eliminar un link (sin confirmación, se elimina directamente)
                    gantt.attachEvent("onBeforeLinkDelete", function(id, link) {
                        // Eliminar directamente sin confirmación
                        return true;
                    });

                    // Flag GLOBAL para evitar notificaciones duplicadas al eliminar
                    if (typeof window.ganttLinkDeleteFlag === 'undefined') {
                        window.ganttLinkDeleteFlag = false;
                    }

                    // Después de eliminar un link
                    gantt.attachEvent("onAfterLinkDelete", function(id, link) {
                        // Si ya estamos procesando, ignorar (evento duplicado)
                        if (window.ganttLinkDeleteFlag) {
                            return true;
                        }

                        // Marcar como procesando
                        window.ganttLinkDeleteFlag = true;

                        // Mostrar notificación UNA SOLA VEZ
                        self.showToast('Relationship removed. Click "Save Changes" to confirm.', 'info');

                        // Reset después de 100ms (suficiente para que pasen ambos eventos)
                        setTimeout(() => { window.ganttLinkDeleteFlag = false; }, 100);

                        return true;
                    });

                    // 🔒 PREVENIR DRAG: SOLO bloquear tareas ASAP
            gantt.attachEvent("onBeforeTaskDrag", function(id, mode, e) {
                const task = gantt.getTask(id);
                const constraintType = (task.constrainttype || "").toUpperCase();

                // SOLO bloquear si es explícitamente ASAP
                if (constraintType === "ASAP") {
                    return false;
                }

                // Permitir TODO LO DEMÁS (FIXEDSTART, vacío, null)
                return true;
            });


                    // 🔄 Vertical Reordering Tracking: Capture target for reordering
                    gantt.attachEvent("onAfterTaskMove", function(id, parent, tindex) {
                        const task = gantt.getTask(id);

                        // Find the sibling that is now *after* the moved task (to store as "insert before this one")
                        const siblings = gantt.getChildren(parent);
                        let targetRefId = null;

                        // siblings[tindex] is the task itself. siblings[tindex+1] is the next one.
                        if (tindex + 1 < siblings.length) {
                             const targetId = siblings[tindex + 1];
                             const targetTask = gantt.getTask(targetId);
                             if (targetTask) {
                                 targetRefId = targetTask.refid;
                             }
                        }

                        // Attach the reorder target to the task object (use refid)
                        task.reorder_target = targetRefId;

                        // Track the change
                        if (!self.isInitialLoad) {
                             self.trackTaskChange("update", task, id);
                        }
                        return true;
                    });

                    // 🚩 Event: When data finishes loading, stop ignoring changes
                    gantt.attachEvent("onLoadEnd", function() {
                        // Enable critical path after data is loaded - with comprehensive validation
                        setTimeout(() => {
                            try {
                                // Validate that we have tasks and they're properly structured
                                const tasks = gantt.getTaskByTime();
                                const links = gantt.getLinks();
                                const hasValidTasks = tasks && tasks.length > 0;
                                const hasValidLinks = Array.isArray(links);

                                // Additional validation: check that tasks have required properties
                                let hasValidTaskStructure = true;
                                if (hasValidTasks) {
                                    for (let i = 0; i < Math.min(tasks.length, 5); i++) {
                                        const task = tasks[i];
                                        if (!task.id || !task.start_date || !task.end_date) {
                                            hasValidTaskStructure = false;
                                            break;
                                        }
                                    }
                                }

                                if (hasValidTasks && hasValidTaskStructure) {
                                    // For now, disable critical path due to data structure issues
                                    // TODO: Re-enable when task relationship data is properly structured
                                    gantt.config.highlight_critical_path = false;

                                    // Previous test code (commented out):
                                    /*
                                    try {
                                        // Try a simple critical path test on the first few tasks
                                        const testTasks = tasks.slice(0, 3);
                                        let canCalculateCriticalPath = true;

                                        for (const task of testTasks) {
                                            try {
                                                gantt.isCriticalTask(task.id);
                                            } catch (e) {
                                                canCalculateCriticalPath = false;
                                                console.warn('Critical path test failed for task:', task.id, e);
                                                break;
                                            }
                                        }

                                        if (canCalculateCriticalPath) {
                                            gantt.config.highlight_critical_path = true;
                                            gantt.render();
                                            console.log('Critical path highlighting enabled successfully');
                                        } else {
                                            gantt.config.highlight_critical_path = false;
                                        }
                                    } catch (testError) {
                                        gantt.config.highlight_critical_path = false;
                                    }
                                    */
                                } else {
                                    console.warn('Invalid task data for critical path calculation:', {
                                        hasValidTasks,
                                        hasValidLinks,
                                        hasValidTaskStructure,
                                        taskCount: tasks ? tasks.length : 0
                                    });
                                    gantt.config.highlight_critical_path = false;
                                }
                            } catch (error) {
                                console.warn('Could not enable critical path highlighting:', error);
                                // Keep critical path disabled if there's an error
                                gantt.config.highlight_critical_path = false;
                            }
                        }, 200); // Increased delay to ensure all data processing is complete
                        
                        // Delay to ensure all onParse modifications and auto-scheduling are complete
                        setTimeout(() => {
                            self.isInitialLoad = false;
                        }, 2000); // Increased to 2s to allow auto-scheduling to complete
                    });

                    // Load data from the API with date field parameter
                    const useFinishBy = this.useFinishByDate ? '?use_finish_by=1' : '';
                    gantt.load(`${this.apiUrl}/gantt/data/${this.projectId}${useFinishBy}`);

                    // 📡 REAL-TIME SYNC: Subscribe to project task updates via Laravel Echo
                    this.subscribeToProjectChanges();
                }
            },

            // 📡 Subscribe to Laravel Echo channel for real-time updates
            subscribeToProjectChanges() {
                const self = this;

                // Check if Laravel Echo is available
                if (typeof window.Echo === 'undefined') {
                    console.warn('⚠️ Laravel Echo not initialized. Real-time sync disabled.');
                    return;
                }

                // Prevent duplicate subscriptions - Leave existing channel and create new one
                if (this.echoChannel) {
                    window.Echo.leave(`project.${this.projectId}`);
                    this.echoChannel = null;
                }

                // Subscribe to private project channel with authorization
                this.echoChannel = window.Echo.private(`project.${this.projectId}`)
                    .listen('.task.updated', (event) => {
                        self.handleExternalTaskUpdate(event);
                    });
            },

            // 📡 Handle external task updates from other users/tabs
            handleExternalTaskUpdate(event) {
                // 🚫 Ignore events from this specific tab (same tab that made the change)
                if (event.tab_id && event.tab_id === this.tabId) {
                    return;
                }

                // Ignore events if we just loaded changes
                if (this._ignoreEventsUntil && Date.now() < this._ignoreEventsUntil) {
                    return;
                }

                const { projecttask, timestamp } = event;

                // Create unique event ID to prevent processing duplicates
                const eventId = `${projecttask}-${timestamp || Date.now()}`;

                if (this._processedEvents.has(eventId)) {
                    return;
                }

                this._processedEvents.add(eventId);

                // Clean old events from Set (keep only last 50)
                if (this._processedEvents.size > 50) {
                    const firstItem = this._processedEvents.values().next().value;
                    this._processedEvents.delete(firstItem);
                }

                // Increment external changes counter
                this.externalChangesCount++;

                // Throttle overlay display (max once every 5 seconds)
                if (this.externalChangesThrottle) {
                    clearTimeout(this.externalChangesThrottle);
                }

                this.externalChangesThrottle = setTimeout(() => {
                    // 📡 Only show overlay if there are actual changes
                    if (this.externalChangesCount > 0) {
                        this.hasExternalChanges = true;
                    }
                }, 5000); // 5 second throttle

                // If this is the first external change, show overlay immediately
                if (this.externalChangesCount === 1) {
                    clearTimeout(this.externalChangesThrottle);
                    this.hasExternalChanges = true;
                }
            },

            // 📡 Load external changes (reload Gantt data)
            loadExternalChanges() {
                // 🚩 Set flag to ignore changes during reload
                this.isInitialLoad = true;

                // 📡 Clear any pending throttle timeout to prevent false overlay
                if (this.externalChangesThrottle) {
                    clearTimeout(this.externalChangesThrottle);
                    this.externalChangesThrottle = null;
                }

                // Save state of open/collapsed tasks
                const openTasks = [];
                gantt.eachTask(function(task) {
                    if (task.$open) {
                        openTasks.push(task.id);
                    }
                });

                // Disable critical path before clearing to prevent errors
                gantt.config.highlight_critical_path = false;

                // Clear and reload Gantt data with date field parameter
                gantt.clearAll();
                const useFinishBy = this.useFinishByDate ? '?use_finish_by=1' : '';
                gantt.load(`${this.apiUrl}/gantt/data/${this.projectId}${useFinishBy}`);

                // Restore open tasks state after a short delay
                setTimeout(() => {
                    openTasks.forEach(function(taskId) {
                        if (gantt.isTaskExists(taskId)) {
                            gantt.open(taskId);
                        }
                    });
                }, 500);

                // Reset external changes state
                this.hasExternalChanges = false;
                this.externalChangesCount = 0;

                // Clear processed events to allow new ones
                this._processedEvents.clear();

                // Ignore events for 2 seconds after loading to prevent false positives
                this._ignoreEventsUntil = Date.now() + 2000;

                this.showToast(`Gantt updated with latest changes`, 'success');
            },

            // 📡 Dismiss external changes overlay (don't reload)
            dismissExternalChanges() {
                // 📡 Clear any pending throttle timeout
                if (this.externalChangesThrottle) {
                    clearTimeout(this.externalChangesThrottle);
                    this.externalChangesThrottle = null;
                }

                this.hasExternalChanges = false;
                this.externalChangesCount = 0;
            },

            // 📡 Clean up timers when component is destroyed
            destroy() {
                // Clean up throttle timer when component is destroyed
                if (this.externalChangesThrottle) {
                    clearTimeout(this.externalChangesThrottle);
                    this.externalChangesThrottle = null;
                }
            },

            trackChange(entity, action, data, id) {
                // Store the change in our pending changes map
                this.pendingChanges.set(id, {
                    entity: entity,
                    action: action,
                    data: data,
                    id: id,
                    timestamp: Date.now()
                });
                this.hasUnsavedChanges = true;
            },

            trackTaskChange(action, task, id) {
                // FIX: If we have a pending 'create' for this task, don't overwrite it with 'update'
                // This prevents "Task not found" errors when a new task is reordered before saving
                if (this.pendingChanges.has(id)) {
                    const existing = this.pendingChanges.get(id);
                    if (existing.action === 'create' && action === 'update') {
                        // Keep 'create' action but update the data and timestamp
                        this.pendingChanges.set(id, {
                            ...existing,
                            data: task,
                            timestamp: Date.now()
                        });
                        this.hasUnsavedChanges = true;
                        return;
                    }
                }

                this.pendingChanges.set(id, {
                    entity: "task",
                    action: action,
                    data: task,
                    id: id,
                    timestamp: Date.now()
                });
                this.hasUnsavedChanges = true;
            },

            toggleStatusDropdown(event, taskId, currentStatus) {
                event.stopPropagation();

                // Cerrar cualquier dropdown existente
                const existingDropdown = document.querySelector('.gantt-status-dropdown-menu');
                if (existingDropdown) {
                    existingDropdown.remove();
                }

                // Crear el menú dropdown
                const dropdown = document.createElement('div');
                dropdown.className = 'gantt-status-dropdown-menu';
                dropdown.style.cssText = `
                    position: fixed;
                    z-index: 999999;
                    background: white;
                    border: 2px solid #3b82f6;
                    border-radius: 6px;
                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
                    min-width: 150px;
                    overflow: visible;
                    pointer-events: auto;
                `;

                // Función para actualizar la posición del dropdown
                const updatePosition = () => {
                    const rect = event.target.getBoundingClientRect();
                    dropdown.style.top = (rect.bottom + 2) + 'px';
                    dropdown.style.left = rect.left + 'px';
                };

                // Posicionar inicialmente
                updatePosition();

                // Opciones de estado
                const statusOptions = [
                    { key: 'NOTSTART', label: 'Not Started', color: '#94a3b8' },
                    { key: 'PROGRESS', label: 'In Progress', color: '#3b82f6' },
                    { key: 'COMPLETE', label: 'Complete', color: '#10b981' }
                ];

                // Crear opciones
                statusOptions.forEach(option => {
                    const optionDiv = document.createElement('div');
                    optionDiv.style.cssText = `
                        padding: 10px 16px;
                        cursor: pointer;
                        font-size: 14px;
                        border-left: 4px solid ${option.color};
                        background: ${option.key === currentStatus ? '#f0f9ff' : 'white'};
                        transition: background 0.2s;
                    `;
                    optionDiv.textContent = option.label;

                    optionDiv.addEventListener('mouseenter', () => {
                        optionDiv.style.background = '#f0f9ff';
                    });
                    optionDiv.addEventListener('mouseleave', () => {
                        optionDiv.style.background = option.key === currentStatus ? '#f0f9ff' : 'white';
                    });
                    optionDiv.addEventListener('click', (e) => {
                        e.stopPropagation();
                        this.updateTaskStatus(taskId, option.key);
                        cleanup();
                    });

                    dropdown.appendChild(optionDiv);
                });

                // Agregar al body
                document.body.appendChild(dropdown);

                // Obtener el contenedor de scroll del Gantt
                const ganttDataArea = document.querySelector('.gantt_data_area');
                const ganttLayout = document.querySelector('.gantt_layout_content');

                // Listener para CERRAR el dropdown en scroll (mejor UX)
                const scrollHandler = () => {
                    cleanup();
                };

                if (ganttDataArea) {
                    ganttDataArea.addEventListener('scroll', scrollHandler);
                }
                if (ganttLayout) {
                    ganttLayout.addEventListener('scroll', scrollHandler);
                }

                // También cerrar en scroll de ventana
                window.addEventListener('scroll', scrollHandler, true);

                // Función de limpieza
                const cleanup = () => {
                    dropdown.remove();
                    if (ganttDataArea) {
                        ganttDataArea.removeEventListener('scroll', scrollHandler);
                    }
                    if (ganttLayout) {
                        ganttLayout.removeEventListener('scroll', scrollHandler);
                    }
                    window.removeEventListener('scroll', scrollHandler, true);
                    document.removeEventListener('click', clickOutsideHandler);
                };

                // Cerrar al hacer clic fuera
                const clickOutsideHandler = () => {
                    cleanup();
                };

                setTimeout(() => {
                    document.addEventListener('click', clickOutsideHandler);
                }, 100);
            },

            async updateTaskStatus(taskId, newStatus) {
                // Actualizar el status en el Gantt inmediatamente
                const task = gantt.getTask(taskId);

                if (task) {
                    task.status = newStatus;
                    gantt.updateTask(taskId);
                }

                // Guardar automáticamente en el backend
                const csrfToken = document.head.querySelector('meta[name="csrf-token"]').content;

                const batchData = {
                    _token: csrfToken,
                    project_id: this.projectId,
                    changes: [{
                        entity: "task",
                        action: "update",
                        data: {
                            id: taskId,
                            status: newStatus
                        },
                        id: taskId,
                        timestamp: Date.now()
                    }]
                };

                try {
                    const response = await gantt.ajax.post(this.updateUrl, batchData);
                    const responseData = JSON.parse(response.responseText);

                    if (responseData.status === 'success') {
                        // Forzar re-render de la celda para que muestre el nuevo status
                        setTimeout(() => {
                            gantt.refreshData();
                        }, 100);
                    } else {
                        alert('Error: ' + responseData.message);
                    }
                } catch (error) {
                    console.error('Error updating status:', error);
                    alert('Error updating status. Please try again.');
                    location.reload();
                }
            },

            async saveAllChanges() {
                if (this.pendingChanges.size === 0) {
                    this.showToast('No changes to save', 'info');
                    return;
                }

                this.isSaving = true;
                const csrfToken = document.head.querySelector('meta[name="csrf-token"]').content;
                const changes = Array.from(this.pendingChanges.values());

                try {
                    // 📡 Get socket ID from Laravel Echo for ->toOthers() to work
                    const socketId = window.Echo?.socketId();

                    // Prepare batch data
                    const batchData = {
                        _token: csrfToken,
                        project_id: this.projectId,
                        changes: changes,
                        tab_id: this.tabId // 📡 Include tab ID to identify this specific tab
                    };

                    // 📡 Configure headers to include socket ID for ->toOthers()
                    const headers = {
                        'X-CSRF-TOKEN': csrfToken,
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    };

                    // Only include socket ID if it's valid (not undefined, null, or the string "undefined"/"null")
                    if (socketId && typeof socketId === 'string' && socketId !== 'undefined' && socketId !== 'null' && /^\d+\.\d+$/.test(socketId)) {
                        headers['X-Socket-ID'] = socketId;
                    }

                    // Use fetch instead of gantt.ajax.post to send custom headers
                    const fetchResponse = await fetch(this.updateUrl, {
                        method: 'POST',
                        headers: headers,
                        body: JSON.stringify(batchData)
                    });

                    const response = await fetchResponse.json();

                    // Intentar parsear la respuesta si es string
                    let parsedResponse = response;
                    if (typeof response === 'string') {
                        try {
                            parsedResponse = JSON.parse(response);
                        } catch (e) {
                            // Silent fail - response may already be an object
                        }
                    }

                    // Clear pending changes on successful save
                    this.pendingChanges.clear();
                    this.hasUnsavedChanges = false;

                    // 🚩 Set flag to ignore changes during reload
                    this.isInitialLoad = true;

                    // 📂 Guardar el estado de las tareas abiertas/expandidas
                    const openTasks = [];
                    gantt.eachTask(function(task) {
                        if (task.$open) {
                            openTasks.push(task.id);
                        }
                    });

                    // Disable critical path before clearing to prevent errors
                    gantt.config.highlight_critical_path = false;

                    // Recargar los datos del gantt para reflejar los cambios con date field parameter
                    gantt.clearAll();
                    const useFinishBy = this.useFinishByDate ? '?use_finish_by=1' : '';
                    await gantt.load(`${this.apiUrl}/gantt/data/${this.projectId}${useFinishBy}`);

                    // 📂 Restaurar el estado de las tareas que estaban abiertas
                    openTasks.forEach(function(taskId) {
                        if (gantt.isTaskExists(taskId)) {
                            gantt.open(taskId);
                        }
                    });

                    this.showToast('Changes saved successfully!', 'success');

                } catch (error) {
                    console.error("❌ Error completo:", JSON.stringify(error, null, 2));
                    this.showToast('Error saving changes. Please try again.', 'error');
                } finally {
                    this.isSaving = false;
                }
            },

            // 🎨 Mostrar notificación toast
            showToast(message, type = 'success') {
                const container = document.getElementById('toast-container');
                if (!container) {
                    return;
                }

                const toast = document.createElement('div');

                // Colores según el tipo
                const colors = {
                    success: { bg: '#10b981', icon: '✓' },
                    error: { bg: '#ef4444', icon: '✕' },
                    info: { bg: '#3b82f6', icon: 'ℹ' }
                };

                const { bg, icon } = colors[type] || colors.info;

                // Estilos inline (no dependen de Tailwind)
                toast.style.cssText = `
                    background-color: ${bg};
                    color: white;
                    padding: 1rem 1.5rem;
                    border-radius: 0.5rem;
                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
                    opacity: 0;
                    transform: translateX(100%);
                    transition: all 0.3s ease-in-out;
                    margin-bottom: 0.5rem;
                    min-width: 300px;
                    max-width: 500px;
                `;

                toast.innerHTML = `
                    <span style="font-size: 1.25rem; font-weight: bold;">${icon}</span>
                    <span style="font-weight: 500;">${message}</span>
                `;

                container.appendChild(toast);

                // Animar entrada
                setTimeout(() => {
                    toast.style.opacity = '1';
                    toast.style.transform = 'translateX(0)';
                }, 10);

                // Auto-remover después de 3 segundos
                setTimeout(() => {
                    toast.style.opacity = '0';
                    toast.style.transform = 'translateX(100%)';
                    setTimeout(() => {
                        if (toast.parentNode) {
                            toast.parentNode.removeChild(toast);
                        }
                    }, 300);
                }, 3000);
            },

            discardChanges() {
                this.pendingChanges.clear();
                this.hasUnsavedChanges = false;
                
                // Disable critical path before clearing to prevent errors
                gantt.config.highlight_critical_path = false;
                
                // Reload the gantt data to revert changes with date field parameter
                gantt.clearAll();
                const useFinishBy = this.useFinishByDate ? '?use_finish_by=1' : '';
                gantt.load(`${this.apiUrl}/gantt/data/${this.projectId}${useFinishBy}`);
                this.showToast('Changes discarded', 'info');
            },

            setDateField(useEndDate) {
                // Only reload if the value actually changed
                if (this.useFinishByDate === useEndDate) {
                    return;
                }

                // Set the new value
                this.useFinishByDate = useEndDate;

                // Save preference to cookie
                this.saveUserPreferences();

                // Check if gantt is initialized before trying to reload
                if (typeof gantt === 'undefined' || !gantt.$initialized) {
                    return;
                }

                // 🚩 Set flag to ignore changes during reload (prevents "unsaved changes" warning)
                this.isInitialLoad = true;

                // Save open tasks state
                const openTasks = [];
                gantt.eachTask(function(task) {
                    if (task.$open) {
                        openTasks.push(task.id);
                    }
                });

                // Disable critical path before clearing to prevent errors
                gantt.config.highlight_critical_path = false;

                // Reload Gantt chart with new date field
                gantt.clearAll();
                const useFinishBy = this.useFinishByDate ? '?use_finish_by=1' : '';
                gantt.load(`${this.apiUrl}/gantt/data/${this.projectId}${useFinishBy}`);

                // Restore open tasks state
                setTimeout(() => {
                    openTasks.forEach(function(taskId) {
                        if (gantt.isTaskExists(taskId)) {
                            gantt.open(taskId);
                        }
                    });
                }, 500);

                // Show notification
                const fieldName = this.useFinishByDate ? 'End No Later Than' : 'End Date';
                this.showToast(`Now showing: ${fieldName}`, 'info');
            },

            zoomGantt(action) {
                if (action === 'in') {
                    gantt.ext.zoom.zoomIn();
                    gantt.$zoomToFit = false;
                    document.querySelector(".zoom_toggle").innerHTML = "Zoom to Fit";
                } else if (action === 'out') {
                    gantt.ext.zoom.zoomOut();
                    gantt.$zoomToFit = false;
                    document.querySelector(".zoom_toggle").innerHTML = "Zoom to Fit";
                }
            },

            toFit() {
                const project = gantt.getSubtaskDates();
                const areaWidth = gantt.$task.offsetWidth;
                const scaleConfigs = this.zoomConfig.levels;

                for (let i = 0; i < scaleConfigs.length; i++) {
                    const columnCount = this.getUnitsBetween(project.start_date, project.end_date, scaleConfigs[i].scales[scaleConfigs[i].scales.length - 1].unit, scaleConfigs[i].scales[0].step);
                    if ((columnCount + 2) * gantt.config.min_column_width <= areaWidth) {
                        break;
                    }
                }

                gantt.ext.zoom.setLevel(scaleConfigs[i].name);
                this.applyConfig(scaleConfigs[i], project);
            },

            getUnitsBetween(from, to, unit, step) {
                let start = new Date(from);
                let end = new Date(to);
                let units = 0;
                while (start.valueOf() < end.valueOf()) {
                    units++;
                    start = gantt.date.add(start, step, unit);
                }
                return units;
            },

            applyConfig(config, dates) {
                gantt.config.scales = config.scales;
                if (config.scroll_position) {
                    setTimeout(function() {
                        gantt.scrollTo(config.scroll_position.x, config.scroll_position.y);
                    }, 4);
                }
            },

            init() {
                // 📡 Generate unique tab ID for this specific tab instance
                this.tabId = 'tab_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);

                // Guardar referencia global para acceder desde los dropdowns
                window.ganttInstance = this;

                // Load user preferences from cookies
                this.loadUserPreferences();

                this.initializeGantt();
            }
        };
    }

    document.addEventListener('alpine:init', () => {
        Alpine.data('ganttComponent', ganttComponent);
    });

    // Initialize React Tables when sublists are shown
    document.addEventListener('DOMContentLoaded', () => {
        // Dispatch event to initialize React Tables after a short delay
        setTimeout(() => {
            document.dispatchEvent(new Event('react-tables:reinit'));
        }, 100);
    });

    // Re-initialize when Alpine components update
    document.addEventListener('alpine:initialized', () => {
        setTimeout(() => {
            document.dispatchEvent(new Event('react-tables:reinit'));
        }, 100);
    });

    // Re-initialize when Livewire updates
    document.addEventListener('livewire:navigated', () => {
        setTimeout(() => {
            document.dispatchEvent(new Event('react-tables:reinit'));
        }, 100);
    });
</script>