@extends('admin.admin_dashboard')
@section('admin')

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">

<div class="container-fluid p-0">
<<<<<<< HEAD

    {{-- POS Top Navbar --}}
=======
>>>>>>> origin/main
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm sticky-top">
        <div class="container-fluid">
            <a class="navbar-brand fw-bold text-uppercase">☕ POS</a>
            <ul class="navbar-nav ms-auto d-flex flex-row gap-3 align-items-center">
<<<<<<< HEAD
                <li class="nav-item"><a href="javascript:void(0)" class="nav-link text-white" onclick="toggleFullScreen()" title="Fullscreen"><i class="bi bi-arrows-fullscreen"></i></a></li>
                <li class="nav-item"><a href="javascript:void(0)" class="nav-link text-white" data-bs-toggle="modal" data-bs-target="#calculatorModal" title="Calculator"><i class="bi bi-calculator"></i></a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle text-white" href="#" role="button" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></a>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="#"><i class="bi bi-printer me-2"></i> Print Receipt</a></li>
                        <li><a class="dropdown-item" href="#"><i class="bi bi-arrow-clockwise me-2"></i> Refresh</a></li>
                        <li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i> Settings</a></li>
                    </ul>
=======
                <li class="nav-item">
                    <a href="{{ route('beverage.inventory.report') }}" class="nav-link text-white">Inventory Report</a>
>>>>>>> origin/main
                </li>
            </ul>
        </div>
    </nav>

<<<<<<< HEAD
    {{-- POS Main --}}
    <div class="container-fluid py-4">
        <h2 class="mb-4 fw-bold text-center">☕ Coffee Shop POS</h2>
=======
    <div class="container-fluid py-4">
        <h2 class="mb-4 fw-bold text-center">Coffee Shop POS</h2>
>>>>>>> origin/main

        @if(session('success'))
            <div class="alert alert-success text-center fw-bold">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger text-center fw-bold">{{ session('error') }}</div>
        @endif

        <form action="{{ route('beverage.sales.store') }}" method="POST" id="pos-form">
            @csrf
<<<<<<< HEAD
            <div class="row g-4">

                {{-- LEFT: Customer + Product --}}
                <div class="col-lg-6">
                    <div class="card shadow-lg border-0 rounded-3 p-4">
                        <h5 class="fw-bold mb-3">👤 Customer</h5>
                        <select name="customer_id" class="form-select form-select-lg mb-4" required>
                            <option value="">-- Select Customer --</option>
                            @foreach($customers as $customer)
                                <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                            @endforeach
                        </select>

                        <h5 class="fw-bold mb-3">📦 Add Product</h5>
                        <select id="source_item" class="form-select form-select-lg mb-3">
                            <option value="">-- Choose Stock --</option>
                            @foreach($roastings as $r)
                                <option value="roasting-{{ $r->id }}" data-type="roasting" data-id="{{ $r->id }}" data-available="{{ $r->roasted_quantity }}">
                                    Roasted #{{ $r->id }} ({{ $r->roasted_quantity }})
                                </option>
                            @endforeach
                            @foreach($grindings as $g)
                                <option value="grinding-{{ $g->id }}" data-type="grinding" data-id="{{ $g->id }}" data-available="{{ $g->ground_quantity }}">
                                    Ground #{{ $g->id }} ({{ $g->ground_quantity }})
                                </option>
                            @endforeach
                            @foreach($packagings as $p)
                                <option value="packaging-{{ $p->id }}" data-type="packaging" data-id="{{ $p->id }}" data-available="{{ $p->packaged_quantity }}">
                                    Packaged #{{ $p->id }} ({{ $p->packaged_quantity }})
=======
            <input type="hidden" name="sale_date" value="{{ now()->toDateString() }}">
            <input type="hidden" name="discount_percent" id="discount_percent" value="0">

            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="card shadow-lg border-0 rounded-3 p-4">
                        <h5 class="fw-bold mb-3">Customer (A/R Account)</h5>
                        <select name="account_id" class="form-select form-select-lg mb-4" required>
                            <option value="">-- Select Customer Account --</option>
                            @foreach($customers as $customer)
                                <option value="{{ $customer->id }}" @selected(old('account_id') == $customer->id)>
                                    {{ $customer->code }} — {{ $customer->name }}
                                </option>
                            @endforeach
                        </select>

                        <h5 class="fw-bold mb-3">Add Product</h5>
                        <select id="product_item" class="form-select form-select-lg mb-3">
                            <option value="">-- Choose Product --</option>
                            @foreach($products as $product)
                                <option value="{{ $product->id }}"
                                        data-name="{{ $product->name }}"
                                        data-available="{{ $product->available_units }}"
                                        data-price="{{ $product->selling_price }}">
                                    {{ $product->name }} — Stock: {{ $product->available_units }} — UGX {{ number_format($product->selling_price) }}
