@extends('layouts.app')

@section('title', 'Inventory Dashboard')

@section('content')
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body bg-gradient-primary text-white rounded-lg" style="background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);">
                    <div class="row align-items-center">
                        <div class="col-lg-8">
                            <div class="d-flex align-items-center mb-0">
                                <div class="mr-3">
                                    <i class="fas fa-warehouse fa-3x text-warning"></i>
                                </div>
                                <div>
                                    <h1 class="h3 font-weight-bold mb-0">Inventory Management Dashboard</h1>
                                    <p class="mb-0 small opacity-75">Complete inventory tracking and management system</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 text-lg-right mt-0 mt-lg-0">
                            <div class="btn-group" role="group">
                                <a href="{{ route('inventory.products.create') }}" class="btn btn-warning btn-lg shadow">
                                    <i class="fas fa-plus mr-2"></i>Add Product
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center bg-primary text-white rounded">
                    <i class="fas fa-boxes fa-2x mb-2"></i>
                    <h4 class="mb-0 font-weight-bold">{{ $stats['total_products'] }}</h4>
                    <small class="opacity-75">Total Products</small>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center bg-info text-white rounded">
                    <i class="fas fa-tags fa-2x mb-2"></i>
                    <h4 class="mb-0 font-weight-bold">{{ $stats['total_categories'] }}</h4>
                    <small class="opacity-75">Categories</small>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center bg-success text-white rounded">
                    <i class="fas fa-truck fa-2x mb-2"></i>
                    <h4 class="mb-0 font-weight-bold">{{ $stats['total_suppliers'] }}</h4>
                    <small class="opacity-75">Suppliers</small>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center bg-warning text-white rounded">
                    <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
                    <h4 class="mb-0 font-weight-bold">{{ $stats['low_stock_products'] }}</h4>
                    <small class="opacity-75">Low Stock</small>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center bg-secondary text-white rounded">
                    <i class="fas fa-chart-line fa-2x mb-2"></i>
                    <h4 class="mb-0 font-weight-bold">{{ $stats['total_sales'] }}</h4>
                    <small class="opacity-75">Total Sales</small>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center bg-dark text-white rounded">
                    <i class="fas fa-coins fa-2x mb-2"></i>
                    <h4 class="mb-0 font-weight-bold">BDT{{ number_format($stats['total_inventory_value'], 2) }}</h4>
                    <small class="opacity-75">Inventory Value</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="row">
        <!-- Recent Products -->
        <div class="col-lg-4 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-primary text-white border-0">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="mb-0 font-weight-bold">
                            <i class="fas fa-boxes mr-2"></i>Recent Products
                        </h6>
                        <a href="{{ route('inventory.products.index') }}" class="btn btn-sm btn-outline-light">
                            <i class="fas fa-eye"></i> View All
                        </a>
                    </div>
                </div>
                <div class="card-body p-0">
                    @if($recentProducts->count() > 0)
                        @foreach($recentProducts as $product)
                            <div class="d-flex justify-content-between align-items-center p-3 border-bottom">
                                <div class="d-flex align-items-center">
                                    <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mr-3" style="width: 40px; height: 40px;">
                                        <i class="fas fa-box"></i>
                                    </div>
                                    <div>
                                        <strong class="text-dark">{{ $product->name }}</strong>
                                        <br>
                                        <small class="text-muted">
                                            <span class="badge badge-info">{{ $product->category->name ?? 'No Category' }}</span>
                                            <span class="badge badge-primary ml-1">Qty: {{ $product->quantity }}</span>
                                        </small>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <small class="text-success font-weight-bold">BDT{{ number_format($product->sale_price ?? 0, 2) }}</small>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-boxes fa-3x text-muted mb-3"></i>
                            <p class="text-muted mb-0">No products found</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Recent Sales -->
        <div class="col-lg-4 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-success text-white border-0">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="mb-0 font-weight-bold">
                            <i class="fas fa-shopping-cart mr-2"></i>Recent Sales
                        </h6>
                        <span class="badge badge-light">{{ $recentSales->count() }}</span>
                    </div>
                </div>
                <div class="card-body p-0">
                    @if($recentSales->count() > 0)
                        @foreach($recentSales as $sale)
                            <div class="d-flex justify-content-between align-items-center p-3 border-bottom">
                                <div class="d-flex align-items-center">
                                    <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center mr-3" style="width: 40px; height: 40px;">
                                        <i class="fas fa-shopping-cart"></i>
                                    </div>
                                    <div>
                                        <strong class="text-dark">{{ $sale->product->name }}</strong>
                                        <br>
                                        <small class="text-muted">
                                            <span class="badge badge-success">Qty: {{ $sale->quantity }}</span>
                                            <span class="badge badge-secondary ml-1">{{ $sale->customer_name ?? 'Walk-in' }}</span>
                                        </small>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <small class="text-success font-weight-bold">BDT{{ number_format($sale->sale_price ?? 0, 2) }}</small>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-shopping-cart fa-3x text-muted mb-3"></i>
                            <p class="text-muted mb-0">No sales found</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Low Stock Alert -->
        <div class="col-lg-4 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-warning text-white border-0">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="mb-0 font-weight-bold">
                            <i class="fas fa-exclamation-triangle mr-2"></i>Low Stock Alert
                        </h6>
                        <span class="badge badge-light">{{ $lowStockProducts->count() }}</span>
                    </div>
                </div>
                <div class="card-body p-0">
                    @if($lowStockProducts->count() > 0)
                        @foreach($lowStockProducts as $product)
                            <div class="d-flex justify-content-between align-items-center p-3 border-bottom">
                                <div class="d-flex align-items-center">
                                    <div class="bg-warning text-white rounded-circle d-flex align-items-center justify-content-center mr-3" style="width: 40px; height: 40px;">
                                        <i class="fas fa-exclamation"></i>
                                    </div>
                                    <div>
                                        <strong class="text-dark">{{ $product->name }}</strong>
                                        <br>
                                        <small class="text-muted">
                                            <span class="badge badge-info">{{ $product->category->name ?? 'No Category' }}</span>
                                        </small>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <span class="badge badge-danger">{{ $product->quantity }} left</span>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-check-circle fa-3x text-success mb-3"></i>
                            <p class="text-muted mb-0">All products are well stocked</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-info text-white border-0">
                    <h6 class="mb-0 font-weight-bold">
                        <i class="fas fa-bolt mr-2"></i>Quick Actions
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-3 col-md-6 mb-3">
                            <a href="{{ route('inventory.products.create') }}" class="btn btn-primary btn-block btn-lg shadow">
                                <i class="fas fa-plus mr-2"></i>Add Product
                            </a>
                        </div>
                        <div class="col-lg-3 col-md-6 mb-3">
                            <a href="{{ route('inventory.categories.create') }}" class="btn btn-info btn-block btn-lg shadow">
                                <i class="fas fa-tag mr-2"></i>Add Category
                            </a>
                        </div>
                        <div class="col-lg-3 col-md-6 mb-3">
                            <a href="{{ route('inventory.suppliers.create') }}" class="btn btn-success btn-block btn-lg shadow">
                                <i class="fas fa-truck mr-2"></i>Add Supplier
                            </a>
                        </div>
                        <div class="col-lg-3 col-md-6 mb-3">
                            <a href="{{ route('inventory.products.index') }}" class="btn btn-secondary btn-block btn-lg shadow">
                                <i class="fas fa-list mr-2"></i>View All Products
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.bg-gradient-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
}

.card {
    transition: transform 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-2px);
}

.btn {
    transition: all 0.2s ease-in-out;
}

.btn:hover {
    transform: translateY(-1px);
}

.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
</style>
@endsection