@extends('layouts.app')

@section('content')

<div style="
    max-width:1200px;
    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;
        ">

            Pharmacy Queue

        </div>

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

            Patients awaiting medication dispensing

        </div>

    </div>

    @if($encounters->isEmpty())

        <div class="panel"
             style="
                padding:40px;
                text-align:center;
             ">

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

                No patients awaiting dispensing

            </div>

        </div>

    @else

        <div style="
            display:flex;
            flex-direction:column;
            gap:14px;
        ">

            @foreach($encounters as $encounter)

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

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

                        <!-- ===================================== -->
                        <!-- LEFT -->
                        <!-- ===================================== -->

                        <div style="
                            flex:1;
                            min-width:280px;
                        ">

                            <!-- NAME -->

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

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

                            </div>

                            <!-- META -->

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

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

                                    Patient:
                                    {{ $encounter->patient_no }}

                                </div>

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

                                    Visit:
                                    {{ $encounter->visit_no }}

                                </div>

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

                                    Prescription:
                                    {{ $encounter->prescription_no }}

                                </div>

                            </div>

                            <!-- MEDICATIONS -->

                            <div style="
                                border:1px solid #e5e7eb;
                                border-radius:12px;
                                overflow:hidden;
                                background:#fafafa;
                            ">

                                <div style="
                                    padding:12px 14px;
                                    border-bottom:1px solid #e5e7eb;
                                    display:flex;
                                    justify-content:space-between;
                                    align-items:center;
                                    gap:10px;
                                    flex-wrap:wrap;
                                ">

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

                                        PRESCRIBED MEDICATIONS

                                    </div>

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

                                        {{ $encounter->total_items }}
                                        medication(s)

                                    </div>

                                </div>

                                <div style="
                                    padding:12px 14px;
                                    display:flex;
                                    flex-direction:column;
                                    gap:10px;
                                ">

                                    @forelse($encounter->medications as $medication)

                                        <div style="
                                            display:flex;
                                            justify-content:space-between;
                                            gap:12px;
                                            align-items:flex-start;
                                            flex-wrap:wrap;
                                            border-bottom:1px dashed #e2e8f0;
                                            padding-bottom:10px;
                                        ">

                                            <div>

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

                                                    {{ $medication->medication_name }}

                                                </div>

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

                                                    {{ $medication->frequency }}

                                                    •

                                                    {{ $medication->duration_value }}
                                                    {{ $medication->duration_unit }}

                                                </div>

                                            </div>

                                            <div style="
                                                background:#fef3c7;
                                                color:#92400e;
                                                border-radius:999px;
                                                padding:5px 9px;
                                                font-size:10px;
                                                font-weight:800;
                                                white-space:nowrap;
                                            ">

                                                {{
                                                    strtoupper(
                                                        $medication->dispensing_status
                                                        ?? 'pending'
                                                    )
                                                }}

                                            </div>

                                        </div>

                                    @empty

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

                                            No medication items found.

                                        </div>

                                    @endforelse

                                </div>

                            </div>

                        </div>

                        <!-- ===================================== -->
                        <!-- RIGHT -->
                        <!-- ===================================== -->

                        <div style="
                            display:flex;
                            flex-direction:column;
                            align-items:flex-end;
                            gap:12px;
                            min-width:180px;
                        ">

                            <div style="
                                background:#f8fafc;
                                border:1px solid #e5e7eb;
                                border-radius:12px;
                                padding:12px 14px;
                                text-align:right;
                                width:100%;
                            ">

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

                                    WORKFLOW STATUS

                                </div>

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

                                    Pending Dispense

                                </div>

                            </div>

                            <a href="{{ route('admin.pharmacy.dispense', $encounter->encounter_id) }}"
                               style="
                                    background:#16a34a;
                                    color:white;
                                    text-decoration:none;
                                    padding:12px 18px;
                                    border-radius:10px;
                                    font-size:13px;
                                    font-weight:800;
                                    text-align:center;
                                    width:100%;
                               ">

                                Open Dispensing

                            </a>

                        </div>

                    </div>

                </div>

            @endforeach

        </div>

    @endif

</div>

@endsection