@extends('layouts.app')

@section('content')

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

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

        <h2 style="
            margin:0 0 4px 0;
            font-size:28px;
            font-weight:700;
            color:#111827;
        ">
            New Visit
        </h2>

        <p style="
            margin:0;
            color:#6b7280;
            font-size:14px;
        ">
            Register patient for clinical care
        </p>

    </div>

    <!-- PATIENT HEADER -->
    <div style="
        background:white;
        border:1px solid #e5e7eb;
        border-radius:12px;
        padding:18px 22px;
        margin-bottom:20px;
    ">

        <div style="
            display:grid;
            grid-template-columns:
                repeat(auto-fit, minmax(180px, 1fr));
            gap:18px;
        ">

            <!-- NAME -->
            <div>

                <div style="
                    font-size:11px;
                    text-transform:uppercase;
                    color:#6b7280;
                    margin-bottom:4px;
                    letter-spacing:.5px;
                ">
                    Patient
                </div>

                <div style="
                    font-size:18px;
                    font-weight:700;
                    color:#0f172a;
                ">

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

                </div>

            </div>

            <!-- PATIENT NUMBER -->
            <div>

                <div style="
                    font-size:11px;
                    text-transform:uppercase;
                    color:#6b7280;
                    margin-bottom:4px;
                    letter-spacing:.5px;
                ">
                    Patient No
                </div>

                <div style="
                    font-size:15px;
                    font-weight:600;
                    color:#111827;
                ">

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

                </div>

            </div>

            <!-- AGE -->
            <div>

                <div style="
                    font-size:11px;
                    text-transform:uppercase;
                    color:#6b7280;
                    margin-bottom:4px;
                    letter-spacing:.5px;
                ">
                    Age
                </div>

                <div style="
                    font-size:15px;
                    font-weight:600;
                    color:#111827;
                ">

                    @if(!empty($patient->date_of_birth))

                        {{ \Carbon\Carbon::parse($patient->date_of_birth)->age }}
                        years

                    @else

                        —

                    @endif

                </div>

            </div>

            <!-- GENDER -->
            <div>

                <div style="
                    font-size:11px;
                    text-transform:uppercase;
                    color:#6b7280;
                    margin-bottom:4px;
                    letter-spacing:.5px;
                ">
                    Gender
                </div>

                <div style="
                    font-size:15px;
                    font-weight:600;
                    color:#111827;
                ">

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

                </div>

            </div>

        </div>

    </div>

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

        <div style="
            margin-bottom:20px;
            padding:14px 16px;
            border-radius:10px;
            background:#fee2e2;
            color:#991b1b;
            border:1px solid #fecaca;
        ">

            <div style="
                font-weight:700;
                margin-bottom:8px;
            ">
                Fix the following:
            </div>

            <ul style="
                margin:0;
                padding-left:18px;
            ">

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

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

                @endforeach

            </ul>

        </div>

    @endif

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

        @csrf

        <!-- VISIT REGISTRATION -->
        <div class="panel"
             style="margin-bottom:20px;">

            <div style="
                font-size:20px;
                font-weight:700;
                margin-bottom:20px;
                color:#111827;
            ">
                Visit Registration
            </div>

            <!-- TOP GRID -->
            <div style="
                display:grid;
                grid-template-columns:1fr 1fr;
                gap:18px;
                margin-bottom:22px;
            ">

                <!-- MODE -->
                <div>

                    <label style="
                        display:block;
                        margin-bottom:8px;
                        font-weight:600;
                        font-size:14px;
                    ">
                        Registration Mode
                    </label>

                    <select
                        name="workflow_mode"
                        id="workflow_mode"
                        style="
                            width:100%;
                            padding:12px;
                            border:1px solid #d1d5db;
                            border-radius:8px;
                            background:white;
                        "
                    >

                        <option
                            value="facility"
                            {{ old('workflow_mode', 'facility') == 'facility' ? 'selected' : '' }}
                        >
                            Facility Visit
                        </option>

                        <option
                            value="outreach"
                            {{ old('workflow_mode') == 'outreach' ? 'selected' : '' }}
                        >
                            Outreach / Camp
                        </option>

                    </select>

                </div>

                <!-- FACILITY -->
                <div id="facility-section">

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

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

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

                        @foreach($facilities as $facility)

                            <option
                                value="{{ $facility->id }}"
                                {{ old('facility_id') == $facility->id ? 'selected' : '' }}
                            >

                                {{ $facility->name }}

                            </option>

                        @endforeach

                    </select>

                </div>

                <!-- OUTREACH -->
                <div id="outreach-section">

                    <label style="
                        display:block;
                        margin-bottom:8px;
                        font-weight:600;
                        font-size:14px;
                    ">
                        Outreach / Camp
                    </label>

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

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

                        @foreach($occurrences as $o)

                            <option
                                value="{{ $o->id }}"
                                {{ old('occurrence_id') == $o->id ? 'selected' : '' }}
                            >

                                {{ $o->facility_name }}

                                @if(!empty($o->start_date))

                                    —
                                    {{ \Carbon\Carbon::parse($o->start_date)->format('d M Y') }}

                                @endif

                            </option>

                        @endforeach

                    </select>

                </div>

            </div>

            <!-- SERVICES -->
            <div style="margin-bottom:24px;">

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

                    <label style="
                        font-weight:700;
                        font-size:15px;
                    ">
                        Services
                    </label>

                    <div style="
                        font-size:12px;
                        color:#6b7280;
                    ">
                        Facility = single service · Outreach = multiple services
                    </div>

                </div>

                <div style="
                    display:grid;
                    grid-template-columns:
                        repeat(auto-fit, minmax(200px, 1fr));
                    gap:12px;
                ">

                    @foreach($services as $service)

                        <label style="
                            border:1px solid #e5e7eb;
                            border-radius:10px;
                            padding:12px 14px;
                            cursor:pointer;
                            background:white;
                        ">

                            <div style="
                                display:flex;
                                align-items:flex-start;
                                gap:10px;
                            ">

                                <input
                                    type="checkbox"
                                    name="services[]"
                                    value="{{ $service->service_code }}"
                                    data-triage="{{ $service->requires_triage }}"
                                    {{ in_array(
                                        $service->service_code,
                                        old('services', [])
                                    ) ? 'checked' : '' }}
                                    style="margin-top:4px;"
                                >

                                <div>

                                    <div style="
                                        font-weight:600;
                                        color:#111827;
                                        margin-bottom:3px;
                                    ">

                                        {{ $service->service_name }}

                                    </div>

                                    <div style="
                                        font-size:12px;
                                        color:#6b7280;
                                    ">

                                        {{ ucfirst($service->queue_name) }}
                                        ·

                                        @if($service->requires_triage)

                                            Triage

                                        @else

                                            Direct

                                        @endif

                                    </div>

                                </div>

                            </div>

                        </label>

                    @endforeach

                </div>

            </div>

            <!-- RECEIVING OFFICER -->
            <div>

                <label style="
                    display:block;
                    margin-bottom:8px;
                    font-weight:600;
                    font-size:14px;
                ">
                    Receiving Officer
                </label>

                <input
                    type="text"
                    name="provider_name"
                    value="{{ old('provider_name') }}"
                    placeholder="Reception / records officer"
                    style="
                        width:100%;
                        padding:12px;
                        border:1px solid #d1d5db;
                        border-radius:8px;
                    "
                >

            </div>

        </div>

        <!-- ROUTING SUMMARY -->
        <div class="panel"
             style="margin-bottom:20px;">

            <div style="
                font-size:18px;
                font-weight:700;
                margin-bottom:16px;
                color:#111827;
            ">
                Routing Summary
            </div>

            <div id="routing-summary"
                 style="
                    display:flex;
                    flex-direction:column;
                    gap:10px;
                    color:#374151;
                    font-size:14px;
                 ">

                <div>
                    • 0 services selected
                </div>

                <div>
                    • 0 require triage
                </div>

                <div>
                    • 0 direct queue
                </div>

            </div>

        </div>

        <!-- ACTIONS -->
        <div style="
            display:flex;
            gap:14px;
        ">

            <a href="{{ route('admin.patients.show', $patient->id) }}"
               style="
                    flex:1;
                    text-align:center;
                    padding:13px;
                    border:1px solid #d1d5db;
                    border-radius:10px;
                    text-decoration:none;
                    color:#374151;
                    background:white;
               ">

                Cancel

            </a>

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

                Register Visit

            </button>

        </div>

    </form>

