{% extends 'base.html' %}

{% block title %}Route Analysis - Yatra Booking System{% endblock %}

{% block content %}
<div class="test-section">
    <h2>🗺️ Route Management</h2>
    <p>Manually test route creation, city management, and distance calculation functionality.</p>
    
    <div class="test-controls">
        <a href="/admin/testing_app/city/add/" class="btn btn-primary" target="_blank">🏙️ Add New City</a>
        <a href="/admin/testing_app/route/add/" class="btn btn-primary" target="_blank">➕ Add New Route</a>
        <a href="/admin/testing_app/route/" class="btn" target="_blank">⚙️ Manage Routes</a>
        <button class="btn" onclick="location.reload()">🔄 Refresh Data</button>
    </div>
    

    
    <div class="table-container">
        <h3>Routes in Database (Latest 50 Records)</h3>
        {% if routes %}
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Source City</th>
                    <th>Destination City</th>
                    <th>Distance (KM)</th>
                    <th>Duration (Minutes)</th>
                </tr>
            </thead>
            <tbody>
                {% for route in routes %}
                <tr>
                    <td>{{ route.id }}</td>
                    <td><strong>{{ route.source_city.city_name }}</strong></td>
                    <td><strong>{{ route.destination_city.city_name }}</strong></td>
                    <td>{{ route.distance_km|floatformat:2|default:"N/A" }} {% if route.distance_km %}km{% endif %}</td>
                    <td>{{ route.estimated_duration_minutes|default:"N/A" }} {% if route.estimated_duration_minutes %}mins{% endif %}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div style="text-align: center; padding: 40px; background: #f8f9fa; border-radius: 10px;">
            <h4>🗺️ No Routes Found</h4>
            <p>Your database doesn't contain any route records yet.</p>
            <p>Routes will appear here once operators create city connections through your application.</p>
        </div>
        {% endif %}
    </div>
    
    <div style="background: #f8f9fa; padding: 20px; border-radius: 10px; margin-top: 20px;">
        <h3>🔍 Manual Testing Checklist</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 15px;">
            <div>
                <h4>Route Creation</h4>
                <ul style="line-height: 1.8;">
                    <li>✅ Source and destination validation</li>
                    <li>✅ Duplicate route prevention</li>
                    <li>✅ City connectivity mapping</li>
                    <li>✅ Route reversal handling</li>
                    <li>✅ Route status management</li>
                </ul>
            </div>
            <div>
                <h4>Distance & Duration</h4>
                <ul style="line-height: 1.8;">
                    <li>✅ Distance calculation accuracy</li>
                    <li>✅ Duration estimation logic</li>
                    <li>✅ GPS coordinate validation</li>
                    <li>✅ Traffic factor consideration</li>
                    <li>✅ Route optimization algorithms</li>
                </ul>
            </div>
            <div>
                <h4>Route Management</h4>
                <ul style="line-height: 1.8;">
                    <li>✅ Route modification workflow</li>
                    <li>✅ Popular route tracking</li>
                    <li>✅ Seasonal route management</li>
                    <li>✅ Route performance analytics</li>
                    <li>✅ City expansion handling</li>
                </ul>
            </div>
        </div>
    </div>
</div>

{% endblock %}