@extends('layouts.app')

@section('content')

<div style="
    max-width:1400px;
    margin:auto;
">

    <!-- ========================================= -->
    <!-- HEADER -->
    <!-- ========================================= -->

    <div style="
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        gap:20px;
        flex-wrap:wrap;
        margin-bottom:20px;
    ">

        <div>

            <div style="
                font-size:30px;
                font-weight:900;
                color:#111827;
                line-height:1.1;
                margin-bottom:6px;
            ">

                Pharmacy Inventory

            </div>

            <div style="
                font-size:14px;
                color:#64748b;
            ">

                Medicine batch stock management

            </div>

        </div>

        <!-- ACTIONS -->

        <div style="
            display:flex;
            gap:10px;
            flex-wrap:wrap;
        ">

            <a href="{{ route('admin.pharmacy-stock.ledger') }}"
               style="
                    background:#111827;
                    color:white;
                    text-decoration:none;
                    padding:12px 18px;
                    border-radius:10px;
                    font-size:13px;
                    font-weight:800;
               ">

                Stock Ledger

            </a>

            <a href="{{ route('admin.pharmacy-stock.create') }}"
               style="
                    background:#16a34a;
                    color:white;
                    text-decoration:none;
                    padding:12px 18px;
                    border-radius:10px;
                    font-size:13px;
                    font-weight:800;
               ">

                + Add Stock

            </a>

        </div>

    </div>

    <!-- ========================================= -->
    <!-- DASHBOARD METRICS -->
    <!-- ========================================= -->

    <div style="
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
        gap:16px;
        margin-bottom:24px;
    ">

        <!-- TOTAL -->

        <div class="panel"
             style="
                padding:18px;
             ">

            <div class="metric-label">

                TOTAL BATCHES

            </div>

            <div class="metric-value">

                {{ $totalBatches }}

            </div>

        </div>

        <!-- ACTIVE -->

        <div class="panel"
             style="
                padding:18px;
                border-left:5px solid #16a34a;
             ">

            <div class="metric-label">

                ACTIVE

            </div>

            <div class="metric-value"
                 style="
                    color:#166534;
                 ">

                {{ $activeBatches }}

            </div>

        </div>

        <!-- LOW STOCK -->

        <div class="panel"
             style="
                padding:18px;
                border-left:5px solid #d97706;
             ">

            <div class="metric-label">

                LOW STOCK

            </div>

            <div class="metric-value"
                 style="
                    color:#92400e;
                 ">

                {{ $lowStockCount }}

            </div>

        </div>

        <!-- EXPIRING -->

        <div class="panel"
             style="
                padding:18px;
                border-left:5px solid #ea580c;
             ">

            <div class="metric-label">

                EXPIRING SOON

            </div>

            <div class="metric-value"
                 style="
                    color:#c2410c;
                 ">

                {{ $expiringSoon }}

            </div>

        </div>

        <!-- EXPIRED -->

        <div class="panel"
             style="
                padding:18px;
                border-left:5px solid #dc2626;
             ">

            <div class="metric-label">

                EXPIRED

            </div>

            <div class="metric-value"
                 style="
                    color:#991b1b;
                 ">

                {{ $expiredCount }}

            </div>

        </div>

        <!-- DEPLETED -->

        <div class="panel"
             style="
                padding:18px;
                border-left:5px solid #6b7280;
             ">

            <div class="metric-label">

                DEPLETED

            </div>

            <div class="metric-value"
                 style="
                    color:#4b5563;
                 ">

                {{ $depletedBatches }}

            </div>

        </div>

    </div>

    <!-- ========================================= -->
    <!-- FEFO NOTICE -->
    <!-- ========================================= -->

    <div style="
        padding:14px 18px;
        border:1px solid #fde68a;
        background:#fffbeb;
        border-radius:10px;
        margin-bottom:20px;
        font-size:12px;
        font-weight:800;
        color:#92400e;
    ">

        FEFO ACTIVE:
        Inventory ordered by earliest expiry date first.

    </div>

    <!-- ========================================= -->
    <!-- TABLE -->
    <!-- ========================================= -->

    <div class="panel"
         style="
            padding:0;
            overflow:hidden;
         ">

        <div style="
            overflow-x:auto;
        ">

            <table style="
                width:100%;
                border-collapse:collapse;
            ">

                <thead style="
                    background:#f8fafc;
                ">

                    <tr>

                        <th class="table-th">
                            Medication
                        </th>

                        <th class="table-th">
                            Batch No
                        </th>

                        <th class="table-th">
                            Expiry
                        </th>

                        <th class="table-th table-right">
                            Received
                        </th>

                        <th class="table-th table-right">
                            Available
                        </th>

                        <th class="table-th">
                            Supplier
                        </th>

                        <th class="table-th">
                            Inventory Status
                        </th>

                    </tr>

                </thead>

                <tbody>

                    @forelse($stocks as $stock)

                        @php

                            $isExpired =

                                !empty($stock->expiry_date)

                                &&

                                \Carbon\Carbon::parse(
                                    $stock->expiry_date
                                )->isPast();

                            $isNearExpiry =

                                !$isExpired

                                &&

                                !empty($stock->expiry_date)

                                &&

                                \Carbon\Carbon::parse(
                                    $stock->expiry_date
                                )->lte(now()->addDays(90));

                            $isLowStock =

                                $stock->quantity_available <= 20;

                        @endphp

                        <tr style="

                            border-top:1px solid #f1f5f9;

                            @if($isExpired)
                                background:#fef2f2;
                            @elseif($isNearExpiry)
                                background:#fff7ed;
                            @elseif($isLowStock)
                                background:#fffbeb;
                            @endif

                        ">

                            <!-- MEDICATION -->

                            <td class="table-td">

                                <div style="
                                    font-size:14px;
                                    font-weight:800;
                                    color:#111827;
                                    margin-bottom:4px;
                                ">

                                    {{ $stock->medicine_name }}

                                </div>

                                <div style="
                                    font-size:11px;
                                    color:#64748b;
                                    font-weight:700;
                                ">

                                    {{ $stock->strength ?? '' }}

                                    {{ $stock->formulation ?? '' }}

                                </div>

                            </td>

                            <!-- BATCH -->

                            <td class="table-td">

                                <div style="
                                    font-weight:700;
                                    color:#334155;
                                ">

                                    {{ $stock->batch_no }}

                                </div>

                            </td>

                            <!-- EXPIRY -->

                            <td class="table-td">

                                <div style="
                                    font-weight:700;

                                    @if($isExpired)
                                        color:#991b1b;
                                    @elseif($isNearExpiry)
                                        color:#c2410c;
                                    @else
                                        color:#334155;
                                    @endif
                                ">

                                    {{ $stock->expiry_date ?? '—' }}

                                </div>

                            </td>

                            <!-- RECEIVED -->

                            <td class="table-td table-right">

                                <div style="
                                    font-weight:800;
                                    color:#111827;
                                ">

                                    {{ $stock->quantity_received }}

                                </div>

                            </td>

                            <!-- AVAILABLE -->

                            <td class="table-td table-right">

                                <div style="
                                    font-weight:900;

                                    @if($isLowStock)
                                        color:#b45309;
                                    @else
                                        color:#111827;
                                    @endif
                                ">

                                    {{ $stock->quantity_available }}

                                </div>

                            </td>

                            <!-- SUPPLIER -->

                            <td class="table-td">

                                <div style="
                                    color:#475569;
                                ">

                                    {{ $stock->supplier_name ?? '—' }}

                                </div>

                            </td>

                            <!-- STATUS -->

                            <td class="table-td">

                                @if($isExpired)

                                    <span class="badge badge-danger">

                                        EXPIRED

                                    </span>

                                @elseif($isNearExpiry)

                                    <span class="badge badge-orange">

                                        NEAR EXPIRY

                                    </span>

                                @elseif($isLowStock)

                                    <span class="badge badge-warning">

                                        LOW STOCK

                                    </span>

                                @elseif($stock->status === 'depleted')

                                    <span class="badge badge-secondary">

                                        DEPLETED

                                    </span>

                                @else

                                    <span class="badge badge-success">

                                        ACTIVE

                                    </span>

                                @endif

                            </td>

                        </tr>

                    @empty

                        <tr>

                            <td colspan="7"
                                style="
                                    padding:40px;
                                    text-align:center;
                                    color:#94a3b8;
                                    font-size:14px;
                                    font-weight:700;
                                ">

                                No stock records available

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

    </div>

    <!-- ========================================= -->
    <!-- PAGINATION -->
    <!-- ========================================= -->

    <div style="
        margin-top:20px;
    ">

        {{ $stocks->links() }}

    </div>

</div>

<style>

.metric-label {

    font-size:11px;
    font-weight:800;
    letter-spacing:.4px;
    color:#64748b;
    margin-bottom:10px;
}

.metric-value {

    font-size:30px;
    font-weight:900;
    color:#111827;
    line-height:1;
}

.table-th {

    padding:14px 16px;
    text-align:left;
    font-size:12px;
    font-weight:800;
    color:#475569;
    white-space:nowrap;
}

.table-right {

    text-align:right;
}

.table-td {

    padding:16px;
    vertical-align:top;
    font-size:13px;
}

.badge {

    display:inline-block;
    padding:5px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
}

.badge-success {

    background:#dcfce7;
    color:#166534;
}

.badge-warning {

    background:#fef3c7;
    color:#92400e;
}

.badge-orange {

    background:#ffedd5;
    color:#c2410c;
}

.badge-danger {

    background:#fee2e2;
    color:#991b1b;
}

.badge-secondary {

    background:#e5e7eb;
    color:#374151;
}

</style>

@endsection