@extends('layouts.app')

@section('content')

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

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

        <h2 style="margin-bottom:5px;">
            New Encounter
        </h2>

        <p style="color:#666;">
            Add a clinical encounter to this visit
        </p>

    </div>

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

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

            <div>

                <strong>Patient:</strong>

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

            </div>

            <div>

                <strong>Visit:</strong>

                {{ $visit->visit_no }}

            </div>

        </div>

    </div>

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

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

            <strong>Fix the following:</strong>

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

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

                    <li style="font-size:13px;">
                        {{ $error }}
                    </li>

                @endforeach

            </ul>

        </div>

    @endif

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

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

            @csrf

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

                <!-- TYPE -->
                <div>

                    <label style="font-weight:600;">
                        Encounter Type
                    </label>

                    <select name="encounter_type"
                            required
                            style="
                                width:100%;
                                padding:12px;
                                border:1px solid #ddd;
                                border-radius:6px;
                            ">

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

                        <option value="triage">
                            Triage
                        </option>

                        <option value="consultation">
                            Consultation
                        </option>

                        <option value="laboratory">
                            Laboratory
                        </option>

                        <option value="pharmacy">
                            Pharmacy
                        </option>

                        <option value="radiology">
                            Radiology
                        </option>

                        <option value="procedure">
                            Procedure
                        </option>

                        <option value="counselling">
                            Counselling
                        </option>

                        <option value="immunization">
                            Immunization
                        </option>

                        <option value="admission">
                            Admission
                        </option>

                    </select>

                </div>

                <!-- DATETIME -->
                <div>

                    <label style="font-weight:600;">
                        Encounter Date & Time
                    </label>

<input type="datetime-local"
       name="encounter_datetime"
       value="{{ old('encounter_datetime', now()->format('Y-m-d\TH:i')) }}"
                           required
                           style="
                                width:100%;
                                padding:12px;
                                border:1px solid #ddd;
                                border-radius:6px;
                           ">

                </div>

                <!-- PROVIDER -->
                <div style="grid-column:1 / span 2;">

                    <label style="font-weight:600;">
                        Provider Name
                    </label>

                    <input type="text"
                           name="provider_name"
                           value="{{ old('provider_name') }}"
                           placeholder="Doctor / nurse / clinician"
                           style="
                                width:100%;
                                padding:12px;
                                border:1px solid #ddd;
                                border-radius:6px;
                           ">

                </div>

            </div>

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

                <label style="font-weight:600;">
                    Clinical Summary
                </label>

                <textarea name="summary"
                          rows="8"
                          placeholder="Document findings, assessment, interventions, medications, recommendations..."
                          style="
                                width:100%;
                                padding:12px;
                                border:1px solid #ddd;
                                border-radius:6px;
                          ">{{ old('summary') }}</textarea>

            </div>

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

                <a href="{{ route('admin.visits.show', $visit->id) }}"
                   style="
                        flex:1;
                        text-align:center;
                        padding:12px;
                        border:1px solid #ddd;
                        border-radius:6px;
                        text-decoration:none;
                        color:#333;
                   ">

                    Cancel

                </a>

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

                    Save Encounter

                </button>

            </div>

        </form>

    </div>

</div>

@endsection