@extends('layouts.app')
@section('title', __('pos.pos'))
@section('content')
<div class="row g-3">
  <div class="col-lg-7">
    <div class="card mb-3"><div class="card-body">
      <input type="search" id="productSearch" class="form-control form-control-lg" placeholder="{{ __('pos.scan_or_search') }}" autofocus autocomplete="off">
    </div></div>
    <div class="row g-2" id="productGrid"></div>
  </div>

  <div class="col-lg-5">
    <div class="card"><div class="card-body">
      <h6 class="fw-bold mb-2"><i class="bi bi-cart"></i> {{ __('pos.cart') }}</h6>

      <div class="position-relative mb-2">
        <input type="search" id="customerSearch" class="form-control form-control-sm" placeholder="{{ __('pos.select_customer') }}" autocomplete="off">
        <input type="hidden" id="customerId">
        <div id="customerResults" class="card d-none position-absolute w-100" style="z-index:1050;max-height:200px;overflow-y:auto"><div class="list-group list-group-flush" id="customerList"></div></div>
      </div>

      <div id="cartItems" style="max-height:300px;overflow-y:auto"></div>
      <p id="emptyCart" class="text-secondary small text-center py-3">{{ __('pos.empty_cart') }}</p>

      <button type="button" class="btn btn-sm btn-outline-secondary w-100 mb-2" onclick="addFreeItem()"><i class="bi bi-plus"></i> {{ __('pos.free_item') }}</button>

      <div class="input-group input-group-sm mb-2">
        <input id="couponCode" class="form-control" placeholder="{{ __('sales.coupon_code') }}">
        <button type="button" class="btn btn-outline-primary" onclick="applyCoupon()">{{ __('pos.apply') }}</button>
      </div>
      <div id="couponInfo" class="small text-success mb-2 d-none"></div>

      <div class="border-top pt-2">
        <div class="d-flex justify-content-between small"><span>{{ __('app.subtotal') }}</span><span id="subtotalTxt">0</span></div>
        <div class="d-flex justify-content-between small"><span>{{ __('app.discount') }}</span>
          <input type="number" id="globalDiscount" value="0" min="0" step="0.01" class="form-control form-control-sm text-end" style="width:110px" oninput="renderTotals()"></div>
        <div class="d-flex justify-content-between small"><span>{{ __('app.tax') }}</span><span id="taxTxt">0</span></div>
        <div class="d-flex justify-content-between fw-bold fs-5 border-top mt-1 pt-1"><span>{{ __('app.total') }}</span><span id="totalTxt">0</span></div>
      </div>

      <div class="row g-2 mt-1">
        <div class="col-6">
          <label class="form-label small mb-0">{{ __('sales.payment_method') }}</label>
          <select id="paymentMethod" class="form-select form-select-sm" onchange="toggleInstallments()">
            <option value="cash">{{ __('sales.cash') }}</option>
            <option value="card">{{ __('sales.card') }}</option>
            <option value="transfer">{{ __('sales.transfer') }}</option>
            <option value="wallet">{{ __('sales.wallet') }}</option>
            <option value="installment">{{ __('sales.installment') }}</option>
          </select>
        </div>
        <div class="col-6">
          <label class="form-label small mb-0">{{ __('pos.paid_amount') }}</label>
          <input type="number" id="paidAmount" value="0" min="0" step="0.01" class="form-control form-control-sm">
        </div>
        <div class="col-6 d-none" id="installmentsWrap">
          <label class="form-label small mb-0">{{ __('sales.installments_count') }}</label>
          <input type="number" id="installmentsCount" value="3" min="2" max="24" class="form-control form-control-sm">
        </div>
        <div class="col-6">
          <label class="form-label small mb-0">{{ __('treasury.account') }}</label>
          <select id="treasuryAccount" class="form-select form-select-sm">
            <option value="">—</option>
            @foreach($accounts as $account)<option value="{{ $account->id }}">{{ $account->name }}</option>@endforeach
          </select>
        </div>
        <div class="col-6">
          <label class="form-label small mb-0">{{ __('app.branch') }}</label>
          <select id="branchId" class="form-select form-select-sm">
            @foreach($branches as $branch)<option value="{{ $branch->id }}" @selected(auth()->user()->branch_id == $branch->id)>{{ $branch->name }}</option>@endforeach
          </select>
        </div>
        <div class="col-12 form-check ms-1">
          <input type="checkbox" id="createOrder" class="form-check-input">
          <label for="createOrder" class="form-check-label small">{{ __('pos.create_order') }}</label>
          <input type="date" id="expectedDate" class="form-control form-control-sm mt-1 d-none" value="{{ now()->addDays(3)->toDateString() }}">
        </div>
      </div>

      <button type="button" class="btn btn-primary btn-lg w-100 mt-3 fw-bold" onclick="checkout()" id="checkoutBtn">
        <i class="bi bi-check2-circle"></i> {{ __('pos.checkout') }}
      </button>
    </div></div>
  </div>
