{% extends 'common/base.html' %}
{% load static %}
{% block title %} POS Order Create {% endblock %}
{% block content %}

<div class="container-fluid" id="container-wrapper">
    <div class="d-sm-flex align-items-center justify-content-between mb-2">
        <h1 class="h3 mb-0 text-gray-800 mt-2">
            POS Order Create
        </h1>
    </div>

    <div class="row">
        <!-- Left Side -->
        <div class="col-lg-9">
            <div class="card shadow mb-4">
                <div class="card-body">

                    <!-- Product Search -->
                    <div class="mb-3 position-relative">
                        <input type="text" class="form-control" id="productSearching" placeholder="Search by SKU, Product Name, Category...">
                        <div id="searchResults" class="list-group position-absolute w-100" style="z-index:1000;"></div>
                    </div>

                    <!-- Product Table -->
                    <div class="table-responsive">
                        <table class="table table-bordered" id="productItemTable">
                            <thead class="table-light">
                                <tr>
                                    <th>Image</th>
                                    <th>Product Name & SKU</th>
                                    <th width="120">Qty</th>
                                    <th width="150">Unit Price</th>
                                    <th width="150">Total</th>
                                    <th width="50">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Dynamic rows will load here -->
                            </tbody>
                        </table>
                    </div>

                    <!-- Order Summary -->
                    <div class="row mt-4">
                        <div class="col-md-6 offset-md-6">
                            <table class="table">
                                <tr>
                                    <th>Subtotal:</th>
                                    <td class="text-end" id="subtotal">৳ 0.00</td>
                                </tr>
                                <tr>
                                    <th>Discount:</th>
                                    <td class="text-end">
                                        <input type="number" id="discount" class="form-control text-end" value="0">
                                    </td>
                                </tr>
                                <tr>
                                    <th>Tax (5%):</th>
                                    <td class="text-end" id="tax">৳ 0.00</td>
                                </tr>
                                <tr>
                                    <th>VAT (3%):</th>
                                    <td class="text-end" id="vat">৳ 0.00</td>
                                </tr>
                                <tr class="table-dark">
                                    <th>Grand Total:</th>
                                    <td class="text-end fw-bold" id="grandTotal" data-amount="0">৳ 0.00</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <!-- Right Side -->
        <div class="col-lg-3">
            <div class="card shadow mb-4">
                <div class="card-body">

                    <!-- Customer Info -->
                    <h5 class="mb-3">Customer Info</h5>
                    <div class="mb-2">
                        <label>Customer Name</label>
                        <input type="text" class="form-control" placeholder="Enter customer name">
                    </div>
                    <div class="mb-2">
                        <label>Mobile</label>
                        <input type="text" class="form-control" placeholder="Enter mobile">
                    </div>
                    <div class="mb-2">
                        <label>Email</label>
                        <input type="email" class="form-control" placeholder="Enter email">
                    </div>
                    <div class="mb-2">
                        <label>Address</label>
                        <textarea class="form-control" rows="2" placeholder="Enter address"></textarea>
                    </div>

                    <hr>

                    <!-- Payment Info -->
                    <h5 class="mb-3">Payment Info</h5>
                    <div class="mb-2">
                        <label>Payment Method</label>
                        <select class="form-control">
                            <option>Cash</option>
                            <option>Card</option>
                            <option>Bkash</option>
                            <option>Rocket</option>
                            <option>Bank Transfer</option>
                        </select>
                    </div>
                    <div class="mb-2">
                        <label>Paid Amount</label>
                        <input type="number" id="paidAmount" class="form-control" value="0">
                    </div>
                    <div class="mb-2">
                        <label>Due Amount</label>
                        <input type="text" id="dueAmount" class="form-control" value="0.00" readonly>
                    </div>

                    <div class="d-grid mt-3">
                        <button class="btn btn-success btn-lg">Confirm Order</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function(){

    // Product Search
    $("#productSearching").keyup(function(){
        let query = $(this).val();
        if(query.length > 1){
            $.ajax({
                url: "{% url 'product_search' %}",
                data: {q: query},
                success: function(data){
    $("#searchResults").empty();
    data.forEach(function(item){
        let image = item.image || "{% static 'img/sample.png' %}";
        $("#searchResults").append(`
            <a href="#" class="list-group-item list-group-item-action product-select d-flex align-items-center" 
                data-id="${item.id}" 
                data-name="${item.name}" 
                data-sku="${item.sku}" 
                data-price="${item.price}" 
                data-image="${image}">
                
                <!-- Product Image -->
                <div class="me-3">
                    <img src="${image}" alt="${item.name}" width="40" height="40" style="margin-right:10px" class="rounded border">
                </div>

                <!-- Product Details in One Row -->
                <div class="d-flex flex-row w-100 justify-content-between align-items-center">
                    <span class="fw-bold">${item.name}</span>
                    <span class="text-muted">SKU: ${item.sku}</span>
                    <span class="text-success fw-semibold">৳ ${parseFloat(item.price).toFixed(2)}</span>
                </div>
            </a>
        `);
    });
}
            });
        } else {
            $("#searchResults").empty();
        }
    });

    // Click to select product
    $(document).on("click", ".product-select", function(e){
        e.preventDefault();
        let id = $(this).data("id");
        let name = $(this).data("name");
        let sku = $(this).data("sku");
        let price = $(this).data("price");
        let image = $(this).data("image") || "{% static 'img/sample.png' %}";

        // Check if product already exists in table
        let existingRow = $("#productItemTable tbody tr[data-id='"+id+"']");
        if(existingRow.length > 0){
            // Show alert instead of adding again
            alert("⚠️ This product is already added!");
        } else {
            // Append new row if not exists
            let row = `
            <tr data-id="${id}">
                <td><img src="${image}" alt="product" width="50"></td>
                <td>${name}<br><small>${sku}</small></td>
                <td><input type="number" class="form-control qty" value="1" min="1"></td>
                <td><input type="text" class="form-control unit-price" value="${price}"></td>
                <td class="row-total">${parseFloat(price).toFixed(2)}</td>
                <td><button class="btn btn-danger btn-sm remove-row">X</button></td>
            </tr>`;
            $("#productItemTable tbody").append(row);
        }

        $("#searchResults").empty();
        $("#productSearching").val("");
        updateGrandTotal();
    });

    // Qty or Price change
    $(document).on("input", ".qty, .unit-price", function(){
        let row = $(this).closest("tr");
        let qty = parseFloat(row.find(".qty").val()) || 0;
        let price = parseFloat(row.find(".unit-price").val()) || 0;
        let total = qty * price;
        row.find(".row-total").text(total.toFixed(2));
        updateGrandTotal();
    });

    // Remove Row
    $(document).on("click", ".remove-row", function(){
        $(this).closest("tr").remove();
        updateGrandTotal();
    });

    // Discount, Paid amount input change
    $("#discount, #paidAmount").on("input", function(){
        updateGrandTotal();
    });

    // Update totals
    function updateGrandTotal(){
        let subtotal = 0;
        $("#productItemTable tbody tr").each(function(){
            subtotal += parseFloat($(this).find(".row-total").text()) || 0;
        });

        // Discount
        let discount = parseFloat($("#discount").val()) || 0;

        // Tax = 5%, VAT = 3%
        let tax = subtotal * 0.05;
        let vat = subtotal * 0.03;

        let grandTotal = subtotal - discount + tax + vat;

        $("#subtotal").text("৳ " + subtotal.toFixed(2));
        $("#tax").text("৳ " + tax.toFixed(2));
        $("#vat").text("৳ " + vat.toFixed(2));
        $("#grandTotal").text("৳ " + grandTotal.toFixed(2));
        $("#grandTotal").data("amount", grandTotal);

        // Paid / Due
        let paid = parseFloat($("#paidAmount").val()) || 0;
        let due = grandTotal - paid;
        $("#dueAmount").val(due.toFixed(2));
    }
});
</script>

{% endblock %}