@extends('layouts.master')

@section('content')

<div style="padding:30px;">

    <!-- Header -->
    <div style="
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-bottom:25px;
    ">

        <div>
            <h1 style="font-size:38px;font-weight:700;margin:0;">
                Item Master
            </h1>

            <p style="color:#666;margin-top:8px;">
                Manage medicines, vaccines, consumables and equipment
            </p>
        </div>

        <div style="display:flex;gap:15px;align-items:center;">

            <a
                href="{{ route('supply.imports.catalogue.create') }}"
                class="workflow-btn workflow-btn-info">

                📦 Import Catalogue

            </a>        

            <a href="{{ route('supply.items.create') }}"
               class="btn-primary">
                + New Item
            </a>

        </div>

    </div>

    <!-- KPI CARDS -->

    <div class="stats-grid">

        <div class="stat-card">
            <div class="stat-icon">📦</div>
            <div>
                <div class="stat-label">
                    Total Items
                </div>
                <div class="stat-value">
                    {{ number_format($totalItems) }}
                </div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon">💰</div>
            <div>
                <div class="stat-label">
                    Stock Value
                </div>
                <div class="stat-value">
                    {{ number_format($stockValue, 0) }}
                </div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon">📗</div>
            <div>
                <div class="stat-label">
                    Items In Stock
                </div>
                <div class="stat-value">
                    {{ number_format($stockItems) }}
                </div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon">⚠️</div>
            <div>
                <div class="stat-label">
                    Low Stock
                </div>
                <div class="stat-value">
                    {{ number_format($lowStock) }}
                </div>
            </div>
        </div>

    </div>

    <!-- Filters -->

    <div class="panel">

        <div style="
            display:grid;
            grid-template-columns:2fr 1fr 1fr auto;
            gap:15px;
            align-items:end;
        ">

            <div>
                <label>Search Item</label>
                <input type="text" placeholder="Search by code or name">
            </div>

            <div>
                <label>Category</label>
                <select>
                    <option>All Categories</option>
                    <option>Medicine</option>
                    <option>Vaccine</option>
                    <option>Consumable</option>
                    <option>Laboratory Supply</option>
                    <option>Equipment</option>
                </select>
            </div>

            <div>
                <label>Status</label>
                <select>
                    <option>All Status</option>
                    <option>Active</option>
                    <option>Inactive</option>
                    <option>Discontinued</option>
                </select>
            </div>

            <button class="btn-primary">
                Filter
            </button>

        </div>

    </div>

    <!-- Catalogue -->

    <div class="panel">

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

            <h3 style="margin:0;">
                Item Catalogue
            </h3>

            <span style="color:#666;">
                Showing 2 Items
            </span>

        </div>

        <table class="table">

            <thead>
                <tr>
                    <th>Code</th>
                    <th>Item Name</th>
                    <th>Category</th>
                    <th>Unit</th>
                    <th>Tracking</th>
                    <th>Status</th>
                    <th width="220">Actions</th>
                </tr>
            </thead>

            <tbody>

            @forelse($items as $item)

            <tr>

                <td>
                    {{ $item->item_code }}
                </td>

                <td>
                    {{ $item->item_name }}
                </td>

                <td>
                    {{ $item->category }}
                </td>

                <td>
                    {{ $item->base_unit }}
                </td>

                <td>

                    @php

                        $tracking = [];

                        if ($item->track_batch) {
                            $tracking[] = 'Batch';
                        }

                        if ($item->track_expiry) {
                            $tracking[] = 'Expiry';
                        }

                        if ($item->track_serial) {
                            $tracking[] = 'Serial';
                        }

                    @endphp

                    {{ implode(' + ', $tracking) ?: 'None' }}

                </td>

                <td>

                    @if($item->status == 'Active')

                        <span class="badge badge-success">
                            Active
                        </span>

                    @else

                        <span class="badge">
                            {{ $item->status }}
                        </span>

                    @endif

                </td>

                <td>

                    <a href="{{ route('supply.items.show', $item->id) }}"
                    class="action-view">

                        View

                    </a>

                    <a href="#"
                    class="action-edit">

                        Edit

                    </a>

                </td>

            </tr>

            @empty

            <tr>

                <td colspan="7"
                    style="text-align:center;">

                    No items found.

                </td>

            </tr>

            @endforelse

            </tbody>

        </table>

    </div>

</div>

<style>

.panel{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:20px;
    margin-bottom:20px;
}

.summary-box{
    background:#fff;
    border:1px solid #e5e7eb;
    padding:10px 15px;
    border-radius:10px;
    font-weight:600;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:20px;
}

.stat-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:20px;
    display:flex;
    align-items:center;
    gap:15px;
}

.stat-icon{
    font-size:32px;
}

.stat-label{
    color:#666;
    font-size:13px;
}

.stat-value{
    font-size:28px;
    font-weight:700;
}

label{
    display:block;
    margin-bottom:6px;
    font-weight:600;
}

input,
select{
    width:100%;
    padding:10px;
    border:1px solid #d1d5db;
    border-radius:8px;
}

.table{
    width:100%;
    border-collapse:collapse;
}

.table th{
    text-align:left;
    background:#f8fafc;
    padding:14px;
    border-bottom:1px solid #e5e7eb;
}

.table td{
    padding:14px;
    border-bottom:1px solid #f1f5f9;
}

.badge{
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.badge-success{
    background:#dcfce7;
    color:#166534;
}

.btn-primary{
    background:#2563eb;
    color:white;
    border:none;
    padding:12px 18px;
    border-radius:8px;
    text-decoration:none;
    cursor:pointer;
    display:inline-block;
}

.action-view,
.action-edit{
    display:inline-block;
    padding:6px 10px;
    border-radius:6px;
    text-decoration:none;
    font-size:13px;
    margin-right:5px;
}

.action-view{
    background:#e0f2fe;
    color:#0369a1;
}

.action-edit{
    background:#fef3c7;
    color:#92400e;
}

</style>

@endsection