</div>

<div class="modal fade" id="successModal" data-bs-backdrop="static"><div class="modal-dialog modal-dialog-centered"><div class="modal-content">
  <div class="modal-body text-center py-4">
    <i class="bi bi-check-circle text-success" style="font-size:3.2rem"></i>
    <h5 class="fw-bold mt-2">{{ __('pos.sale_success') }}</h5>
    <div class="d-flex gap-2 justify-content-center mt-3">
      <a id="printA4" href="#" target="_blank" class="btn btn-outline-primary"><i class="bi bi-file-earmark"></i> {{ __('pos.print_invoice') }}</a>
      <a id="printReceipt" href="#" target="_blank" class="btn btn-outline-primary"><i class="bi bi-receipt"></i> {{ __('pos.print_receipt') }}</a>
      <button class="btn btn-primary" onclick="location.reload()">{{ __('pos.new_sale') }}</button>
    </div>
  </div>
</div></div></div>
@endsection

@push('scripts')
<script>
const csrf = document.querySelector('meta[name=csrf-token]').content;
let cart = [], coupon = null, searchTimer, custTimer;

const productSearch = document.getElementById('productSearch');
productSearch.addEventListener('input', () => {
  clearTimeout(searchTimer);
  searchTimer = setTimeout(loadProducts, 250);
});
productSearch.addEventListener('keydown', e => {
  if (e.key === 'Enter') { e.preventDefault(); loadProducts(true); }
});

async function loadProducts(autoAdd = false) {
  const q = productSearch.value.trim();
  const r = await fetch(`{{ route('pos.products') }}?q=${encodeURIComponent(q)}`, {headers:{Accept:'application/json'}});
  const items = await r.json();
  if (autoAdd && items.length === 1 && items[0].barcode === q) { addToCart(items[0]); productSearch.value=''; renderProducts([]); return; }
  renderProducts(items);
}

function renderProducts(items) {
  const grid = document.getElementById('productGrid');
  grid.innerHTML = '';
  items.forEach(p => {
    const col = document.createElement('div');
    col.className = 'col-6 col-md-4';
    col.innerHTML = `<div class="card h-100 product-card" style="cursor:pointer">
      <div class="card-body py-2 px-3">
        <div class="fw-semibold small text-truncate">${esc(p.name)}</div>
        <div class="d-flex justify-content-between align-items-center mt-1">
          <span class="fw-bold text-primary">${money(p.price)}</span>
          <span class="badge text-bg-${p.stock > 0 ? 'success' : 'danger'}">${p.stock}</span>
        </div>
      </div></div>`;
    col.querySelector('.card').addEventListener('click', () => addToCart(p));
    grid.appendChild(col);
  });
}

function addToCart(p) {
  const existing = cart.find(i => i.key === p.key);
  if (existing) {
    if (p.stock !== null && existing.quantity + 1 > p.stock) { alert(@json(__('pos.out_of_stock'))); return; }
    existing.quantity++;
  } else {
    if (p.stock !== null && p.stock < 1) { alert(@json(__('pos.out_of_stock'))); return; }
    cart.push({key: p.key, description: p.name, quantity: 1, unit_price: p.price, discount: 0, tax_rate: p.tax_rate || 0, stock: p.stock});
  }
  renderCart();
}

function addFreeItem() {
  const desc = prompt(@json(__('app.description')));
  if (!desc) return;
  const price = parseFloat(prompt(@json(__('app.price')), '0')) || 0;
  cart.push({key: null, description: desc, quantity: 1, unit_price: price, discount: 0, tax_rate: 0, stock: null});
  renderCart();
}

function renderCart() {
  const wrap = document.getElementById('cartItems');
  document.getElementById('emptyCart').style.display = cart.length ? 'none' : '';
  wrap.innerHTML = '';
  cart.forEach((item, i) => {
    const div = document.createElement('div');
    div.className = 'border-bottom py-2';
    div.innerHTML = `
      <div class="d-flex justify-content-between align-items-center">
        <span class="small fw-semibold text-truncate" style="max-width:170px">${esc(item.description)}</span>
        <button class="btn btn-sm btn-link text-danger p-0" onclick="cart.splice(${i},1);renderCart()"><i class="bi bi-x-lg"></i></button>
      </div>
      <div class="d-flex gap-1 mt-1">
        <input type="number" min="1" value="${item.quantity}" class="form-control form-control-sm" style="width:64px" onchange="cart[${i}].quantity=Math.max(1,parseInt(this.value)||1);renderCart()">
        <input type="number" min="0" step="0.01" value="${item.unit_price}" class="form-control form-control-sm" onchange="cart[${i}].unit_price=parseFloat(this.value)||0;renderCart()">
        <input type="number" min="0" step="0.01" value="${item.discount}" placeholder="{{ __('app.discount') }}" class="form-control form-control-sm" style="width:80px" onchange="cart[${i}].discount=parseFloat(this.value)||0;renderCart()">
      </div>`;
    wrap.appendChild(div);
  });
  renderTotals();
}

