@extends('layouts.app')

@section('content')

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

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

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

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

            Medication Dispensing

        </div>

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

            Review and reconcile prescribed medications

        </div>

    </div>

    <!-- ========================================= -->
    <!-- PATIENT -->
    <!-- ========================================= -->

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

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

            <!-- LEFT -->

            <div>

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

                    {{ $encounter->first_name }}
                    {{ $encounter->last_name }}

                </div>

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

                    <div style="
                        background:#f3f4f6;
                        border-radius:999px;
                        padding:5px 10px;
                        font-size:11px;
                        font-weight:800;
                        color:#374151;
                    ">

                        {{ $encounter->patient_no }}

                    </div>

                    <div style="
                        background:#eff6ff;
                        border-radius:999px;
                        padding:5px 10px;
                        font-size:11px;
                        font-weight:800;
                        color:#1d4ed8;
                    ">

                        {{ $encounter->visit_no }}

                    </div>

                </div>

            </div>

            <!-- RIGHT -->

            <div style="
                display:flex;
                flex-direction:column;
                align-items:flex-end;
                gap:8px;
            ">

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

                    TOTAL MEDICATIONS

                </div>

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

                    {{ $items->count() }}

                </div>

            </div>

        </div>

    </div>

    @php

        $hasExternalPrescription = $items->contains(function ($item) {

            return in_array(

                $item->dispensing_status,

                [

                    'partial',
                    'out_of_stock',
                    'not_dispensed',

                ]

            );

        });

        $isLocked = false;

        if (isset($prescription)) {

            $isLocked =
                (int) ($prescription->dispensing_locked ?? 0) === 1;
        }

    @endphp

    <!-- ========================================= -->
    <!-- DISPENSING FORM -->
    <!-- ========================================= -->

    <form method="POST"
          action="{{ route('admin.pharmacy.store-dispense', $encounter->id) }}">

        @csrf

        <!-- ========================================= -->
        <!-- MEDICATIONS -->
        <!-- ========================================= -->

        <div class="panel"
             style="
                padding:0;
                overflow:hidden;
                margin-bottom:18px;
             ">

            <div style="
                padding:16px 18px;
                border-bottom:1px solid #e5e7eb;
                font-size:13px;
                font-weight:800;
                color:#64748b;
                letter-spacing:.3px;
            ">

                PRESCRIBED MEDICATIONS

            </div>

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

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

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

                        <tr>

                            <th style="
                                padding:14px 16px;
                                text-align:left;
                                font-size:12px;
                                font-weight:800;
                                color:#475569;
                            ">

                                Medication

                            </th>

                            <th style="
                                padding:14px 16px;
                                text-align:left;
                                font-size:12px;
                                font-weight:800;
                                color:#475569;
                                width:120px;
                            ">

                                Dose

                            </th>

                            <th style="
                                padding:14px 16px;
                                text-align:left;
                                font-size:12px;
                                font-weight:800;
                                color:#475569;
                                width:180px;
                            ">

                                Available

                            </th>

                            <th style="
                                padding:14px 16px;
                                text-align:center;
                                font-size:12px;
                                font-weight:800;
                                color:#475569;
                                width:100px;
                            ">

                                Prescribed

                            </th>

                            <th style="
                                padding:14px 16px;
                                text-align:left;
                                font-size:12px;
                                font-weight:800;
                                color:#475569;
                                width:140px;
                            ">

                                Dispense Qty

                            </th>

                            <th style="
                                padding:14px 16px;
                                text-align:left;
                                font-size:12px;
                                font-weight:800;
                                color:#475569;
                            ">

                                Frequency

                            </th>

                            <th style="
                                padding:14px 16px;
                                text-align:left;
                                font-size:12px;
                                font-weight:800;
                                color:#475569;
                            ">

                                Duration

                            </th>

                            <th style="
                                padding:14px 16px;
                                text-align:left;
                                font-size:12px;
                                font-weight:800;
                                color:#475569;
                            ">

                                Instructions

                            </th>

                        </tr>

                    </thead>

                    <tbody>

                        @foreach($items as $item)

                            @php

                                $availableStock =
                                    (int) (
                                        $item->available_stock
                                        ?? 0
                                    );

                                $prescribedQty =
                                    (int) (
                                        $item->quantity_prescribed
                                        ?? 0
                                    );

                                $stockSufficient =
                                    $availableStock >= $prescribedQty;

                            @endphp

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

                                <!-- MEDICATION -->

                                <td style="
                                    padding:16px;
                                    vertical-align:top;
                                ">

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

                                        {{ $item->medication_name }}

                                    </div>

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

                                        {{ $item->prescription_no ?? 'Prescription' }}

                                    </div>

                                </td>

                                <!-- DOSE -->

                                <td style="
                                    padding:16px;
                                    vertical-align:top;
                                ">

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

                                        {{ $item->dose_quantity ?? '—' }}

                                    </div>

                                </td>

                                <!-- AVAILABLE -->

                                <td style="
                                    padding:16px;
                                    vertical-align:top;
                                ">

                                    @if($availableStock > 0)

                                        <div style="
                                            font-size:13px;
                                            font-weight:800;
                                            color:
                                                {{
                                                    $stockSufficient
                                                    ? '#166534'
                                                    : '#b45309'
                                                }};
                                        ">

                                            {{ $availableStock }}
                                            Available

                                        </div>

                                        @if(!$stockSufficient)

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

                                                <span style="
                                                    display:inline-block;
                                                    padding:5px 10px;
                                                    border-radius:999px;
                                                    background:#fef3c7;
                                                    color:#92400e;
                                                    font-size:11px;
                                                    font-weight:800;
                                                ">

                                                    LOW STOCK

                                                </span>

                                            </div>

                                        @endif

                                    @else

                                        <div style="
                                            display:inline-block;
                                            padding:5px 10px;
                                            border-radius:999px;
                                            background:#fee2e2;
                                            color:#991b1b;
                                            font-size:11px;
                                            font-weight:800;
                                        ">

                                            OUT OF STOCK

                                        </div>

                                    @endif

                                </td>

                                <!-- PRESCRIBED -->

                                <td style="
                                    padding:16px;
                                    text-align:center;
                                    vertical-align:top;
                                ">

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

                                        {{ $prescribedQty }}

                                    </div>

                                </td>

                                <!-- DISPENSE QUANTITY -->

                                <td style="
                                    padding:16px;
                                    vertical-align:top;
                                ">

                                    <input
                                        type="number"
                                        min="0"
                                        max="{{ $availableStock }}"
                                        value="{{
                                            $prescribedQty > 0
                                                ? min($prescribedQty, $availableStock)
                                                : 0
                                        }}"
                                        name="items[{{ $item->id }}][quantity]"
                                        {{
                                            $isLocked || $availableStock <= 0
                                                ? 'disabled'
                                                : ''
                                        }}
                                        style="
                                            width:90px;
                                            border:1px solid #d1d5db;
                                            border-radius:8px;
                                            padding:10px;
                                            font-size:13px;
                                            font-weight:700;
                                        "
                                    >

                                </td>

                                <!-- FREQUENCY -->

                                <td style="
                                    padding:16px;
                                    vertical-align:top;
                                ">

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

                                        {{ $item->frequency }}

                                    </div>

                                </td>

                                <!-- DURATION -->

                                <td style="
                                    padding:16px;
                                    vertical-align:top;
                                ">

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

                                        {{ $item->duration_value }}
                                        {{ $item->duration_unit }}

                                    </div>

                                </td>

                                <!-- INSTRUCTIONS -->

                                <td style="
                                    padding:16px;
                                    vertical-align:top;
                                ">

                                    <div style="
                                        font-size:13px;
                                        color:#475569;
                                        line-height:1.6;
                                    ">

                                        {{ $item->instructions ?? '—' }}

                                    </div>

                                </td>

                            </tr>

                        @endforeach

                    </tbody>

                </table>

            </div>

        </div>

        <!-- ========================================= -->
        <!-- ACTIONS -->
        <!-- ========================================= -->

        <div style="
            display:flex;
            justify-content:flex-end;
            gap:12px;
            flex-wrap:wrap;
        ">

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

                Back to Queue

            </a>

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

                Print Prescription

            </a>

            @if($hasExternalPrescription)

                <a href="{{ route('admin.pharmacy.external-prescription', $encounter->id) }}"
                   target="_blank"
                   style="
                        padding:12px 16px;
                        border-radius:10px;
                        background:#b91c1c;
                        color:white;
                        text-decoration:none;
                        font-size:13px;
                        font-weight:800;
                   ">

                    External Prescription

                </a>

            @endif

            @if($isLocked)

                <button type="button"
                        disabled
                        style="
                            border:none;
                            border-radius:10px;
                            background:#9ca3af;
                            color:white;
                            padding:12px 18px;
                            font-size:13px;
                            font-weight:800;
                            cursor:not-allowed;
                            opacity:.8;
                        ">

                    Dispensing Finalized

                </button>

            @else

                <button type="submit"
                        style="
                            border:none;
                            border-radius:10px;
                            background:#16a34a;
                            color:white;
                            padding:12px 18px;
                            font-size:13px;
                            font-weight:800;
                            cursor:pointer;
                        ">

                    Save Dispensing

                </button>

            @endif

        </div>

    </form>

</div>

@endsection