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

<div class="container-fluid my-4">

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-papP..." crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- POS Header -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3>Create Sale - POS</h3>
        <a href="{{ route('all.sale') }}" class="btn btn-outline-primary">Back</a>
    </div>

    <form id="posForm" action="{{ route('store.sale') }}" method="post" enctype="multipart/form-data">
        @csrf
        <div class="row g-3">

            <!-- Left Column: Warehouse, Customer, Product Search -->
            <div class="col-lg-8">
                <div class="card shadow-sm mb-3">
                    <div class="card-body">

                        <!-- Warehouse & Customer -->
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label>Warehouse:</label>
                                <select name="warehouse_id" id="warehouse_id" class="form-select" required>
                                    <option value="">Select Warehouse</option>
                                    @foreach($warehouses as $w)
                                        <option value="{{ $w->id }}">{{ $w->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 d-flex align-items-end">
                                <div class="flex-grow-1">
                                    <label>Customer:</label>
                                    <select name="customer_id" id="customer_id" class="form-select" required>
                                        <option value="">Select Customer</option>
                                        @foreach($customers as $c)
                                            <option value="{{ $c->id }}">{{ $c->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <button type="button" class="btn btn-success ms-2" data-bs-toggle="modal" data-bs-target="#addCustomerModal">
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                        </div>

                        <!-- Product Search -->
                        <div class="mb-3">
                            <label>Search Product:</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-search"></i></span>
                                <input type="search" id="product_search" class="form-control" placeholder="Enter product code or name">
                            </div>
                            <div id="product_list" class="list-group mt-2"></div>
                        </div>

                        <!-- Order Items Table -->
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover mb-0">
                                <thead class="table-dark">
                                    <tr>
                                        <th>Product</th>
                                        <th>Unit Cost</th>
                                        <th>Stock</th>
                                        <th>Qty</th>
                                        <th>Discount</th>
                                        <th>Subtotal</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="order_items">
                                    <!-- Rows added dynamically -->
                                </tbody>
                            </table>
                        </div>

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

            <!-- Right Column: Summary -->
            <div class="col-lg-4">
                <div class="card shadow-sm mb-3">
                    <div class="card-body">

                        <table class="table table-borderless mb-3">
                            <tr>
                                <td>Discount:</td>
                                <td id="displayDiscount">TK 0.00</td>
                            </tr>
                            <tr>
                                <td>Shipping:</td>
                                <td id="shippingDisplay">TK 0.00</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Grand Total:</td>
                                <td class="fw-bold text-primary" id="grandTotal">TK 0.00</td>
                                <input type="hidden" name="grand_total" id="grand_total">
                            </tr>
                            <tr>
                                <td>Paid Amount:</td>
                                <td><input type="number" name="paid_amount" id="paid_amount" class="form-control" value="0" step="0.01"></td>
                            </tr>
                            <tr>
                                <td>Due Amount:</td>
                                <td id="dueAmount">TK 0.00</td>
                                <input type="hidden" name="due_amount" id="due_amount">
                            </tr>
                        </table>

                        <div class="mb-3">
                            <label>Discount:</label>
                            <input type="number" name="discount" id="inputDiscount" class="form-control" value="0.00" step="0.01">
                        </div>
                        <div class="mb-3">
                            <label>Shipping:</label>
                            <input type="number" name="shipping" id="inputShipping" class="form-control" value="0.00" step="0.01">
                        </div>
                        <div class="mb-3">
                            <label>Status:</label>
                            <select name="status" class="form-select" required>
                                <option value="">Select Status</option>
                                <option value="Sale">Sale</option>
                                <option value="Pending">Pending</option>
                                <option value="Ordered">Ordered</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label>Notes:</label>
                            <textarea name="note" class="form-control" rows="3"></textarea>
                        </div>

                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg">Complete Sale</button>
                        </div>

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

        </div>
    </form>

    <!-- Add Customer Modal -->
    <div class="modal fade" id="addCustomerModal" tabindex="-1" aria-labelledby="addCustomerLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="addCustomerLabel">Add New Customer</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <form id="addCustomerForm">
            @csrf
            <div class="modal-body">
                <div class="mb-3">
                    <label>Name <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label>Phone</label>
                    <input type="text" name="phone" class="form-control">
                </div>
                <div class="mb-3">
                    <label>Email</label>
                    <input type="email" name="email" class="form-control">
                </div>
                   <div class="mb-3">
                    <label for="validationDefault01" class="form-label">Customer Address</label>
            <textarea name="address" class="form-control"></textarea>
                </div>
            </div>
            <div class="modal-footer">
              <button type="submit" class="btn btn-primary">Save Customer</button>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
          </form>
        </div>
      </div>
    </div>

</div>

<script>
// Product Search + Add to Table
const productSearchUrl = "{{ route('sale.product.search') }}";
const productSearchInput = document.getElementById('product_search');
const productList = document.getElementById('product_list');
const warehouseSelect = document.getElementById('warehouse_id');
const orderItems = document.getElementById('order_items');

productSearchInput.addEventListener('input', function(){
    const query = this.value.trim();
    const warehouse_id = warehouseSelect.value;
    if(!warehouse_id){ productList.innerHTML = '<div class="list-group-item text-danger">Select a warehouse first.</div>'; return; }
    if(query.length < 2){ productList.innerHTML=''; return; }
    fetch(`${productSearchUrl}?query=${query}&warehouse_id=${warehouse_id}`)
    .then(res=>res.json())
    .then(data=>{
        productList.innerHTML='';
        if(data.length===0){ productList.innerHTML='<div class="list-group-item">No products found.</div>'; return; }
        data.forEach(product=>{
            const item=document.createElement('a');
            item.className='list-group-item list-group-item-action';
            item.href='#';
            item.textContent=`${product.name} (${product.code})`;
            item.addEventListener('click', e=>{
                e.preventDefault();
                addProductToTable(product);
                productList.innerHTML='';
                productSearchInput.value='';
            });
            productList.appendChild(item);
        });
    });
});

function addProductToTable(product){
    const existingRow = Array.from(orderItems.children).find(row=>row.querySelector('input[name="product_id[]"]').value==product.id);
    if(existingRow){ alert(`${product.name} already added.`); return; }

    const row=document.createElement('tr');
    row.innerHTML=`
        <td>${product.name}<input type="hidden" name="product_id[]" value="${product.id}"></td>
        <td>${product.price}</td>
        <td>${product.product_qty}</td>
        <td><input type="number" name="qty[]" value="1" class="form-control qty_input" min="1" max="${product.product_qty}"></td>
        <td><input type="number" name="discount[]" value="0" class="form-control discount_input"></td>
        <td class="subtotal">${product.price}</td>
        <td><button type="button" class="btn btn-danger btn-sm remove_row">Remove</button></td>
    `;
    orderItems.appendChild(row);

    row.querySelector('.remove_row').addEventListener('click', ()=>{ row.remove(); updateTotals(); });
    row.querySelector('.qty_input').addEventListener('input', updateTotals);
    row.querySelector('.discount_input').addEventListener('input', updateTotals);
    updateTotals();
}

function updateTotals(){
    let total=0;
    document.querySelectorAll('#order_items tr').forEach(row=>{
        const unit=parseFloat(row.children[1].textContent)||0;
        const qty=parseFloat(row.querySelector('.qty_input').value)||0;
        const disc=parseFloat(row.querySelector('.discount_input').value)||0;
        const subtotal=(unit*qty)-disc;
        row.querySelector('.subtotal').textContent=subtotal.toFixed(2);
        total+=subtotal;
    });

    const discount=parseFloat(document.getElementById('inputDiscount').value)||0;
    const shipping=parseFloat(document.getElementById('inputShipping').value)||0;
    const grandTotal=total-discount+shipping;

    document.getElementById('displayDiscount').textContent=`TK ${discount.toFixed(2)}`;
    document.getElementById('shippingDisplay').textContent=`TK ${shipping.toFixed(2)}`;
    document.getElementById('grandTotal').textContent=`TK ${grandTotal.toFixed(2)}`;
    document.getElementById('grand_total').value=grandTotal.toFixed(2);

    const paid=parseFloat(document.getElementById('paid_amount').value)||0;
    const due=grandTotal-paid;
    document.getElementById('dueAmount').textContent=`TK ${due.toFixed(2)}`;
    document.getElementById('due_amount').value=due.toFixed(2);
}

['inputDiscount','inputShipping','paid_amount'].forEach(id=>document.getElementById(id).addEventListener('input', updateTotals));

// Add Customer AJAX
document.getElementById('addCustomerForm').addEventListener('submit', function(e){
    e.preventDefault();
    const form = this;
    const data = new FormData(form);

    fetch("{{ route('store.customer') }}", {
        method:'POST',
        headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}'},
        body: data
    })
    .then(res=>res.json())
    .then(res=>{
        if(res.id && res.name){
            const select=document.getElementById('customer_id');
            const option=document.createElement('option');
            option.value=res.id;
            option.textContent=res.name;
            option.selected=true;
            select.appendChild(option);
            bootstrap.Modal.getInstance(document.getElementById('addCustomerModal')).hide();
            form.reset();
        }
    }).catch(err=>console.error(err));
});
</script>

@endsection