@extends('layouts/layoutMaster')

@section('title', 'Create Discharge Plan')

<script type="importmap">
  {
      "imports": {
          "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.2.0/ckeditor5.js",
          "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.2.0/"
      }
  }
</script>
<!-- Vendor Styles -->
@section('vendor-style')
    @vite(['resources/assets/vendor/libs/flatpickr/flatpickr.scss', 'resources/assets/vendor/libs/select2/select2.scss'])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
    @vite(['resources/assets/vendor/libs/cleavejs/cleave.js', 'resources/assets/vendor/libs/cleavejs/cleave-phone.js', 'resources/assets/vendor/libs/moment/moment.js', 'resources/assets/vendor/libs/flatpickr/flatpickr.js', 'resources/assets/vendor/libs/select2/select2.js'])
@endsection

<!-- Page Scripts -->
@section('page-script')
    @vite(['resources/assets/js/form-layouts.js'])
    @vite(['resources/assets/js/discharge-plan-list.js'])
    @vite('resources/css/style.css')

    <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.2.0/ckeditor5.css">
    <script type="module">
        import {
            ClassicEditor,
            Essentials,
            Paragraph,
            Bold,
            Italic,
            Font,
            List,
        } from 'ckeditor5';
        const initializeCKEditor = (elementId) => {
            ClassicEditor
                .create(document.querySelector(`#${elementId}`), {
                    plugins: [Essentials,
                        Paragraph,
                        Bold,
                        Italic,
                        Font,
                        List,
                    ],
                    toolbar: [
                        'undo', 'redo', '|', 'bold', 'italic', '|',
                        'bulletedList', 'numberedList', 'fontFamily',
                        'fontColor', 'fontBackgroundColor',
                    ],
                })
                .then(editor => {
                    window.editor = editor;
                })
                .catch(error => {
                    console.error(error);
                });
        }
        // List of textarea IDs
        const textareaIds = ['operative_findings', 'treatment_in_hospital', 'treatment_in_home'];

        // Initialize CKEditor for each textarea
        textareaIds.forEach(initializeCKEditor);
    </script>
@endsection

