@extends('layouts.app')

@section('content')
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card bg-dark shadow-lg">
                <div class="card-header text-white text-center">
                    <h4>Live Weighbridge Terminal</h4>
                </div>
                <div class="card-body text-center py-5">
                    <div style="background: #1a1a1a; padding: 40px; border-radius: 10px; border: 5px solid #333;">
                        <h1 id="live-weight" style="font-size: 120px; color: #00FF41; font-family: 'Digital-7', sans-serif; margin: 0;">
                            0
                        </h1>
                        <span style="color: #00FF41; font-size: 24px;">KG</span>
                    </div>
                </div>
                <div class="card-footer text-center">
                    <button class="btn btn-primary btn-lg px-5" onclick="location.reload()">Refresh</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // প্রতি ৫০০ মিলিসেকেন্ড পরপর ওজন আপডেট হবে
    setInterval(function() {
    // এখানে আপনার ডোমেইন অনুযায়ী সঠিক পাথ দিন
    fetch('/public/index.php/api/get-live-weight') 
        .then(response => response.json())
        .then(data => {
            document.getElementById('live-weight').innerText = data.weight;
        });
}, 1000);
</script>
@endsection