>>>>>>> origin/main
                                </option>
                            @endforeach
                        </select>

                        <div class="row g-2">
<<<<<<< HEAD
                            <div class="col-md-4">
                                <input type="number" id="quantity" class="form-control form-control-lg" placeholder="Qty" step="0.01">
                            </div>
                            <div class="col-md-4">
                                <input type="number" id="price" class="form-control form-control-lg" placeholder="Price" step="0.01">
                            </div>
                            <div class="col-md-4">
                                <button type="button" id="add-to-cart" class="btn btn-success btn-lg w-100">➕ Add</button>
=======
                            <div class="col-md-6">
                                <input type="number" id="quantity" class="form-control form-control-lg" placeholder="Qty (units)" min="1" step="1">
                            </div>
                            <div class="col-md-6">
                                <button type="button" id="add-to-cart" class="btn btn-success btn-lg w-100">Add to Cart</button>
>>>>>>> origin/main
                            </div>
                        </div>

                        <div class="row g-2 mt-3">
                            <div class="col-md-6">
<<<<<<< HEAD
                                <input type="number" id="discount" class="form-control form-control-lg" placeholder="Discount %">
                            </div>
                            <div class="col-md-6">
                                <button type="button" id="apply-discount" class="btn btn-warning btn-lg w-100">💲 Apply Discount</button>
=======
                                <input type="number" id="discount" class="form-control form-control-lg" placeholder="Discount %" min="0" max="100" step="0.01">
                            </div>
                            <div class="col-md-6">
                                <button type="button" id="apply-discount" class="btn btn-warning btn-lg w-100">Apply Discount</button>
>>>>>>> origin/main
                            </div>
                        </div>
                    </div>
                </div>

<<<<<<< HEAD
                {{-- RIGHT: Cart + Payment --}}
                <div class="col-lg-6">
                    <div class="card shadow-lg border-0 rounded-3 p-4">
                        <h5 class="fw-bold mb-3">🛒 Cart</h5>
=======
                <div class="col-lg-6">
                    <div class="card shadow-lg border-0 rounded-3 p-4">
                        <h5 class="fw-bold mb-3">Cart</h5>
>>>>>>> origin/main
                        <div class="table-responsive">
                            <table class="table align-middle" id="cart-table">
                                <thead class="table-light">
                                    <tr>
<<<<<<< HEAD
                                        <th>Item</th>
=======
                                        <th>Product</th>
>>>>>>> origin/main
                                        <th>Qty</th>
                                        <th>Price</th>
                                        <th>Total</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>

                        <div class="mt-3 text-end">
<<<<<<< HEAD
                            <h5>Subtotal: <span id="subtotal">0.00</span></h5>
                            <h5>Discount: <span id="discount-amount">0.00</span></h5>
                            <h3 class="fw-bold text-success">Total: <span id="total">0.00</span></h3>
                        </div>

                        <div class="mt-3">
                            <label class="fw-bold">💰 Cash Received</label>
                            <input type="number" id="cash-received" class="form-control form-control-lg" placeholder="Enter cash">
                            <h5 class="mt-2">Change: <span id="change">0.00</span></h5>

                            <div class="row g-2 mt-2">
                                <div class="col"><button type="button" class="btn btn-outline-primary w-100" onclick="quickCash(500)">500</button></div>
                                <div class="col"><button type="button" class="btn btn-outline-primary w-100" onclick="quickCash(1000)">1000</button></div>
                                <div class="col"><button type="button" class="btn btn-outline-primary w-100" onclick="quickCash(2000)">2000</button></div>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary btn-lg w-100 mt-4">✅ Checkout</button>
                    </div>
                </div>

=======
                            <h5>Subtotal: UGX <span id="subtotal">0</span></h5>
                            <h5>Discount: UGX <span id="discount-amount">0</span></h5>
                            <h3 class="fw-bold text-success">Total: UGX <span id="total">0</span></h3>
                        </div>

                        <button type="submit" class="btn btn-primary btn-lg w-100 mt-4" id="checkout-btn" disabled>Checkout</button>
                    </div>
                </div>
>>>>>>> origin/main
            </div>
        </form>
    </div>
</div>

<<<<<<< HEAD


