<?php
session_start();

require_once '../../config/database.php';
require_once '../../includes/auth.php';

$basePath = '../../';
include '../../includes/header.php';

$db = (new Database())->connect();
?>

<div class="container-fluid mt-3">

    <div class="row">

        <!-- LEFT SIDE -->
        <div class="col-md-8">

            <div class="card shadow-sm mb-3">
                <div class="card-body">

                    <div class="row">
                        <div class="col-md-12">
                            <input
                                type="text"
                                id="search"
                                class="form-control"
                                placeholder="Search item..."
                            >
                        </div>
                    </div>

                    <hr>

                    <div id="categories"></div>

                </div>
            </div>

            <div class="row scroll-area" id="items-container"></div>

        </div>

        <!-- RIGHT SIDE -->
        <div class="col-md-4">

            <div class="card shadow-sm">
                <div class="card-header">
                    <h5>Cart</h5>
                </div>

                <div class="card-body">

                    <div id="cart-container"></div>

                    <hr>

                    <div class="mb-2">
                        <label>Customer Name</label>
                        <input
                            type="text"
                            id="customer_name"
                            class="form-control"
                        >
                    </div>

                    <div class="mb-2">
                        <label>Mobile</label>
                        <input
                            type="text"
                            id="customer_mobile"
                            class="form-control"
                        >
                    </div>

                    <div class="mb-2">
                        <label>Discount</label>
                        <input
                            type="number"
                            id="discount"
                            class="form-control"
                            value="0"
                        >
                    </div>

                    <div class="mb-2">
                        <label>Payment Mode</label>
                        <select id="payment_mode" class="form-control">
                            <option>Cash</option>
                            <option>UPI</option>
                            <option>Card</option>
                        </select>
                    </div>

                    <div class="mb-3 total-box">
                        Total: ₹ <span id="grand-total">0.00</span>
                    </div>

                    <button
                        class="btn btn-success w-100 mb-2"
                        onclick="saveOrder()"
                    >
                        Save Bill
                    </button>

                    <button
                        class="btn btn-primary w-100"
                        onclick="printBill()"
                    >
                        Print Bill
                    </button>

                </div>
            </div>

        </div>

    </div>

</div>

<script>
loadCategories();
loadItems();
loadCart();

function loadCategories() {
    fetch('load_items.php?action=categories')
        .then(res => res.text())
        .then(data => {
            document.getElementById('categories').innerHTML = data;
        });
}

function loadItems(category = '', search = '') {
    fetch(`load_items.php?action=items&category=${category}&search=${search}`)
        .then(res => res.text())
        .then(data => {
            document.getElementById('items-container').innerHTML = data;
        });
}

function addToCart(itemId) {
    fetch(`add_to_cart.php?id=${itemId}`)
        .then(() => loadCart());
}

function updateCart(itemId, action) {
    fetch(`update_cart.php?id=${itemId}&action=${action}`)
        .then(() => loadCart());
}

function removeCart(itemId) {
    fetch(`remove_cart.php?id=${itemId}`)
        .then(() => loadCart());
}

function loadCart() {
    fetch('cart.php')
        .then(res => res.json())
        .then(data => {
            document.getElementById('cart-container').innerHTML = data.html;
            document.getElementById('grand-total').innerText = data.total;
        });
}

function saveOrder() {
    let formData = new FormData();

    formData.append(
        'customer_name',
        document.getElementById('customer_name').value
    );

    formData.append(
        'customer_mobile',
        document.getElementById('customer_mobile').value
    );

    formData.append(
        'discount',
        document.getElementById('discount').value
    );

    formData.append(
        'payment_mode',
        document.getElementById('payment_mode').value
    );

    fetch('save_order.php', {
        method: 'POST',
        body: formData
    })
    .then(res => res.text())
    .then(data => {
        alert(data);
        loadCart();
    });
}

function printBill() {
    window.open('print_bill.php', '_blank');
}

document.getElementById('search').addEventListener('keyup', function () {
    loadItems('', this.value);
});
</script>

<?php include '../../includes/footer.php'; ?>