{% extends 'backend/components/layouts/default.html' %}
{% load static %}

{% block content %}

    <!-- infobox -->
<div class="border border-gray-500/20 rounded-md shadow-[rgb(31_45_61_/_10%)_0px_2px_10px_1px] dark:shadow-[0_2px_11px_0_rgb(6_8_24_/_39%)] p-6 pt-12 mt-8 relative">
    <div class="border border-gray-500/20 rounded-md shadow-[rgb(31_45_61_/_10%)_0px_2px_10px_1px] dark:shadow-[0_2px_11px_0_rgb(6_8_24_/_39%)] p-6 pt-12 mt-8 relative">
        <div class="bg-primary absolute text-white-light left-6 -top-8 w-16 h-16 rounded-md flex items-center justify-center mb-5 mx-auto">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M22 22L2 22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                <path d="M2 11L10.1259 4.49931C11.2216 3.62279 12.7784 3.62279 13.8741 4.49931L22 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                <path opacity="0.5" d="M15.5 5.5V3.5C15.5 3.22386 15.7239 3 16 3H18.5C18.7761 3 19 3.22386 19 3.5V8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                <path d="M4 22V9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                <path d="M20 22V9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                <path opacity="0.5" d="M15 22V17C15 15.5858 15 14.8787 14.5607 14.4393C14.1213 14 13.4142 14 12 14C10.5858 14 9.87868 14 9.43934 14.4393C9 14.8787 9 15.5858 9 17V22" stroke="currentColor" stroke-width="1.5" />
                <path opacity="0.5" d="M14 9.5C14 10.6046 13.1046 11.5 12 11.5C10.8954 11.5 10 10.6046 10 9.5C10 8.39543 10.8954 7.5 12 7.5C13.1046 7.5 14 8.39543 14 9.5Z" stroke="currentColor" stroke-width="1.5" />
            </svg>
        </div>
        <h5 class="text-dark text-lg font-semibold mb-3.5 dark:text-white-light"><strong>Organization File:</strong>  <span class="text-success">{{ organization_file.name }}</span>:</h5>
        <p class="text-white-dark text-[15px]  mb-3.5">You are <strong>Updating/Editing</strong>  <span class="text-success">{{ organization_file.name }}</span></p>
        <span style="color:red; font-size: small; font-style: italic;"> Proceed </span>
    </div>
    {% include "backend/apps/quicknav.html" %}

    <div class="panel h-full w-full">
        
        <div class="container mx-auto py-6 px-4">
            <h2 class="text-2xl font-bold mb-6">Edit Organization File</h2>
            <form method="post" enctype="multipart/form-data" class="border border-[#ebedf2] dark:border-[#191e3a] rounded-md p-4 mb-5 bg-white dark:bg-[#0e1726]">
                {% csrf_token %}
                <h6 class="text-lg font-bold mb-5">Edit Organization File: <span class="text-success">{{ organization_file.name }}</span></h6>
                <div class="flex flex-col">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                        <div>
                            <label for="meeting_title">Meeting Title</label>
                            <input id="meeting_title" name="meeting_title" type="text" class="form-input" 
                                   x-tooltip="Title of the Meeting Minutes." required 
                                   value="{{ meeting_minutes.meeting_title }}">
                        </div>
                        <div>
                            <label for="meeting_date">Meeting Date & Time</label>
                            <input id="meeting_date" name="meeting_date" type="datetime-local" class="form-input" 
                                   x-tooltip="Date and Time of the Meeting Minutes." required 
                                   value="{{ meeting_minutes.meeting_date|date:'Y-m-d H:i' }}">
                        </div>
                        <div class="col-span-2">
                            <label for="attendees">Attendees</label>
                            <textarea id="attendees" name="attendees" rows="3" class="form-input" 
                                      x-tooltip="Attendees of the Meeting." required>{{ meeting_minutes.attendees }}</textarea>
                        </div>
                        <div class="col-span-2">
                            <label for="members_absent_with_apologies">Members Absent with Apologies:</label>
                            <textarea name="members_absent_with_apologies" class="form-input"  id="members_absent_with_apologies">{{ meeting_minutes.members_absent_with_apologies }}</textarea>
                            <small class="text-gray-500">Separate Members Absent with Apologies with a comma (e.g., John Doe, Jane Smith, Mike Johnson).</small>
                        </div>
                        <div class="col-span-2">
                            <label for="members_absent_without_apologies">Members Absent without Apologies:</label>
                            <textarea name="members_absent_without_apologies" class="form-input" id="members_absent_without_apologies">{{ meeting_minutes.members_absent_without_apologies }}</textarea>
                            <small class="text-gray-500">Separate Members Absent without Apologies with a comma (e.g., John Doe, Jane Smith, Mike Johnson).</small>
                        </div>
                        <div class="col-span-2">
                            <label for="agenda">Agenda</label>
                            <textarea id="agenda" name="agenda" rows="3" class="form-input" 
                                      x-tooltip="Agenda of the Meeting Minutes." required>{{ meeting_minutes.agenda }}</textarea>
                        </div>
                        <div class="col-span-2">
                            <label for="minutes">Minutes</label>
                            <textarea id="editor" name="minutes" class="form-input" required style="visibility: hidden; height: 0; overflow: hidden;">{{ meeting_minutes.minutes }}</textarea> 
                        </div>
                        <div class="col-span-2">
                            <label for="aobs">AOBs (Any Other Business):</label>
                            <textarea name="aobs" id="aobs" type="text" rows="3" class="form-input" x-tooltip="AOBs (Any Other Business) of the Meeting." required >{{ meeting_minutes.aobs }}</textarea>
                        </div>
                        <div class="col-span-2">
                            <label for="previous_meeting_seconded_by">If Previous Meeting Seconded... Seconded By:</label>
                            <input type="text" name="previous_meeting_seconded_by" value="{{ meeting_minutes.previous_meeting_seconded_by }}" id="previous_meeting_seconded_by">
                        </div>
                        <div class="col-span-2">
                            <label for="file">Attach Meeting Documents (Optional).</label>
                            <input id="file" name="file" type="file" accept=".pdf,.doc,.csv,.docx,.xls,.txt,.xlsx,image/*,.mp4,.mkv" 
                                   x-tooltip="Upload the Meeting Minutes Documents, Images, Videos etc.">
                        </div>
                        {% if meeting_minutes.file.all %}
                            <div class="col-span-2 mt-4">
                                <h5 class="font-semibold">Attached Meeting Documents:</h5>
                                <ul class="list-disc pl-5">
                                    {% for document in meeting_minutes.file.all %}
                                        <li>
                                            <a href="{{ document.file.url }}" target="_blank" class="text-success font-bold">{{ document.file.name }}</a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        {% else %}
                            <div class="col-span-2 mt-4">
                                <p>No documents attached to this meeting.</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
                {% if user.is_superuser %}
                <div class="mt-3">
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
                {% endif %}
            </form>
            
    </div>
