{% extends "base.html" %}

{% block content %}
<div class="container mt-4">
    {% if probe_id %}
        <h2>Location History for Probe {{ probe_id }}</h2>
    {% else %}
        <h2>All Locations</h2>
        <div class="mb-3">
            <a href="/locations/new" class="btn btn-primary">Add New Location</a>
        </div>
        <p>Select a probe to view its location history</p>
    {% endif %}
    
    {% if locations and not probe_id %}
    <div class="card mt-4">
        <div class="card-header">
            <h5>Locations List</h5>
        </div>
        <div class="card-body">
            <table class="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Address</th>
                        <th>Contact</th>
                        <th>Phone</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    {% for location in locations %}
                    <tr>
                        <td>{{ location.name }}</td>
                        <td>{{ location.address }}</td>
                        <td>{{ location.contact_name }}</td>
                        <td>{{ location.contact_phone }}</td>
                        <td>{{ location.contact_email }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}
    
    <div class="card mt-4">
        <div class="card-header">
            <h5>Assignment Timeline</h5>
        </div>
        <div class="card-body">
            {% if chart_data_json %}
                <canvas id="timelineChart" height="100"></canvas>
            {% else %}
                <p>No location data available</p>
            {% endif %}
        </div>
    </div>

    {% if location_data %}
    <div class="card mt-4">
        <div class="card-header">
            <h5>Location Details</h5>
        </div>
        <div class="card-body">
            <table class="table">
                <thead>
                    <tr>
                        <th>Location</th>
                        <th>Start Date</th>
                        <th>End Date</th>
                        <th>Duration</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in location_data %}
                    <tr>
                        <td>{{ item.location.location_id }}</td>
                        <td>{{ item.location.start_date.strftime('%Y-%m-%d') }}</td>
                        <td>{{ item.location.end_date.strftime('%Y-%m-%d') if item.location.end_date else 'Current' }}</td>
                        <td>{{ item.duration_days }} days</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}
</div>

{% block scripts %}
{{ super() }}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('timelineChart').getContext('2d');
    const chartData = JSON.parse('{{ chart_data_json | safe }}');
    
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: chartData.labels,
            datasets: [{
                label: 'Days at Location',
                data: chartData.durations,
                backgroundColor: 'rgba(54, 162, 235, 0.5)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            indexAxis: 'y',
            scales: {
                x: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Days'
                    }
                }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `${context.raw.toFixed(1)} days`;
                        }
                    }
                }
            }
        }
    });
});
</script>
{% endblock %}
{% endblock %}