<script>
document.addEventListener("DOMContentLoaded", function () {
    const cartTable = document.querySelector("#cart-table tbody");
    const subtotalEl = document.getElementById("subtotal");
    const discountEl = document.getElementById("discount-amount");
    const totalEl = document.getElementById("total");
    const cashReceived = document.getElementById("cash-received");
    const changeEl = document.getElementById("change");

    let subtotal = 0;
    let discountPercent = 0;

    function recalcTotal() {
        let discountAmount = subtotal * (discountPercent/100);
        discountEl.textContent = discountAmount.toFixed(2);
        let total = subtotal - discountAmount;
        totalEl.textContent = total.toFixed(2);
        let cash = parseFloat(cashReceived.value) || 0;
        changeEl.textContent = (cash - total).toFixed(2);
    }

    document.getElementById("add-to-cart").addEventListener("click", function () {
        let select = document.getElementById("source_item");
        let option = select.options[select.selectedIndex];
        let quantity = parseFloat(document.getElementById("quantity").value);
        let price = parseFloat(document.getElementById("price").value);

        if (!option.value || isNaN(quantity) || isNaN(price)) { alert("⚠️ Select product, quantity & price."); return; }

        let type = option.getAttribute("data-type");
        let id = option.getAttribute("data-id");
        let available = parseFloat(option.getAttribute("data-available"));
        if (quantity > available) { alert("❌ Not enough stock!"); return; }

        let total = quantity * price;
        subtotal += total;

        let row = document.createElement("tr");
        row.innerHTML = `
            <td>${type} #${id}<input type="hidden" name="items[][type]" value="${type}"><input type="hidden" name="items[][id]" value="${id}"></td>
            <td>${quantity}<input type="hidden" name="items[][quantity]" value="${quantity}"></td>
            <td>${price.toFixed(2)}<input type="hidden" name="items[][price]" value="${price}"></td>
            <td>${total.toFixed(2)}</td>
            <td><button type="button" class="btn btn-outline-danger btn-sm remove-item">🗑</button></td>
        `;
        cartTable.appendChild(row);

        row.querySelector(".remove-item").addEventListener("click", function () {
            subtotal -= total; row.remove(); recalcTotal();
        });

        select.value = ""; document.getElementById("quantity").value = ""; document.getElementById("price").value = "";
        recalcTotal();
    });

    document.getElementById("apply-discount").addEventListener("click", function () {
        discountPercent = parseFloat(document.getElementById("discount").value) || 0;
        recalcTotal();
    });

    cashReceived.addEventListener("input", recalcTotal);

    window.quickCash = function(amount) {
        cashReceived.value = amount;
        recalcTotal();
    }
});

// Fullscreen
function toggleFullScreen() {
    if (!document.fullscreenElement) document.documentElement.requestFullscreen();
    else document.exitFullscreen();
}
=======
<script>
document.addEventListener('DOMContentLoaded', function () {
    const cartTable = document.querySelector('#cart-table tbody');
    const subtotalEl = document.getElementById('subtotal');
    const discountEl = document.getElementById('discount-amount');
    const totalEl = document.getElementById('total');
    const discountPercentInput = document.getElementById('discount_percent');
    const checkoutBtn = document.getElementById('checkout-btn');

    let subtotal = 0;
    let discountPercent = 0;
    let lineIndex = 0;

    function formatMoney(value) {
        return Number(value).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 });
    }

    function recalcTotal() {
        const discountAmount = subtotal * (discountPercent / 100);
        discountEl.textContent = formatMoney(discountAmount);
        totalEl.textContent = formatMoney(subtotal - discountAmount);
        checkoutBtn.disabled = subtotal <= 0;
    }

    document.getElementById('add-to-cart').addEventListener('click', function () {
        const select = document.getElementById('product_item');
        const option = select.options[select.selectedIndex];
        const quantity = parseInt(document.getElementById('quantity').value, 10);
        const price = parseFloat(option?.dataset?.price || 0);

        if (!option?.value || !quantity || quantity < 1 || !price) {
            alert('Select a product and enter a valid quantity.');
            return;
        }

        const available = parseInt(option.dataset.available, 10);
        if (quantity > available) {
            alert('Not enough stock for this product.');
            return;
        }

        const total = quantity * price;
        subtotal += total;

        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${option.dataset.name}
                <input type="hidden" name="items[${lineIndex}][product_id]" value="${option.value}">
            </td>
            <td>${quantity}
                <input type="hidden" name="items[${lineIndex}][quantity]" value="${quantity}">
            </td>
            <td>${formatMoney(price)}
                <input type="hidden" name="items[${lineIndex}][price]" value="${price}">
            </td>
            <td>${formatMoney(total)}</td>
            <td><button type="button" class="btn btn-outline-danger btn-sm remove-item">Remove</button></td>`;

        row.querySelector('.remove-item').addEventListener('click', function () {
            subtotal -= total;
            row.remove();
            recalcTotal();
        });

        cartTable.appendChild(row);
        lineIndex++;

        select.value = '';
        document.getElementById('quantity').value = '';
        recalcTotal();
    });

    document.getElementById('apply-discount').addEventListener('click', function () {
        discountPercent = parseFloat(document.getElementById('discount').value) || 0;
        discountPercentInput.value = discountPercent;
        recalcTotal();
    });
});
>>>>>>> origin/main
</script>

@endsection