<script>
    
    document.addEventListener("alpine:init", () => {
        Alpine.directive("tooltip", (el, {
            expression
        }) => {
            tippy(el, {
                content: expression,
                placement: el.getAttribute("data-placement") || undefined,
                allowHTML: true,
                delay: el.getAttribute("data-delay") || 0,
                animation: el.getAttribute("data-animation") || "fade",
                theme: el.getAttribute("data-theme") || "",
            });
        });
    
    });
    function showUploadedFileName(inputId) {
        const input = document.getElementById(inputId);
        const fileNameDisplay = document.getElementById(inputId + '_file_name');
    
        input.addEventListener('change', function() {
            const files = input.files;
            if (files.length > 0) {
                const fileNames = Array.from(files).map(file => file.name).join(', and ');
                fileNameDisplay.textContent = 'You have Uploaded: ' + fileNames;
            } else {
                fileNameDisplay.textContent = '';
            }
        });
    }
    
    showUploadedFileName('support_document');

</script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        ClassicEditor
            .create(document.querySelector('#editor'))
            .then(editor => {
                // Sync data with the textarea for validation
                editor.model.document.on('change:data', () => {
                    const data = editor.getData();
                    document.querySelector('#editor').value = data; // Update hidden textarea
                });
            })
            .catch(error => {
                console.error('CKEditor initialization error:', error);
            });
    });
</script>

{% endblock %}