@section('content')

    <!-- Multi Column with Form Separator -->
    <div class="card mb-4">
        <div class="card-header border-bottom mb-4">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h5 class="mb-0"> <i class="menu-icon tf-icons ti ti-checkup-list"> </i>
                        <b>Create Discharge Plan</b>
                    </h5>
                </div>
            </div>
        </div>
        <form id="discharge-plan-form" class="card-body" action="{{ route('discharge-plan.store') }}" method="POST">
            @csrf
            <h6>BASIC INFORMATION</h6>

            <!-- Patient Selection -->
            <div class="row g-3">
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="form-label" for="patient_id">Patient's Name</label>
                        @php
                            $selectedPatientID = isset($patientID) ? $patientID : null;
                            $selectedipdID = isset($ipdID) ? $ipdID : null;
                            $provisional_diagnose = isset($provisional_diagnose) ? $provisional_diagnose : 'N/A';
                            $special_instruction = isset($special_instruction) ? $special_instruction : 'N/A';
                        @endphp
                        <!-- Hidden input to pass the pre-selected patient ID -->
                        <input type="hidden" id="pre-selected-patient-id" value="{{ $selectedPatientID }}">
                        <select class="select2 form-select text-capitalize" id="patient_id" name="patient_id">
                            <option value="" disabled {{ is_null($selectedPatientID) ? 'selected' : '' }}>
                                {{ __('Select Patient') }}</option>
                            @foreach ($patients as $patient)
                                <option value="{{ $patient->id }}" data-name="{{ $patient->name }}"
                                    data-gender="{{ $patient->gender }}" data-age="{{ $patient->age }}"
                                    data-phone="{{ $patient->phone }}" data-address="{{ $patient->address }}"
                                    {{ $lastIpdCase && $lastIpdCase->patient_id == $patient->id ? 'selected' : '' }}
                                    {{ $patient->id == $selectedPatientID ? 'selected' : '' }}>
                                    {{ $patient->name }}
                                </option>
                            @endforeach
                        </select>
                        <span id="patient-error" style="color: red; display: none;">Please make a selection.</span>
                    </div>
                </div>

                <!-- IPD Case Selection -->
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="form-label" for="ipd_case">Operation Date</label>
                        <input type="hidden" id="pre-selected-ipd-case-id" value="{{ $ipdID ?? '' }}">
                        <select class="select2 form-select text-capitalize" id="ipd_case" name="ipd_case">
                            <option value="" disabled>{{ __('Select IPD Case') }}</option>
                            @foreach ($ipdCases as $case)
                                <option value="{{ $case->id }}"
                                    data-special_instruction="{{ $case->special_instruction ?? '' }}"
                                    data-provisional_diagnose="{{ $case->provisional_diagnose ?? '' }}"
                                    data-patient_id="{{ $case->patient_id }}"
                                    {{ $lastIpdCase && $lastIpdCase->id == $case->id ? 'selected' : '' }}
                                    {{ $case->id == $ipdID ? 'selected' : '' }}>
                                    {{ $case->appointment_date }}
                                </option>
                            @endforeach
                        </select>
                        <span id="ipd-case-error" style="color: red; display: none;">Please make a selection.</span>
                    </div>
                </div>
            </div>
            <hr />
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label" for="name">Patient's Name</label>
                    <input type="text" name="name" id="name" class="form-control" placeholder="John Doe"
                        value="{{ $lastIpdCase && $lastIpdCase->patient ? $lastIpdCase->patient->name : '' }}" readonly />
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="gender">Gender</label>
                    <input type="text" name="gender" id="gender" class="form-control" placeholder="Gender"
                        value="{{ $lastIpdCase && $lastIpdCase->patient ? $lastIpdCase->patient->gender : '' }}"
                        readonly />
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="age">Age</label>
                    <input name="age" id="age" class="form-control" placeholder="Age"
                        value="{{ $lastIpdCase && $lastIpdCase->patient ? $lastIpdCase->patient->age : '' }}" />
                    <span id="age-error" style="color: red; display: none;">Field required.</span>
                </div>
                {{-- <div class="col-md-6">
                    <label class="form-label" for="multicol-address">Address</label>
                    <textarea id="address" name="address" class="form-control" placeholder="Address here"
                        style="height: 110px; resize: none;" readonly>{{ $lastIpdCase && $lastIpdCase->patient ? $lastIpdCase->patient->address : '' }}</textarea>
                </div> --}}
                <div class="col-md-4">
                    <label class="form-label" for="operative_findings">Diagnose Findings</label>
                    <textarea id="operative_findings" name="operative_findings" class="form-control" placeholder="Findings here"
                        style="height: 110px; resize: none;"></textarea>
                    <span id="findings-error" style="color: red; display: none;">Field required.</span>
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="phone">Phone No</label>
                    <input type="text" id="phone" name="phone" class="form-control" placeholder="0312 3456789"
                        value="{{ $lastIpdCase && $lastIpdCase->patient ? $lastIpdCase->patient->phone : '' }}" readonly />
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="multicol-provisional_diagnose">Diagnosis</label><br>
                    <div id="provisional_diagnose">{!! $provisional_diagnose !!}</div>
                </div>
            </div>
            <hr />
            <!-- Treatment Details -->
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label" for="treatment_in_hospital">Treatment in Hospital</label>
                    <textarea id="treatment_in_hospital" name="treatment_in_hospital" class="form-control"
                        placeholder="Treatment in Hospital" style="height: 110px; resize: none;"></textarea>
                    <span id="hospital-error" style="color: red; display: none;">Field required.</span>
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="treatment_in_home">Treatment in Home</label>
                    <textarea id="treatment_in_home" name="treatment_in_home" class="form-control" placeholder="Treatment in Home"
                        style="height: 110px; resize: none;"></textarea>
                    <span id="home-error" style="color: red; display: none;">Field required.</span>
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="special_instruction">Pre-OP</label>
                    <div id="special_instruction">{!! $special_instruction !!}</div>
                </div>
            </div>
            <hr />
            <h6>MEDICATION</h6>
            <div id="medication-container">
                <div class="row g-3 medication-row">
                    <div class="col-md-3">
                        <label class="form-label" for="medicine">Medicine's Name</label>
                        <select class="form-select text-capitalize" id="medicine" name="medicine[]">
                            <option selected="" value="" disabled>
                                {{ __('Select Medicine') }}
                            </option>
                            <option value="None" selected>
                                {{ 'None' }}
                            </option>
                            @foreach ($medications as $medication)
                                <option value="{{ $medication->name }}" data-dose="{{ $medication->dose }}"
                                    data-frequency="{{ $medication->frequency }}">
                                    {{ $medication->name }}
                                </option>
                            @endforeach
                        </select>
                        <span id="medication-error" style="color: red; display: none;">Please select a medicine.</span>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label" for="duration">Duration in days</label>
                        <input type="number" id="duration" name="duration[]" class="form-control" placeholder="2"
                            min="1" />
                        <span class="medication-error" style="display: none; color: red;">Days are required.</span>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="dose">Dose</label>
                        <div class="input-group">
                            <input id="dose" name="dose[]" class="form-control" placeholder="100 mg" />
                            <span class="input-group-text">g/mg</span>
                        </div>
                        <span class="medication-error" style="display: none; color: red;">Dose is required.</span>
                        <span id="dose-error" style="color: red; display: none;">Enter a valid integer value.</span>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="frequency">Frequency</label>
                        <input type="text" id="frequency" name="frequency[]" class="form-control"
                            placeholder="once a day" />
                        <span class="medication-error" style="display: none; color: red;">Frequency is required.</span>
                    </div>
                    <div class="col-md-1">
                        <label class="form-label" for="add-button"></label>
                        <button type="button"
                            class="form-control btn btn-primary add-medicine-btn me-sm-3 me-1 mt-3">+</button>
                    </div>
                </div>
            </div>
            <h6 class="mt-3">OTHER MEDICATION</h6>
            <div id="other-medication-container">
                <div class="row g-3 other-medication-row">
                    <div class="col-md-3">
                        <label class="form-label" for="other-medicine">Medicine's Name</label>
                        <input class="form-control" id="other-medicine" name="other-medicine[]" value="None"
                            placeholder="Enter Name" />
                        <span id="other-medication-error" style="color: red; display: none;">Please select a
                            medicine.</span>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label" for="other-duration">Duration in days</label>
                        <input type="number" id="other-duration" name="other-duration[]" class="form-control"
                            placeholder="2" min="1" />
                        <span class="other-medication-error" style="display: none; color: red;">Days are required.</span>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="other-dose">Dose</label>
                        <div class="input-group">
                            <input id="other-dose" name="other-dose[]" class="form-control" placeholder="100 mg" />
                            <span class="input-group-text">g/mg</span>
                        </div>
                        <span class="other-medication-error" style="display: none; color: red;">Dose is required.</span>
                        <span id="other-dose-error" style="color: red; display: none;">Enter a valid integer value.</span>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="other-frequency">Frequency</label>
                        <input type="text" id="other-frequency" name="other-frequency[]" class="form-control"
                            placeholder="once a day" />
                        <span class="other-medication-error" style="display: none; color: red;">Frequency is
                            required.</span>
                    </div>
                    <div class="col-md-1">
                        <label class="form-label" for="add-button"></label>
                        <button type="button"
                            class="form-control btn btn-primary add-other-medicine-btn me-sm-3 me-1 mt-3">+</button>
                    </div>
                </div>
            </div>
            <div class="pt-4">
                <button type="submit" class="btn btn-primary me-sm-3 me-1">Save</button>
                <button type="reset" onclick="window.location.href='{{ route('discharge-plan.index') }}'"
                    class="btn btn-label-secondary">Cancel</button>
            </div>
        </form>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {

            // Initialize Select2
            $('#patient_id').select2();
            $('#ipd_case').select2();

            function validateMedicationRows() {
                const medicationRows = document.querySelectorAll('.medication-row');
                let isValid = true;

                medicationRows.forEach(row => {
                    const medicineSelect = row.querySelector('select[name="medicine[]"]');
                    const errorMessage = row.querySelector('#medication-error');

                    // Validate only the "Medicine's Name" field (select dropdown)
                    if (!medicineSelect || medicineSelect.value === '') {
                        errorMessage.style.display = 'block';
                        medicineSelect.style.borderColor = 'red';
                        isValid = false;
                    } else {
                        errorMessage.style.display = 'none';
                        medicineSelect.style.borderColor = '';
                    }
                });

                if (medicationRows.length === 0) {
                    alert('At least one medication must be added.');
                    isValid = false;
                }

                return isValid;
            }

            function validateOtherMedicationRows() {
                const otherMedicationRows = document.querySelectorAll('.other-medication-row');
                let isValid = true;

                otherMedicationRows.forEach(row => {
                    const otherMedicineSelect = row.querySelector('input[name="other-medicine[]"]');
                    const errorMessage = row.querySelector('#other-medication-error');

                    // Validate only the "Medicine's Name" field (select dropdown)
                    if (!otherMedicineSelect || otherMedicineSelect.value === '') {
                        errorMessage.style.display = 'block';
                        otherMedicineSelect.style.borderColor = 'red';
                        isValid = false;
                    } else {
                        errorMessage.style.display = 'none';
                        otherMedicineSelect.style.borderColor = '';
                    }
                });

                if (otherMedicationRows.length === 0) {
                    alert('At least one medication must be added.');
                    isValid = false;
                }

                return isValid;
            }

            // Function to populate IPD cases based on selected patient
            function populateIpdCases() {
                const patientSelect = document.getElementById('patient_id');
                const ipdCaseSelect = document.getElementById('ipd_case');
                const selectedPatientId = patientSelect.value;

                ipdCaseSelect.innerHTML = '<option value="" disabled>{{ __('Select IPD Case') }}</option>';

                @foreach ($ipdCases as $case)
                    if ("{{ $case->patient_id }}" === selectedPatientId) {
                        const option = document.createElement('option');
                        option.value = "{{ $case->id }}";
                        option.dataset.special_instruction = "{{ $case->special_instruction ?? '' }}";
                        option.dataset.provisional_diagnose = "{{ $case->provisional_diagnose ?? '' }}";
                        option.textContent = `Appointment Date: {{ $case->appointment_date }}`;
                        ipdCaseSelect.appendChild(option);
                    }
                @endforeach

                // Reset IPD case selection and fields
                // document.getElementById('ipd_case').value = '';
                $('#ipd_case').val(null).trigger('change'); // Select2 specific code
                document.getElementById('provisional_diagnose').value = '';
                document.getElementById('special_instruction').value = '';
            }

            // Function to populate fields based on pre-selected or selected values
            function populateFields() {
                const patientSelect = document.getElementById('patient_id');
                const ipdCaseSelect = document.getElementById('ipd_case');

                // Function to populate patient fields
                function populatePatientFields(patientId) {
                    const patientOptions = patientSelect.options;
                    for (let i = 0; i < patientOptions.length; i++) {
                        if (patientOptions[i].value === patientId) {
                            patientSelect.selectedIndex = i;
                            const selectedOption = patientOptions[i];
                            document.getElementById('name').value = selectedOption.getAttribute('data-name');
                            document.getElementById('gender').value = selectedOption.getAttribute('data-gender');
                            document.getElementById('age').value = selectedOption.getAttribute('data-age');
                            document.getElementById('phone').value = selectedOption.getAttribute('data-phone');
                            // document.getElementById('address').value = selectedOption.getAttribute('data-address');
                            populateIpdCases(); // Populate IPD cases based on selected patient
                            break;
                        }
                    }
                }

                // Function to populate IPD case fields
                function populateIpdCaseFields(ipdCaseId) {
                    const ipdCaseOptions = ipdCaseSelect.options;
                    for (let i = 0; i < ipdCaseOptions.length; i++) {
                        if (ipdCaseOptions[i].value === ipdCaseId) {
                            ipdCaseSelect.selectedIndex = i;
                            const selectedOption = ipdCaseOptions[i];
                            document.getElementById('provisional_diagnose').value = selectedOption.getAttribute(
                                'data-provisional_diagnose');
                            document.getElementById('special_instruction').value = selectedOption.getAttribute(
                                'data-special_instruction');
                            break;
                        }
                    }
                }

                // Get pre-selected values
                const preSelectedPatientId = document.getElementById('pre-selected-patient-id').value;
                const preSelectedIpdCaseId = document.getElementById('pre-selected-ipd-case-id').value;

                // Populate fields based on pre-selected IDs or selected values
                if (preSelectedPatientId) {
                    populatePatientFields(preSelectedPatientId);
                } else {
                    // No pre-selected patient, but if a patient is selected, populate
                    const selectedPatientValue = patientSelect.value;
                    if (selectedPatientValue) {
                        populatePatientFields(selectedPatientValue);
                    }
                }

                if (preSelectedIpdCaseId) {
                    populateIpdCaseFields(preSelectedIpdCaseId);
                } else {
                    // No pre-selected IPD case, but if IPD cases are populated, select the latest one
                    if (ipdCaseSelect.options.length > 1) {
                        // Select the latest IPD case (assuming the latest is the last option)
                        const latestIpdCaseOption = ipdCaseSelect.options[ipdCaseSelect.options.length - 1];
                        ipdCaseSelect.selectedIndex = ipdCaseSelect.options.length - 1;
                        document.getElementById('provisional_diagnose').value = latestIpdCaseOption.getAttribute(
                            'data-provisional_diagnose');
                        document.getElementById('special_instruction').value = latestIpdCaseOption.getAttribute(
                            'data-special_instruction');
                    }
                }
                $('#ipd_case').select2(); // Reinitialize Select2
            }

            populateFields();

            // Handle patient selection change
            // document.getElementById('patient_id').addEventListener('change', function() {
            $('#patient_id').on('change', function() {
                const selectedPatientValue = this.value;
                const patientOptions = this.options;
                for (let i = 0; i < patientOptions.length; i++) {
                    if (patientOptions[i].value === selectedPatientValue) {
                        const selectedOption = patientOptions[i];
                        document.getElementById('name').value = selectedOption.getAttribute('data-name');
                        document.getElementById('gender').value = selectedOption.getAttribute(
                            'data-gender');
                        document.getElementById('age').value = selectedOption.getAttribute('data-age');
                        document.getElementById('phone').value = selectedOption.getAttribute('data-phone');
                        // document.getElementById('address').value = selectedOption.getAttribute(
                        //     'data-address');
                        populateIpdCases(); // Update IPD cases based on the selected patient
                        break;
                    }
                }
            });

            // Handle IPD case selection change
            // document.getElementById('ipd_case').addEventListener('change', function() {
            // $('#ipd_case').on('change', function() {
            //     const selectedIpdCaseValue = this.value;
            //     const ipdCaseOptions = this.options;
            //     for (let i = 0; i < ipdCaseOptions.length; i++) {
            //         if (ipdCaseOptions[i].value === selectedIpdCaseValue) {
            //             const selectedOption = ipdCaseOptions[i];
            //             document.getElementById('provisional_diagnose').value = selectedOption.getAttribute(
            //                 'data-provisional_diagnose');
            //             document.getElementById('special_instruction').value = selectedOption.getAttribute(
            //                 'data-special_instruction');
            //             break;
            //         }
            //     }
            // });

            // Handle IPD case selection change
            $('#ipd_case').on('change', function() {
                const selectedIpdCaseValue = this.value;
                $.ajax({
                    url: `/getIPDcase/${selectedIpdCaseValue}`,
                    method: 'GET',
                    success: function(data) {
                        console.log(data);
                        document.getElementById('provisional_diagnose').innerHTML = data
                            .provisional_diagnose ? data.provisional_diagnose : 'N/A';
                        document.getElementById('special_instruction').innerHTML = data
                            .special_instruction ? data.special_instruction : 'N/A';
                    },
                    error: function(xhr, status, error) {
                        console.error('Error fetching IPD case data:', error);
                    }
                });
            });

            // Form validation
            function validateSelection(input, errorElement) {
                if (!input.value) {
                    errorElement.style.display = 'inline';
                } else {
                    errorElement.style.display = 'none';
                }
            }

            // document.getElementById('age').addEventListener('keypress', function(event) {
            //     const char = String.fromCharCode(event.which);
            //     const currentValue = this.value;
            //     if (!/[0-9\.]/.test(char) || (char === '.' && currentValue.includes('.'))) {
            //         event.preventDefault();
            //     }
            // });

            document.getElementById('discharge-plan-form').addEventListener('submit', function(e) {
                const patientSelect = document.getElementById('patient_id');
                const ipdCaseSelect = document.getElementById('ipd_case');
                const age = document.getElementById('age');
                const findings = document.getElementById('operative_findings');
                const hospital = document.getElementById('treatment_in_hospital');
                const home = document.getElementById('treatment_in_home');
                const areMedicationsValid = validateMedicationRows();
                const areOtherMedicationsValid = validateOtherMedicationRows();

                validateSelection(patientSelect, document.getElementById('patient-error'));
                validateSelection(ipdCaseSelect, document.getElementById('ipd-case-error'));
                validateSelection(age, document.getElementById('age-error'));
                validateSelection(findings, document.getElementById('findings-error'));
                validateSelection(hospital, document.getElementById('hospital-error'));
                validateSelection(home, document.getElementById('home-error'));

                if (!patientSelect.value || !ipdCaseSelect.value || !age.value || !findings.value || !
                    hospital.value || !home.value || !areMedicationsValid || !areOtherMedicationsValid) {
                    e.preventDefault(); // Prevent form submission if validation fails
                }
            });

            // Function to initialize event listeners for medicine selects and duration inputs
            function initializeMedicineSelects() {
                const medicationRows = document.querySelectorAll('.medication-row');

                medicationRows.forEach(row => {
                    const medicineSelect = row.querySelector('select[name="medicine[]"]');
                    const durationInput = row.querySelector('input[name="duration[]"]');

                    // Event listener for duration input change
                    if (durationInput) {
                        durationInput.addEventListener('input', function() {
                            const doseInput = row.querySelector('input[name="dose[]"]');
                            const durationValue = this.value;

                            // Calculate dose based on original dose and duration
                            if (doseInput.dataset.originalDose) {
                                doseInput.value = doseInput.dataset.originalDose * durationValue ||
                                    '';
                            }
                        });
                    }
                });
            }

            // Function to handle adding new medication rows
            function handleAddMedicineRow() {
                // Attach click event listener to the plus button
                const addMedicineBtn = document.querySelector('.add-medicine-btn');
                if (addMedicineBtn) {
                    addMedicineBtn.addEventListener('click', function() {
                        // Clone the first medication row
                        var medicationRow = document.querySelector('.medication-row').cloneNode(true);

                        // Clear the values of input fields in the cloned row
                        var inputs = medicationRow.querySelectorAll('input');
                        var errorMessages = medicationRow.querySelectorAll('.medication-error');
                        inputs.forEach(function(input, index) {
                            input.value = '';
                            input.removeAttribute(
                                'data-original-dose'); // Remove original dose data attribute
                            errorMessages[index].style.display =
                                'none'; // Hide error messages in the new row
                        });

                        // Replace the + button in the cloned row with a - button
                        var addButton = medicationRow.querySelector('.add-medicine-btn');
                        addButton.classList.remove('btn-primary', 'add-medicine-btn');
                        addButton.classList.add('btn-danger', 'remove-medicine-btn');
                        addButton.innerText = '-';

                        // Attach click event to remove the row when - button is clicked
                        addButton.addEventListener('click', function() {
                            medicationRow.remove();
                        });

                        // Append the cloned row to the container
                        document.getElementById('medication-container').appendChild(medicationRow);

                        // Reinitialize event listeners for new rows
                        initializeMedicineSelects();
                    });
                }
            }

            // Initialize event listeners for existing rows
            initializeMedicineSelects();

            // Initialize the functionality for adding new rows
            handleAddMedicineRow();


            // Function to initialize event listeners for other medicine selects and duration inputs
            function initializeOtherMedicineSelects() {
                const otherMedicationRows = document.querySelectorAll('.other-medication-row');
                otherMedicationRows.forEach(row => {
                    // const medicineSelect = row.querySelector('input[name="other-medicine[]"]');
                    const durationInput = row.querySelector('input[name="other-duration[]"]');
                    // Event listener for duration input change
                    if (durationInput) {
                        durationInput.addEventListener('input', function() {
                            const doseInput = row.querySelector('input[name="other-dose[]"]');
                            const durationValue = this.value;
                            // Calculate dose based on original dose and duration
                            if (doseInput.dataset.originalDose) {
                                doseInput.value = doseInput.dataset.originalDose * durationValue ||
                                    '';
                            }
                        });
                    }
                });
            }

            // Function to handle adding new medication rows
            function handleAddOtherMedicineRow() {
                // Attach click event listener to the plus button
                const addOtherMedicineBtn = document.querySelector('.add-other-medicine-btn');
                if (addOtherMedicineBtn) {
                    addOtherMedicineBtn.addEventListener('click', function() {
                        // Clone the first medication row
                        var otherMedicationRow = document.querySelector('.other-medication-row').cloneNode(
                            true);
                        // Clear the values of input fields in the cloned row
                        var inputs = otherMedicationRow.querySelectorAll('input');
                        var errorMessages = otherMedicationRow.querySelectorAll('.other-medication-error');
                        inputs.forEach(function(input, index) {
                            input.value = '';
                            input.removeAttribute(
                                'data-original-dose'); // Remove original dose data attribute
                            // errorMessages[index].style.display =
                            //     'none'; // Hide error messages in the new row
                        });
                        // Replace the + button in the cloned row with a - button
                        var addButton = otherMedicationRow.querySelector('.add-other-medicine-btn');
                        addButton.classList.remove('btn-primary', 'add-other-medicine-btn');
                        addButton.classList.add('btn-danger', 'remove-other-medicine-btn');
                        addButton.innerText = '-';
                        // Attach click event to remove the row when - button is clicked
                        addButton.addEventListener('click', function() {
                            otherMedicationRow.remove();
                        });
                        // Append the cloned row to the container
                        document.getElementById('other-medication-container').appendChild(
                            otherMedicationRow);
                        // Reinitialize event listeners for new rows
                        initializeOtherMedicineSelects();
                    });
                }
            }
            // Initialize event listeners for existing rows
            // initializeOtherMedicineSelects();
            // Initialize the functionality for adding new rows
            handleAddOtherMedicineRow();
        });
    </script>
@endsection