@extends('Admin.layout')

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">

        {{-- HEADER --}}
        <div class="d-flex justify-content-between align-items-center mb-4">

            <div>
                <h4 class="fw-bold mb-1">
                    Stock
                </h4>

            </div>

            <div class="d-flex gap-2">

                <a href="{{ route('product') }}" class="btn btn-outline-primary">
                    <i class="icon-base ti tabler-package me-1"></i>
                    Products
                </a>

                <a href="{{ route('billing') }}" class="btn btn-primary">
                    <i class="icon-base ti tabler-file-invoice me-1"></i>
                    Billing
                </a>

            </div>

        </div>


        {{-- STOCK SUMMARY --}}
        <div class="row g-4 mb-4">

            {{-- TOTAL PRODUCTS --}}
            <div class="col-sm-6 col-xl-3">

                <div class="card h-100">

                    <div class="card-body">

                        <div class="d-flex justify-content-between align-items-start">

                            <div>

                                <span class="text-muted">
                                    Total Products
                                </span>

                                <h2 class="fw-bold mt-2 mb-0">
                                    {{ $totalProducts }}
                                </h2>

                            </div>

                            <div class="avatar">

                                <span class="avatar-initial rounded bg-primary">

                                    <i class="icon-base ti tabler-package"></i>

                                </span>

                            </div>

                        </div>

                        <small class="text-muted">
                            All products
                        </small>

                    </div>

                </div>

            </div>


            {{-- OUT OF STOCK --}}
            <div class="col-sm-6 col-xl-3">

                <div class="card h-100">

                    <div class="card-body">

                        <div class="d-flex justify-content-between align-items-start">

                            <div>

                                <span class="text-muted">
                                    Out of Stock
                                </span>

                                <h2 class="fw-bold mt-2 mb-0">
                                    {{ $outOfStock }}
                                </h2>

                            </div>

                            <div class="avatar">

                                <span class="avatar-initial rounded bg-danger">

                                    <i class="icon-base ti tabler-package-off"></i>

                                </span>

                            </div>

                        </div>

                        <small class="text-danger">
                            Needs restocking
                        </small>

                    </div>

                </div>

            </div>


            {{-- LOW STOCK --}}
            <div class="col-sm-6 col-xl-3">

                <div class="card h-100">

                    <div class="card-body">

                        <div class="d-flex justify-content-between align-items-start">

                            <div>

                                <span class="text-muted">
                                    Low Stock
                                </span>

                                <h2 class="fw-bold mt-2 mb-0">
                                    {{ $lowStock }}
                                </h2>

                            </div>

                            <div class="avatar">

                                <span class="avatar-initial rounded bg-warning">

                                    <i class="icon-base ti tabler-alert-triangle"></i>

                                </span>

                            </div>

                        </div>

                        <small class="text-warning">
                            Quantity: 1 - 3
                        </small>

                    </div>

                </div>

            </div>


            {{-- NORMAL STOCK --}}
            <div class="col-sm-6 col-xl-3">

                <div class="card h-100">

                    <div class="card-body">

                        <div class="d-flex justify-content-between align-items-start">

                            <div>

                                <span class="text-muted">
                                    Normal Stock
                                </span>

                                <h2 class="fw-bold mt-2 mb-0">
                                    {{ $normalStock }}
                                </h2>

                            </div>

                            <div class="avatar">

                                <span class="avatar-initial rounded bg-success">

                                    <i class="icon-base ti tabler-circle-check"></i>

                                </span>

                            </div>

                        </div>

                        <small class="text-success">
                            Quantity: 4+
                        </small>

                    </div>

                </div>

            </div>

        </div>


        {{-- ACTION REQUIRED --}}
        <div class="row g-4">

            {{-- OUT OF STOCK --}}
            <div class="col-lg-6">

                <div class="card h-100">

                    <div class="card-header d-flex justify-content-between align-items-center">

                        <h5 class="mb-0">
                            Out of Stock
                        </h5>

                        <span class="badge bg-danger">
                            {{ $outOfStock }}
                        </span>

                    </div>


                    <div class="table-responsive">

                        <table class="table table-hover">

                            <thead>

                                <tr>

                                    <th>
                                        Product
                                    </th>

                                    <th>
                                        Quantity
                                    </th>

                                </tr>

                            </thead>


                            <tbody>

                                @forelse($outOfStockProducts as $product)
                                    <tr>

                                        <td>
                                            {{ $product->name }}
                                        </td>

                                        <td>

                                            <span class="badge bg-danger">
                                                {{ $product->quantity }}
                                            </span>

                                        </td>

                                    </tr>

                                @empty

                                    <tr>

                                        <td colspan="2" class="text-center text-muted">

                                            All products are in stock.

                                        </td>

                                    </tr>
                                @endforelse

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>


            {{-- LOW STOCK --}}
            <div class="col-lg-6">

                <div class="card h-100">

                    <div class="card-header d-flex justify-content-between align-items-center">

                        <h5 class="mb-0">
                            Restock Soon
                        </h5>

                        <span class="badge bg-warning">
                            {{ $lowStock }}
                        </span>

                    </div>


                    <div class="table-responsive">

                        <table class="table table-hover">

                            <thead>

                                <tr>

                                    <th>
                                        Product
                                    </th>

                                    <th>
                                        Quantity
                                    </th>

                                </tr>

                            </thead>


                            <tbody>

                                @forelse($lowStockProducts as $product)
                                    <tr>

                                        <td>
                                            {{ $product->name }}
                                        </td>

                                        <td>

                                            <span class="badge bg-warning">
                                                {{ $product->quantity }}
                                            </span>

                                        </td>

                                    </tr>

                                @empty

                                    <tr>

                                        <td colspan="2" class="text-center text-muted">

                                            No products need restocking.

                                        </td>

                                    </tr>
                                @endforelse

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

        </div>

    </div>
@endsection