@extends('layouts.sneat')

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">

        <h4 class="fw-bold mb-4">Project Management</h4>

        {{-- SUCCESS --}}
        @if (session('success'))
            <script>
                Swal.fire({
                    icon: 'success',
                    title: 'Success',
                    text: "{{ session('success') }}",
                    confirmButtonText: 'OK',
                    customClass: {
                        confirmButton: 'btn btn-primary'
                    },
                    buttonsStyling: false
                });
            </script>
        @endif

        {{-- ERRORS --}}
        @if ($errors->any())
            <script>
                Swal.fire({
                    icon: 'error',
                    title: 'Validation Error',
                    html: `{!! implode('<br>', $errors->all()) !!}`,
                    confirmButtonText: 'Fix it',
                    customClass: {
                        confirmButton: 'btn btn-danger'
                    },
                    buttonsStyling: false
                });
            </script>
        @endif

        {{-- ADD PROJECT --}}
        <button type="button" class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#addProjectModal">
            <i class="bx bx-plus"></i> Add Project
        </button>
        <div class="modal fade" id="addProjectModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-md modal-dialog-centered">
                <form id="addProjectForm" method="POST" action="{{ route('projects.store') }}">
                    @csrf
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Add Project</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label class="form-label">Project Name</label>
                                <input type="text" name="project_name" class="form-control" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Project Category</label>
                                <select name="project_category_id" class="form-select" required>
                                    <option value="">-- Select Category --</option>
                                    @foreach ($projectCategories as $cat)
                                        <option value="{{ $cat->id }}">{{ $cat->category }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Client</label>
                                <select name="contact_id" class="form-select" required>
                                    <option value="">-- Select Client --</option>
                                    @foreach ($contacts as $c)
                                        <option value="{{ $c->id }}">{{ $c->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary" onclick="confirmSaveProject()">Save</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>


        {{-- PROJECT LIST --}}
        <div>
            <div class="card-header">
                <h6>Project List</h6>
            </div>
            <div class="row g-3">
                @forelse($projects as $p)
                    <div class="col-md-6 col-lg-4">
                        <div class="card h-100">
                            <div class="card-header d-flex justify-content-between align-items-start">
                                <div>
                                    <h6 class="mb-1">
                                        <a href="#" data-bs-toggle="offcanvas"
                                            data-bs-target="#updateOffcanvas{{ $p->id }}"
                                            aria-controls="updateOffcanvas{{ $p->id }}">
                                            {{ $p->project_name }}
                                        </a>
                                    </h6>
                                    <small class="text-muted">{{ $p->projectCategory->category }}</small>
                                    <br>
                                    <small class="text-muted">Client: {{ $p->contact->name ?? '-' }}</small>
                                </div>
                                {{-- <span class="badge bg-primary rounded-pill">{{ $loop->iteration }}</span> --}}
                            </div>

                            <div class="card-body">
                                {{-- Status Badges --}}
                                @php
                                    $statusCounts = $p->updates->groupBy('status')->map(fn($items) => $items->count());
                                @endphp

                                @foreach ($statusCounts as $status => $count)
                                    @php
                                        $badgeClass = match ($status) {
                                            'updation' => 'bg-label-success',
                                            'modification' => 'bg-label-warning',
                                            'revision' => 'bg-label-danger',
                                            default => 'bg-secondary',
                                        };
                                    @endphp
                                    <a href="#" class="badge {{ $badgeClass }} rounded mt-1" data-bs-toggle="modal"
                                        data-bs-target="#statusModal" data-project-id="{{ $p->id }}"
                                        data-status="{{ $status }}">
                                        {{ ucfirst($status) }} ({{ $count }})
                                    </a>
                                @endforeach
                            </div>

                            <div class="card-footer d-flex flex-wrap gap-1">
                                {{-- QUESTIONNAIRE --}}
                                <button class="btn btn-sm btn-outline-success" data-bs-toggle="modal"
                                    data-bs-target="#questionnaireModal{{ $p->id }}">
                                    <i class="bx bx-question-mark"></i> Questionnaire
                                </button>
                                {{-- GENERATE PDF --}}
                                <button type="button" class="btn btn-sm btn-outline-secondary"
                                    onclick="confirmGenerate({{ $p->id }})">
                                    <i class="bx bx-file"></i> PDF
                                </button>

                                {{-- UPDATE ACTION --}}
                                <button type="button" class="btn btn-sm btn-outline-warning" data-bs-toggle="modal"
                                    data-bs-target="#updateActionModal{{ $p->id }}">
                                    <i class="bx bx-edit"></i> Update Action
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-dark" data-bs-toggle="modal"
                                    data-bs-target="#callChatModal{{ $p->id }}">
                                    <i class="bx bx-phone-call"></i> Call & Chat
                                </button>







                                <button type="button" class="btn btn-sm btn-outline-info"
                                    onclick="window.open('{{ route('projects.combined-pdf', $p->id) }}', '_blank')">
                                    <i class="bx bx-file"></i> Combined PDF
                                </button>
                                {{-- OFFCANVAS --}}
                                <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="offcanvas"
                                    data-bs-target="#updateOffcanvas{{ $p->id }}">
                                    <i class="bx bx-edit-alt"></i> View Updates
                                </button>

                                {{-- DELETE --}}
                                <form id="delete-form-{{ $p->id }}" method="POST"
                                    action="{{ route('projects.destroy', $p->id) }}" class="d-none">
                                    @csrf
                                    @method('DELETE')
                                </form>
                                <button type="button" class="btn btn-sm btn-outline-danger"
                                    onclick="confirmDelete({{ $p->id }})">
                                    <i class="bx bx-trash"></i> Delete
                                </button>
                            </div>


                            <div class="modal fade" id="callChatModal{{ $p->id }}">
                                <div class="modal-dialog modal-lg modal-dialog-scrollable">
                                    <form method="POST" action="{{ route('projects.call-chat.chatstore', $p->id) }}"
                                        enctype="multipart/form-data">

                                        @csrf
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5>Call & Chat – {{ $p->project_name }}</h5>
                                                <button type="button" class="btn-close"
                                                    data-bs-dismiss="modal"></button>
                                            </div>

                                            <div class="modal-body">
                                                {{-- TYPE --}}
                                                <div class="mb-3">
    <label class="form-label fw-bold">Type</label>
    <select name="type" class="form-select" required>
        <option value="">-- Select --</option>
        <option value="call">📞 Call</option>
        <option value="chat">💬 Chat</option>
        <option value="meeting">📅 Meeting</option>
    </select>
</div>


                                                {{-- SUMMARY --}}
                                                <div class="mb-3">
                                                    <label class="form-label fw-bold">Summary / Notes</label>
                                                    <textarea name="message" class="form-control" rows="4" required></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label fw-bold">Attachment (optional)</label>
                                                    <input type="file" name="attachment" class="form-control">
                                                </div>


                                                {{-- FOLLOW UP --}}
                                                <div class="mb-3">
                                                    <label class="form-label fw-bold">Follow-up Date (optional)</label>
                                                    <input type="date" name="follow_up_date" class="form-control">
                                                </div>

                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                        data-bs-dismiss="modal">Close</button>
                                                    <button type="submit" class="btn btn-primary">Save</button>
                                                </div>

                                                {{-- HISTORY --}}
                                                <hr>
                                                {{-- HISTORY TOGGLE BUTTON --}}

                                                <button class="btn btn-outline-primary mb-2" type="button"
                                                    data-bs-toggle="collapse"
                                                    data-bs-target="#callChatTimeline{{ $p->id }}"
                                                    aria-expanded="false"
                                                    aria-controls="callChatTimeline{{ $p->id }}">
                                                    View History
                                                </button>

                                                <div class="collapse" id="callChatTimeline{{ $p->id }}">
                                                    @forelse($p->callChats->sortBy('created_at') as $log)
                                                        <div class="d-flex mb-3">
                                                            {{-- Badge for call/chat --}}
                                                            <div class="flex-shrink-0 me-2">
                                                                <span
                                                                    class="badge {{ $log->type == 'call' ? 'bg-success' : 'bg-info' }}">
                                                                    {{ ucfirst($log->type) }}
                                                                </span>
                                                            </div>

                                                            {{-- Timeline content --}}
                                                            <div class="flex-grow-1 border rounded p-2"
                                                                style="background: #f9f9f9;">
                                                                <p class="small">Logged by:
                                                                    {{ $log->user->name ?? 'Unknown' }} (ID:
                                                                    {{ $log->user_id }})</p>

                                                                <p class="mb-1">{{ $log->message }}</p>

                                                                @if ($log->attachment)
                                                                    <a href="{{ asset('storage/' . $log->attachment) }}"
                                                                        target="_blank" class="d-block mb-1">
                                                                        📎 View Attachment
                                                                    </a>
                                                                @endif

                                                                @if ($log->follow_up_date)
                                                                    <small class="d-block text-muted">Follow-up:
                                                                        {{ $log->follow_up_date->format('d M Y') }}</small>
                                                                @endif

                                                                {{--  <small class="text-muted">Logged: {{ $log->created_at->format('d M Y, h:i A') }}</small> --}}

                                                                <small class="text-muted">Logged:
                                                                    {{ $log->created_at->timezone('Asia/Kolkata')->format('d M Y, h:i A') }}</small>

                                                            </div>
                                                        </div>
                                                    @empty
                                                        <p class="text-muted">No call/chat history yet.</p>
                                                    @endforelse

                                                     <a href="{{ route('projects.call-chat.history-pdf', $p->id) }}"
                                                                target="_blank" class="btn btn-outline-success mb-2">
                                                                Download History PDF
                                                            </a>
                                                </div>


                                            </div>


                                        </div>
                                    </form>
                                </div>
                            </div>


                            {{-- OFFCANVAS --}}
                            <div class="offcanvas offcanvas-end" tabindex="-1" id="updateOffcanvas{{ $p->id }}"
                                aria-labelledby="updateOffcanvasLabel{{ $p->id }}">
                                <div class="offcanvas-header">
                                    <h5 id="updateOffcanvasLabel{{ $p->id }}">Questionnaire –
                                        {{ $p->project_name }}</h5>
                                    <button type="button" class="btn-close text-reset"
                                        data-bs-dismiss="offcanvas"></button>
                                </div>
                                <div class="offcanvas-body">
                                    <form id="offcanvasUpdateForm{{ $p->id }}" method="POST"
                                        action="{{ route('project-updates.bulk-update', $p->id) }}">
                                        @csrf
                                        @if ($p->updates->count() > 0)
                                            <div class="mb-3">
                                                @foreach ($p->updates->sortByDesc('created_at') as $update)
                                                    <div class="card mb-2 p-2">
                                                        <input type="hidden" name="updates[{{ $update->id }}][id]"
                                                            value="{{ $update->id }}">
                                                        <strong>{{ $update->title }}</strong>

                                                        <div class="mb-1">
                                                            <label for="description{{ $update->id }}"
                                                                class="form-label">Description</label>
                                                            <textarea class="form-control" id="description{{ $update->id }}" name="updates[{{ $update->id }}][description]"
                                                                rows="2">{{ $update->description }}</textarea>
                                                        </div>

                                                        <div class="mb-1">
                                                            <label class="form-label d-block">Status</label>
                                                            @foreach (['updation', 'modification', 'revision'] as $s)
                                                                <div class="form-check form-check-inline">
                                                                    <input class="form-check-input" type="radio"
                                                                        name="updates[{{ $update->id }}][status]"
                                                                        id="{{ $s }}{{ $update->id }}"
                                                                        value="{{ $s }}"
                                                                        {{ $update->status == $s ? 'checked' : '' }}>
                                                                    <label class="form-check-label"
                                                                        for="{{ $s }}{{ $update->id }}">{{ ucfirst($s) }}</label>
                                                                </div>
                                                            @endforeach
                                                        </div>

                                                        @if ($update->attachment)
                                                            <div class="mb-1">
                                                                <a href="{{ asset('storage/' . $update->attachment) }}"
                                                                    target="_blank">View Attachment</a>
                                                            </div>
                                                        @endif
                                                        <small>{{ $update->created_at->timezone('Asia/Kolkata')->format('d M Y, h:i A') }}</small>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @else
                                            <p>No updates found for this project.</p>
                                        @endif
                                        <div class="mt-3">
                                            <button type="submit" class="btn btn-primary">Save All</button>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            {{-- QUESTIONNAIRE MODAL --}}
                            <div class="modal fade" id="questionnaireModal{{ $p->id }}">
                                <div class="modal-dialog modal-xl modal-dialog-scrollable">
                                    <form id="questionnaireForm{{ $p->id }}" method="POST"
                                        action="{{ route('projects.questionnaire.store', $p->id) }}">
                                        @csrf
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5>Questionnaire – {{ $p->project_name }}</h5>
                                            </div>
                                            <div class="modal-body">
                                                <input type="hidden" name="project_category_id"
                                                    value="{{ $p->project_category_id }}">

                                                {{-- QUESTIONNAIRE CATEGORY --}}
                                                <div class="mb-3">
                                                    <label class="form-label fw-bold">Question Category</label>
                                                    <select name="category_id" class="form-select"
                                                        onchange="loadProjectQuestions(this, {{ $p->id }})">
                                                        <option value="">-- Select --</option>
                                                        @foreach ($qcategories as $cat)
                                                            <option value="{{ $cat->id }}">{{ $cat->name }}
                                                            </option>
                                                        @endforeach
                                                        <option value="__new__">➕ Add New</option>
                                                    </select>
                                                </div>

                                                {{-- NEW CATEGORY --}}
                                                <div class="mb-3 d-none" id="newCategoryBox{{ $p->id }}">
                                                    <label class="form-label fw-bold">New Category</label>
                                                    <input type="text" name="new_category" class="form-control">
                                                </div>

                                                {{-- QUESTIONS --}}
                                                <div class="d-none" id="categorySection{{ $p->id }}">
                                                    <div id="categoryQuestions{{ $p->id }}"></div>
                                                    <button type="button" class="btn btn-sm btn-outline-primary mt-2"
                                                        onclick="addCustomQuestion('categoryQuestions{{ $p->id }}')">+
                                                        Add Question
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                    data-bs-dismiss="modal">Close</button>
                                                <button type="button" class="btn btn-primary"
                                                    onclick="confirmSaveQuestionnaire({{ $p->id }})">Save
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            {{-- UPDATE ACTION MODAL --}}
                            <div class="modal fade" id="updateActionModal{{ $p->id }}">
                                <div class="modal-dialog modal-lg modal-dialog-scrollable">
                                    <form method="POST" action="{{ route('projects.updateAction.store', $p->id) }}"
                                        enctype="multipart/form-data">
                                        @csrf
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5>Project Update – {{ $p->project_name }}</h5>
                                                <button type="button" class="btn-close"
                                                    data-bs-dismiss="modal"></button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="mb-3">
                                                    <label class="form-label fw-bold">Title</label>
                                                    <input type="text" name="title" class="form-control" required>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label fw-bold">Description</label>
                                                    <textarea name="description" class="form-control" rows="4" required></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label fw-bold">Attachment</label>
                                                    <input type="file" name="attachment" class="form-control">
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                    data-bs-dismiss="modal">Close</button>
                                                <button type="submit" class="btn btn-primary">Save Update</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="alert alert-info text-center">No projects found</div>
                    </div>
                @endforelse
            </div>

        </div>
        {{-- END PROJECT LIST --}}
    </div>

    {{-- STATUS FILTER MODAL --}}
    <div class="modal fade" id="statusModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Project Updates</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered" id="updatesTable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Update</th>
                                <th>Details</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button id="generateRevisionPdfBtn" type="button" class="btn btn-primary d-none">
                        <i class="bx bx-file"></i> Generate Revision PDF
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>



    {{-- JS --}}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        // SweetAlert confirmations
        function confirmDelete(projectId) {
            Swal.fire({
                title: 'Are you sure?',
                text: "This project will be permanently deleted!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel',
                customClass: {
                    confirmButton: 'btn btn-danger me-2',
                    cancelButton: 'btn btn-secondary'
                },
                buttonsStyling: false
            }).then((result) => {
                if (result.isConfirmed) document.getElementById('delete-form-' + projectId).submit();
            });
        }

        function confirmSaveProject() {
            Swal.fire({
                title: 'Save Project?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Yes, save it!',
                cancelButtonText: 'Cancel',
                customClass: {
                    confirmButton: 'btn btn-primary me-2',
                    cancelButton: 'btn btn-secondary'
                },
                buttonsStyling: false
            }).then((result) => {
                if (result.isConfirmed) document.getElementById('addProjectForm').submit();
            });
        }

        function confirmSaveQuestionnaire(projectId) {
            Swal.fire({
                title: 'Save Questionnaire?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Yes, save!',
                cancelButtonText: 'Cancel',
                customClass: {
                    confirmButton: 'btn btn-primary me-2',
                    cancelButton: 'btn btn-secondary'
                },
                buttonsStyling: false
            }).then((result) => {
                if (result.isConfirmed) document.getElementById('questionnaireForm' + projectId).submit();
            });
        }

        function confirmGenerate(projectId) {
            Swal.fire({
                title: 'Generate Questionnaire?',
                text: "The PDF will open in a new tab.",
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Yes, generate!',
                cancelButtonText: 'Cancel',
                customClass: {
                    confirmButton: 'btn btn-info me-2',
                    cancelButton: 'btn btn-secondary'
                },
                buttonsStyling: false
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Generating PDF...',
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading()
                    });
                    window.open('/projects/' + projectId + '/questionnaire/generate', '_blank');
                    Swal.close();
                }
            });
        }

        // Load Project Questions
        function loadProjectQuestions(select, projectId) {
            const categoryId = select.value;
            const wrapper = document.getElementById('categoryQuestions' + projectId);
            const section = document.getElementById('categorySection' + projectId);
            const newBox = document.getElementById('newCategoryBox' + projectId);

            wrapper.innerHTML = '';
            if (!categoryId) {
                section.classList.add('d-none');
                newBox.classList.add('d-none');
                return;
            }
            if (categoryId === '__new__') {
                newBox.classList.remove('d-none');
                section.classList.remove('d-none');
                addCustomQuestion('categoryQuestions' + projectId);
                return;
            }

            newBox.classList.add('d-none');
            section.classList.remove('d-none');

            fetch(`/projects/${projectId}/category-questions/${categoryId}`)
                .then(res => res.json())
                .then(data => {
                    if (!data.length) {
                        addCustomQuestion('categoryQuestions' + projectId);
                        return;
                    }
                    data.forEach(q => {
                        const div = document.createElement('div');
                        div.className = 'mb-2 question-item';
                        div.innerHTML = `
                        <input type="hidden" name="question_ids[]" value="${q.id}">
                        <input name="custom_questions[]" class="form-control mb-1" value="${q.question}" readonly>
                        <textarea name="custom_answers[]" class="form-control" rows="2">${q.answer}</textarea>
                        <button type="button" class="btn btn-sm btn-danger mt-1" onclick="this.closest('.question-item').remove()">Remove</button>
                    `;
                        wrapper.appendChild(div);
                    });
                });
        }

        function addCustomQuestion(containerId) {
            const wrapper = document.getElementById(containerId);
            const div = document.createElement('div');
            div.className = 'mb-2 question-item';
            div.innerHTML = `
            <input name="custom_questions[]" class="form-control mb-1" placeholder="Question" required>
            <textarea name="custom_answers[]" class="form-control" rows="2" placeholder="Answer"></textarea>
            <button type="button" class="btn btn-sm btn-danger mt-1" onclick="this.closest('.question-item').remove()">Remove</button>
        `;
            wrapper.appendChild(div);
        }

        // Status Modal AJAX

        document.addEventListener('DOMContentLoaded', function() {
            const statusModal = document.getElementById('statusModal');
            const updatesTableBody = statusModal.querySelector('tbody');
            const generatePdfBtn = document.getElementById('generateRevisionPdfBtn');

            document.querySelectorAll('a[data-bs-target="#statusModal"]').forEach(badge => {
                badge.addEventListener('click', function() {
                    const projectId = this.dataset.projectId;
                    const status = this.dataset.status;

                    updatesTableBody.innerHTML = '';
                    generatePdfBtn.classList.add('d-none'); // hide by default

                    fetch(`/projects/${projectId}/updates/${status}`)
                        .then(res => res.json())
                        .then(data => {
                            if (data.length === 0) {
                                updatesTableBody.innerHTML =
                                    `<tr><td colspan="3" class="text-center">No updates found.</td></tr>`;
                                return;
                            }

                            data.forEach((update, index) => {
                                const attachmentLink = update.attachment ?
                                    `<a href="/storage/${update.attachment}" target="_blank">View</a>` :
                                    '-';
                                const createdAt = new Date(update.created_at)
                                    .toLocaleString('en-IN', {
                                        day: '2-digit',
                                        month: 'short',
                                        year: 'numeric',
                                        hour: '2-digit',
                                        minute: '2-digit',
                                        hour12: true
                                    });

                                updatesTableBody.innerHTML += `
                            <tr>
                                <td>${index + 1}</td>
                                <td>
                                    <strong>${update.title}</strong><br>
                                    ${update.description}
                                </td>
                                <td>
                                    <span class="badge ${update.status === 'updation' ? 'bg-label-success rounded' : (update.status === 'modification' ? 'bg-label-warning rounded' : 'bg-label-danger rounded')}">${update.status}</span><br>
                                    ${createdAt}<br>
                                    ${attachmentLink}
                                </td>
                            </tr>
                        `;
                            });

                            // Show PDF button only for revision
                            if (status === 'revision') {
                                generatePdfBtn.classList.remove('d-none');
                                generatePdfBtn.onclick = function() {
                                    window.open(
                                        `/projects/${projectId}/updates/revision/pdf`,
                                        '_blank');
                                };
                            }
                        });
                });
            });
        });
    </script>

@endsection