<!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 'welcome.css' %}">
</head>
<body>

    <!-- Navbar -->
   
    <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 request.session.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="form-container">
        <h1>Raise New Bill</h1>
        
            <form method="post" action="{% url 'travel_bill_submission' %}" id="welcomeForm" enctype="multipart/form-data">


            {% csrf_token %}
            
            <label>Guest Name:</label>
            <input type="text" name="guest_name" required>

            <label>Cell No.:</label>
            <input type="text" name="cell_no" pattern="[0-9]{10}" maxlength="10" required>


            <label>Vehicle Type:</label>
            <select name="vehicle_type" required>
                <option value="">Select Vehicle Type</option>
                <option value="sedan">Sedan</option>
                <option value="suv">SUV</option>
                <option value="hatchback">Hatchback</option>
            </select>

            <label>Vehicle Details:</label>
            <input type="text" name="vehicle_details" required>
        

            <label>From Date and Time:</label>
            <input type="datetime-local" name="from_date_time" required>

            <label>To Date and Time:</label>
            <input type="datetime-local" name="to_date_time" required>

            <label>Visit Places:</label>
            <input type="text" name="visit_places" required>

            <label>Closing KMs:</label>
            <input type="number" name="closing_kms" id="closing_kms" required >
           

            <label>Opening KMs:</label>
            <input type="number" name="opening_kms" id="opening_kms" required >
            
            
            <label>Total KMs:</label>
            <input type="number" name="total_kms" id="total_kms" readonly>

            <label>Amount:</label>
            <input type="number" name="amt" required>

            <label>Night Charges:</label>
            <input type="number" name="night" id="night" readonly>

            <label>Toll:</label>
            <input type="number" name="toll" required>

            <label>Total Amount:</label>
            <input type="number" name="total_amount" id="total_amount" readonly>

            <label>Driver Name:</label>
            <input type="text" name="driver_name" >

            <label>Driver Mobile No.:</label>
            <input type="text" name="driver_mobile" pattern="[0-9]{10}" maxlength="10" >

            <label>Upload Document (PDF only, max 1MB):</label>
            <input type="file" name="document" accept="application/pdf" required>
            
            <button type="submit">Submit</button>
        </form>
    </div>
<div class="loading-overlay" id="loadingOverlay">
        Saving... Please wait.
    </div>
    
    <script src="{% static '/bill_generate.js' %}"></script>

</body>
</html>
