@extends('layouts.master')

@section('title', 'Immunization Encounter')

@section('content')

<div class="workflow-page">

    <x-workflow.header
        title="Immunization Encounter"
        subtitle="Vaccine administration and scheduling">

        <a
            href="{{ route('admin.immunization.queue') }}"
            class="workflow-btn workflow-btn-outline">

            Back To Queue

        </a>

    </x-workflow.header>

    {{-- SUMMARY --}}
    <div class="workflow-grid-3">

        @include(
            'components.workflow.patient-summary',
            [
                'patient' => $patient
            ]
        )

        @include(
            'admin.immunization.partials.assessment',
            [
                'assessment' => $assessment
            ]
        )

        @include(
            'admin.immunization.partials.clinical-summary',
            [
                'patient' => $patient
            ]
        )

    </div>

    {{-- IMMUNIZATION FORM --}}
    <form
        method="POST"
        action="{{ route(
            'admin.immunization.store',
            $patient->encounter_id
        ) }}">

        @csrf

        <div class="workflow-card">

            <div class="workflow-card-header d-flex justify-content-between align-items-center">

                <span>
                    Vaccine Administration
                </span>

                <button
                    type="button"
                    id="add-vaccine"
                    class="workflow-btn workflow-btn-primary">

                    + Add Vaccine

                </button>

            </div>

            <div class="workflow-card-body">

                <div id="vaccines-container">

                    @include(
                        'admin.immunization.partials.vaccine-row',
                        [
                            'index'    => 0,
                            'vaccines' => $vaccines,
                            'routes'   => $routes,
                            'sites'    => $sites
                        ]
                    )

                </div>

            </div>

        </div>

        <div
            class="mt-3"
            style="text-align:right;">

            <button
                type="submit"
                class="workflow-btn workflow-btn-success">

                Save Immunization(s)

            </button>

        </div>

    </form>

    {{-- HISTORY --}}
    @include(
        'admin.immunization.partials.history',
        [
            'history' => $history
        ]
    )

</div>

@endsection

@push('scripts')

<script>

let vaccineIndex =
    document.querySelectorAll(
        '.vaccine-row'
    ).length;

/*
|--------------------------------------------------------------------------
| RENUMBER VACCINES
|--------------------------------------------------------------------------
*/
function renumberVaccines()
{
    document
        .querySelectorAll(
            '.vaccine-counter'
        )
        .forEach(function (
            badge,
            index
        ) {

            badge.textContent =
                index + 1;

        });
}

/*
|--------------------------------------------------------------------------
| LOAD VACCINE BATCHES
|--------------------------------------------------------------------------
*/
async function loadBatches(
    vaccineSelect
)
{
    const row =
        vaccineSelect.closest(
            '.vaccine-row'
        );

    const batchSelect =
        row.querySelector(
            '.batch-select'
        );

    const doseInput =
        row.querySelector(
            '.dose-input'
        );

    const vaccineId =
        vaccineSelect.value;

    const selectedOption =
        vaccineSelect.options[
            vaccineSelect.selectedIndex
        ];

    /*
    |--------------------------------------------------------------------------
    | AUTO POPULATE DOSE
    |--------------------------------------------------------------------------
    */
    doseInput.value =
        selectedOption.dataset.dose || '';

    batchSelect.innerHTML =
        '<option value="">Loading...</option>';

    if (!vaccineId) {

        batchSelect.innerHTML =
            '<option value="">Select Batch</option>';

        return;
    }

    try {

        const response =
            await fetch(
                '/immunization/batches/' +
                vaccineId
            );

        const batches =
            await response.json();

        batchSelect.innerHTML =
            '<option value="">Select Batch</option>';

        batches.forEach(function (
            batch
        ) {

            const option =
                document.createElement(
                    'option'
                );

            option.value =
                batch.id;

            option.textContent =
                batch.batch_no +
                ' (' +
                batch.quantity_available +
                ' available)';

            batchSelect.appendChild(
                option
            );

        });

    } catch (error) {

        batchSelect.innerHTML =
            '<option value="">No Batches Found</option>';

        console.error(error);

    }
}

/*
|--------------------------------------------------------------------------
| VACCINE CHANGED
|--------------------------------------------------------------------------
*/
document.addEventListener(
    'change',
    function (e)
    {

        if (
            e.target.classList.contains(
                'vaccine-select'
            )
        ) {

            loadBatches(
                e.target
            );

        }

    }
);

/*
|--------------------------------------------------------------------------
| ADD VACCINE
|--------------------------------------------------------------------------
*/
document
    .getElementById(
        'add-vaccine'
    )
    ?.addEventListener(
        'click',
        function ()
        {

            const template =
                document
                    .querySelector(
                        '.vaccine-row'
                    )
                    .cloneNode(true);

            template
                .querySelectorAll(
                    'input, select, textarea'
                )
                .forEach(function (
                    field
                )
                {

                    if (
                        field.name
                    ) {

                        field.name =
                            field.name.replace(
                                /\[\d+\]/,
                                '[' +
                                vaccineIndex +
                                ']'
                            );

                    }

                    if (
                        field.tagName ===
                        'SELECT'
                    ) {

                        field.selectedIndex = 0;

                    } else {

                        field.value = '';

                    }

                });

            const batchSelect =
                template.querySelector(
                    '.batch-select'
                );

            if (
                batchSelect
            ) {

                batchSelect.innerHTML =
                    '<option value="">Select Batch</option>';

            }

            document
                .getElementById(
                    'vaccines-container'
                )
                .appendChild(
                    template
                );

            vaccineIndex++;

            renumberVaccines();

        }
    );

/*
|--------------------------------------------------------------------------
| REMOVE VACCINE
|--------------------------------------------------------------------------
*/
document.addEventListener(
    'click',
    function (e)
    {

        if (
            e.target.classList.contains(
                'remove-vaccine'
            )
        )
        {

            const rows =
                document
                    .querySelectorAll(
                        '.vaccine-row'
                    );

            if (
                rows.length > 1
            )
            {

                e.target
                    .closest(
                        '.vaccine-row'
                    )
                    .remove();

                renumberVaccines();

            }

        }

    }
);

renumberVaccines();

</script>

@endpush