{% extends "base.html" %}

{% block title %}
    SAR job details
{% endblock %}

{% block content %}

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

    <!-- Include leaflet-gpx plugin -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.5.1/gpx.min.js"></script>

    <style>
        #map {
            height: 400px;
        }

        .button {
            margin: 5px;
        }

        .comment-text {
            white-space: pre-line;
        }
    </style>

    <div class="container mt-4">
        <h1 class="mb-4">SAR Job Details</h1>
        <div class="card mb-4">
            <div class="card-body">
                <p><strong>ID:</strong> {{ sar.id }}</p>
                <div>
                    <p>Created at: {{ sar.created }}</p>
                    <p>Last updated: {{ sar.updated }}</p>
                </div>
                <p><strong>Start Date:</strong> {{ sar.start_date }}</p>
                <p><strong>Manager:</strong> {{ sar.manager }}</p>
                <!-- Other SAR details -->
            </div>
        </div>

        <div>
            <a href="{{ url_for('edit_sar', id=sar.id) }}" class="btn btn-primary">Edit</a>
            <a href="{{ url_for('delete_sar', id=sar.id) }}" class="btn btn-danger">Delete</a>
        </div>

        <div id="map" class="mb-4"></div>


        <!-- Display Comments -->
        {% for comment in sar.comments %}
            <div class="comment">
                <strong>{{ comment.user.username }}</strong>:
                <div>
                    <p>Comment created at: {{ comment.created }}</p>
                    <p>Last updated: {{ comment.updated }}</p>
                </div>
                <div class="comment-text"><p id="comment-text-{{ comment.id }}">{{ comment.text }}</p></div>

                {% if comment.gpx_data %}
                    <!-- Display the GPX data on the map -->
                {% endif %}
                {% if current_user.id == comment.user_id or current_user.id == 1 or current_user.id == sar.user_id %}
                    <button class="edit-comment-btn" data-comment-id="{{ comment.id }}"
                            data-comment-text="{{ comment.text }}">Edit
                    </button>
                    <!-- Button to Open GPX Upload Modal -->
                    <button type="button" class="gpx-upload-button" data-toggle="modal" data-target="#uploadGPXModal"
                            data-comment-id="{{ comment.id }}">
                        Upload GPX File
                    </button>

                    <button type="button" class="delete-comment-btn">
                        <a href="{{ url_for('delete_comment', id=comment.id) }}">Delete</a>
                    </button>

                {% endif %}
            </div>
        {% endfor %}

        <!-- Edit Comment Modal -->
        <div class="modal fade" id="editCommentModal" tabindex="-1" aria-labelledby="editCommentModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editCommentModalLabel">Edit Comment</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="editCommentForm">
                            <div class="form-group">
                                <label for="commentText" class="col-form-label">Comment:</label>
                                <textarea class="form-control" id="commentText"></textarea>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="saveComment">Save changes</button>
                    </div>
                </div>
            </div>
        </div>


        <!-- Add Comment Form -->
        <form action="{{ url_for('add_comment', sar_call_id=sar.id) }}" method="post" enctype="multipart/form-data">
            <div class="form-group">
                <label for="text">Comment:</label>
                <textarea name="text" class="form-control"></textarea>
            </div>
            <div class="form-group">


            </div>
            <button type="submit" class="btn btn-primary">Add Comment</button>
        </form>

    </div>

    <!-- GPX File Upload Modal -->
    <div class="modal fade" id="uploadGPXModal" tabindex="-1" aria-labelledby="uploadGPXModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="uploadGPXModalLabel">Upload GPX File</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="uploadGPXForm" method="post" enctype="multipart/form-data">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="gpxFileName">Description: </label>
                            <input type="text" class="form-control" id="gpxFileName" name="gpxFileName" required>
                        </div>
                        <div class="form-group">
                            <label for="gpxFile">GPX File</label>
                            <input type="file" class="form-control" id="gpxFile" name="gpxFile" required>
                        </div>
                    </div>
                    <input type="hidden" id="commentIdForGPX" name="commentId">
                    <input type="hidden" id="sarIdForGPX" name="sarId" value="{{ sar.id }}">
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Upload</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <script>
        var gpxData = {{ gpx_files | tojson }};

        var map = L.map('map').setView([{{ sar.latitude }}, {{ sar.longitude }}], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);
        L.marker([{{ sar.latitude }}, {{ sar.longitude }}]).addTo(map);

        gpxData.forEach(function (gpxFile) {
            new L.GPX(gpxFile.gpx_data, {async: true}).on('loaded', function (e) {
                map.fitBounds(e.target.getBounds());
            }).addTo(map);
        });
    </script>


    <script>
        var commentId;  // Declare this outside of the .edit-comment-btn click handler
        var commentText;  // Declare this outside of the .edit-comment-btn click handler
        $(document).ready(function () {
            $('.edit-comment-btn').on('click', function () {
                // Get the comment data
                commentId = $(this).data('comment-id');
                commentText = $(this).data('comment-text');

                // Set the comment data in the modal
                $('#commentText').val(commentText);
                $('#editCommentModal').modal('show');

                // Save changes
                $('#saveComment').on('click', function () {
                    $.ajax({
                        url: '/edit_comment/' + commentId,
                        method: 'POST',
                        data: {comment: $('#commentText').val()},
                        success: function (response) {
                            // Update the comment display on the page
                            $('#comment-text-' + commentId).text($('#commentText').val());
                            $('button.edit-comment-btn[data-comment-id="' + commentId + '"]').data('comment-text', $('#commentText').val());
                            $('#editCommentModal').modal('hide');
                            // Update the comment display on the page as needed
                        },
                        error: function () {
                            // Handle error
                            alert("Error updating comment");
                        }
                    });
                });
            });
        });
    </script>


    <script>
        var commentId;

        $('.gpx-upload-button').on('click', function () {
            var commentId = $(this).data('comment-id');
            $('#commentIdForGPX').val(commentId);
        });

        $(document).ready(function () {
            {#commentId = $(this).data('comment-id');#}
            {#console.log(commentId);#}
            // Handle form submission
            $('#uploadGPXForm').on('submit', function (e) {
                e.preventDefault();
                var formData = new FormData(this);

                $.ajax({
                    url: '/upload_gpx',  // Update with the correct route
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        // Handle success - Close modal, Update the map with new GPX data
                        $('#uploadGPXModal').modal('hide');
                    },
                    error: function () {
                        // Handle error
                        alert("Error uploading GPX file");
                    }
                });
            });
        });
    </script>




{% endblock %}