@extends('layouts.app')

@section('content')
<div class="container-fluid px-4 py-4" style="background-color: #f8fafc; min-height: 100vh;">

    <!-- Top Header -->
    <div class="mb-4">
        <div class="d-flex align-items-center gap-2 mb-1">
            <i class="bi bi-boxes text-indigo-600 fs-4" style="color: #4f46e5;"></i>
            <h4 class="fw-bold text-dark mb-0">Current Counter Stock</h4>
        </div>
        <p class="text-muted small mb-0">Monitor live handloom inventory items available for instant retail checkout and
            POS billing.</p>
    </div>

    <!-- 📑 LIVE STOCK COUNTER BALANCE REGISTER GRID -->
    <div class="card border-0 shadow-sm rounded-4 bg-white">
        <div class="card-header bg-white border-bottom py-3 px-4">
            <h6 class="mb-0 fw-bold text-dark"><i class="bi bi-layers-half text-indigo-600 me-2"
                    style="color: #4f46e5;"></i>Counter Inventory Ledger Balance</h6>
        </div>
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 bg-white">
                <thead class="table-light text-uppercase small fw-bold text-secondary" style="font-size: 11px;">
                    <tr>
                        <th class="py-3 ps-4">Product Name</th>
                        <th class="py-3">Assigned Counter Hub</th>
                        <th class="py-3 text-center">Available Stock Balance</th>
                        <th class="py-3 text-end pe-4">Stock Status</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($stocks as $stock)
                    <tr>
                        <td class="py-3 ps-4 fw-bold text-dark" style="font-size: 0.88rem;">
                            {{ $stock->product_name ?? 'N/A' }}
                        </td>
                        <td>
                            <span class="fw-semibold text-secondary small">{{ $stock->exhibition_name ?? 'Active Stall
                                Node' }}</span>
                        </td>
                        <td class="text-center font-monospace fw-bold">
                            <span class="fs-6 {{ $stock->current_stock <= 5 ? 'text-danger' : 'text-dark' }}">
                                {{ $stock->current_stock }} pcs
                            </span>
                        </td>
                        <td class="text-end pe-4">
                            @if($stock->current_stock == 0)
                            <span class="badge bg-danger text-white px-2.5 py-1 rounded-pill"
                                style="font-size: 10px; background-color: #ef4444 !important;">Out of Stock</span>
                            @elseif($stock->current_stock <= 5) <span
                                class="badge bg-warning text-dark px-2.5 py-1 rounded-pill"
                                style="font-size: 10px; background-color: #f59e0b !important;">Low Balance</span>
                                @else
                                <span class="badge bg-success text-white px-2.5 py-1 rounded-pill"
                                    style="font-size: 10px; background-color: #10b981 !important;">In Stock</span>
                                @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="text-center py-5 text-muted">
                            <i class="bi bi-box-seam d-block mb-2 fs-3 text-secondary"></i> Your sales counter is
                            currently empty. Please confirm incoming transit packages first.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection