<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Raise New Bill</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'report.css' %}">
</head>

<body>

   
    <nav class="navbar">
        
        <div class="logo-container">
            <img src="{% static 'assets/logo-kds.jpg' %}" alt="Logo" class="logo-img">
            <div class="heading">Travel Log Management</div>

        </div>

        
        <div class="nav-right">
            <ul class="nav-links">
                <li><a href="{% url 'travel_bill_report' %}">Reports</a></li>
                {% if show_bill_generate %}
                    <li><a href="{% url 'bill_generate' %}" >Bill Generate</a></li>
                {% endif %}
                <li class="inactive-link">Invoice</li>
            </ul>
            <button id="logoutBtn" class="logout-btn">Logout</button>

            <form id="logoutForm" method="POST" action="{% url 'logout' %}" style="display: none;">
                {% csrf_token %}
            </form>
        </div>
        
    </nav>
    
    
    <div class="welcome-container">
        <h2>Welcome, {{ user_type }}!</h2>
        
        <div class="filter-container">
            <label for="fromDate">From:</label>
            <input type="date" id="fromDate" name="from_date">
            
            <label for="toDate">To:</label>
            <input type="date" id="toDate" name="to_date">
            
            <button id="getButton">Get</button>
        </div>
 <!-- Travel Bill Report Section -->
 <div class="form-container">
    
    <div class="header-container">
        <h1>Travel Bill Report</h1>
        <button id="downloadExcel" class="download-btn">Download</button>
    </div>
    <table id="travelBillTable">
        <thead>
            <tr>
                <th>S.No.</th>
                <th>Guest Name</th>
                <th>Cell No.</th>
                <th>Vehicle Type</th>
                <th>Vehicle Details</th>
                <th>From Date & Time</th>
                <th>To Date & Time</th>
                <th>Visit Places</th>
                <th>Opening KMs</th>
                <th>Closing KMs</th>
                <th>Total KMs</th>
                <th>Amount</th>
                <th>Night</th>
                <th>Toll</th>
                <th>Total Amount</th>
                <th>Driver Name</th>
                <th>Driver Mobile</th>
                <th>Document</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            {% for bill in travel_bills %}
            <tr>
                <td>{{ bill.id }}</td>
                <td>{{ bill.guest_name }}</td>
                <td>{{ bill.cell_no }}</td>
                <td>{{ bill.vehicle_type }}</td>
                <td>{{ bill.vehicle_details }}</td>
                <td>{{ bill.from_date_time }}</td>
                <td>{{ bill.to_date_time }}</td>
                <td>{{ bill.visit_places }}</td>
                <td>{{ bill.opening_kms }}</td>
                <td>{{ bill.closing_kms }}</td>
                <td>{{ bill.total_kms }}</td>
                <td>{{ bill.amt }}</td>
                <td>{{ bill.night }}</td>
                <td>{{ bill.toll }}</td>
                <td>{{ bill.total_amount }}</td>
                <td>{{ bill.driver_name }}</td>
                <td>{{ bill.driver_mobile }}</td>
                <td>
                    {% if bill.document %}
                        <a href="{{ bill.document.url }}" target="_blank">View Document</a>
                    {% else %}
                        No document uploaded
                    {% endif %}
                </td>

                <td>
                    {% if user_type|lower == "kds" %}
                        <button class="btn paid-btn">Paid</button>
                    {% elif user_type|lower == "agent" %}
                        <button class="btn view-btn">View</button>
                        <button class="btn edit-btn">Edit</button>
                        <button class="btn delete-btn">Delete</button>
                    {% endif %}
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="17">No data available</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.4/xlsx.full.min.js"></script>

<script src="{% static '/main.js' %}"></script>
    


</body>
</html>
