@extends('layouts.app')

@section('content')
<style>
    .cek-container {
        max-width: 800px;
        margin: auto;
        text-align: center;
    }

    .title {
        font-size: 26px;
        font-weight: bold;
        color: #1f7a4c;
        margin-bottom: 20px;
    }

    .barcode-input {
        width: 100%;
        padding: 16px;
        font-size: 20px;
        border-radius: 10px;
        border: 2px solid #1f7a4c;
        text-align: center;
        margin-bottom: 25px;
    }

    .result-card {
        background: white;
        border-radius: 14px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.06);
        padding: 30px;
        display: none;
    }

    .product-name {
        font-size: 26px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .price {
        font-size: 32px;
        color: #1f7a4c;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .stock {
        font-size: 16px;
        color: #666;
    }

    .not-found {
        margin-top: 20px;
        color: red;
        font-weight: bold;
        display: none;
    }
</style>

<div class="cek-container">
    <div class="title">🏷️ Cek Harga Barang</div>

    <input type="text" id="barcode" class="barcode-input"
           placeholder="Scan barcode atau ketik kode lalu ENTER" autofocus>

    <div class="result-card" id="result">
        <div class="product-name" id="name"></div>
        <div class="price" id="price"></div>
        <div class="stock" id="stock"></div>
    </div>

    <div class="not-found" id="notFound">Produk tidak ditemukan</div>
</div>

<meta name="csrf-token" content="{{ csrf_token() }}">

<script>
const csrf = document.querySelector('meta[name="csrf-token"]').content;

document.getElementById('barcode').addEventListener('keypress', async function(e){
    if(e.key === 'Enter'){
        let barcode = this.value;
        this.value = '';

        document.getElementById('result').style.display = 'none';
        document.getElementById('notFound').style.display = 'none';

        let res = await fetch('/cek-harga/search', {
            method:'POST',
            headers:{
                'Content-Type':'application/json',
                'X-CSRF-TOKEN': csrf
            },
            body: JSON.stringify({ barcode })
        });

        let data = await res.json();

        if(data.error){
            document.getElementById('notFound').style.display = 'block';
            return;
        }

        document.getElementById('name').innerText = data.name;
        document.getElementById('price').innerText = "Rp " + Number(data.price).toLocaleString('id-ID');
        document.getElementById('stock').innerText = "Stok tersedia: " + data.stock;

        document.getElementById('result').style.display = 'block';
    }
});
</script>
@endsection