</div>

<script>

const workflow =
    document.getElementById('workflow_mode');

const facilitySection =
    document.getElementById('facility-section');

const outreachSection =
    document.getElementById('outreach-section');

const serviceCheckboxes =
    document.querySelectorAll(
        'input[name="services[]"]'
    );

const summary =
    document.getElementById(
        'routing-summary'
    );

function updateWorkflowUI()
{
    if (workflow.value === 'outreach') {

        outreachSection.style.display = 'block';
        facilitySection.style.display = 'none';

    } else {

        facilitySection.style.display = 'block';
        outreachSection.style.display = 'none';
    }

    enforceWorkflowRules();
}

function enforceWorkflowRules()
{
    if (workflow.value === 'facility') {

        serviceCheckboxes.forEach((checkbox) => {

            checkbox.onchange = function () {

                if (this.checked) {

                    serviceCheckboxes.forEach((other) => {

                        if (other !== this) {
                            other.checked = false;
                        }

                    });

                }

                updateSummary();
            };

        });

    } else {

        serviceCheckboxes.forEach((checkbox) => {

            checkbox.onchange = function () {

                updateSummary();

            };

        });
    }
}

function updateSummary()
{
    let selected = 0;
    let triage = 0;
    let direct = 0;

    serviceCheckboxes.forEach((checkbox) => {

        if (checkbox.checked) {

            selected++;

            if (
                checkbox.dataset.triage == 1
            ) {
                triage++;
            } else {
                direct++;
            }

        }

    });

    summary.innerHTML = `
        <div>• ${selected} services selected</div>
        <div>• ${triage} require triage</div>
        <div>• ${direct} direct queue</div>
    `;
}

workflow.addEventListener(
    'change',
    updateWorkflowUI
);

updateWorkflowUI();
updateSummary();

</script>

@endsection