@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:24px;
    ">

        <div>

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

                Pharmacy Stock Ledger

            </div>

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

                Complete inventory movement audit trail

            </div>

        </div>

        <!-- ACTIONS -->

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

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

                Stock Dashboard

            </a>

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

                Add Stock

            </a>

        </div>

    </div>

    <!-- ========================================= -->
    <!-- SUMMARY -->
    <!-- ========================================= -->

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

        <!-- TOTAL MOVEMENTS -->

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

            <div style="
                font-size:11px;
                font-weight:800;
                letter-spacing:.4px;
                color:#64748b;
                margin-bottom:10px;
            ">

                TOTAL MOVEMENTS

            </div>

            <div style="
                font-size:28px;
                font-weight:900;
                color:#111827;
                line-height:1;
            ">

                {{ $movements->total() }}

            </div>

        </div>

        <!-- DISPENSING -->

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

            <div style="
                font-size:11px;
                font-weight:800;
                letter-spacing:.4px;
                color:#64748b;
                margin-bottom:10px;
            ">

                DISPENSING MOVEMENTS

            </div>

            <div style="
                font-size:28px;
                font-weight:900;
                color:#166534;
                line-height:1;
            ">

                {{
                    $movements->where(
                        'movement_type',
                        'dispense'
                    )->count()
                }}

            </div>

        </div>

        <!-- STOCK IN -->

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

            <div style="
                font-size:11px;
                font-weight:800;
                letter-spacing:.4px;
                color:#64748b;
                margin-bottom:10px;
            ">

                STOCK IN MOVEMENTS

            </div>

            <div style="
                font-size:28px;
                font-weight:900;
                color:#075985;
                line-height:1;
            ">

                {{
                    $movements->where(
                        'movement_type',
                        'stock_in'
                    )->count()
                }}

            </div>

        </div>

        <!-- ADJUSTMENTS -->

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

            <div style="
                font-size:11px;
                font-weight:800;
                letter-spacing:.4px;
                color:#64748b;
                margin-bottom:10px;
            ">

                ADJUSTMENTS

            </div>

            <div style="
                font-size:28px;
                font-weight:900;
                color:#92400e;
                line-height:1;
            ">

                {{
                    $movements->where(
                        'movement_type',
                        'adjustment'
                    )->count()
                }}

            </div>

        </div>

    </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">
                            Date
                        </th>

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

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

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

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

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

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

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

                    </tr>

                </thead>

                <tbody>

                    @forelse($movements as $movement)

                        @php

                            $type =
                                strtolower(
                                    $movement->movement_type
                                );

                            $isExpired =

                                !empty($movement->expiry_date)

                                &&

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

                        @endphp

                        <tr style="
                            border-top:1px solid #f1f5f9;
                        ">

                            <!-- DATE -->

                            <td class="table-td">

                                {{
                                    \Carbon\Carbon::parse(
                                        $movement->created_at
                                    )->format('d M Y H:i')
                                }}

                            </td>

                            <!-- MEDICINE -->

                            <td class="table-td">

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

                                    {{
                                        $movement->medicine_name
                                        ?? 'Unknown Medicine'
                                    }}

                                </div>

                            </td>

                            <!-- BATCH -->

                            <td class="table-td">

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

                                    {{ $movement->batch_no ?? '—' }}

                                </div>

                            </td>

                            <!-- EXPIRY -->

                            <td class="table-td">

                                @if($movement->expiry_date)

                                    <div style="
                                        font-weight:700;

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

                                        {{ $movement->expiry_date }}

                                    </div>

                                    @if($isExpired)

                                        <div style="
                                            font-size:11px;
                                            font-weight:800;
                                            color:#991b1b;
                                            margin-top:4px;
                                        ">

                                            EXPIRED

                                        </div>

                                    @endif

                                @else

                                    —

                                @endif

                            </td>

                            <!-- TYPE -->

                            <td class="table-td">

                                <span style="
                                    display:inline-block;
                                    padding:5px 10px;
                                    border-radius:999px;
                                    font-size:11px;
                                    font-weight:800;

                                    @if($type === 'dispense')
                                        background:#dcfce7;
                                        color:#166534;
                                    @elseif($type === 'adjustment')
                                        background:#fef3c7;
                                        color:#92400e;
                                    @elseif($type === 'stock_in')
                                        background:#e0f2fe;
                                        color:#075985;
                                    @else
                                        background:#f3f4f6;
                                        color:#374151;
                                    @endif
                                ">

                                    {{ strtoupper($type) }}

                                </span>

                            </td>

                            <!-- QUANTITY -->

                            <td class="table-td">

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

                                    {{ $movement->quantity }}

                                </div>

                            </td>

                            <!-- REFERENCE -->

                            <td class="table-td">

                                <div style="
                                    font-size:12px;
                                    font-weight:700;
                                    color:#475569;
                                ">

                                    {{ $movement->reference_no }}

                                </div>

                            </td>

                            <!-- NOTES -->

                            <td class="table-td">

                                <div style="
                                    line-height:1.6;
                                    color:#475569;
                                ">

                                    {{ $movement->notes ?? '—' }}

                                </div>

                            </td>

                        </tr>

                    @empty

                        <tr>

                            <td colspan="8"
                                style="
                                    padding:50px 20px;
                                    text-align:center;
                                    color:#94a3b8;
                                    font-weight:700;
                                ">

                                No stock movements recorded.

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

    </div>

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

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

        {{ $movements->links() }}

    </div>

</div>

<style>

.table-th {

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

.table-td {

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

</style>

@endsection