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

@extends('layouts.app')

@section('content')

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

    @php

        $encounter = DB::table('patient_encounters')
            ->where('id', $labRequest->encounter_id)
            ->first();

        $patient = DB::table('patients')
            ->where('id', $labRequest->patient_id)
            ->first();

        $existingResults = DB::table('encounter_lab_result_items')
            ->where('lab_request_id', $labRequest->id)
            ->orderBy('id')
            ->get();

        $attachments = DB::table('encounter_lab_attachments')
            ->where('lab_request_id', $labRequest->id)
            ->orderByDesc('id')
            ->get();

    @endphp

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

        <div>

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

                Record Laboratory Results

            </h1>

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

                Lab Request:

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

                    {{ $labRequest->request_no ?? ('LAB-REQ-'.$labRequest->id) }}

                </span>

            </div>

        </div>

        <div>

            <span style="
                background:#ede9fe;
                color:#6d28d9;
                padding:6px 12px;
                border-radius:20px;
                font-size:13px;
                font-weight:600;
            ">

                Laboratory

            </span>

        </div>

    </div>

    <!-- PATIENT SUMMARY -->
    <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>

                {{ $patient->first_name ?? '' }}
                {{ $patient->last_name ?? '' }}

            </div>

            <div>

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

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

                    {{ $patient->patient_no ?? '—' }}

                </span>

            </div>

            <div>

                <strong>Encounter</strong><br>

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

            </div>

        </div>

    </div>

    <!-- ERRORS -->
    @if ($errors->any())

        <div style="
            background:#fee2e2;
            color:#991b1b;
            padding:15px;
            border-radius:8px;
            margin-bottom:20px;
        ">

            <strong>Please correct the following:</strong>

            <ul style="
                margin-top:10px;
                padding-left:20px;
            ">

                @foreach ($errors->all() as $error)

                    <li>{{ $error }}</li>

                @endforeach

            </ul>

        </div>

    @endif

    <!-- FORM -->
    <form method="POST"
          enctype="multipart/form-data"
          action="{{ route('admin.lab-results.store', $labRequest->id) }}">

        @csrf

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

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

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

                    <h3 style="margin:0;">
                        Test Results
                    </h3>

                    <button type="button"
                            onclick="addResultRow()"
                            style="
                                background:#2563eb;
                                color:white;
                                border:none;
                                padding:10px 14px;
                                border-radius:6px;
                                cursor:pointer;
                                font-size:13px;
                            ">

                        + Add Test

                    </button>

                </div>

                <div style="
                    overflow-x:auto;
                    border:1px solid #e5e7eb;
                    border-radius:10px;
                ">

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

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

                            <tr>

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

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

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

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

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

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

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

                            </tr>

                        </thead>

                        <tbody id="results-body">

                            @if($existingResults->count())

                                @foreach($existingResults as $index => $result)

                                    <tr>

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

                                            <input type="text"
                                                   name="tests[{{ $index }}][test_name]"
                                                   value="{{ old('tests.'.$index.'.test_name', $result->test_name) }}"
                                                   style="
                                                        width:100%;
                                                        padding:10px;
                                                        border:1px solid #d1d5db;
                                                        border-radius:6px;
                                                   ">

                                        </td>

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

                                            <input type="text"
                                                   name="tests[{{ $index }}][result_value]"
                                                   value="{{ old('tests.'.$index.'.result_value', $result->result_value) }}"
                                                   style="
                                                        width:100%;
                                                        padding:10px;
                                                        border:1px solid #d1d5db;
                                                        border-radius:6px;
                                                   ">

                                        </td>

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

                                            <input type="text"
                                                   name="tests[{{ $index }}][result_unit]"
                                                   value="{{ old('tests.'.$index.'.result_unit', $result->result_unit) }}"
                                                   style="
                                                        width:100%;
                                                        padding:10px;
                                                        border:1px solid #d1d5db;
                                                        border-radius:6px;
                                                   ">

                                        </td>

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

                                            <input type="text"
                                                   name="tests[{{ $index }}][reference_range]"
                                                   value="{{ old('tests.'.$index.'.reference_range', $result->reference_range) }}"
                                                   style="
                                                        width:100%;
                                                        padding:10px;
                                                        border:1px solid #d1d5db;
                                                        border-radius:6px;
                                                   ">

                                        </td>

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

                                            <select name="tests[{{ $index }}][interpretation]"
                                                    style="
                                                        width:100%;
                                                        padding:10px;
                                                        border:1px solid #d1d5db;
                                                        border-radius:6px;
                                                    ">

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

                                                <option value="normal"
                                                    {{ $result->interpretation == 'normal' ? 'selected' : '' }}>
                                                    Normal
                                                </option>

                                                <option value="abnormal"
                                                    {{ $result->interpretation == 'abnormal' ? 'selected' : '' }}>
                                                    Abnormal
                                                </option>

                                                <option value="critical"
                                                    {{ $result->interpretation == 'critical' ? 'selected' : '' }}>
                                                    Critical
                                                </option>

                                            </select>

                                        </td>

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

                                            <textarea
                                                name="tests[{{ $index }}][notes]"
                                                rows="2"
                                                style="
                                                    width:100%;
                                                    padding:10px;
                                                    border:1px solid #d1d5db;
                                                    border-radius:6px;
                                                ">{{ old('tests.'.$index.'.notes', $result->notes) }}</textarea>

                                        </td>

                                        <td style="
                                            padding:10px;
                                            text-align:center;
                                        ">

                                            <button type="button"
                                                    onclick="removeRow(this)"
                                                    style="
                                                        background:#dc2626;
                                                        color:white;
                                                        border:none;
                                                        padding:8px 10px;
                                                        border-radius:6px;
                                                        cursor:pointer;
                                                    ">

                                                Remove

                                            </button>

                                        </td>

                                    </tr>

                                @endforeach

                            @else

                                <tr>

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

                                        <input type="text"
                                               name="tests[0][test_name]"
                                               value="{{ old('tests.0.test_name', $labRequest->test_name ?? '') }}"
                                               style="
                                                    width:100%;
                                                    padding:10px;
                                                    border:1px solid #d1d5db;
                                                    border-radius:6px;
                                               ">

                                    </td>

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

                                        <input type="text"
                                               name="tests[0][result_value]"
                                               style="
                                                    width:100%;
                                                    padding:10px;
                                                    border:1px solid #d1d5db;
                                                    border-radius:6px;
                                               ">

                                    </td>

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

                                        <input type="text"
                                               name="tests[0][result_unit]"
                                               style="
                                                    width:100%;
                                                    padding:10px;
                                                    border:1px solid #d1d5db;
                                                    border-radius:6px;
                                               ">

                                    </td>

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

                                        <input type="text"
                                               name="tests[0][reference_range]"
                                               style="
                                                    width:100%;
                                                    padding:10px;
                                                    border:1px solid #d1d5db;
                                                    border-radius:6px;
                                               ">

                                    </td>

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

                                        <select name="tests[0][interpretation]"
                                                style="
                                                    width:100%;
                                                    padding:10px;
                                                    border:1px solid #d1d5db;
                                                    border-radius:6px;
                                                ">

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

                                            <option value="normal">
                                                Normal
                                            </option>

                                            <option value="abnormal">
                                                Abnormal
                                            </option>

                                            <option value="critical">
                                                Critical
                                            </option>

                                        </select>

                                    </td>

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

                                        <textarea
                                            name="tests[0][notes]"
                                            rows="2"
                                            style="
                                                width:100%;
                                                padding:10px;
                                                border:1px solid #d1d5db;
                                                border-radius:6px;
                                            "></textarea>

                                    </td>

                                    <td style="
                                        padding:10px;
                                        text-align:center;
                                    ">

                                        <button type="button"
                                                onclick="removeRow(this)"
                                                style="
                                                    background:#dc2626;
                                                    color:white;
                                                    border:none;
                                                    padding:8px 10px;
                                                    border-radius:6px;
                                                    cursor:pointer;
                                                ">

                                            Remove

                                        </button>

                                    </td>

                                </tr>

                            @endif

                        </tbody>

                    </table>

                </div>

            </div>

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

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

                    Laboratory Attachments

                </label>

                <input type="file"
                       name="attachments[]"
                       multiple
                       accept=".pdf,.jpg,.jpeg,.png"
                       style="
                            width:100%;
                            padding:12px;
                            border:1px solid #d1d5db;
                            border-radius:8px;
                            background:white;
                       ">

                <div style="
                    margin-top:8px;
                    font-size:12px;
                    color:#666;
                ">

                    Upload PDF reports, scanned results or laboratory images

                </div>

            </div>

            <!-- EXISTING ATTACHMENTS -->
            @if($attachments->count())

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

                    <h3 style="margin-bottom:15px;">
                        Existing Attachments
                    </h3>

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

                        @foreach($attachments as $attachment)

                            <a href="{{ asset('storage/'.$attachment->file_path) }}"
                               target="_blank"
                               style="
                                    display:block;
                                    padding:12px;
                                    border:1px solid #e5e7eb;
                                    border-radius:8px;
                                    text-decoration:none;
                                    color:#2563eb;
                               ">

                                {{ $attachment->file_name }}

                            </a>

                        @endforeach

                    </div>

                </div>

            @endif

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

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

                    Save Laboratory Results

                </button>

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

                    Back to Encounter

                </a>

            </div>

        </div>

    </form>

