{% extends "base.html" %}

{% block title %}
    Edit SAR record
{% endblock %}

{% block content %}



    <h2>Edit SAR Call</h2>
    <div class="container mt-5">
        <h2>Edit SAR Call</h2>
        <form action="{{ url_for('edit_sar', sar_id=sar_call.id) }}" method="post" enctype="multipart/form-data">
            <div class="form-group">
                <div>
                    <label for="status">Status:</label>
                    <select name="status" id="status" class="form-control">
                        {% for status in statuses %}
                            <option value="{{ status.id }}" {% if status.id == sar_call.status %}selected{% endif %}>
                                {{ status.name }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <label for="start_date">Start Date:</label>
                <input type="date" name="start_date" class="form-control" value="{{ sar_call.start_date }}" required>
            </div>

            <div class="form-group">
                <label for="finish_date">Finish Date:</label>
                <div>
                    <button type="button" id="today_button" class="btn btn-secondary">Today</button>
                </div>
                <input type="date" name="finish_date" id="finish_date" class="form-control"
                       value="{{ sar_call.finish_date }}">
            </div>

            <div class="form-group">
                <label for="category">Category:</label>
                <select name="category" id="category" class="form-control">
                    {% for category in categories %}
                        <option value="{{ category.id }}" {% if category.id == sar_call.category %}selected{% endif %}>
                            {{ category.name }}
                        </option>
                    {% endfor %}
                </select>
            </div>

            <div class="form-group">
                <label for="result">Job result:</label>
                <select name="result" id="result" class="form-control">
                    {% for result in results %}
                        <option value="{{ result.id }}" {% if result.id == sar_call.result %}selected{% endif %}>
                            {{ result.name }}
                        </option>
                    {% endfor %}
                </select>
            </div>

            <div class="form-group">
                <label for="coordinates">IPP Coordinates:</label>
                <input type="text" name="latitude" class="form-control" value="{{ sar_call.latitude }}" required>
                <input type="text" name="longitude" class="form-control" value="{{ sar_call.longitude }}" required>
            </div>

            <div class="form-group">
                <label for="coordinates">Victim found coordinates:</label>
                <input type="text" name="latitude_found" class="form-control" value="{{ sar_call.latitude_found }}">
                <input type="text" name="longitude_found" class="form-control" value="{{ sar_call.longitude_found }}">
                <div class="form-group">
                    <label for="title">Title:</label>
                    <input type="text" name="title" class="form-control" value="{{ sar_call.title }}" required>
                </div>


                <div class="form-group">
                    <label for="description">Description:</label>
                    <textarea name="description" class="form-control">{{ sar_call.description }}</textarea>
                </div>

                <div class="form-group">
                    <label for="description_hidden">Hidden Description:</label>
                    <textarea name="description_hidden"
                              class="form-control">{{ sar_call.description_hidden }}</textarea>
                </div>

                <div class="form-group">
                    <label for="coordination_officer">Created by:</label>
                    <select name="coordination_officer" id="coordination_officer" class="form-control">
                        {% for coordination_officer in coordination_officers %}
                            <option value="{{ coordination_officer.id }}"
                                    {% if coordination_officer.id == sar_call.coordination_officer_id %}selected{% endif %}>
                                {{ coordination_officer.full_name }}
                            </option>
                        {% endfor %}
                    </select>
                </div>

                <div class="form-group">
                    <label for="search_officer">Search officer:</label>
                    <select name="search_officer" id="search_officer" class="form-control">
                        {% for search_officer in search_officers %}
                            <option value="{{ search_officer.id }}"
                                    {% if search_officer.id == sar_call.search_officer_id %}selected{% endif %}>
                                {{ search_officer.full_name }}
                            </option>
                        {% endfor %}
                    </select>
                </div>


                <button type="submit" class="btn btn-primary">Update</button>
        </form>
        <div id="map"></div>
        <script>
            var lon = {{ sar_call.longitude }}
            var lat = {{ sar_call.latitude }}
            var map = L.map('map').setView([lat, lon], 13); // Default to London, adjust as needed

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

            var marker;

            map.on('click', function (e) {
                if (marker) {
                    map.removeLayer(marker);
                }
                marker = L.marker(e.latlng).addTo(map);
                document.querySelector('input[name="latitude"]').value = e.latlng.lat;
                document.querySelector('input[name="longitude"]').value = e.latlng.lng;
            });

            // If editing, set the marker to the existing coordinates
            var latInput = document.querySelector('input[name="latitude"]');
            var lngInput = document.querySelector('input[name="longitude"]');
            if (latInput.value && lngInput.value) {
                marker = L.marker([latInput.value, lngInput.value]).addTo(map);
            }
        </script>
        <script>
            document.getElementById('today_button').addEventListener('click', function () {
                var today = new Date();
                var dd = String(today.getDate()).padStart(2, '0');
                var mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
                var yyyy = today.getFullYear();
                today = yyyy + '-' + mm + '-' + dd;
                document.getElementById('finish_date').value = today;
            });
        </script>

    </div>

    <{% endblock %}