@extends('layouts.contentNavbarLayout')

@section('content')
    <div class="container mt-4">
        @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

        <h2 class="text-center">Minutes of Meeting (MoM) Management</h2>

        <!-- Add New Meeting Button -->
        <button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#meetingOffcanvas" aria-controls="meetingOffcanvas">
            Add New Meeting
        </button>

        <!-- Meeting List Table -->
        <table class="table table-bordered mt-4">
            <thead>
                <tr>
                    <th>Venue</th>
                    <th>Title</th>
                    <th>Meeting Date</th>
                    <th>Attendees</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($meetings as $meeting)
                    <tr>
                        <td>{{ $meeting->venue }}</td>
                        <td>{{ $meeting->title }}</td>
                        <td>{{ \Carbon\Carbon::parse($meeting->meeting_date)->format('d M Y h:i A') }}</td>
                        <td>
                            {{ implode(', ', $meeting->attendee_names) }}
                        </td>
                        
                        <td class="actions">
                            <!-- View Button -->
                            <a type="button" data-bs-toggle="modal" data-bs-target="#viewModal{{ $meeting->id }}"><span class="mdi mdi-table-headers-eye text-secondary ri-22px me-2"></span></a>
                            <!-- Edit Button -->
                            <a type="button" data-bs-toggle="offcanvas" data-bs-target="#editOffcanvas{{ $meeting->id }}" aria-controls="editOffcanvas{{ $meeting->id }}">
                                <span class="mdi mdi-clipboard-edit-outline text-secondary ri-22px me-2"></span></a>
                            <!-- Delete Button -->
                            <a type="button"  data-bs-toggle="modal" data-bs-target="#deleteModal{{ $meeting->id }}">
                                <span class="mdi mdi-delete-empty-outline text-secondary ri-35px me-2"></span>
                            </a>

                            <!-- Bootstrap Modal for Confirmation -->
                            <div class="modal fade" id="deleteModal{{ $meeting->id }}" tabindex="-1" aria-labelledby="deleteModalLabel{{ $meeting->id }}" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="deleteModalLabel{{ $meeting->id }}">Confirm Deletion</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            Are you sure you want to delete this meeting? This action cannot be undone.
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                            <form action="{{ route('meetings.destroy', $meeting->id) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger">Delete</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                  

                   

                    <!-- Edit Offcanvas -->
                    <div class="offcanvas offcanvas-end w-50" tabindex="-1" id="editOffcanvas{{ $meeting->id }}" aria-labelledby="editOffcanvasLabel{{ $meeting->id }}">
                        <div class="offcanvas-header">
                            <h5 class="offcanvas-title" id="editOffcanvasLabel{{ $meeting->id }}">Edit Meeting</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                        </div>
                        <div class="offcanvas-body">
                            <form action="{{ route('meetings.update', $meeting->id) }}" method="POST">
                                @csrf
                                @method('PUT')
                                <div class="mb-3">
                                    <label for="title" class="form-label">Title</label>
                                    <input type="text" class="form-control" id="title" name="title" value="{{ $meeting->title }}">
                                </div>
                                <div class="mb-3">
                                    <label for="meeting_date" class="form-label">Meeting Date</label>
                                    <input type="datetime-local" class="form-control" id="meeting_date" name="meeting_date" value="{{ $meeting->meeting_date }}">
                                </div>
                                <div class="mb-3">
                                    <label for="venue" class="form-label">Venue</label>
                                    <input type="text" class="form-control" id="venue" name="venue" value="{{ $meeting->venue }}">
                                </div>
                                <div class="mb-3">
                                    <label for="organizer" class="form-label">Organizer</label>
                                    <input type="text" class="form-control" id="organizer" name="organizer" value="{{ $meeting->organizer }}">
                                </div>
                                <div class="mb-3">
                                    <label for="client_id" class="form-label">Select Client</label>
                                    <select class="form-select" name="client" id="client" required>
                                        <option value="">-- Choose Client --</option>
                                        @foreach ($clients as $client)
                                            <option value="{{ $client->id }}" 
                                                    @if(old('client', $meeting->client) == $client->id) selected @endif>
                                                {{ $client->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                
                                
                                <div class="mb-3">
                                    <label for="attendees" class="form-label">Attendees</label>
                                    <div class="form-check"  style="display: block;">
                                        @foreach ($users as $user)
                                            @php
                                                $attendees = json_decode($meeting->attendees ?? '[]');
                                            @endphp
                                            <input class="form-check-input" type="checkbox" name="attendees[]" value="{{ $user->id }}" 
                                                {{ in_array($user->id, $attendees ?? []) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="attendees{{ $user->id }}">
                                                {{ $user->name }}
                                            </label><br>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="agenda" class="form-label">Agenda</label>
                                    <textarea class="form-control" id="agenda" name="agenda">{{ $meeting->agenda }}</textarea>
                                </div>
                                <div class="mb-3">
                                    <label for="discussion_points" class="form-label">Discussion Points</label>
                                    <textarea class="form-control" id="discussion_points" name="discussion_points">{{ $meeting->discussion_points }}</textarea>
                                </div>
                                <div class="mb-3">
                                    <label for="decisions_made" class="form-label">Decisions Made</label>
                                    <textarea class="form-control" id="decisions_made" name="decisions_made">{{ $meeting->decisions_made }}</textarea>
                                </div>
                                <div class="mb-3">
                                    <label for="next_meeting_date" class="form-label">Next Meeting Date</label>form-check
                                    <input type="datetime-local" class="form-control" id="next_meeting_date" name="next_meeting_date" value="{{ $meeting->next_meeting_date }}">
                                </div>
                                <div class="mb-3">
                                    <label for="next_meeting_location" class="form-label">Next Meeting Location</label>
                                    <input type="text" class="form-control" id="next_meeting_location" name="next_meeting_location" value="{{ $meeting->next_meeting_location }}">
                                </div>
                                <div class="mb-3">
                                    <label for="next_meeting_agenda" class="form-label">Next Meeting Agenda</label>
                                    <textarea class="form-control" id="next_meeting_agenda" name="next_meeting_agenda">{{ $meeting->next_meeting_agenda }}</textarea>
                                </div>
                                <div class="mb-3">
                                    <label for="prepared_by" class="form-label">Prepared By</label>
                                    <input type="text" class="form-control" id="prepared_by" name="prepared_by" value="{{ $meeting->prepared_by }}">
                                </div>
                                <div class="mb-3">
                                    <label for="approved_by" class="form-label">Approved By</label>
                                    <input type="text" class="form-control" id="approved_by" name="approved_by" value="{{ $meeting->approved_by }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Action Items</label>
                                    @foreach ($meeting->actionItems as $index => $actionItem)
                                        <div class="card mb-2 p-3 bg-light">
                                            <!-- Hidden field for the action item ID -->
                                            <input type="hidden" name="action_items[{{ $index }}][id]" value="{{ $actionItem->id }}">
                                            <input type="hidden" name="action_items[{{ $index }}][minute_meeting_id]" value="{{ $actionItem->minute_meeting_id }}">
                                            
                                            <!-- Agenda Item Field -->
                                            <div class="mb-2">
                                                <label class="form-label">Agenda Item</label>
                                                <textarea class="form-control" name="action_items[{{ $index }}][agenda_item]">{{ $actionItem->agenda_item }}</textarea>
                                            </div>
                                
                                            <!-- Discussion Summary Field -->
                                            <div class="mb-2">
                                                <label class="form-label">Discussion Summary</label>
                                                <textarea class="form-control" name="action_items[{{ $index }}][discussion_summary]">{{ $actionItem->discussion_summary }}</textarea>
                                            </div>
                                
                                            <!-- Action Item Field -->
                                            <div class="mb-2">
                                                <label class="form-label">Action Item</label>
                                                <textarea class="form-control" name="action_items[{{ $index }}][action_item]">{{ $actionItem->action_item }}</textarea>
                                            </div>
                                
                                            <!-- Assigned To Field -->
                                            <div class="mb-2">
                                                <label class="form-label">Assigned To</label>
                                                <div>
                                                    @php
                                                        // Decode the responsible_persons JSON to an array
                                                        $assignedUsers = json_decode($actionItem->responsible_persons ?? '[]');
                                                    @endphp
                                                    @foreach($users as $user)
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" name="action_items[{{ $index }}][assigned_to][]" value="{{ $user->id }}" 
                                                                {{ in_array($user->id, $assignedUsers) ? 'checked' : '' }}>
                                                            <label class="form-check-label" for="assigned_to_{{ $user->id }}">
                                                                {{ $user->name }}
                                                            </label>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                
                                            <!-- Due Date Field -->
                                            <div class="mb-2">
                                                <label class="form-label">Due Date</label>
                                                <input type="datetime-local" class="form-control" name="action_items[{{ $index }}][deadline]" value="{{ $actionItem->deadline }}">
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                
                                
                                
                                
                                
                                <button type="submit" class="btn btn-primary">Save Changes</button>
                            </form>
                        </div>
                    </div>
                    
                @endforeach
            </tbody>
        </table>



         <!-- View Modal -->
         @foreach ($meetings as $meeting)
         <div class="modal fade" id="viewModal{{ $meeting->id }}" tabindex="-1" aria-labelledby="viewModalLabel{{ $meeting->id }}" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="viewModalLabel{{ $meeting->id }}">
                            MINUTES OF MEETING - {{ $meeting->title ?? 'Meeting' }}
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
        
                    <div class="modal-body">
                        <p><strong>Meeting Title:</strong> {{ $meeting->title }}</p>
                        <p><strong>Date:</strong> {{ \Carbon\Carbon::parse($meeting->meeting_date)->format('d M Y h:i A') ?? '' }} </p>
                        <p><strong>Venue/Platform:</strong> {{ $meeting->venue }} </p>
                        <p><strong>Client:</strong> {{ $meeting->clientmodal->name }}</p>
                        <p><strong>Organizer:</strong> {{ $meeting->organizer }}</p>
        
                        <hr>
                        <h6><strong>Attendees:</strong></h6>
                        <ul>
                            @foreach ($meeting->attendee_names ?? [] as $attendee)
                                <li>{{ $attendee }}</li>
                            @endforeach
                        </ul>
        
                        <h6><strong>Agenda Items:</strong></h6>
                        <ol>
                            @foreach (explode("\n", $meeting->agenda ?? '') as $item)
                                @if (trim($item) != '')
                                    <li>{{ $item }}</li>
                                @endif
                            @endforeach
                        </ol>
        
                        <h6><strong>Discussion Points & Key Decisions:</strong></h6>
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead class="table-light">
                                    <tr>
                                        <th>Agenda Item</th>
                                        <th>Discussion Summary</th>
                                        <th>Action Items</th>
                                        <th>Responsible Person(s)</th>
                                        <th>Deadline</th>
                                    </tr>
                                </thead>
                                <tbody>
                                                                    @foreach ($meeting->actionItems ?? [] as $row)
                                        <tr>
                                            <td>{{ $row->agenda_item ?? '' }}</td>
                                            <td>{{ $row->discussion_summary ?? '' }}</td>
                                            <td>{{ $row->action_item ?? '' }}</td>
                                            <td>
                                                @php
                                                    $names = [];
                                                    $ids = json_decode($row->responsible_persons, true);
                                                    if (is_array($ids)) {
                                                        $names = \App\Models\User::whereIn('id', $ids)->pluck('name')->toArray();
                                                    }
                                                @endphp
                                                {{ implode(', ', $names) }}
                                            </td>
                                            <td>{{ \Carbon\Carbon::parse($row->deadline)->format('d M Y h:i A') ?? '' }}</td>
                                        </tr>
                                    @endforeach

                                </tbody>
                            </table>
                        </div>
        
                        {{-- <h6><strong>Action Items & Next Steps:</strong></h6>
                        <ul>
                            @foreach ($meeting->actionItems ?? [] as $step)
                            {{ $step->discussion_summary ?? '' }} -   @php
                            $names = [];
                            $ids = json_decode($step->responsible_persons, true);
                            if (is_array($ids)) {
                                $names = \App\Models\User::whereIn('id', $ids)->pluck('name')->toArray();
                            }
                        @endphp
                        {{ implode(', ', $names) }}
                            @endforeach
                        </ul> --}}
                        <h6><strong>Action Items & Next Steps:</strong></h6>
<ul>
    @foreach ($meeting->actionItems ?? [] as $step)
        @php
            $names = [];
            $ids = json_decode($step->responsible_persons, true);
            if (is_array($ids)) {
                $names = \App\Models\User::whereIn('id', $ids)->pluck('name')->toArray();
            }
            $responsibleText = '';
            if (count($names) === 1) {
                $responsibleText = $names[0] . ' will handle this task.';
            } elseif (count($names) === 2) {
                $responsibleText = $names[0] . ' and ' . $names[1] . ' will work together on this.';
            } elseif (count($names) > 2) {
                $last = array_pop($names);
                $responsibleText = implode(', ', $names) . ', and ' . $last . ' will collaboratively complete this.';
            }
        @endphp
        <li>
            {{ ucfirst($step->discussion_summary ?? '') }} {{ $responsibleText }}
        </li>
    @endforeach
</ul>

        
                        <h6><strong>Sessions and Coverage:</strong></h6>
                       
                        <ol>
                            @foreach (explode("\n", $meeting->discussion_points ?? '') as $points)
                                @if (trim($points) != '')
                                    <li>{{ $points }}</li>
                                @endif
                            @endforeach
                        </ol>

        
                        <h6><strong>Decisions Made:</strong></h6>
                        <ol>
                            @foreach (explode("\n", $meeting->decisions_made ?? '') as $decision)
                                @if (trim($decision) != '')
                                    <li>{{ $decision }}</li>
                                @endif
                            @endforeach
                        </ol>
        
                        <h6><strong>Next Meeting Details:</strong></h6>
                        <p><strong>Date & Time:</strong>  {{ \Carbon\Carbon::parse($meeting->next_meeting_date)->format('d M Y h:i A') ?? 'To be updated' }}</p>
                        <p><strong>Location/Platform:</strong> {{ $meeting->next_meeting_location ?? 'Online' }}</p>
                        <p><strong>Agenda:</strong> {{ $meeting->next_meeting_agenda ?? 'Checking status of first meeting actions' }}</p>
        
                        <p><strong>Prepared By:</strong> {{ $meeting->prepared_by }}</p>
                        <p><strong>Reviewed & Approved By:</strong> {{ $meeting->approved_by }}</p>

                        
                    </div>

                    <div class="modal-footer">
                        <!-- Print Button -->
                  
                        <!-- Download PDF Button -->
                        <a href="{{ route('meetings.downloadPdf', $meeting->id) }}" target="_blank" class="btn btn-sm btn-outline-primary">
                            <i class="bi bi-file-earmark-pdf"></i> Download PDF
                        </a>
                    </div>

                   
                    
                    
                </div>
            </div>
        </div>
        
        @endforeach




        <!-- Offcanvas for Add New Meeting -->
        <div class="offcanvas offcanvas-end w-50" tabindex="-1" id="meetingOffcanvas" aria-labelledby="meetingOffcanvasLabel">
            <div class="offcanvas-header ">
                <h5 class="offcanvas-title" id="meetingOffcanvasLabel">Add New Meeting</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <form action="{{ route('meetings.store') }}" method="POST" class="needs-validation" novalidate>
                    @csrf
                    <div class="mb-3">
                        <label for="title" class="form-label fw-bold text-dark">Title</label>
                        <input type="text" class="form-control shadow-sm" id="title" name="title" required>
                        <div class="invalid-feedback">
                            Please provide a meeting title.
                        </div>
                    </div>
        
                    <div class="mb-3">
                        <label for="meeting_date" class="form-label fw-bold text-dark">Meeting Date</label>
                        <input type="datetime-local" class="form-control shadow-sm" id="meeting_date" name="meeting_date" required>
                        <div class="invalid-feedback">
                            Please provide a valid meeting date.
                        </div>
                    </div>
        
                    <div class="mb-3">
                        <label for="venue" class="form-label fw-bold text-dark">Venue</label>
                        <input type="text" class="form-control shadow-sm" id="venue" name="venue" required>
                        <div class="invalid-feedback">
                            Please specify the venue.
                        </div>
                    </div>
        
                    <div class="mb-3">
                        <label for="organizer" class="form-label fw-bold text-dark">Organizer</label>
                        <input type="text" class="form-control shadow-sm" id="organizer" name="organizer" required>
                        <div class="invalid-feedback">
                            Please specify the organizer.
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="client_id" class="form-label">Select Client</label>
                        <select class="form-select" name="client" id="client" required>
                            <option value="">-- Choose Client --</option>
                            @foreach ($clients as $client)
                                <option value="{{ $client->id }}">{{ $client->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    
        
                    <div class="mb-3">
                        <label for="attendees" class="form-label fw-bold text-dark">Attendees</label>
                        <div class="form-check" style="display: block;">
                            @foreach ($users as $user)
                                <input class="form-check-input" type="checkbox" name="attendees[]" value="{{ $user->id }}">
                                <label class="form-check-label" for="attendees{{ $user->id }}">
                                    {{ $user->name }}
                                </label><br>
                            @endforeach
                        </div>
                    </div>
        
                    <div class="mb-3">
                        <label for="agenda" class="form-label fw-bold text-dark">Agenda</label>
                        <textarea class="form-control shadow-sm" id="agenda" name="agenda" required></textarea>
                        <div class="invalid-feedback">
                            Please provide the agenda.
                        </div>
                    </div>
        
                    <div class="mb-3">
                        <label for="discussion_points" class="form-label fw-bold text-dark">Discussion Points</label>
                        <textarea class="form-control shadow-sm" id="discussion_points" name="discussion_points" required></textarea>
                        <div class="invalid-feedback">
                            Please provide the discussion points.
                        </div>
                    </div>
        
                    <div class="mb-3">
                        <label for="decisions_made" class="form-label fw-bold text-dark">Decisions Made</label>
                        <textarea class="form-control shadow-sm" id="decisions_made" name="decisions_made" required></textarea>
                        <div class="invalid-feedback">
                            Please specify the decisions made.
                        </div>
                    </div>
        
                    <div class="mb-3">
                        <label for="next_meeting_date" class="form-label fw-bold text-dark">Next Meeting Date</label>
                        <input type="datetime-local" class="form-control shadow-sm" id="next_meeting_date" name="next_meeting_date">
                    </div>
        
                    <div class="mb-3">
                        <label for="next_meeting_location" class="form-label fw-bold text-dark">Next Meeting Location</label>
                        <input type="text" class="form-control shadow-sm" id="next_meeting_location" name="next_meeting_location">
                    </div>
        
                    <div class="mb-3">
                        <label for="next_meeting_agenda" class="form-label fw-bold text-dark">Next Meeting Agenda</label>
                        <textarea class="form-control shadow-sm" id="next_meeting_agenda" name="next_meeting_agenda"></textarea>
                    </div>
        
                    <div class="mb-3">
                        <label for="prepared_by" class="form-label fw-bold text-dark">Prepared By</label>
                        <input type="text" class="form-control shadow-sm" id="prepared_by" name="prepared_by">
                    </div>
        
                    <div class="mb-3">
                        <label for="approved_by" class="form-label fw-bold text-dark">Approved By</label>
                        <input type="text" class="form-control shadow-sm" id="approved_by" name="approved_by">
                    </div>
        
                    <!-- Add Action Item Button -->
                    <div class="mb-3">
                        <button type="button" class="btn btn-success" id="addItemButton">Add Action Item</button>
                    </div>
        
                    <!-- Dynamic Action Items List -->
                    <div id="actionItemsList"></div>
        
                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary btn-lg px-4">Save Meeting</button>
                    </div>
                </form>
            </div>
        </div>
        
        <script>
            let itemCount = 1; // Initialize itemCount for dynamic updates
        
            document.getElementById("addItemButton").addEventListener("click", function() {
                var actionItemsList = document.getElementById("actionItemsList");
        
                // Increment item count for each new item
                itemCount++;
        
                // Create a new div for the action item
                var newItemDiv = document.createElement("div");
                newItemDiv.classList.add("action-item", "mb-3", "p-3", "bg-light", "rounded", "shadow-sm");
                newItemDiv.id = "item-" + itemCount;
        
                // Agenda Item Field
                var agendaItemField = document.createElement("input");
                agendaItemField.type = "text";
                agendaItemField.name = "action_items[" + itemCount + "][agenda_item]";
                agendaItemField.classList.add("form-control", "mb-2");
                agendaItemField.placeholder = "Agenda Item";
        
                // Discussion Summary Field
                var discussionSummaryField = document.createElement("textarea");
                discussionSummaryField.name = "action_items[" + itemCount + "][discussion_summary]";
                discussionSummaryField.classList.add("form-control", "mb-2");
                discussionSummaryField.placeholder = "Discussion Summary";
        
                // Action Item Field
                var actionItemField = document.createElement("input");
                actionItemField.type = "text";
                actionItemField.name = "action_items[" + itemCount + "][action_item]";
                actionItemField.classList.add("form-control", "mb-2");
                actionItemField.placeholder = "Action Item";
        
                // Responsible Person Checkbox List
                var responsiblePersonDiv = document.createElement("div");
                responsiblePersonDiv.classList.add("form-check");
        
                // Loop through each user and add checkbox
                @foreach ($users as $user)
                    var checkbox = document.createElement("input");
                    checkbox.type = "checkbox";
                    checkbox.name = "action_items[" + itemCount + "][responsible_persons][]";
                    checkbox.value = "{{ $user->id }}";
                    checkbox.classList.add("form-check-input");
        
                    var label = document.createElement("label");
                    label.classList.add("form-check-label");
                    label.innerHTML = "{{ $user->name }}";
        
                    responsiblePersonDiv.appendChild(checkbox);
                    responsiblePersonDiv.appendChild(label);
                    responsiblePersonDiv.appendChild(document.createElement("br"));
                @endforeach
        
                // Deadline Field
                var dueDateField = document.createElement("input");
                dueDateField.type = "datetime-local";
                dueDateField.name = "action_items[" + itemCount + "][deadline]";
                dueDateField.classList.add("form-control", "mb-2");
        
                // Remove Item Button
                var removeButton = document.createElement("button");
                removeButton.type = "button";
                removeButton.classList.add("btn", "btn-danger", "btn-sm", "remove-item", "mt-2");
                removeButton.setAttribute("data-item-id", itemCount);
                removeButton.textContent = "Remove";
                removeButton.addEventListener("click", function() {
                    newItemDiv.remove();
                });
        
                // Append fields to the new action item div
                newItemDiv.appendChild(agendaItemField);
                newItemDiv.appendChild(discussionSummaryField);
                newItemDiv.appendChild(actionItemField);
                newItemDiv.appendChild(responsiblePersonDiv);
                newItemDiv.appendChild(dueDateField);
                newItemDiv.appendChild(removeButton);
        
                // Append the new item div to the action items list
                actionItemsList.appendChild(newItemDiv);
            });
        </script>
        
        
    </div>
@endsection
<style>
    .actions .mdi:before{font-size: 20px!important;}
</style>