{% extends 'base.html' %}
{% block content %}
<head>
    <title>Manage Work Order</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">

</head>
</head>
<body>
   <div class="button-container">
    <button id="addButton" class="action-button">Add</button>
    <button id="displayButton" class="action-button">Display</button>
</div>
   <form action="/submit_work_order" method="POST">
    <div id="addForm" style="display: none;">
        <h2>Create Work Order</h2>


            <!-- Subcontractor Dropdown -->
            <label for="subcontractor_id">Select Vender Name:</label><br>
            <select name="vendor_name" id="vendor_name" required>
                <option value="">-- Select Subcontractor --</option>
                {% for sc in subcontractor %}
                    <option value="{{ sc.Contractor_Name }}">{{ sc.Contractor_Name }}</option>
                {% endfor %}
            </select><br><br>



            <label for="work_order_number">Work Order Number:</label><br>
<input type="text" id="work_order_number" name="work_order_number" required><br><br>

<label for="work_order_amount">Work Order Amount</label><br>
<input type="number" step="0.01" id="work_order_amount" name="work_order_amount" required><br><br>

<label for="gst_amount">GST Amount:</label><br>
<input type="number" step="0.01" id="gst_amount" name="gst_amount" required><br><br>

<label for="tds_amount">TDS Amount:</label><br>
<input type="number" step="0.01" id="tds_amount" name="tds_amount" required><br><br>

<label for="security_deposit">Security Deposit:</label><br>
<input type="number" step="0.01" id="security_deposit" name="security_deposit" required><br><br>

<label for="sd_against_gst">SD Against GST:</label><br>
<input type="number" step="0.01" id="sd_against_gst" name="sd_against_gst" required><br><br>

<label for="final_total">Final Total:</label><br>
<input type="number" step="0.01" id="final_total" name="final_total" readonly><br><br>

            <input type="submit" value="Submit">
    </div>
</form>
{#    display data #}
    <div id="addTable" style="display: none;">
{#  <div class="search-container">#}
{#        <h2>Hold Type List</h2>#}
{#        <input type="text" id="searchBar" placeholder="Searching..." onkeyup="searchTable()">#}
{#            </div>#}
    <table id="sortableTable" border="1">
        <tr>
            <th>ID</th>
            <th class="sortable-header">
                Vender Name
{#                <span class="sort-buttons">#}
{#                    <span class="sort-asc">⬆️</span>#}
{#                    <span class="sort-desc">⬇️</span>#}
{#                </span>#}
            </th>
            <th>Work Order Type</th>
             <th>Work Order Amount</th>
            <th>BOQ Amount</th>
            <th>Work Done Percentage</th>
            <th>Update</th>
            <th>Delete</th>
        </tr>
        {% for htd in wo %}
        <tr>
            <td>{{ htd.work_order_id }}</td>
            <td>{{ htd['vendor_name'] }}</td>
            <td>{{ htd['work_order_type'] }}</td>
            <td>{{ htd['work_order_amount'] }}</td>
            <td>{{ htd['boq_amount'] }}</td>
            <td>{{ htd['work_done_percentage'] }}</td>
            <td>{{ htd['work_order_number'] }}</td>
            <td>{{ htd['gst_amount'] }}</td>
            <td>{{ htd['tds_amount'] }}</td>
            <td>{{ htd[''] }}</td>
            <td><a href="{{ url_for('update_work_order', id=htd['work_order_id']) }}">Edit</a></td>
            <td>
    <form action="{{ url_for('delete_work_order', id=htd['work_order_id']) }}" method="POST" style="display:inline;">
        <button type="submit" onclick="return confirm('Are you sure you want to delete this work order?');" class="delete-button">Delete</button>
    </form>
</td>
        </tr>
        {% endfor %}
    </table>

    <a href="/">Back to Dashboard</a>
</div>
<script>
$(document).ready(function () {
    $('#displayButton').click(function () {
        $('#addTable').toggle();
    });

    $('#addButton').click(function () {
        $('#addForm').toggle();

        // Bind input event handlers ONLY after form is shown
        setTimeout(function () {
            ["work_order_amount", "gst_amount", "tds_amount", "security_deposit", "sd_against_gst"].forEach(function (id) {
                document.getElementById(id).addEventListener("input", calculateFinalTotal);
            });
        }, 100); // Delay ensures elements are available in DOM
    });

    function calculateFinalTotal() {
        const workOrderAmount = parseFloat(document.getElementById("work_order_amount").value) || 0;
        const gstAmount = parseFloat(document.getElementById("gst_amount").value) || 0;
        const tdsAmount = parseFloat(document.getElementById("tds_amount").value) || 0;
        const securityDeposit = parseFloat(document.getElementById("security_deposit").value) || 0;
        const sdAgainstGst = parseFloat(document.getElementById("sd_against_gst").value) || 0;

        const finalTotal = workOrderAmount + gstAmount - (tdsAmount + securityDeposit + sdAgainstGst);
        document.getElementById("final_total").value = finalTotal.toFixed(2);
    }
});
</script>

</body>



{% endblock %}