@extends('layouts.app')
@section('title','New Sale')@section('page-title','New Sale')
@section('content')
<div class="page-header"><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="{{ route('sales.index') }}">Sales</a></li><li class="breadcrumb-item active">New Sale</li></ol></nav><h1>New Sale Order</h1></div>
<form action="{{ route('sales.store') }}" method="POST" id="saleForm">
@csrf
<div class="row g-4">
<div class="col-12 col-xl-8">
    <div class="card mb-4"><div class="card-body p-4">
        <h6 class="fw-700 mb-3" style="font-family:'Space Grotesk',sans-serif;">Add Products</h6>
        <div class="row g-2 mb-3">
            <div class="col-md-8"><div class="search-bar"><i class="bi bi-search"></i><input type="text" id="productSearch" class="form-control" placeholder="Search product by name or SKU..."></div></div>
            <div class="col-md-4"><button type="button" class="btn btn-brand w-100" onclick="addSelectedProduct()"><i class="bi bi-plus-lg me-1"></i>Add Item</button></div>
        </div>
        <div id="productDropdown" class="list-group mb-3" style="display:none;max-height:220px;overflow-y:auto;border-radius:12px;border:1px solid var(--border-c)"></div>
        <div id="cartSection" style="display:none"><div class="table-responsive"><table class="table mb-0" id="cartTable"><thead><tr><th>Product</th><th>Qty</th><th>Price (LRD)</th><th>Price (USD)</th><th>Subtotal</th><th></th></tr></thead><tbody id="cartBody"></tbody></table></div></div>
        <div id="emptyCart" class="text-center py-5 text-muted"><i class="bi bi-cart" style="font-size:36px"></i><p class="mt-2 mb-0">Search and add products to this sale</p></div>
    </div></div>
    <div class="card"><div class="card-body p-4"><label class="form-label">Notes (optional)</label><textarea name="notes" class="form-control" rows="2"></textarea></div></div>
</div>
<div class="col-12 col-xl-4">
    <div class="card mb-4"><div class="card-body p-4">
        <h6 class="fw-700 mb-4" style="font-family:'Space Grotesk',sans-serif;">Order Details</h6>
        @if(auth()->user()->isAdmin())
        <div class="mb-3"><label class="form-label">Branch *</label><select name="branch_id" class="form-select" required><option value="">— Select Branch —</option>@foreach($branches as $b)<option value="{{ $b->id }}">{{ $b->code }} — {{ $b->name }}</option>@endforeach</select></div>
        @else
        <input type="hidden" name="branch_id" value="{{ auth()->user()->branch_id }}">
        <div class="mb-3 p-3 rounded-3" style="background:rgba(46,196,182,.08);font-size:13px;"><i class="bi bi-building me-2" style="color:var(--accent)"></i><strong>{{ auth()->user()->branch?->name }}</strong></div>
        @endif
        <div class="mb-3"><label class="form-label">Customer</label><select name="customer_id" class="form-select"><option value="">— Walk-in Customer —</option>@foreach($customers as $c)<option value="{{ $c->id }}">{{ $c->name }}</option>@endforeach</select></div>
        <div class="mb-3"><label class="form-label">New Customer Name</label><input type="text" name="customer_name" class="form-control" placeholder="Or type new customer name"></div>
        <div class="mb-4"><label class="form-label">Payment Method *</label>
            <select name="payment_method" class="form-select" required>
                @foreach(['cash'=>'💵 Cash','transfer'=>'🏦 Bank Transfer','mobile'=>'📱 Mobile Money','credit'=>'📋 Credit'] as $val=>$label)
                <option value="{{ $val }}">{{ $label }}</option>@endforeach
            </select>
        </div>
        <div style="border-top:1px solid var(--border-c);padding-top:16px;">
            <div class="d-flex justify-content-between mb-2" style="font-size:14px;"><span class="text-muted">Subtotal (USD)</span><span id="subtotalUsd" class="fw-600">$0.00</span></div>
            <div class="d-flex justify-content-between mb-2" style="font-size:14px;"><span class="text-muted">Subtotal (LRD)</span><span id="subtotalLrd" class="fw-600">LRD 0.00</span></div>
            <div class="d-flex justify-content-between" style="font-size:20px;font-weight:800;"><span>Total (USD)</span><span id="totalUsd" style="color:var(--accent)">$0.00</span></div>
        </div>
    </div></div>
    <button type="submit" class="btn btn-brand w-100 py-3" id="submitBtn" disabled><i class="bi bi-check-circle me-2"></i>Complete Sale</button>