function totals() {
  let subtotal = 0, itemsDiscount = 0, tax = 0;
  cart.forEach(i => {
    subtotal += i.quantity * i.unit_price;
    itemsDiscount += i.discount;
    tax += Math.max(0, i.quantity * i.unit_price - i.discount) * (i.tax_rate / 100);
  });
  const global = parseFloat(document.getElementById('globalDiscount').value) || 0;
  let discountBase = Math.max(0, subtotal - itemsDiscount - global);
  let couponDiscount = 0;
  if (coupon) couponDiscount = coupon.type === 'percent' ? discountBase * coupon.value / 100 : Math.min(coupon.value, discountBase);
  const total = Math.max(0, subtotal - itemsDiscount - global - couponDiscount + tax);
  return {subtotal, tax, total};
}

function renderTotals() {
  const t = totals();
  subtotalTxt.textContent = money(t.subtotal);
  taxTxt.textContent = money(t.tax);
  totalTxt.textContent = money(t.total);
  document.getElementById('paidAmount').value = t.total.toFixed(2);
}

async function applyCoupon() {
  const code = document.getElementById('couponCode').value.trim();
  if (!code) return;
  const r = await fetch(@json(route('pos.check-coupon')), {
    method: 'POST',
    headers: {'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, Accept: 'application/json'},
    body: JSON.stringify({code})
  });
  const d = await r.json();
  const info = document.getElementById('couponInfo');
  if (d.valid) { coupon = d; info.textContent = `✓ ${code}`; info.classList.remove('d-none'); }
  else { coupon = null; info.classList.add('d-none'); alert(d.message || @json(__('sales.invalid_coupon'))); }
  renderTotals();
}

// عملاء
const customerSearch = document.getElementById('customerSearch');
customerSearch.addEventListener('input', () => {
  clearTimeout(custTimer);
  custTimer = setTimeout(async () => {
    const q = customerSearch.value.trim();
    if (q.length < 2) { customerResults.classList.add('d-none'); return; }
    const r = await fetch(`{{ route('pos.customers') }}?q=${encodeURIComponent(q)}`, {headers:{Accept:'application/json'}});
    const items = await r.json();
    customerList.innerHTML = '';
    items.forEach(c => {
      const a = document.createElement('button');
      a.type = 'button';
      a.className = 'list-group-item list-group-item-action small';
      a.textContent = `${c.name} — ${c.phone}`;
      a.addEventListener('click', () => {
        document.getElementById('customerId').value = c.id;
        customerSearch.value = c.name;
        customerResults.classList.add('d-none');
      });
      customerList.appendChild(a);
    });
    customerResults.classList.toggle('d-none', !items.length);
  }, 250);
});

document.getElementById('createOrder').addEventListener('change', function () {
  document.getElementById('expectedDate').classList.toggle('d-none', !this.checked);
});
function toggleInstallments() {
  document.getElementById('installmentsWrap').classList.toggle('d-none', paymentMethod.value !== 'installment');
}

async function checkout() {
  if (!cart.length) { alert(@json(__('pos.empty_cart'))); return; }
  const btn = document.getElementById('checkoutBtn');
  btn.disabled = true;
  try {
    const payload = {
      customer_id: document.getElementById('customerId').value || null,
      branch_id: document.getElementById('branchId').value,
      discount: parseFloat(document.getElementById('globalDiscount').value) || 0,
      coupon_id: coupon?.id || null,
      paid: parseFloat(document.getElementById('paidAmount').value) || 0,
      payment_method: document.getElementById('paymentMethod').value,
      treasury_account_id: document.getElementById('treasuryAccount').value || null,
      create_order: document.getElementById('createOrder').checked,
      expected_date: document.getElementById('createOrder').checked ? document.getElementById('expectedDate').value : null,
      installments_count: parseInt(document.getElementById('installmentsCount').value) || null,
      items: cart.map(i => ({key: i.key, description: i.description, quantity: i.quantity, unit_price: i.unit_price, discount: i.discount}))
    };
    const r = await fetch(@json(route('pos.store')), {
      method: 'POST',
      headers: {'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, Accept: 'application/json'},
      body: JSON.stringify(payload)
    });
    const d = await r.json();
    if (!r.ok) { alert(d.message || @json(__('app.error'))); btn.disabled = false; return; }
    document.getElementById('printA4').href = d.print_url;
    document.getElementById('printReceipt').href = d.receipt_url;
    new bootstrap.Modal(document.getElementById('successModal')).show();
  } catch (e) {
    alert(@json(__('app.error')));
    btn.disabled = false;
  }
}

function money(v) { return Number(v).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}); }
function esc(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }

loadProducts();
</script>
@endpush