</div>

<script>

    let rowIndex = {{ $existingResults->count() ?: 1 }};

    function addResultRow()
    {
        const tbody = document.getElementById('results-body');

        const row = `
            <tr>

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

                    <input type="text"
                           name="tests[${rowIndex}][test_name]"
                           style="
                                width:100%;
                                padding:10px;
                                border:1px solid #d1d5db;
                                border-radius:6px;
                           ">

                </td>

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

                    <input type="text"
                           name="tests[${rowIndex}][result_value]"
                           style="
                                width:100%;
                                padding:10px;
                                border:1px solid #d1d5db;
                                border-radius:6px;
                           ">

                </td>

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

                    <input type="text"
                           name="tests[${rowIndex}][result_unit]"
                           style="
                                width:100%;
                                padding:10px;
                                border:1px solid #d1d5db;
                                border-radius:6px;
                           ">

                </td>

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

                    <input type="text"
                           name="tests[${rowIndex}][reference_range]"
                           style="
                                width:100%;
                                padding:10px;
                                border:1px solid #d1d5db;
                                border-radius:6px;
                           ">

                </td>

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

                    <select name="tests[${rowIndex}][interpretation]"
                            style="
                                width:100%;
                                padding:10px;
                                border:1px solid #d1d5db;
                                border-radius:6px;
                            ">

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

                        <option value="normal">
                            Normal
                        </option>

                        <option value="abnormal">
                            Abnormal
                        </option>

                        <option value="critical">
                            Critical
                        </option>

                    </select>

                </td>

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

                    <textarea
                        name="tests[${rowIndex}][notes]"
                        rows="2"
                        style="
                            width:100%;
                            padding:10px;
                            border:1px solid #d1d5db;
                            border-radius:6px;
                        "></textarea>

                </td>

                <td style="
                    padding:10px;
                    text-align:center;
                ">

                    <button type="button"
                            onclick="removeRow(this)"
                            style="
                                background:#dc2626;
                                color:white;
                                border:none;
                                padding:8px 10px;
                                border-radius:6px;
                                cursor:pointer;
                            ">

                        Remove

                    </button>

                </td>

            </tr>
        `;

        tbody.insertAdjacentHTML('beforeend', row);

        rowIndex++;
    }

    function removeRow(button)
    {
        const row = button.closest('tr');

        row.remove();
    }

</script>

@endsection