</div>
</div>
</form>
@endsection
@push('scripts')
<script>
const PRODUCTS = @json($productsJson);
let cart = [], selectedProduct = null;
const searchInput = document.getElementById('productSearch');
const dropdown    = document.getElementById('productDropdown');

searchInput.addEventListener('input', function() {
    const q = this.value.toLowerCase().trim();
    if (!q) { dropdown.style.display='none'; selectedProduct=null; return; }
    const matches = PRODUCTS.filter(p => p.name.toLowerCase().includes(q) || p.sku.toLowerCase().includes(q)).slice(0,8);
    if (!matches.length) { dropdown.style.display='none'; return; }
    dropdown.innerHTML = matches.map(p => `<button type="button" class="list-group-item list-group-item-action py-2" onclick="selectProduct(${p.id})" style="font-size:13px;background:var(--card-bg);border-color:var(--border-c)"><div class="d-flex justify-content-between"><strong>${p.name}</strong><small class="text-muted">${p.stock} ${p.unit} left</small></div><small class="text-muted">${p.sku} — ${p.category} — $${parseFloat(p.price_usd).toFixed(4)}</small></button>`).join('');
    dropdown.style.display = 'block';
});
document.addEventListener('click', e => { if (!searchInput.contains(e.target) && !dropdown.contains(e.target)) dropdown.style.display='none'; });

function selectProduct(id) { selectedProduct = PRODUCTS.find(p=>p.id===id); searchInput.value=selectedProduct.name; dropdown.style.display='none'; }
function addSelectedProduct() {
    if (!selectedProduct) { alert('Please select a product first.'); return; }
    const existing = cart.find(i=>i.id===selectedProduct.id);
    if (existing) { existing.qty++; } else { cart.push({...selectedProduct, qty:1, pl:selectedProduct.price_local, pu:selectedProduct.price_usd}); }
    searchInput.value=''; selectedProduct=null; renderCart();
}
function renderCart() {
    const tbody = document.getElementById('cartBody');
    document.getElementById('cartSection').style.display = cart.length?'block':'none';
    document.getElementById('emptyCart').style.display   = cart.length?'none':'block';
    document.getElementById('submitBtn').disabled = cart.length===0;
    tbody.innerHTML = cart.map((item,i) => `<tr>
        <td><input type="hidden" name="items[${i}][product_id]" value="${item.id}"><div style="font-size:13px;font-weight:600">${item.name}</div><div style="font-size:11px;color:var(--text-muted-c)">${item.sku}</div></td>
        <td style="width:80px"><input type="number" name="items[${i}][quantity]" class="form-control form-control-sm" value="${item.qty}" min="1" max="${item.stock}" oninput="updateQty(${i},this.value)" style="width:70px"></td>
        <td style="width:110px"><input type="number" name="items[${i}][unit_price_local]" class="form-control form-control-sm" value="${item.pl}" step="0.01" min="0" oninput="updatePL(${i},this.value)" style="width:100px"></td>
        <td style="width:110px"><input type="number" name="items[${i}][unit_price_usd]" class="form-control form-control-sm" value="${item.pu}" step="0.0001" min="0" oninput="updatePU(${i},this.value)" style="width:100px"></td>
        <td style="font-size:13px;font-weight:600">$${(item.pu*item.qty).toFixed(2)}</td>
        <td><button type="button" class="btn btn-sm btn-icon btn-outline-danger" onclick="removeItem(${i})"><i class="bi bi-trash"></i></button></td>
    </tr>`).join('');
    updateTotals();
}
function updateQty(i,v){cart[i].qty=Math.max(1,parseInt(v)||1);renderCart();}
function updatePL(i,v){cart[i].pl=parseFloat(v)||0;renderCart();}
function updatePU(i,v){cart[i].pu=parseFloat(v)||0;renderCart();}
function removeItem(i){cart.splice(i,1);renderCart();}
function updateTotals(){
    const tL=cart.reduce((s,i)=>s+i.pl*i.qty,0);
    const tU=cart.reduce((s,i)=>s+i.pu*i.qty,0);
    document.getElementById('subtotalLrd').textContent='LRD '+tL.toFixed(2);
    document.getElementById('subtotalUsd').textContent='$'+tU.toFixed(2);
    document.getElementById('totalUsd').textContent='$'+tU.toFixed(2);
}
</script>
@endpush