{% extends 'base.html' %}
{% load static %}


{% block content %}
<div class="vehicle-tracking-container">
    <h1>Vehicle Live Tracking</h1>

    <div id="mainView">
        <div class="actions">
            <button class="export" style="background-color:white;color:black;border:1px solid black">Export</button>
            <button class="filter" style="background-color:white;color:black;border:1px solid black">Filter</button>
        </div>
        <table>
            <thead>
                <tr>
                    <th>VEHICLE ID</th>
                    <th>DRIVER NAME</th>
                    <th>TRIP ID</th>
                    <th>MAP</th>
                    <th>SPEED</th>
                </tr>
            </thead>
            <tbody>
                <tr onclick="loadDetailView('213566449616', 'Bijoy Kumar', '23564153', '85')">
                    <td>#213566449616</td>
                    <td>Bijoy Kumar</td>
                    <td>23564153</td>
                    <td><a href="#" onclick="event.stopPropagation()">Live Tracking</a></td>
                    <td><span class="speed high">85KM</span></td>
                </tr>
                <tr onclick="loadDetailView('213566449616', 'Anand Krishnamurt', '23564153', '25')">
                    <td>#213566449616</td>
                    <td>Anand Krishnamurt</td>
                    <td>23564153</td>
                    <td><a href="#" onclick="event.stopPropagation()">See Location</a></td>
                    <td><span class="speed low">25KM</span></td>
                </tr>
            </tbody>
        </table>
        <div class="pagination">
            <button>&lt;</button>
            <button class="active">1</button>
            <button>2</button>
            <button>3</button>
            <button>4</button>
            <button>5</button>
            <button>&gt;</button>
        </div>
    </div>

    <div id="detailView" style="display:none;">
        <div class="tabs">
            <div class="tab" onclick="switchTab('realtime')">Real Time Tracking</div>
            <div class="tab active" onclick="switchTab('history')">Route History</div>
        </div>

        <div class="content">
            <div class="driver-details">
                <img src="{% static 'images\path_to_driver_image.jpg' %}" alt="Driver" class="driver-image">
                <h2>Luis V. Gauthier</h2>
                <p>GI-05-KK-2563</p>
                <p><strong>Age: </strong> 31</p>
                <p><strong>Total Violation: </strong> 125</p>
                <p><strong>GPS Device ID:</strong> 125</p>
                <p><strong>Dashcam ID:</strong> 125</p>
                <p><strong>Trip ID:</strong> 1256457890</p>
                <p><strong>Driver ID:</strong> 1256457890</p>
            </div>
            <div class="main-content">
                <div id="realtime-view" style="display: none;">
                    <div class="vehicle-stats">
                        <span class="stat-number">40</span>
                        <span class="stat-label">Park A</span>
                        <p>Total Vehicle Movement</p>
                    </div>
                    <div class="map">
                        <!-- Real-time map content -->
                        <div class="vehicle-icon"></div>
                    </div>
                </div>
                <div id="history-view">
                    <div class="view-buttons">
                        <button class="view-button" onclick="switchView('map')">Map view</button>
                        <button class="view-button active" onclick="switchView('table')">Table view</button>
                    </div>
                    <div class="date-range" id="date-range" style="display: none;">
                        <input type="date" class="date-input" value="2024-05-08">
                        <input type="date" class="date-input" value="2024-05-14">
                    </div>
                    <div class="map-view" style="display: none;">
                        <div class="date-legend">
                            <div class="date-item"><div class="date-color" style="background-color: #FF0000;"></div>12/10/2024</div>
                            <div class="date-item"><div class="date-color" style="background-color: #FFA500;"></div>13/10/2024</div>
                            <div class="date-item"><div class="date-color" style="background-color: #00FFFF;"></div>14/10/2024</div>
                            <div class="date-item"><div class="date-color" style="background-color: #0000FF;"></div>15/10/2024</div>
                            <div class="date-item"><div class="date-color" style="background-color: #800080;"></div>16/10/2024</div>
                            <div class="date-item"><div class="date-color" style="background-color: #FFD700;"></div>17/10/2024</div>
                            <div class="date-item"><div class="date-color" style="background-color: #00BFFF;"></div>18/10/2024</div>
                        </div>
                        <div class="map">
                            <!-- Map content would go here -->
                        </div>
                        <div class="map-controls">
                            <button class="zoom-in">+</button>
                            <button class="zoom-out">-</button>
                        </div>
                    </div>
                    <div class="table-view">
                        <table>
                            <thead>
                                <tr>
                                    <th>DATE</th>
                                    <th>ZONE NAME</th>
                                    <th>PARK NAME</th>
                                    <th>VEHICLE NUMBER</th>
                                    <th>GPS NUMBER</th>
                                    <th>TRIP ID</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>09/10/2024</td>
                                    <td>Zone Name Goes Here</td>
                                    <td>Park Name Goes Here</td>
                                    <td>Park Name Goes Here</td>
                                    <td>b113</td>
                                    <td>15486</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .driver-details p{
        margin-top: 10px;
    }
    .vehicle-tracking-container {
        font-family: Arial, sans-serif;
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
        background-color: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    h1 {
        color: #333;
        text-align: center;
    }
    .actions {
        margin-bottom: 20px;
        text-align: right;
    }
    button {
        padding: 8px 16px;
        margin-left: 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 12px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
        font-weight: bold;
        font-size: 14px;
    }
    tbody tr {
        cursor: pointer;
    }
    tbody tr:hover {
        background-color: #f5f5f5;
    }
    .speed {
        padding: 5px 10px;
        border-radius: 15px;
        color: white;
        display: inline-block;
    }
    .speed.high {
        background-color: #ff4d4d;
    }
    .speed.medium {
        background-color: #ffa64d;
    }
    .speed.low {
        background-color: #5cd65c;
    }
    .pagination {
        margin-top: 20px;
        text-align: center;
    }
    .pagination button {
        margin: 0 5px;
        background-color: #f2f2f2;
        color: black;
    }
    .pagination button.active {
        background-color: #4CAF50;
        color: white;
    }
    .tabs {
        display: flex;
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
    }
    .tab {
        padding: 15px 20px;
        cursor: pointer;
        border-bottom: 2px solid transparent;
    }
    .tab.active {
        border-bottom: 2px solid #007bff;
        color: #007bff;
    }
    .content {
        display: flex;
        padding: 20px;
    }
    .driver-details {
        width: 25%;
        padding-right: 20px;
    }
    .driver-image {
        width: 100%;
        border-radius: 10px;
        margin-bottom: 15px;
    }
    .main-content {
        width: 75%;
    }
    .view-buttons {
        text-align: right;
        margin-bottom: 20px;
    }
    .view-button {
        padding: 8px 16px;
        margin-right: 10px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        background-color: #f0f0f0;
        color: #333;
    }
    .view-button.active {
        background-color: #007bff;
        color: white;
    }
    .map {
        width: 100%;
        height: 500px;
        background-color: #e9ecef;
        border-radius: 8px;
        position: relative;
    }
    .date-legend {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    .date-item {
        display: flex;
        align-items: center;
    }
    .date-color {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 5px;
    }
    .map-controls {
        position: absolute;
        right: 20px;
        bottom: 20px;
    }
    .map-controls button {
        width: 30px;
        height: 30px;
        background-color: white;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 18px;
        cursor: pointer;
    }
    .date-range {
        margin-bottom: 20px;
    }
    .date-input {
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
</style>

<script>
function loadDetailView(vehicleId, driverName, tripId, speed) {
    document.getElementById('mainView').style.display = 'none';
    document.getElementById('detailView').style.display = 'block';
    // You can use the parameters to update the detail view with specific data
    console.log('Loading detail view for:', vehicleId, driverName, tripId, speed);
}

function switchTab(tab) {
    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
    event.target.classList.add('active');
    if (tab === 'realtime') {
        document.getElementById('realtime-view').style.display = 'block';
        document.getElementById('history-view').style.display = 'none';
    } else {
        document.getElementById('realtime-view').style.display = 'none';
        document.getElementById('history-view').style.display = 'block';
    }
}

function switchView(view) {
    document.querySelectorAll('.view-button').forEach(b => b.classList.remove('active'));
    event.target.classList.add('active');
    if (view === 'map') {
        document.querySelector('.map-view').style.display = 'block';
        document.querySelector('.table-view').style.display = 'none';
        document.getElementById('date-range').style.display = 'none';
    } else {
        document.querySelector('.map-view').style.display = 'none';
        document.querySelector('.table-view').style.display = 'block';
        document.getElementById('date-range').style.display = 'block';
    }
}
</script>

{% endblock %}