@forelse($projectTasks->longTermProjectActivities as $task)
    @php
        $totalWeight = 0;
        $completedWeight = 0;

        $totalWeight += $task->activity_weight ?? 0;

        if ($task->state === 'COMPLETED') {
            $completedWeight += $task->activity_weight ?? 0;
        }

        // Sub activities weight
        foreach ($task->longTermProjectSubActivities as $sub) {
            $totalWeight += $sub->sub_activity_weight ?? 0;
            
            if ($sub->state === 'COMPLETED') {
                $completedWeight += $sub->sub_activity_weight ?? 0;
            }
        }
        
        $percentage = $totalWeight > 0
            ? round(($completedWeight / $totalWeight) * 100)
            : 0;

        if ($task->state === 'COMPLETED') {
            $percentage = 100;
        }

         $activeSubTasks = $task->longTermProjectSubActivities
        ->where('state', '!=', 'DELETED');

    $subTaskCount = $activeSubTasks->count();
    @endphp
    <div class="card mb-3 border-0 shadow-sm">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center activity-header"
                style="cursor: pointer;" 
                onclick="toggleActivity({{ $task->id }})">
                <div class="flex-grow-1">
                    <div class="d-flex align-items-center gap-2 mb-1">
                        <h6 class="fw-bold text-primary mb-0">
                            <i class="fa-solid fa-diagram-project me-2"></i>
                            {{ $task->activity_name }}
                        </h6>

                        <!-- <button class="btn btn-sm btn-outline-primary"
                            data-bs-toggle="collapse"
                            data-bs-target="#activity-comments-{{ $task->id }}">
                            <i class="fa-regular fa-comments me-1"></i>
                            Comments
                        </button> -->
                    </div>
                    <p class="text-muted small mb-0">
                        {{ $task->activity_description }}
                    </p>
                </div>
                <div class="d-flex align-items-center gap-3">
                    <div class="position-relative" style="width:60px;height:60px;">
                        <svg width="60" height="60">
                            <circle cx="30" cy="30" r="26"
                                stroke="#e9ecef"
                                stroke-width="6"
                                fill="none" />

                            <circle cx="30" cy="30" r="26"
                                stroke="#0d6efd"
                                stroke-width="6"
                                fill="none"
                                stroke-linecap="round"
                                stroke-dasharray="163"
                                stroke-dashoffset="{{ 163 - (163 * $percentage / 100) }}" />
                        </svg>
                        <div class="position-absolute top-50 start-50 translate-middle fw-bold small">
                            {{ $percentage }}%
                        </div>
                    </div>
                </div>
            </div>                    
            <div class="d-flex align-items-center gap-2 mt-3" style="cursor: pointer;" 
                onclick="toggleActivity({{ $task->id }})">
                <h6 class="fw-bold text-secondary mb-0">
                    Sub Tasks
                    <span class="badge bg-primary ms-2">{{ $subTaskCount }}</span>
                </h6>
            </div>
            <div id="activity-content-{{ $task->id }}" style="display: none;">
                <!-- <div class="row mt-3">
                    <div class="border-start ps-3" id="activity-comment-list-{{ $task->id }}">
                        @forelse($task->longTermProjectComments as $comment)
                            <div class="mb-2 p-2 bg-light border rounded col-md-6">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <small class="text-muted">
                                        {{ \Carbon\Carbon::parse($comment->created_at)->format('Y-m-d H:i') }}
                                    </small>
                                    <span class="badge bg-secondary">
                                        {{ $comment->stackholder_category ?? 'EXTERNAL' }}
                                    </span>
                                </div>
                                <div class="text-dark small">
                                    {{ $comment->comments }}
                                </div>
                            </div>
                        @empty
                            <p class="text-muted small mb-0"></p>
                        @endforelse
                    </div>

                    {{-- <div class="mt-3 d-flex gap-2 col-md-6">
                        <input type="text"
                            class="form-control form-control-sm"
                            placeholder="Write activity comment..."
                            id="activity-input-{{ $task->id }}">

                        <button class="btn btn-sm btn-primary"
                                onclick="addActivityComment(
                                {{ $task->id }},
                                {{ $user->StakeholderUser->id }},
                                {{ $user->id }},
                                {{ $task->long_term_project_id }},
                                {{ $task->status }})">
                            Add
                        </button>
                    </div> --}}                      
                </div> -->
                <div class="row mt-4">
                    <div class="col-md-12">
                        <hr>
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <!-- <h6 class="fw-bold text-secondary mb-0">
                                <i class="fa-solid fa-tasks me-2"></i>
                                Sub Tasks
                                <span class="badge bg-primary ms-2" id="sub-activities-count-{{ $task->id }}">0</span>
                            </h6> -->
                            <div class="spinner-border spinner-border-sm text-primary d-none" id="sub-activities-loader-{{ $task->id }}" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </div>
                        <div id="sub-activities-container-{{ $task->id }}">
                            <div class="text-center py-2">
                                <div class="spinner-border spinner-border-sm text-secondary" role="status">
                                    <span class="visually-hidden">Loading sub tasks...</span>
                                </div>
                                <p class="text-muted small mt-2">Loading sub tasks...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@empty
    <p class="text-muted small">No Tasks available</p>
@endforelse
<script>
$(document).ready(function() {
    @foreach($projectTasks->longTermProjectActivities as $task)
        loadSubActivities({{ $task->id }}, {{ $task->long_term_project_id }});
    @endforeach
});

function toggleActivity(activityId) {
    const content = $('#activity-content-' + activityId);
    
    if (content.is(':visible')) {
        content.slideUp(300);
    } else {
        // Open
        content.slideDown(300);
        
        const container = $('#sub-activities-container-' + activityId);
        if (container.find('.sub-activity-item').length === 0 && 
            container.find('.alert').length === 0) {
            // Check if it's still showing loading spinner
            if (container.find('.spinner-border').length > 0) {
                loadSubActivities(activityId, {{ $task->long_term_project_id ?? 0 }});
            }
        }
    }
}

function loadSubActivities(activityId, projectId) {
    const container = $('#sub-activities-container-' + activityId);
    const loader = $('#sub-activities-loader-' + activityId);
    const countBadge = $('#sub-activities-count-' + activityId);
    
    if (loader.length) {
        loader.removeClass('d-none');
    }
    
    $.ajax({
        url: adminURL + 'long-term-project-tasks/' + activityId + '/subtasks',
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        },
        success: function(response) {
            if (response.status === 1) {
                container.html(response.html);
                if (countBadge.length) {
                    countBadge.text(response.count || 0);
                }
            } else {
                container.html(`
                    <div class="alert alert-warning alert-sm">
                        <i class="fa-solid fa-exclamation-triangle me-2"></i>
                        ${response.msg || 'No sub tasks available'}
                    </div>
                `);
                if (countBadge.length) {
                    countBadge.text('0');
                }
            }
        },
        error: function(xhr, status, error) {
            container.html(`
                <div class="alert alert-danger alert-sm">
                    <i class="fa-solid fa-circle-exclamation me-2"></i>
                    Failed to load sub tasks. 
                    <button class="btn btn-sm btn-link p-0" onclick="loadSubActivities(${activityId}, ${projectId})">
                        Retry
                    </button>
                </div>
            `);
            if (countBadge.length) {
                countBadge.text('0');
            }
        },
        complete: function() {
            if (loader.length) {
                loader.addClass('d-none');
            }
        }
    });
}
</script>