{% extends 'dashboard_layout.html' %}
{% block content %}
{% load static %}
<div class="loader" id="pageLoader">
    <img src="{% static 'loaders/ajax-loader.gif' %}" />
</div>
<div class="content" id="modal-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                {% include 'common/messages.html' %}
                <div class="card">
                    <div class="card-header card-header-primary">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <h4 class="card-title pt-2">Edit Learn More</h4>
                            </div>
                            <div class="col-md-6 text-right">
                                <button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#pdfModal">
                                    View Upload Files
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <form method="POST" action="{% url 'save_edited_suggested_final_review' module_data.id %}">
                            {% csrf_token %}
                            <div class="row mx-auto justify-content-center">
                                <div class="col-md-6">
                                    <div class="col-md-12 mt-5 text-left">
                                        <div class="form-outline">
                                            <!-- <textarea name="title" class="form-control form-control-lg"  disabled required rows="2" cols="50" style="border: 1px solid #ced4da;padding:10px">{{ module_data.title }}</textarea> -->
                                            <textarea name="title" class="form-control form-control-lg" disabled required rows="2" cols="50" style="border: 1px solid #ced4da;padding:10px" title="Title is not editable">{{ module_data.title }}</textarea>
                                            <label class="form-label float-left" for="title">Title</label>
                                        </div>
                                    </div>
                                    <div class="col-md-12 mt-5 text-left">
                                        <div class="form-outline">
                                            <textarea name="description" class="form-control form-control-lg" required rows="6" cols="50" style="border: 1px solid #ced4da;padding:10px">{{ module_data.description }}</textarea>
                                            <label class="form-label float-left" for="description">Description</label>
                                        </div>
                                    </div>
                                    <div class="col-md-12 mt-5 text-left">
                                        <div class="form-outline">
                                            <button type="submit" class="btn btn-primary">Submit</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="pdfModal" tabindex="-1" role="dialog" aria-labelledby="pdfModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="pdfModalLabel">PDF Files</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="overflow-x: auto; height:600px">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Link</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for pdf_file in pdf_files %}
                        <tr>
                            <td>{{ pdf_file.file_name }}</td>
                            <td><a href="{{ pdf_file.file_link }}" target="_blank">{{ pdf_file.file_link }}</a></td>
                            <td><button class="btn btn-primary copy-btn" data-link="{{ pdf_file.file_link }}">Copy Link</button></td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){
        // Event listener for copying link on button click
        $('body').on('click', '.copy-btn', function() {
            var link = $(this).data('link');
            copyLink(link);
        });

        // Function to copy link with toaster message
        function copyLink(link) {
            navigator.clipboard.writeText(link).then(function() {
                toastr.success('Link copied to clipboard.');
            }, function(err) {
                console.error('Failed to copy link: ', err);
                toastr.error('Failed to copy link.');
            });
        }
    });
    $('#pageLoader').hide();
</script>
{% endblock %}