@extends('layouts.acorn.acorn_admin_app')
@section('header_styles')
@endsection
@section('content')
    @php
        use Illuminate\Support\Facades\DB;
    @endphp
    <div class="container">
        <div class="card card-dashboard p-4">
            @php 
                $isActive = true;
            @endphp
            <div class="project-details-wrap {{ $isActive ? '' : 'd-none' }}" id="project-view-{{ $project->id }}">
                <div class="mb-4 d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <div>
                        <h2 class="text-primary fw-bold mb-1">{{ $project->title }}</h2>
                        <input type="hidden" id="long_term_project_id" value="{{ $project->id }}"/>
                        @if($project->state == 'PENDING')
                            <span class="badge rounded-pill bg-danger fs-6">Pending</span>
                        @elseif($project->state == 'IN_PROGRESS')
                            <span class="badge rounded-pill bg-primary fs-6">Inprogress</span>
                        @elseif($project->state == 'COMPLETED')
                            <span class="badge rounded-pill bg-success fs-6">Completed</span>
                        @endif
                    </div>
                    @if($project->state == 'PENDING')
                        <div>
                            <button type="button" class="btn btn-success px-4 py-2 rounded-3" id="startProjectBtn">
                                <i class="fa-solid fa-play me-2"></i>
                                Start Project
                            </button>
                        </div>
                    @endif
                </div>
                <hr class="my-4 text-muted opacity-25">
                <div class="row g-4">
                    <!-- LEFT SIDE -->
                    <div class="col-lg-3">
                        <div class="row g-4">
                            <div class="col-12 ">
                                <div class="p-3 bg-light rounded-3 border">
                                    <p class="label">Project No</p>
                                    <p class="detail-value fw-bold mb-0">
                                        {{ $project->project_no }}
                                    </p>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="p-3 bg-light rounded-3 border">
                                    <p class="label">Budget Allocation</p>
                                    <p class="detail-value fw-bold text-success mb-0">
                                        {{ number_format($project->budget, 2) }}LKR
                                    </p>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="p-3 bg-light rounded-3 border">
                                    <p class="label">Project Duration</p>

                                    <p class="detail-value mb-1">
                                        <i class="fa-regular fa-calendar me-2 text-muted"></i>
                                        <strong>Start Date:</strong>
                                        {{ \Carbon\Carbon::parse($project->start_date)->format('Y-m-d') }}
                                    </p>

                                    <p class="detail-value mb-0">
                                        <i class="fa-regular fa-calendar-check me-2 text-muted"></i>
                                        <strong>Estimated End Date:</strong>
                                        {{ \Carbon\Carbon::parse($project->end_date)->format('Y-m-d') }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- RIGHT SIDE -->
                    <div class="col-lg-9">
                        <!-- DESCRIPTION -->
                        <div class="card border bg-light p-3 mb-4 h-100">
                            <p class="label">Project Description</p>
                            <p class="detail-value mb-0 text-secondary" style="white-space: pre-line;">
                                {{ $project->description }}
                            </p>
                        </div>
                        <!-- REMARKS -->
                        {{-- <div class="p-3 rounded-3 border border-warning-subtle bg-warning-subtle bg-opacity-10">
                            <p class="label text-warning-emphasis">
                                Administrative Remarks
                            </p>

                            <p class="detail-value small mb-0 text-dark">
                                {{ $project->remark ?? 'No explicit operational adjustments noted.' }}
                            </p>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
        @php
            $statusList = ['PENDING', 'IN_PROGRESS', 'COMPLETED'];
        @endphp        
        @if($project->state == 'IN_PROGRESS')
            <div class="mt-5">
                <h5 class="fw-bold text-dark mb-4">
                    Project Activities
                </h5>
            </div>
            @forelse($project->longTermProjectActivities as $activity)
                @php
                    $totalWeight = 0;
                    $completedWeight = 0;

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


                    if ($activity->state === 'COMPLETED') {
                        $completedWeight += $activity->activity_weight ?? 0;
                    } elseif ($activity->state === 'IN_PROGRESS') {
                        // nothing added unless completed
                    }

                    foreach ($activity->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 ($activity->state === 'COMPLETED') {
                        $percentage = 100;
                    }
                @endphp
                <!-- ================= ACTIVITY CARD ================= -->
                <div class="card mb-3 border-0 shadow-sm">
                    <div class="card-body">
                        <!-- ACTIVITY HEADER -->
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <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>
                                        {{ $activity->activity_name }}
                                    </h6>
                                    {{-- {{  $completedWeight  }} --}}
                                    <!-- COMMENT BUTTON (NOW NEAR TITLE) -->
                                    <button class="btn btn-sm btn-outline-primary"
                                        data-bs-toggle="collapse"
                                        data-bs-target="#activity-comments-{{ $activity->id }}">
                                        <i class="fa-regular fa-comments me-1"></i>
                                        Comments
                                    </button>
                                </div>
                                <p class="text-muted small mb-0">
                                    {{ $activity->activity_description }}
                                </p>
                            </div>
                            <div class="d-flex align-items-center gap-3">
                                <!-- PROGRESS CIRCLE -->
                                <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>
                        <!-- ================= ACTIVITY COMMENTS ================= -->
                        <div class="collapse mt-3" id="activity-comments-{{ $activity->id }}">
                            <div class="border-start ps-3" id="activity-comment-list-{{ $activity->id }}">
                                @forelse($activity->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">No comments yet</p> --}}
                                    <p class="text-muted small mb-0"></p>
                                @endforelse
                            </div>

                            <!-- INPUT BOX -->
                            {{-- <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-{{ $activity->id }}">

                                <button class="btn btn-sm btn-primary"
                                        onclick="addActivityComment(
                                        {{ $activity->id }},
                                        {{ $user->StakeholderUser->id }},
                                        {{ $user->id }},
                                        {{ $project->id }},
                                        {{ $activity->status }})">
                                    Add
                                </button>
                            </div> --}}                      
                        </div>
                    </div>                
                    <!-- ================= SUB ACTIVITIES ================= -->                
                    <div class="ms-4 mt-4 border-start ps-3">
                        @forelse($activity->longTermProjectSubActivities as $sub)
                            @php
                                $status = $sub->status ?? 'pending';
                            @endphp
                            <div class="mb-4 p-2 rounded border
                                    @if($status=='COMPLETED') bg-success-subtle
                                    @elseif($status=='IN_PROGRESS') bg-warning-subtle
                                    @else bg-light
                                    @endif">
                                <!-- SUB ACTIVITY HEADER -->
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <div class="d-flex align-items-center gap-2 mb-1">                                   
                                            <h6 class="fw-semibold mb-1">
                                                <i class="fa-solid fa-circle-dot me-2 text-secondary"></i>
                                                {{ $sub->sub_activity_name }}
                                            </h6>
                                            <span class="badge bg-info-subtle text-success border">
                                                LKR {{ number_format($sub->cost, 2) }}
                                            </span>
                                            @php
                                                $state = $sub->state;
                                                $stateClasses = [
                                                    'PENDING' => 'bg-secondary-subtle text-secondary border',
                                                    'IN_PROGRESS' => 'bg-warning-subtle text-warning border',
                                                    'COMPLETED' => 'bg-success-subtle text-success border',
                                                    'DELETED' => 'bg-danger-subtle text-danger border',
                                                ];
                                                $stateLabel = ucwords(strtolower(str_replace('_', ' ', $state)));
                                            @endphp
                                            <span class="badge {{ $stateClasses[$state] ?? 'bg-light text-dark border' }}">
                                                {{ $stateLabel }}
                                            </span>
                                            <!-- COMMENTS TOGGLE -->
                                            <button class="btn btn-sm btn-outline-secondary"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#sub-comments-{{ $sub->id }}">
                                                Comments
                                            </button>
                                        </div>
                                        <p class="text-muted small mb-1">
                                            {{ $sub->sub_activity_description }}
                                        </p>
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="d-flex align-items-center gap-2 ms-3">
                                            <!-- Start Button - Show only if status is PENDING -->
                                            @if($sub->state == 'PENDING')
                                                <button class="btn btn-sm btn-success start-sub-activity-btn" 
                                                        data-id="{{ $sub->id }}"
                                                        data-name="{{ $sub->sub_activity_name }}" id="start_long_term_project_sub_Activity">
                                                    <i class="fa-solid fa-play me-1"></i> Start
                                                </button>
                                            @endif
                                            
                                            <!-- Show Complete button if IN_PROGRESS -->
                                            @if($sub->state == 'IN_PROGRESS')
                                                <button class="btn btn-sm btn-success complete-sub-activity-btn"
                                                    data-id="{{ $sub->id }}"
                                                    data-name="{{ $sub->sub_activity_name }}"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#completeSubActivityModal"
                                                >
                                                    <i class="fa-solid fa-check me-1"></i> Complete
                                                </button>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <!-- ================= SUB COMMENTS ================= -->
                                @if($sub->longTermProjectComments && $sub->longTermProjectComments->count() > 0)
                                    <div class="collapse mt-2" id="sub-comments-{{ $sub->id }}" data-sub-activity-id="{{ $sub->id }}">
                                        <div id="comments-container-{{ $sub->id }}"></div>
                                        <div class="mt-3 col-md-6">
                                            <form class="add-sub-activity-comment-form" data-sub-activity-id="{{ $sub->id }}">
                                                @csrf
                                                <input type="hidden" class="form-control" value="{{ $sub->long_term_project_id }}" name="long_term_project_id"/>
                                                <input type="hidden" class="form-control" value="{{ $sub->long_term_project_activity_id }}" name="long_term_project_activity_id"/>
                                                <input type="hidden" class="form-control" value="{{ $sub->id }}" name="long_term_project_sub_activity_id"/>                              
                                                <textarea
                                                    class="form-control form-control-sm mb-2"
                                                    placeholder="Write sub activity comment..."
                                                    id="sub-activity-input-{{ $sub->id }}" name="comment"></textarea>
                                                <!-- Dynamic file inputs container -->
                                                <div id="file-container-{{ $sub->id }}" class="mb-2">                                            
                                                    <input type="file" class="form-control" name="documents[]" multiple accept=".pdf,.doc,.docx,.jpg,.jpeg,.png">
                                                    <small class="text-muted">You can select multiple files. Allowed: PDF, DOC, DOCX, JPG, PNG</small>
                                                    
                                                    <!-- File list preview -->
                                                    <div id="file-list-{{ $sub->id }}" class="mt-2"></div>
                                                </div>
                                                <button class="btn btn-sm btn-primary" type="submit">
                                                    <i class="fa fa-paper-plane"></i>
                                                    Add Comment
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @empty
                            <p class="text-muted small">No sub activities available</p>
                        @endforelse
                    </div>
                </div>
            @empty
                <p class="text-muted small">No activities available</p>
            @endforelse
        @else            
            <div class="mt-5">
                <h5 class="fw-bold text-dark mb-4">
                    Project Not Started yet
                </h5>
            </div>
        @endif
    </div>
    <!-- Complete Sub Activity Modal -->
    <div class="modal fade" id="completeSubActivityModal" tabindex="-1" aria-labelledby="completeSubActivityModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="completeSubActivityModalLabel">Complete Sub Activity</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="completeSubActivityForm">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" id="complete_sub_activity_id" name="sub_activity_id">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="complete_sub_activity_cost" class="form-label">Cost (LKR)</label>
                                <input type="number" class="form-control" id="complete_sub_activity_cost" name="cost" step="0.01" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="complete_sub_activity_state" class="form-label">Status</label>
                                <select class="form-select" id="complete_sub_activity_state" name="state">
                                    <!-- <option value="IN_PROGRESS">In Progress</option> -->
                                    <option value="COMPLETED">Completed</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Complete Sub Activity</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var commentsLoaded = {};
        $(document).ready(function() {
            
            // Use event delegation for dynamically added elements
            $(document).on('show.bs.collapse', '[id^="sub-comments-"]', function() {
                var subActivityId = $(this).data('sub-activity-id');
                
                if (subActivityId && !commentsLoaded[subActivityId]) {
                    loadComments(subActivityId);
                }
            });
            
            // Complete Sub Activity
            $(document).on('submit', '#completeSubActivityForm', function(e) {
                e.preventDefault();
                
                var subActivityId = $('#complete_sub_activity_id').val();
                var subActivityName = $(this).data('name');                
               
                $.ajax({
                    type: 'POST',
                    url: adminURL + 'long-term-project-sub-activities/complete',
                    data: {
                        long_term_project_sub_activity_id: subActivityId,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.status == 1) {
                            Swal.fire({
                                title: 'Completed!',
                                text: response.msg || 'Sub activity completed successfully',
                                icon: 'success',
                                timer: 2000,
                                showConfirmButton: false
                            }).then(() => {
                                loadComments(subActivityId);
                            });
                        } else {
                            Swal.fire({
                                title: 'Error',
                                text: response.msg || 'Failed to complete sub activity',
                                icon: 'error'
                            });
                        }
                    },
                    error: function(xhr) {
                        Swal.fire({
                            title: 'Error',
                            text: 'Something went wrong. Please try again.',
                            icon: 'error'
                        });
                    }
                });
            });

            $('#startProjectBtn').on('click', function(e){
                e.preventDefault();
                var long_term_project_id = $('#long_term_project_id').val();

                $.ajax({
                    type: 'POST',
                    url: adminURL + 'long-term-project/start',
                    data: {
                        long_term_project_id: long_term_project_id
                    },
                    success: function (data) {
                        if (data.status != 0) {
                            swal.fire({
                                title: "Project Started Successfully!",
                                type: "success",
                                icon: "success",
                                position: 'center-start',
                                showConfirmButton: false,
                                timer: 3000
                            }).then(() => {
                                location.reload();
                            });
                        } else {
                            swal({
                                title: data.msg,
                                type: "success",
                                icon: "error",
                                showConfirmButton: false,
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        swal.fire({
                            title: 'Error',
                            text: 'Something went wrong. Please try again.',
                            type: "error",
                            icon: "error",
                            showConfirmButton: true,
                        });
                    }
                });
            });

            function safeToggleIcon(button, targetId) {
                if (!button || !button.length) return;
                
                $(targetId).on('show.bs.collapse', function() {
                    var icon = button.find('i');
                    if (icon && icon.length) {
                        icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
                    }
                });
                
                $(targetId).on('hide.bs.collapse', function() {
                    var icon = button.find('i');
                    if (icon && icon.length) {
                        icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
                    }
                });
            }

            $('#start_long_term_project_sub_Activity').on('click', function(e){
                e.preventDefault();
                var long_term_project_sub_activity_id = $(this).data('id');
                var longTermProjectId = $('#long_term_project_id').val();

                $.ajax({
                    type: 'POST',
                    url: adminURL + 'long-term-project-sub-activities/start',
                    data: {
                        long_term_project_sub_activity_id: long_term_project_sub_activity_id
                    },
                    success: function (data) {
                        if (data.status != 0) {
                            swal.fire({
                                title: data.msg,
                                type: "success",
                                icon: "success",
                                position: 'center-start',
                                showConfirmButton: false,
                                timer: 3000
                            }).then(() => {
                                loadComments(long_term_project_sub_activity_id);
                            });
                        } else {
                            swal({
                                title: data.msg,
                                type: "success",
                                icon: "error",
                                showConfirmButton: false,
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        swal.fire({
                            title: 'Error',
                            text: 'Something went wrong. Please try again.',
                            type: "error",
                            icon: "error",
                            showConfirmButton: true,
                        });
                    }
                });
            });

            // File preview for multiple files
            $(document).on('change', 'input[name="documents[]"]', function(e) {
                var subActivityId = $(this).closest('form').data('sub-activity-id');
                var fileList = $('#file-list-' + subActivityId);
                fileList.empty();
                
                var files = e.target.files;
                var validFiles = [];
                var invalidFiles = [];
                
                // Validate each file
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    var fileSize = file.size / 1024 / 1024; // in MB
                    var fileType = file.type;
                    var fileName = file.name;
                    var fileExtension = fileName.split('.').pop().toLowerCase();
                    
                    // Check file size (max 5MB)
                    if (fileSize > 5) {
                        invalidFiles.push(file.name + ' (Exceeds 5MB limit)');
                        continue;
                    }
                    
                    // Check file type by extension (more reliable)
                    var allowedExtensions = ['pdf', 'doc', 'docx', 'jpg', 'jpeg', 'png'];
                    if (!allowedExtensions.includes(fileExtension)) {
                        invalidFiles.push(file.name + ' (Invalid file type)');
                        continue;
                    }
                    
                    validFiles.push(file);
                    
                    // Add to preview
                    var fileItem = `
                        <div class="alert alert-info alert-sm mb-1 p-2">
                            <i class="fa-solid fa-file"></i> ${file.name}
                            <span class="badge bg-secondary float-end">${fileSize.toFixed(2)} MB</span>
                        </div>
                    `;
                    fileList.append(fileItem);
                }
                
                // Show invalid files warning
                if (invalidFiles.length > 0) {
                    var warningHtml = `
                        <div class="alert alert-warning alert-sm mt-2">
                            <strong>Warning:</strong> The following files were skipped:<br>
                            ${invalidFiles.join('<br>')}
                        </div>
                    `;
                    fileList.append(warningHtml);
                }
                
                // Show count
                if (validFiles.length > 0) {
                    fileList.prepend(`
                        <div class="alert alert-success alert-sm mb-2">
                            <i class="fa-solid fa-check-circle"></i> ${validFiles.length} file(s) selected successfully
                        </div>
                    `);
                }
            });

            // Form submission with multiple files
            $(document).on('submit', '.add-sub-activity-comment-form', function(e) {
                e.preventDefault();

                var form = $(this);
                var subActivityId = form.data('sub-activity-id');
                var longTermProjectSubActivityId = form.find('input[name="long_term_project_sub_activity_id"]').val();
                var longTermProjectActivityId = form.find('input[name="long_term_project_activity_id"]').val();
                var longTermProjectId = form.find('input[name="long_term_project_id"]').val();
                var comment = form.find('textarea[name="comment"]').val();
                var state = form.closest('.mb-4').find('.badge:first').text().trim().toUpperCase();
            
                // You need to define these or get them from somewhere
                var stakeholderUserId = {{ Auth::id() ?? 0 }};
                var userId = {{ Auth::id() ?? 0 }};

                var formData = new FormData();
                
                formData.append('long_term_project_sub_activity_id', longTermProjectSubActivityId);
                formData.append('long_term_project_activity_id', longTermProjectActivityId);
                formData.append('long_term_project_id', longTermProjectId);
                formData.append('comment', comment);
                formData.append('stakeholder_user_id', stakeholderUserId);
                formData.append('user_id', userId);
                formData.append('current_state_id', state);
                formData.append('stackholder_category', 'EXTERNAL');
                
                // Get file inputs correctly
                var fileInputs = document.querySelectorAll('#file-container-' + subActivityId + ' input[type="file"]');
                
                if (fileInputs.length === 0) {
                    // Fallback selector
                    var fallbackInputs = form.find('input[name="documents[]"]');
                    fileInputs = fallbackInputs.get();
                }
                
                // Append all files
                fileInputs.forEach(function(input, index) {
                    if (input.files && input.files.length > 0) {
                        for (var i = 0; i < input.files.length; i++) {
                            formData.append('documents[' + index + '][' + i + ']', input.files[i]);
                        }
                    }
                });
                
                // Show loading state
                var submitBtn = form.find('button[type="submit"]');
                var originalText = submitBtn.html();
                submitBtn.prop('disabled', true).html('<i class="fa-solid fa-spinner fa-spin"></i> Updating...');
                
                var scrollPosition = $(window).scrollTop();
                var formPosition = form.offset().top;

                $.ajax({
                    type: 'POST',
                    url: adminURL + 'long-term-project-comments/store',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        //console.log(response);
                        if (response.status == 1) {
                            swal.fire({
                                title: 'Success',
                                text: response.msg,
                                icon: 'success',
                                timer: 2000,
                                showConfirmButton: false
                            }).then(() => {
                                clearCommentForm(form, subActivityId);
                                loadComments(longTermProjectSubActivityId);
                                submitBtn.prop('disabled', false).html(originalText);

                                setTimeout(function() {
                                    $(window).scrollTop(scrollPosition);
                                }, 100);
                            });
                        } else {
                            swal.fire({
                                title: 'Error',
                                text: response.msg,
                                icon: 'error'
                            });
                            submitBtn.prop('disabled', false).html(originalText);
                        }
                    },
                    error: function(xhr) {
                        let errorMsg = 'Something went wrong. Please try again.';
                        if (xhr.responseJSON && xhr.responseJSON.msg) {
                            errorMsg = xhr.responseJSON.msg;
                        }
                        swal.fire({
                            title: 'Error',
                            text: errorMsg,
                            icon: 'error'
                        });
                        submitBtn.prop('disabled', false).html(originalText);
                    }
                });
            });
        });

        function clearCommentForm(form, subActivityId) {
            form.find('textarea[name="comment"]').val('');
            
            var fileInputs = document.querySelectorAll('#file-container-' + subActivityId + ' input[type="file"]');
            
            if (fileInputs.length === 0) {
                fileInputs = form.find('input[name="documents[]"]').get();
            }
            
            fileInputs.forEach(function(input) {
                input.value = '';
            });
            
            form.find('.file-preview, .file-name, .selected-files').remove();
            
            var fileContainer = $('#file-container-' + subActivityId);
            if (fileContainer.length) {
                fileContainer.find('.file-list').empty();
                
                fileContainer.find('.file-name').text('');
                fileContainer.find('.selected-file-count').text('');
            }
            
            var submitBtn = form.find('button[type="submit"]');
            submitBtn.prop('disabled', false);
            
            form.find('textarea[name="comment"]').trigger('change');
        }

        function loadComments(subActivityId) {
            var container = $('#comments-container-' + subActivityId);
            console.log("Loading comments for:", subActivityId);
            
            if (!container.length) {
                console.error("Container not found for:", subActivityId);
                return;
            }
            
            container.html('<div class="text-center text-muted"><small>Loading comments...</small></div>');
            
            $.ajax({
                type: "GET",
                url: adminURL + "long-term-project-comments/" + subActivityId + "/comments",
                success: function(response) {
                    container.html(response);
                    commentsLoaded[subActivityId] = true;
                    console.log("Comments loaded successfully for:", subActivityId);
                },
                error: function(xhr, status, error) {
                    console.error("Error fetching comments:", error);
                    container.html('<p class="text-danger">Error loading comments. <a href="#" onclick="loadComments(' + subActivityId + '); return false;">Try again</a></p>');
                }
            });
        }
    </script>
@endsection