{% extends "slm/base.html" %}
{% load slm static compress i18n %}

{% block stylesheets %}
    {{ block.super }}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/3.9.3/mapbox-gl.min.css" integrity="sha512-9RAPfS3YMZi1yEe+yT65HNwrqhOw++yaDYFxElkl141OBieVWznObzeAYNijFmvVe97u9Oh5oNXyTZTZD04iGQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href='https://cdn.datatables.net/1.13.2/css/jquery.dataTables.min.css' rel='stylesheet' />
    {% compress css %}
        <link rel='stylesheet' type='text/css' media='screen' href='{% static "slm/css/map.css" %}'>
    {% endcompress %}
{% endblock %}

{% block javascript %}
    {{ block.super }}
    {% compress js %}
        <script src="{% static 'slm/js/map.js' %}"></script>
    {% endcompress %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/3.9.3/mapbox-gl.js" integrity="sha512-tJBCVRTEYq4MVF7pQQNJ0vWc+ij9oTnNq10/txpa2ISQ/cIUzwb9VEwHKSQVe2l4Ni5EyrwjB2/R+4WIRJSVXg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src='https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js'></script>
{% endblock %}

{% block page_content %}
<div class="container-fluid">
    {% if api_key %}
        <div class="row">
            <div class="col-12 d-flex justify-content-center mb-3" style="background-color: #175A7D">
                <div id="slm-station-map-container">
                    <div id="slm-station-map"></div>
                    <div id="site-name" class="mono"></div>
                </div>
            </div>
        </div>
        <div class="row px-lg-5 p-2">
            <div class="col-12">
                <table id="slm-map-station-table" class="table table-sm table-striped table-hover" style="width: 100%; padding-top: 30px; margin-top: 50px" cellspacing="0">
                    <colgroup>
                        <col span="6">
                    </colgroup>
                    <colgroup>
                        <col class="pos left">
                        <col class="pos right">
                    </colgroup>
                    <colgroup>
                        <col class="activity left">
                        <col class="activity center">
                        <col class="activity right">
                    </colgroup>
                    <colgroup>
                        <col>
                    </colgroup>
                    <thead>
                        <tr>
                            <td colspan="6"></td>
                            <th class="text-center" colspan="2" data-bs-toggle="tooltip" title="{% trans "Position" %}">Position</th>
                            <th class="text-center" colspan="3" data-bs-toggle="tooltip" title="{% trans "The most recent activity on the site log information." %}">Latest Activity</th>
                            <td colspan="1"></td>
                        </tr>
                        <tr>
                            <td></td>
                            <th class="form-group">
                                <label for="slm-status-select" style="display: none">Status</label>
                                <select type="text" name="status" id="slm-status-select" class="form-control">
                                    <option value="" selected>- Select Status -</option>
                                    {% for status in SiteLogStatus %}
                                        <option value="{{ status.value }}">{{ status.label }}</option>
                                    {% endfor %}
                                </select>
                            </th>
                            <td></td>
                            <td></td>
                            <th class="form-group">
                                <label for="slm-agency-select" style="display: none">Agency</label>
                                <select name="agency" id="slm-agency-select" class="form-control">
                                    <option value="" {% if not agency %}selected>{% endif %}- Select Agency -</option>
                                    {% for agcy in agencies %}
                                        <option value="{{ agcy.pk }}" {% if agency and agency.id == agcy.id %}selected{% endif %}>{{ agcy.name }}</option>
                                    {% endfor %}
                                </select>
                            </th>
                            <th class="form-group">
                                <label for="slm-network-select" style="display: none">Network</label>
                                <select name="network" id="slm-network-select" class="form-control">
                                    <option value="" {% if not network %}selected>{% endif %}- Select Network -</option>
                                    {% for ntwrk in networks %}
                                        <option value="{{ ntwrk.pk }}" {% if network and network.id == ntwrk.id %}selected{% endif %}>{{ ntwrk.name }}</option>
                                    {% endfor %}
                                </select>
                            </th>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <th data-bs-toggle="tooltip" title="{{ Site|help_text:'name' }}">Name</th>
                            <th data-bs-toggle="tooltip" title="{{ Site|help_text:'status' }}">Status</th>
                            <th data-bs-toggle="tooltip" title="{{ Site|help_text:'num_flags' }}">Flags</th>
                            <th data-bs-toggle="tooltip" title="{{ Site|help_text:'created' }}">Registered</th>
                            <th data-bs-toggle="tooltip" title="{{ Site|help_text:'agencies' }}">Agencies</th>
                            <th data-bs-toggle="tooltip" title="">Networks</th>
                            <th data-bs-toggle="tooltip" title="{{ SiteLocation|help_text:'llh' }}">Latitude</th>
                            <th data-bs-toggle="tooltip" title="{{ SiteLocation|help_text:'llh' }}">Longitude</th>
                            <th data-bs-toggle="tooltip" title="{{ Site|help_text:'last_user' }}">User</th>
                            <th data-bs-toggle="tooltip" title="{{ Site|help_text:'last_update' }}">Updated</th>
                            <th data-bs-toggle="tooltip" title="{{ Site|help_text:'last_publish' }}">Published</th>
                            <th>Download</th>
                        </tr>
                    </thead>
                    <tfoot id="#tbl-footer">
                        <tr>
                            <th data-bs-toggle="tooltip" title="{{ Site|help_text:'name' }}">Name</th>
                            <th data-bs-toggle="tooltip" title="{{ Site|help_text:'status' }}">Status</th>
                            <th data-bs-toggle="tooltip" title="{{ Site|help_text:'num_flags' }}">Flags</th>
                            <th data-bs-toggle="tooltip" title="{{ Site|help_text:'created' }}">Registered</th>
                            <th data-bs-toggle="tooltip" title="{{ Site|help_text:'agencies' }}">Agencies</th>
                            <th data-bs-toggle="tooltip" title="">Networks</th>
                            <th data-bs-toggle="tooltip" title="{{ SiteLocation|help_text:'llh' }}">Latitude</th>
                            <th data-bs-toggle="tooltip" title="{{ SiteLocation|help_text:'llh' }}">Longitude</th>
                            <th data-bs-toggle="tooltip" title="{{ Site|help_text:'last_user' }}">User</th>
                            <th data-bs-toggle="tooltip" title="{{ Site|help_text:'last_update' }}">Updated</th>
                            <th data-bs-toggle="tooltip" title="{{ Site|help_text:'last_publish' }}">Published</th>
                            <th>Download</th>
                        </tr>
                        <tr>
                            <td colspan="6"></td>
                            <th colspan="2" data-bs-toggle="tooltip" title="{% trans "Position" %}">Position</th>
                            <th colspan="3" data-bs-toggle="tooltip" title="{% trans "The most recent activity on the site log information." %}">Latest Activity</th>
                            <td colspan="1"></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    <script>
        const agencySelect = $('#slm-agency-select');
        const networkSelect = $('#slm-network-select');
        const statusSelect = $('#slm-status-select');
        function getQuery(data) {
            data = data || {};
            if (data.hasOwnProperty('order') && data.order.length > 0) {
                data.ordering = data.order[0].dir.replace('asc', '').replace('desc', '-');
                switch (data.order[0].column) {
                    case 0:
                        data.ordering += 'name';
                        break;
                    case 2:
                        data.ordering += 'num_flags';
                        break;
                    case 3:
                        data.ordering += 'created';
                        break;
                    case 5:
                        data.ordering += 'latitude';
                        break;
                    case 6:
                        data.ordering += 'longitude';
                        break;
                    case 8:
                        data.ordering += 'last_update';
                        break;
                    case 9:
                        data.ordering += 'last_publish';
                        break;
                }
                delete data.order;
            }
            if (data.hasOwnProperty('columns')) {
                delete data.columns;
            }
            if (data.hasOwnProperty('search')) {
                if (data.search.hasOwnProperty('value') > 0 && data.search.value.length > 0) {
                    data.name = data.search.value;
                }
                delete data.search;
            }
            if (agencySelect.val()) {
                data.agency = agencySelect.val();
            }
            if (networkSelect.val()) {
                data.network = networkSelect.val();
            }
            if (statusSelect.val()) {
                data.status = statusSelect.val();
            }
            return data;
        }
        mapboxgl.accessToken = '{{ api_key }}';
        const map = new SLMSiteMap({
                container: 'slm-station-map',
                style: '{{map_style}}',
                zoom: '{{ zoom }}',  // 0 doesnt work - bug treats it as not set
                projection: '{{ projection }}'
            },
            slm.urls.reverse('slm_edit_api:map-list', {kwargs: {}, query: getQuery()})
        );
        const stationTable = $( '#slm-map-station-table' ).DataTable({
            pageLength: 25,
            lengthMenu: [
                [10, 25, 50, 100, 1000],
                [10, 25, 50, 100, 'All'],
            ],
            stateSave: false,
            serverSide: true,
            fixedHeader: true,
            processing: true,
            //drawCallback: function(settings) {},
            ajax: {
                url: '{% url "slm_edit_api:stations-list" %}',
                data: getQuery
            },
            order: [[0, "asc"]],
            columns: [
                {
                    data: 'name',
                    className: 'mono',
                    render: function (name, type, full, meta) {
                        return `<a class="text-decoration-none" href="${slm.urls.reverse('slm:edit', {kwargs: {'station': name}})}">${name}</a>`;
                    },
                    orderable: true
                },
                {
                    data: 'status',
                    render: function (data, type, full, meta) {
                        const status = slm.SiteLogStatus.get(data);
                        return `<span class="badge rounded-pill slm-bg-${status.label.toLowerCase()}">${status.label}</span>`
                    },
                    orderable: false,
                },
                {
                    data: 'num_flags',
                    render: function (num_flags, type, full, meta) {
                        if (num_flags > 0) {
                            return `<span class="badge rounded-pill bg-danger">${num_flags}</span>`;
                        }
                    },
                    defaultContent: "",
                    orderable: true,
                },
                {
                    data: 'created',
                    render: function (created, type, full, meta) {
                        if (created) {
                            return created.split('T')[0];
                        }
                    },
                    orderable: true
                },
                {
                    data: 'agencies',
                    className: 'slm-agency-col',
                    render: function (data, type, full, meta) {
                        let agency_list = [];
                        for (let tidx = 0; tidx < data.length; tidx++) {
                            agency_list.push(data[tidx].name);
                        }
                        return `<span title="${agency_list.join(', ')}">${agency_list.join(', ')}</span>`;
                    },
                    orderable: false,
                },
                {
                    data: 'networks',
                    className: 'slm-network-col',
                    render: function (data, type, full, meta) {
                        let network_list = [];
                        for (let tidx = 0; tidx < data.length; tidx++) {
                            network_list.push(data[tidx].name);
                        }
                        return `<span title="${network_list.join(', ')}">${network_list.join(', ')}</span>`;
                    },
                    orderable: false,
                },
                {
                    data: 'llh',
                    render: function (llh, type, full, meta) {
                        if (llh !== null) {
                            return llh[0].toFixed(2);
                        }
                        return null;
                    },
                    defaultContent: "",
                    orderable: true,
                },
                {
                    data: 'llh',
                    render: function (llh, type, full, meta) {
                        if (llh !== null) {
                            return llh[1].toFixed(2);
                        }
                        return null;
                    },
                    defaultContent: "",
                    orderable: true,
                },
                {
                    data: 'last_user',
                    render: function (user, type, full, meta) {
                        if (user !== null) {
                            return slm.mailToUser(user);
                        }
                    },
                    defaultContent: '',
                    orderable: false,
                },
                {
                    data: 'last_update',
                    render: function (last_update, type, full, meta) {
                        if (last_update !== null) {
                            return last_update.split('T')[0];
                        }
                    },
                    defaultContent: '',
                    orderable: true
                },
                {
                    data: 'last_publish',
                    render: function (last_publish, type, full, meta) {
                        if (last_publish !== null
                        ) {
                            return last_publish.split('T')[0];
                        }
                    },
                    defaultContent: '',
                    orderable: true
                },
                {
                    data: null,
                    render: function (station, type, full, meta) {
                        return `<a href="${slm.urls.reverse('slm_edit_api:download-detail', {
                                kwargs: {
                                    site: station.name,
                                    format: 'text'
                                }
                            })}" title="Download ASCII"><i class="bi bi bi-file-text slm-text-${SiteLogStatus.get(station.status).label.toLowerCase()}"></i></a> ` +
                            `<a href="${slm.urls.reverse('slm_edit_api:download-detail', {
                                kwargs: {
                                    site: station.name,
                                    format: 'xml'
                                }
                            })}" title="Download XML"<i class="bi bi-filetype-xml slm-text-${SiteLogStatus.get(station.status).label.toLowerCase()}"></i></a> ` +
                            `<a href="${slm.urls.reverse('slm_edit_api:download-detail', {
                                kwargs: {
                                    site: station.name,
                                    format: 'json'
                                }
                            })}" title="Download JSON"><i class="bi bi-filetype-json slm-text-${SiteLogStatus.get(station.status).label.toLowerCase()}"></i></a>`;
                    },
                    orderable: false
                }
            ],
            columnDefs: [
                {targets: [2, 10], className: "dt-center"},
                {targets: [5, 6], className: "dt-right"},
            ]
        });
        $( '#slm-map-station-table select' ).on( 'change', function ( ) {
            stationTable.ajax.reload( );
            map.setSource(slm.urls.reverse('slm_edit_api:map-list', {kwargs: {}, query: getQuery()}));
        });
        map.setSelectCallback(function(site) {
            const search = $('#slm-map-station-table_filter input');
            search.val(site);
            stationTable.search(site).draw();
        });
        //slm.addColumnFiltering( stationTable );
    </script>
    {% else %}
    {% trans "To enable maps, create a MapBox account and " %}<a href="{% url 'admin:slm_map_mapsettings_change' 1 %}">{% trans "configure the api key in the admin:" %}</a> <a href="https://mapbox.com">mapbox.com</a>
    {% endif %}
</div>
{% endblock %}