@extends('layouts.app')

@section('title', 'Warehouse Inventory - ' . $warehouse->name)

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-0">{{ $warehouse->name }} <span
                    class="badge bg-light text-muted border ms-2 small">#{{ $warehouse->code }}</span></h4>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('warehouses.index') }}">Warehouses</a></li>
                    <li class="breadcrumb-item active">Current Stock</li>
                </ol>
            </nav>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('inventory.adjust', ['warehouse_id' => $warehouse->id]) }}" class="btn btn-primary">
                <i class="bi bi-plus-slash-minus me-2"></i> Adjust Stock
            </a>
            <a href="{{ route('warehouses.edit', $warehouse->id) }}" class="btn btn-light">
                <i class="bi bi-pencil me-2"></i> Edit
            </a>
        </div>
    </div>

    <div class="row g-4 mb-4">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm bg-primary text-white">
                <div class="card-body">
                    <h6 class="smallest text-uppercase opacity-75 fw-bold">Active SKUs</h6>
                    <h3 class="mb-0">{{ $warehouse->inventories->count() }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <h6 class="smallest text-uppercase text-muted fw-bold">Physical Condition</h6>
                    <h5 class="mb-0 text-success"><i class="bi bi-check-circle-fill me-2"></i> Optimal Cooling</h5>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <h6 class="smallest text-uppercase text-muted fw-bold">Manager</h6>
                    <h5 class="mb-0">John Doe <span class="badge bg-light text-muted fw-normal smallest border ms-2">Shift
                            A</span></h5>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white border-0 py-3">
            <h6 class="mb-0 fw-bold">Stock Breakdown</h6>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th class="ps-4">Product</th>
                            <th class="text-center">Quantity</th>
                            <th class="text-center">Reserved</th>
                            <th class="text-center">Consumption (30d)</th>
                            <th class="text-end pe-4">Trend</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($warehouse->inventories as $inv)
                            <tr>
                                <td class="ps-4">
                                    <div class="fw-bold">{{ $inv->product->name }}</div>
                                    <span class="smallest badge bg-light text-muted border">{{ $inv->product->sku }}</span>
                                </td>
                                <td class="text-center fw-bold fs-5">{{ number_format($inv->quantity, 2) }}</td>
                                <td class="text-center text-muted">{{ number_format($inv->reserved_quantity, 2) }}</td>
                                <td class="text-center">
                                    <div class="progress" style="height: 6px; width: 80px; margin: 0 auto;">
                                        <div class="progress-bar bg-info" style="width: 45%"></div>
                                    </div>
                                </td>
                                <td class="text-end pe-4">
                                    <span class="text-success small fw-bold"><i class="bi bi-graph-up me-1"></i> +12%</span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-5 text-muted">This warehouse is currently empty.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <style>
        .smallest {
            font-size: 0.65rem;
        }
    </style>
@endsection