{{-- resources/views/admin/diagnoses/create.blade.php --}}

@extends('layouts.app')

@section('content')

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

    <!-- HEADER -->
    <div style="margin-bottom:25px;">

        <h1 style="
            font-size:28px;
            font-weight:600;
            margin-bottom:6px;
        ">

            Diagnosis

        </h1>

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

            Record clinical diagnosis for this encounter

        </div>

    </div>

    <!-- PATIENT -->
    <div class="panel"
         style="margin-bottom:20px;background:#eff6ff;">

        <div style="
            display:grid;
            grid-template-columns:1fr 1fr 1fr;
            gap:15px;
            font-size:14px;
            color:#1e3a8a;
        ">

            <div>

                <strong>Patient</strong><br>

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

            </div>

            <div>

                <strong>Patient No</strong><br>

                <span style="font-family:monospace;">

                    {{ $encounter->patient_no }}

                </span>

            </div>

            <div>

                <strong>Visit</strong><br>

                {{ $encounter->visit_no }}

            </div>

        </div>

    </div>

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

        @csrf

        <div class="panel">

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

                <!-- TYPE -->
                <div>

                    <label style="
                        display:block;
                        margin-bottom:8px;
                        font-weight:600;
                    ">

                        Diagnosis Type

                    </label>

                    <select name="diagnosis_type"
                            required
                            style="
                                width:100%;
                                padding:12px;
                                border:1px solid #d1d5db;
                                border-radius:8px;
                            ">

                        <option value="">
                            Select type
                        </option>

                        <option value="provisional">
                            Provisional
                        </option>

                        <option value="confirmed">
                            Confirmed
                        </option>

                        <option value="differential">
                            Differential
                        </option>

                        <option value="final">
                            Final
                        </option>

                    </select>

                </div>

                <!-- ICD10 -->
                <div>

                    <label style="
                        display:block;
                        margin-bottom:8px;
                        font-weight:600;
                    ">

                        ICD10 Code

                    </label>

                    <input type="text"
                           name="icd10_code"
                           placeholder="Optional ICD10 code"
                           style="
                                width:100%;
                                padding:12px;
                                border:1px solid #d1d5db;
                                border-radius:8px;
                           ">

                </div>

            </div>

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

                <label style="
                    display:block;
                    margin-bottom:8px;
                    font-weight:600;
                ">

                    Diagnosis

                </label>

                <textarea name="diagnosis_name"
                          rows="3"
                          required
                          placeholder="Enter diagnosis"
                          style="
                                width:100%;
                                padding:12px;
                                border:1px solid #d1d5db;
                                border-radius:8px;
                          "></textarea>

            </div>

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

                <label style="
                    display:block;
                    margin-bottom:8px;
                    font-weight:600;
                ">

                    Notes

                </label>

                <textarea name="notes"
                          rows="5"
                          placeholder="Clinical reasoning, differential notes, remarks..."
                          style="
                                width:100%;
                                padding:12px;
                                border:1px solid #d1d5db;
                                border-radius:8px;
                          "></textarea>

            </div>

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

                <label style="
                    display:block;
                    margin-bottom:8px;
                    font-weight:600;
                ">

                    Diagnosed By

                </label>

                <input type="text"
                       name="diagnosed_by"
                       placeholder="Clinician / doctor"
                       style="
                            width:100%;
                            padding:12px;
                            border:1px solid #d1d5db;
                            border-radius:8px;
                       ">

            </div>

            <!-- ACTIONS -->
            <div style="
                margin-top:25px;
                display:flex;
                gap:12px;
            ">

                <a href="{{ route('admin.encounters.show', $encounter->id) }}"
                   style="
                        padding:12px 18px;
                        background:#f3f4f6;
                        color:#333;
                        border-radius:8px;
                        text-decoration:none;
                   ">

                    Back

                </a>

                <button type="submit"
                        style="
                            background:#2563eb;
                            color:white;
                            border:none;
                            padding:12px 20px;
                            border-radius:8px;
                            cursor:pointer;
                            font-weight:600;
                        ">

                    Save Diagnosis

                </button>

            </div>

        </div>

    </form>

    <!-- EXISTING -->
    <div class="panel" style="margin-top:25px;">

        <h3 style="margin-bottom:18px;">
            Existing Diagnoses
        </h3>

        @if($diagnoses->isEmpty())

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

                No diagnoses recorded

            </div>

        @else

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

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

                    <tr>

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

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

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

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

                    </tr>

                </thead>

                <tbody>

                    @foreach($diagnoses as $diagnosis)

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

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

                                {{ ucfirst($diagnosis->diagnosis_type) }}

                            </td>

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

                                {{ $diagnosis->diagnosis_name }}

                            </td>

                            <td style="
                                padding:12px;
                                font-family:monospace;
                            ">

                                {{ $diagnosis->icd10_code ?? '—' }}

                            </td>

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

                                {{ $diagnosis->diagnosed_by ?? '—' }}

                            </td>

                        </tr>

                    @endforeach

                </tbody>

            </table>

        @endif

    </div>

</div>

@endsection