@extends('layouts.app')

@section('content')

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

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

        <!-- LEFT -->
        <div>

            <h1 style="
                font-size:28px;
                font-weight:600;
                margin-bottom:5px;
            ">
                Visit {{ $visit->visit_no }}
            </h1>

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

                {{ $visit->first_name }}
                {{ $visit->last_name }}

                @if(!empty($visit->patient_no))

                    ·

                    <span style="font-family:monospace;">
                        {{ $visit->patient_no }}
                    </span>

                @endif

            </div>

        </div>

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

            <!-- STATUS -->
            <div>

                @php

                    $bg = match($visit->visit_status) {
                        'open' => '#dbeafe',
                        'completed' => '#dcfce7',
                        'cancelled' => '#fee2e2',
                        default => '#f3f4f6'
                    };

                    $color = match($visit->visit_status) {
                        'open' => '#1d4ed8',
                        'completed' => '#166534',
                        'cancelled' => '#991b1b',
                        default => '#374151'
                    };

                @endphp

                <span style="
                    padding:6px 12px;
                    border-radius:20px;
                    font-size:13px;
                    font-weight:600;
                    background:{{ $bg }};
                    color:{{ $color }};
                ">

                    {{ ucfirst($visit->visit_status) }}

                </span>

            </div>

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

                <!-- BACK -->
                <a href="{{ route('admin.patients.show', $visit->patient_id) }}"
                   style="
                        background:#f3f4f6;
                        color:#333;
                        padding:10px 14px;
                        border-radius:8px;
                        text-decoration:none;
                        font-size:13px;
                        font-weight:700;
                   ">

                    ← Patient

                </a>

                <!-- EDIT -->
                <a href="{{ route('admin.visits.edit', $visit->id) }}"
                   style="
                        background:#2563eb;
                        color:white;
                        padding:10px 14px;
                        border-radius:8px;
                        text-decoration:none;
                        font-size:13px;
                        font-weight:700;
                   ">

                    Edit Visit

                </a>

                <!-- ADD ENCOUNTER -->
                <a href="{{ route('admin.encounters.create', $visit->id) }}"
                   style="
                        background:#0f172a;
                        color:white;
                        padding:10px 14px;
                        border-radius:8px;
                        text-decoration:none;
                        font-size:13px;
                        font-weight:700;
                   ">

                    + Add Encounter

                </a>

                <!-- CLOSE -->
                @if($visit->visit_status === 'open')

                    <form method="POST"
                          action="{{ route('admin.visits.close', $visit->id) }}">

                        @csrf

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

                            Close Visit

                        </button>

                    </form>

                @endif

                <!-- CANCEL -->
                @if($visit->visit_status !== 'cancelled')

                    <form method="POST"
                          action="{{ route('admin.visits.cancel', $visit->id) }}"
                          onsubmit="return confirm('Cancel this visit?')">

                        @csrf

                        <button type="submit"
                                style="
                                    background:#dc2626;
                                    color:white;
                                    padding:10px 14px;
                                    border:none;
                                    border-radius:8px;
                                    font-size:13px;
                                    font-weight:700;
                                    cursor:pointer;
                                ">

                            Cancel Visit

                        </button>

                    </form>

                @endif

            </div>

        </div>

    </div>

    <!-- GRID -->
    <div style="
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:20px;
    ">

        <!-- VISIT DETAILS -->
        <div class="panel">

            <h3 style="margin-bottom:18px;">
                Visit Details
            </h3>

            <table style="
                width:100%;
                border-collapse:collapse;
                font-size:14px;
            ">

                <tbody>

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

                        <td style="
                            width:40%;
                            padding:12px;
                            font-weight:600;
                        ">
                            Visit Number
                        </td>

                        <td style="
                            padding:12px;
                            font-family:monospace;
                        ">
                            {{ $visit->visit_no }}
                        </td>

                    </tr>

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

                        <td style="
                            padding:12px;
                            font-weight:600;
                        ">
                            Visit Type
                        </td>

                        <td style="padding:12px;">
                            {{ ucfirst($visit->visit_type) }}
                        </td>

                    </tr>

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

                        <td style="
                            padding:12px;
                            font-weight:600;
                        ">
                            Facility
                        </td>

                        <td style="padding:12px;">
                            {{ $visit->facility_name ?? '—' }}
                        </td>

                    </tr>

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

                        <td style="
                            padding:12px;
                            font-weight:600;
                        ">
                            Visit Date
                        </td>

                        <td style="padding:12px;">

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

                        </td>

                    </tr>

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

                        <td style="
                            padding:12px;
                            font-weight:600;
                        ">
                            Provider
                        </td>

                        <td style="padding:12px;">
                            {{ $visit->provider_name ?? '—' }}
                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

        <!-- STATUS -->
        <div class="panel">

            <h3 style="margin-bottom:18px;">
                Visit Status
            </h3>

            <table style="
                width:100%;
                border-collapse:collapse;
                font-size:14px;
            ">

                <tbody>

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

                        <td style="
                            width:40%;
                            padding:12px;
                            font-weight:600;
                        ">
                            Current Status
                        </td>

                        <td style="padding:12px;">

                            <span style="
                                background:{{ $bg }};
                                color:{{ $color }};
                                padding:4px 10px;
                                border-radius:20px;
                                font-size:12px;
                                font-weight:600;
                            ">

                                {{ ucfirst($visit->visit_status) }}

                            </span>

                        </td>

                    </tr>

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

                        <td style="
                            padding:12px;
                            font-weight:600;
                        ">
                            Created
                        </td>

                        <td style="padding:12px;">
                            {{ $visit->created_at }}
                        </td>

                    </tr>

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

                        <td style="
                            padding:12px;
                            font-weight:600;
                        ">
                            Updated
                        </td>

                        <td style="padding:12px;">
                            {{ $visit->updated_at }}
                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

    </div>

    <!-- COMPLAINT -->
    <div class="panel" style="margin-top:20px;">

        <h3 style="margin-bottom:15px;">
            Chief Complaint
        </h3>

        <div style="
            line-height:1.7;
            color:#333;
            white-space:pre-wrap;
        ">

            {{ $visit->chief_complaint ?: 'No complaint recorded.' }}

        </div>

    </div>

    <!-- NOTES -->
    <div class="panel" style="margin-top:20px;">

        <h3 style="margin-bottom:15px;">
            Clinical Notes
        </h3>

        <div style="
            line-height:1.7;
            color:#333;
            white-space:pre-wrap;
        ">

            {{ $visit->notes ?: 'No clinical notes recorded.' }}

        </div>

    </div>

    <!-- ENCOUNTERS -->
    <div class="panel" style="margin-top:20px;">

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

            <div>

                <h3 style="margin-bottom:4px;">
                    Encounters
                </h3>

                <div style="
                    font-size:13px;
                    color:#666;
                ">
                    Clinical workflow stages within this visit
                </div>

            </div>

            <a href="{{ route('admin.encounters.create', $visit->id) }}"
               style="
                    background:#2563eb;
                    color:white;
                    padding:8px 14px;
                    border-radius:6px;
                    text-decoration:none;
                    font-size:14px;
               ">

                + Add Encounter

            </a>

        </div>

        @if($encounters->isEmpty())

            <div style="
                padding:25px;
                text-align:center;
                color:#777;
                border:1px dashed #ddd;
                border-radius:8px;
            ">

                <div style="
                    font-size:36px;
                    margin-bottom:10px;
                ">
                    🩺
                </div>

                <div>
                    No encounters added yet
                </div>

            </div>

        @else

            <table style="
                width:100%;
                border-collapse:collapse;
                font-size:14px;
            ">

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

                    <tr>

                        <th style="
                            padding:12px;
                            text-align:left;
                        ">
                            Encounter
                        </th>

                        <th style="
                            padding:12px;
                            text-align:left;
                        ">
                            Type
                        </th>

                        <th style="
                            padding:12px;
                            text-align:left;
                        ">
                            Provider
                        </th>

                        <th style="
                            padding:12px;
                            text-align:left;
                        ">
                            Date
                        </th>

                        <th style="
                            padding:12px;
                            text-align:left;
                        ">
                            Status
                        </th>

                        <th style="
                            padding:12px;
                            text-align:right;
                        ">
                        </th>

                    </tr>

                </thead>

                <tbody>

                    @foreach($encounters as $encounter)

                        @php

                            $encounterBg = match($encounter->status) {
                                'open' => '#dbeafe',
                                'completed' => '#dcfce7',
                                'cancelled' => '#fee2e2',
                                default => '#f3f4f6'
                            };

                            $encounterColor = match($encounter->status) {
                                'open' => '#1d4ed8',
                                'completed' => '#166534',
                                'cancelled' => '#991b1b',
                                default => '#374151'
                            };

                        @endphp

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

                            <!-- NUMBER -->
                            <td style="
                                padding:12px;
                                font-family:monospace;
                                font-weight:600;
                            ">

                                {{ $encounter->encounter_no }}

                            </td>

                            <!-- TYPE -->
                            <td style="padding:12px;">

                                {{ ucfirst($encounter->encounter_type) }}

                            </td>

                            <!-- PROVIDER -->
                            <td style="padding:12px;">

                                {{ $encounter->provider_name ?? '—' }}

                            </td>

                            <!-- DATE -->
                            <td style="padding:12px;">

                                @if($encounter->encounter_datetime)

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

                                @else

                                    —

                                @endif

                            </td>

                            <!-- STATUS -->
                            <td style="padding:12px;">

                                <span style="
                                    background:{{ $encounterBg }};
                                    color:{{ $encounterColor }};
                                    padding:4px 10px;
                                    border-radius:20px;
                                    font-size:12px;
                                    font-weight:600;
                                ">

                                    {{ ucfirst($encounter->status) }}

                                </span>

                            </td>

                            <!-- ACTION -->
                            <td style="
                                padding:12px;
                                text-align:right;
                            ">

                                <a href="{{ route('admin.encounters.show', $encounter->id) }}"
                                   style="
                                        background:#2563eb;
                                        color:white;
                                        padding:6px 12px;
                                        border-radius:6px;
                                        text-decoration:none;
                                        font-size:13px;
                                   ">

                                    Open

                                </a>

                            </td>

                        </tr>

                    @endforeach

                </tbody>

            </table>

        @endif

    </div>

</div>

@endsection