@extends('layouts/layoutMaster')

@section('title', 'Edit IPD Case')

<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/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 = ['complaint', 'history', 'examination', 'diagnose', 'instruction', 'other_medicine'];

        // 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">
                        <b><i class="menu-icon tf-icons ti ti-emergency-bed"> </i></i> Edit IPD</b>
                    </h5>
                </div>
            </div>
        </div>
        <form id="ipd-case-form" class="card-body" action="{{ route('ipd-case.update', $ipdCase->id) }}" method="POST">
            @csrf
            @method('PUT')
            <h6>BASIC INFORMATION</h6>
            <div class="row g-3">
                <input type="hidden" id="patient_id" name="patient_id"
                    value="{{ old('patient_id', $ipdCase->patient->id) }}" />
                <div class="col-md-4">
                    <label class="form-label" for="name">Patient's Name</label>
                    <input type="text" id="name" name="name" class="form-control"
                        value="{{ old('name', $ipdCase->patient->name) }}" readonly />
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="visit_no">Visit.No/ipd.No</label>
                    <input type="text" id="visit_no" name="visit_no" class="form-control" placeholder="1"
                        value="{{ old('visit_no', $ipdCase->visit_no) }}" readonly />
                </div>
                <!-- A hidden button that will become visible when a patient is selected -->
                <input type="hidden" id="visit_count" name="visit_count"
                    value="{{ $ipdCase->patient->ipdCases->count() }}" />
                <!-- A hidden button that will become visible when a patient is selected -->
                <div class="col-md-4" id="fetch-patient-data-container" style="display: none;">
                    <label class="form-label w-100">History</label>
                    <button id="fetch-patient-data" class="btn btn-outline-primary" type="button">View All Visits
                        (<span id="visit-count">0</span>)</button>
                </div>
                <hr />
                <div class="col-md-4">
                    <label class="form-label" for="height">Height</label>
                    <div class="input-group">
                        <input type="text" id="height" name="height" class="form-control"
                            value="{{ old('height', $ipdCase->height) }}" placeholder="5.6" />
                        <span class="input-group-text">ft in</span>
                    </div>
                    <span id="height-error" style="color: red; display: none;">Enter a valid floating-point number.</span>
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="weight">Weight</label>
                    <div class="input-group">
                        <input type="text" id="weight" name="weight" class="form-control"
                            value="{{ old('weight', $ipdCase->weight) }}" placeholder="50" />
                        <span class="input-group-text">kg</span>
                    </div>
                    <span id="weight-error" style="color: red; display: none;">Enter a valid floating-point number.</span>
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="pulse">Pulse</label>
                    <div class="input-group">
                        <input type="number" id="pulse" name="pulse" class="form-control"
                            value="{{ old('pulse', $ipdCase->pulse) }}" placeholder="60" />
                        <span class="input-group-text">bpm</span>
                    </div>
                    <span id="pulse-error" style="color: red; display: none;">Enter a valid integer value.</span>
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="blood_pressure">Blood Pressure</label>
                    <div class="input-group">
                        <input type="text" id="blood_pressure" name="blood_pressure" class="form-control"
                            value="{{ old('blood_pressure', $ipdCase->blood_pressure) }}" placeholder="120/80" />
                        <span class="input-group-text">mm Hg</span>
                    </div>
                    <span id="pressure-error" style="color: red; display: none;">Field required.</span>
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="temperature">Temperature</label>
                    <div class="input-group">
                        <input type="text" id="temperature" name="temperature" class="form-control"
                            value="{{ old('temperature', $ipdCase->temperature) }}" placeholder="96" />
                        <span class="input-group-text">°C</span>
                    </div>
                    <span id="temperature-error" style="color: red; display: none;">Enter a valid floating-point
                        number.</span>
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="respiratory">Respiratory</label>
                    <input type="number" id="respiratory" name="respiratory" class="form-control"
                        value="{{ old('respiratory', $ipdCase->respiratory) }}" placeholder="Respirator here" />
                    <span id="respiratory-error" style="color: red; display: none;">Enter a valid floating-point
                        number.</span>
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="appointment">IPD Date</label>
                    <input type="text" id="appointment" name="appointment" class="form-control dob-picker"
                        placeholder="YYYY-MM-DD" value="{{ old('appointment', $ipdCase->appointment_date) }}" />
                    <span id="apt-error" style="color: red; display: none;">Please enter a valid date.</span>
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="doctor_id">Doctor</label>
                    <select class="select2 form-select text-capitalize" id="doctor_id" name="doctor_id">
                        <option value=""> {{ __('Doctor Name') }} </option>
                        @foreach ($doctors as $doctor)
                            <option value="{{ $doctor->id }}"
                                {{ old('doctor_id', $ipdCase->doctor_id) == $doctor->id ? 'selected' : '' }}>
                                {{ $doctor->id }}{{ ' - ' }}{{ $doctor->name }}
                            </option>
                        @endforeach
                    </select>
                    <span id="doctor-error" style="color: red; display: none;">Please make a selection.</span>
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="bed">Bed</label>
                    <input type="text" id="bed" name="bed" class="form-control"
                        value="{{ old('bed', $ipdCase->bed) }}" placeholder="5" />
                    <span id="bed-error" style="color: red; display: none;">Field required.</span>
                </div>
            </div>
            <hr />
            <h6>COMPLAINT</h6>
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label" for="complaint">Presenting Complaint</label>
                    <textarea id="complaint" name="complaint" class="form-control" placeholder="Complaint here"
                        style="height: 110px; resize: none;">{{ old('complaint', $ipdCase->presenting_complaint) }}</textarea>
                    <span id="complaint-error" style="color: red; display: none;">Field required.</span>
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="history">History</label>
                    <textarea id="history" name="history" class="form-control" placeholder="History here"
                        style="height: 110px; resize: none;">{{ old('history', $ipdCase->history) }}</textarea>
                    <span id="history-error" style="color: red; display: none;">Field required.</span>

                </div>
            </div>
            <hr />
            <h6>TREATMENT</h6>
            <div class="row g-3">
                {{-- <div class="col-md-4">
                    <label class="form-label" for="treatment">Treatment</label>
                    <textarea id="treatment" name="treatment" class="form-control" placeholder="Write about treatment"
                        style="height: 100px; resize: none;">{{ old('treatment', $ipdCase->treatment) }}</textarea>
                    <span id="treatment-error" style="color: red; display: none;">Field required.</span>
                </div> --}}
                <div class="col-md-4">
                    <label class="form-label" for="examination">Examination</label>
                    <textarea id="examination" name="examination" class="form-control" placeholder="Write about examination"
                        style="height: 110px; resize: none;">{{ old('examination', $ipdCase->examination) }}</textarea>
                    <span id="examination-error" style="color: red; display: none;">Field required.</span>
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="diagnose">Provisional Diagnose</label>
                    <textarea id="diagnose" name="diagnose" class="form-control" placeholder="Write provisional diagnose"
                        style="height: 110px; resize: none;">{{ old('diagnose', $ipdCase->provisional_diagnose) }}</textarea>
                    <span id="diagnose-error" style="color: red; display: none;">Field required.</span>
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="instruction">Pre-OP</label>
                    <textarea id="instruction" name="instruction" class="form-control" placeholder="Write Pre-OP"
                        style="height: 100px; resize: none;">{{ old('instruction', $ipdCase->special_instruction) }}</textarea>
                    {{-- <span id="instruction-error" style="color: red; display: none;">Field required.</span> --}}
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="follow_up">NPO (nothing by mouth)</label>
                    <div class="input-group">
                        <input type="number" id="follow_up" name="follow_up" class="form-control"
                            value="{{ old('follow_up', $ipdCase->follow_up_days) }}" placeholder="5" />
                        <span class="input-group-text">hours</span>
                    </div>
                    <span id="follow-up-error" style="color: red; display: none;">Field required.</span>
                </div>
            </div>
            <hr />
            <h6>MEDICATION</h6>
            <div id="medication-container">
                @foreach ($ipdCase->medicine as $index => $medication)
                    <div class="row g-3 medication-row">
                        <div class="col-md-3">
                            <label class="form-label" for="medicine-{{ $index }}">Medicine</label>
                            <select name="medicine[]" class="form-select text-capitalize"
                                id="medicine-{{ $index }}">
                                <option selected="" value="" disabled>
                                    {{ __('Select Medicine') }}
                                </option>
                                <option value="None" selected>
                                    {{ 'None' }}
                                </option>
                                @foreach ($medications as $medicine)
                                    <option value="{{ $medicine->name }}"
                                        {{ $medicine->name == $medication->medicine_name ? 'selected' : '' }}
                                        data-dose="{{ $medicine->dose }}" data-frequency="{{ $medicine->frequency }}"
                                        data-duration="{{ $medicine->duration }}">
                                        {{ $medicine->name }}
                                    </option>
                                @endforeach
                            </select>
                            <span class="medication-error text-danger" style="display: none;">Medicine is required.</span>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label" for="duration-{{ $index }}">Duration in days</label>
                            <input type="number" name="duration[]" class="form-control" placeholder="2"
                                value="{{ $medication->duration }}" min="1" />
                            <span class="medication-error text-danger" style="display: none;">Days are required.</span>
                            <span class="duration-error text-danger" style="display: none;">Enter a positive
                                number.</span>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label" for="dose-{{ $index }}">Dose</label>
                            <div class="input-group">
                                <input name="dose[]" class="form-control" placeholder="100 mg"
                                    value="{{ $medication->dose }}" />
                                <span class="input-group-text">g/mg</span>
                            </div>
                            <span class="medication-error text-danger" style="display: none;">Dose is required.</span>
                            <span class="dose-error text-danger" style="display: none;">Enter a valid integer
                                value.</span>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label" for="frequency-{{ $index }}">Frequency</label>
                            <input type="text" name="frequency[]" class="form-control" placeholder="once a day"
                                value="{{ $medication->frequency }}" />
                            <span class="medication-error text-danger" style="display: none;">Frequency is
                                required.</span>
                        </div>
                        <div class="col-md-1">
                            <label class="form-label">&nbsp;</label>
                            @if ($loop->last)
                                <button type="button" class="form-control btn btn-primary add-medicine-btn">+</button>
                            @else
                                <button type="button" class="form-control btn btn-danger remove-medicine-btn">-</button>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
            <h6 class="mt-3">OTHER MEDICATION</h6>
            <div id="other-medication-container">
                @foreach ($ipdCase->othermedicine as $index => $medication)
                    <div class="row g-3 other-medication-row">
                        <div class="col-md-3">
                            <label class="form-label" for="other-medicine-{{ $index }}">Medicine</label>
                            <input name="other-medicine[]" class="form-control" placeholder="Enter Name"
                                value="{{ $medication->medicine_name }}" min="1" />
                            <span class="other-medication-error text-danger" style="display: none;">Days are
                                required.</span>
                            <span class="other-medicine-error text-danger" style="display: none;">Enter a positive
                                number.</span>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label" for="other-duration-{{ $index }}">Duration in days</label>
                            <input type="number" name="other-duration[]" class="form-control" placeholder="2"
                                value="{{ $medication->duration }}" min="1" />
                            <span class="other-medication-error text-danger" style="display: none;">Days are
                                required.</span>
                            <span class="other-duration-error text-danger" style="display: none;">Enter a positive
                                number.</span>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label" for="other-dose-{{ $index }}">Dose</label>
                            <div class="input-group">
                                <input name="other-dose[]" class="form-control" placeholder="100 mg"
                                    value="{{ $medication->dose }}" />
                                <span class="input-group-text">g/mg</span>
                            </div>
                            <span class="other-medication-error text-danger" style="display: none;">Dose is
                                required.</span>
                            <span class="other-dose-error text-danger" style="display: none;">Enter a valid integer
                                value.</span>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label" for="other-frequency-{{ $index }}">Frequency</label>
                            <input type="text" name="other-frequency[]" class="form-control" placeholder="once a day"
                                value="{{ $medication->frequency }}" />
                            <span class="other-medication-error text-danger" style="display: none;">Frequency is
                                required.</span>
                        </div>
                        <div class="col-md-1">
                            <label class="form-label">&nbsp;</label>
                            @if ($loop->last)
                                <button type="button"
                                    class="form-control btn btn-primary add-other-medicine-btn">+</button>
                            @else
                                <button type="button"
                                    class="form-control btn btn-danger remove-other-medicine-btn">-</button>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="row g-3 mt-2">
                <div class="col-md-6">
                    <label class="form-label" for="other_medicine">Instructions</label>
                    <textarea id="other_medicine" name="other_medicine" class="form-control" placeholder="Write instructions"
                        style="height: 110px;">{{ old('instruction', $ipdCase->other_medicine) }}</textarea>
                </div>
            </div>
            <div class="pt-4">
                <button type="submit" class="btn btn-primary me-sm-3 me-1">Update</button>
                <button type="reset" onclick="window.location.href='{{ route('ipd-case.index') }}'"
                    class="btn btn-label-secondary">Cancel</button>
            </div>
        </form>

        <!-- Modal -->
        <div class="modal fade" id="patientModal" tabindex="-1" aria-labelledby="patientModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" style="max-width: 900px; width: 100%; height: auto;">
                <div class="modal-content" style="height: auto;">
                    <div class="modal-header">
                        <h5 class="modal-title" id="patientModalLabel">Visits History</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body" id="patient-modal-body">
                        <!-- Patient data will be injected here -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const selectedPatientId = document.getElementById('patient_id').value;
            const visit = document.getElementById('visit_count').value;
            $('#visit-count').text(visit);
            // Show Visit History Button
            if (selectedPatientId) {
                $('#fetch-patient-data-container').show();
                $('#fetch-patient-data').data('patient-id', selectedPatientId);
            } else {
                $('#fetch-patient-data-container').hide();
            }

            // Event listener for "View All Visits" button
            $('#fetch-patient-data').on('click', function() {
                const patientId = $('#patient_id').val();
                const fetchUrl = `/getIPDVisits/${patientId}`;

                $.ajax({
                    url: fetchUrl,
                    type: 'GET',
                    success: function(response) {
                        // let modalContent = `<h6>Patient Name: ${response.name}</h6>`;
                        let modalContent = '<ul>';
                        if (Array.isArray(response.ipd_cases) && response.ipd_cases.length >
                            0) {
                            response.ipd_cases.forEach(function(visit) {
                                modalContent +=
                                    `<li class="row mb-3">
                                      <div class="col-12">
                                          <h6><b style="color: blue;">Visit No: ${visit.visit_no}</b>&nbsp;&nbsp;
                                          (Appointment Date: ${visit.appointment_date})</h6>
                                          <p>
                                              Height: ${visit.height}&nbsp;&nbsp;<span style="opacity: 0.5;">|</span>&nbsp;
                                              Weight: ${visit.weight}&nbsp;&nbsp;<span style="opacity: 0.5;">|</span>&nbsp;
                                              Pulse: ${visit.pulse}&nbsp;&nbsp;<span style="opacity: 0.5;">|</span>&nbsp;
                                              Blood Pressure: ${visit.blood_pressure}&nbsp;&nbsp;<span style="opacity: 0.5;">|</span>&nbsp;
                                              Temperature: ${visit.temperature}&nbsp;&nbsp;<span style="opacity: 0.5;">|</span>&nbsp;
                                              Respiratory: ${visit.respiratory}
                                          </p>
                                          <hr class="w-100" />
                                      </div>
                                  </li>`
                            });
                        } else {
                            modalContent +=
                                '<li>No visits found.</li>';
                        }
                        modalContent += '</ul>';
                        $('#patient-modal-body').html(modalContent);
                        $('#patientModal').modal('show');
                    },
                    error: function(xhr, status, error) {
                        console.error('AJAX error:', error);
                    }
                });
            });

            function validateAppointmentDate(inputElement, errorMessageElement) {
                const value = inputElement.value;
                const currentDate = new Date();
                const inputDate = new Date(value);

                currentDate.setHours(0, 0, 0, 0);
                inputDate.setHours(0, 0, 0, 0);

                if (value === '') {
                    errorMessageElement.textContent = 'Please enter a valid date.';
                    errorMessageElement.style.display = 'block';
                    inputElement.style.borderColor = 'red';
                    return false;
                } else {
                    errorMessageElement.style.display = 'none';
                    inputElement.style.borderColor = '';
                    return true;
                }
            }

            // Validation function for selection
            function validateSelection(selectElement, errorMessageElement) {
                if (selectElement.value === '') {
                    errorMessageElement.style.display = 'block';
                    selectElement.style.borderColor = 'red';
                    return false;
                } else {
                    errorMessageElement.style.display = 'none';
                    selectElement.style.borderColor = '';
                    return true;
                }
            }

            // Validation function for float values (height, weight, temperature)
            function validateFloat(inputElement, errorMessageElement) {
                const value = inputElement.value;
                const regex = /^[+-]?([0-9]*[.])?[0-9]+$/; // Allows float values

                if (value === '') {
                    errorMessageElement.style.display = 'none';
                    inputElement.style.borderColor = '';
                    return true;
                } else if (!regex.test(value)) {
                    errorMessageElement.style.display = 'block';
                    inputElement.style.borderColor = 'red';
                    return false;
                } else {
                    errorMessageElement.style.display = 'none';
                    inputElement.style.borderColor = '';
                    return true;
                }
            }

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

            //     medicationRows.forEach(row => {
            //         const inputs = row.querySelectorAll('input');
            //         const errorMessages = row.querySelectorAll('.medication-error');

            //         inputs.forEach((input, index) => {
            //             if (input.value.trim() === '') {
            //                 errorMessages[index].textContent = 'This field is required.';
            //                 errorMessages[index].style.display = 'block';
            //                 input.style.borderColor = 'red';
            //                 isValid = false;
            //             } else {
            //                 errorMessages[index].style.display = 'none';
            //                 input.style.borderColor = '';
            //             }
            //         });
            //     });

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

            //     return isValid;
            // }

            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');

                    if (medicineSelect.value.trim() === '') {
                        errorMessage.textContent = 'Please select a medicine.';
                        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.'); // Alert if no rows exist
                    isValid = false; // Set validation flag to false
                }

                return isValid; // Return the validation result
            }

            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');

                    if (otherMedicineSelect.value.trim() === '') {
                        errorMessage.textContent = 'Please select a medicine.';
                        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.'); // Alert if no rows exist
                    isValid = false; // Set validation flag to false
                }

                return isValid; // Return the validation result
            }

            document.getElementById('height').addEventListener('input', function() {
                validateFloat(this, document.getElementById('height-error'));
            });
            document.getElementById('height').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('weight').addEventListener('input', function() {
                validateFloat(this, document.getElementById('weight-error'));
            });
            document.getElementById('weight').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('pulse').addEventListener('input', function() {
            //     validateSelection(this, document.getElementById('pulse-error'));
            // });
            document.getElementById('pulse').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('blood_pressure').addEventListener('input', function() {
            //     validateSelection(this, document.getElementById('pressure-error'));
            // });
            document.getElementById('blood_pressure').addEventListener('keypress', function(event) {
                const char = String.fromCharCode(event.which);
                const currentValue = this.value;
                if (!/[0-9\.\/]/.test(char) ||
                    (char === '.' && currentValue.includes('.')) ||
                    (char === '/' && currentValue.includes('/'))) {
                    event.preventDefault();
                }
            });

            document.getElementById('temperature').addEventListener('input', function() {
                validateFloat(this, document.getElementById('temperature-error'));
            });
            document.getElementById('temperature').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('respiratory').addEventListener('input', function() {
            //     validateSelection(this, document.getElementById('respiratory-error'));
            // });
            document.getElementById('respiratory').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('appointment').addEventListener('change', function() {
                validateAppointmentDate(this, document.getElementById('apt-error'));
            });

            document.getElementById('doctor_id').addEventListener('change', function() {
                validateSelection(this, document.getElementById('doctor-error'));
            });

            // document.getElementById('complaint').addEventListener('input', function() {
            //     validateSelection(this, document.getElementById('complaint-error'));
            // });

            // document.getElementById('history').addEventListener('input', function() {
            //     validateSelection(this, document.getElementById('history-error'));
            // });

            // document.getElementById('diagnose').addEventListener('input', function() {
            //     validateSelection(this, document.getElementById('diagnose-error'));
            // });

            // document.getElementById('treatment').addEventListener('input', function() {
            //     validateSelection(this, document.getElementById('treatment-error'));
            // });

            // document.getElementById('examination').addEventListener('input', function() {
            //     validateSelection(this, document.getElementById('examination-error'));
            // });

            // document.getElementById('follow_up').addEventListener('input', function() {
            //     validateSelection(this, document.getElementById('follow-up-error'));
            // });
            document.getElementById('follow_up').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('ipd-case-form').addEventListener('submit', function(event) {
                const isAppointmentDateValid = validateAppointmentDate(document.getElementById(
                    'appointment'), document.getElementById('apt-error'));
                const isDoctorSelected = validateSelection(document.getElementById('doctor_id'), document
                    .getElementById('doctor-error'));
                // const isComplaintValid = validateSelection(document.getElementById('complaint'), document
                //     .getElementById('complaint-error'));
                // const isHistoryValid = validateSelection(document.getElementById('history'), document
                //     .getElementById('history-error'));
                // const isBedValid = validateSelection(document.getElementById('bed'), document
                //     .getElementById('bed-error'));
                // const isDiagnoseValid = validateSelection(document.getElementById('diagnose'), document
                //     .getElementById('diagnose-error'));
                // const isExaminationValid = validateSelection(document.getElementById('examination'),
                //     document.getElementById('examination-error'));
                // const isTreatmentValid = validateSelection(document.getElementById('treatment'), document
                //     .getElementById('treatment-error'));
                // const isInstructionValid = validateSelection(document.getElementById('instruction'),
                //     document.getElementById('instruction-error'));
                // const isFollowUpValid = validateSelection(document.getElementById('follow_up'),
                //     document.getElementById('follow-up-error'));
                const isHeightValid = validateFloat(document.getElementById('height'), document
                    .getElementById('height-error'));
                const isWeightValid = validateFloat(document.getElementById('weight'), document
                    .getElementById('weight-error'));
                // const isPulseValid = validateSelection(document.getElementById('pulse'), document
                //     .getElementById('pulse-error'));
                // const isBloodPressureValid = validateSelection(document.getElementById('blood_pressure'),
                //     document
                //     .getElementById('pressure-error'));
                const isTemperatureValid = validateFloat(document.getElementById('temperature'), document
                    .getElementById('temperature-error'));
                // const isRespiratoryValid = validateSelection(document.getElementById('respiratory'),
                //     document.getElementById('respiratory-error'));
                const areMedicationsValid = validateMedicationRows();
                const areOtherMedicationsValid = validateOtherMedicationRows();

                if (!isAppointmentDateValid || !isDoctorSelected || !isHeightValid || !
                    isWeightValid || !isTemperatureValid || !areMedicationsValid || !
                    areOtherMedicationsValid) {
                    event.preventDefault(); // Prevent form submission if any validation fails
                    return false; // Explicitly return false to ensure the form is not submitted
                }
            });

            // Function to initialize event listeners for medicine selects and duration inputs
            function initializeMedicationRows() {
                const medicationContainer = document.getElementById('medication-container');

                // Initialize existing rows
                medicationContainer.querySelectorAll('.medication-row').forEach(row => {
                    const select = row.querySelector('select[name="medicine[]"]');
                    const selectedOption = select.options[select.selectedIndex];
                    const dose = selectedOption.getAttribute('data-dose');
                    // const frequency = selectedOption.getAttribute('data-frequency');
                    // const duration = parseInt(row.querySelector('input[name="duration[]"]').value, 10) ||
                    0; // Default to 1 if empty

                    // Update fields in the row
                    const doseInput = row.querySelector('input[name="dose[]"]');
                    doseInput.dataset.originalDose = dose || '';

                    // Calculate initial dose based on duration
                    // if (dose) {
                    //     doseInput.value = dose * duration; // Multiply original dose by duration
                    // }

                    // row.querySelector('input[name="frequency[]"]').value = frequency || '';
                    // row.querySelector('input[name="duration[]"]').value = duration || '';
                });

                // Event delegation for medicine select changes
                medicationContainer.addEventListener('change', function(event) {
                    if (event.target.matches('select[name="medicine[]"]')) {
                        const selectedOption = event.target.options[event.target.selectedIndex];
                        const row = event.target.closest('.medication-row');
                        // const dose = selectedOption.getAttribute('data-dose');
                        // const frequency = selectedOption.getAttribute('data-frequency');
                        const duration = parseInt(row.querySelector('input[name="duration[]"]').value,
                            10) || 1; // Default to 1 if empty

                        // Update fields in the row
                        const doseInput = row.querySelector('input[name="dose[]"]');
                        doseInput.dataset.originalDose = dose || '';

                        // Set the dose based on the selected dose and current duration
                        // if (dose) {
                        //     doseInput.value = dose * duration;
                        // }

                        row.querySelector('input[name="frequency[]"]').value = frequency || '';
                    }
                });

                // Event delegation for duration input changes
                // medicationContainer.addEventListener('input', function(event) {
                //     if (event.target.matches('input[name="duration[]"]')) {
                //         const row = event.target.closest('.medication-row');
                //         const durationValue = parseInt(event.target.value, 10);
                //         const doseInput = row.querySelector('input[name="dose[]"]');
                //         const originalDose = parseFloat(doseInput.dataset.originalDose);

                //         // Validate duration value
                //         if (isNaN(durationValue) || durationValue <= 0) {
                //             event.target.style.borderColor = 'red';
                //             row.querySelector('.duration-error').style.display = 'inline';
                //             return;
                //         } else {
                //             event.target.style.borderColor = '';
                //             row.querySelector('.duration-error').style.display = 'none';
                //         }

                //         // Calculate dose based on original dose and duration
                //         if (!isNaN(originalDose) && durationValue > 0) {
                //             doseInput.value = originalDose * durationValue;
                //         } else {
                //             doseInput.value = ''; // Clear dose if original dose is not valid
                //         }
                //     }
                // });

                // Event delegation for removing medication rows
                medicationContainer.addEventListener('click', function(event) {
                    if (event.target.classList.contains('remove-medicine-btn')) {
                        event.target.closest('.medication-row').remove();
                    }
                });
            }

            // Function to handle adding new medication rows
            function handleAddMedicineRow() {
                const addMedicineBtn = document.querySelector('.add-medicine-btn');
                if (addMedicineBtn) {
                    addMedicineBtn.addEventListener('click', function() {
                        const medicationRow = document.querySelector('.medication-row').cloneNode(true);

                        // Clear the values of input fields in the cloned row
                        const inputs = medicationRow.querySelectorAll('input');
                        const selects = medicationRow.querySelectorAll('select');
                        const errorMessages = medicationRow.querySelectorAll('.medication-error');
                        inputs.forEach((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
                        });
                        selects.forEach((select) => {
                            select.selectedIndex = 0; // Reset selection
                        });

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

                            addButton.addEventListener('click', function() {
                                medicationRow.remove();
                            });
                        }

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

                        // Initialize event listeners for new rows
                        initializeMedicationRows();
                    });
                }
            }

            // Initialize event listeners for existing rows and adding new rows
            initializeMedicationRows();
            handleAddMedicineRow();

            // Function to initialize event listeners for medicine selects and duration inputs
            function initializeOtherMedicationRows() {
                const otherMedicationContainer = document.getElementById('other-medication-container');

                // Initialize existing rows
                otherMedicationContainer.querySelectorAll('.other-medication-row').forEach(row => {
                    const medicineInput = row.querySelector('input[name="other-medicine[]"]');
                    const doseInput = row.querySelector('input[name="other-dose[]"]');
                    const durationInput = row.querySelector('input[name="other-duration[]"]');

                    // const selectedOption = select.options[select.selectedIndex];
                    // const dose = selectedOption.getAttribute('data-dose');
                    // // Update fields in the row
                    // const doseInput = row.querySelector('input[name="other-dose[]"]');
                    // doseInput.dataset.originalDose = dose || '';
                });

                // Event delegation for medicine select changes
                otherMedicationContainer.addEventListener('input', function(event) {
                    if (event.target.matches('input[name="other-medicine[]"]')) {
                        const selectedOption = event.target.options[event.target.selectedIndex];
                        const row = event.target.closest('.other-medication-row');
                        // const dose = selectedOption.getAttribute('data-dose');
                        // const frequency = selectedOption.getAttribute('data-frequency');
                        const duration = parseInt(row.querySelector('input[name="other-duration[]"]').value,
                            10) || 1; // Default to 1 if empty

                        // Update fields in the row
                        const doseInput = row.querySelector('input[name="other-dose[]"]');
                        doseInput.dataset.originalDose = dose || '';

                        // Set the dose based on the selected dose and current duration
                        // if (dose) {
                        //     doseInput.value = dose * duration;
                        // }

                        // row.querySelector('input[name="other-frequency[]"]').value = frequency || '';
                    }
                });

                // Event delegation for removing medication rows
                otherMedicationContainer.addEventListener('click', function(event) {
                    if (event.target.classList.contains('remove-other-medicine-btn')) {
                        event.target.closest('.other-medication-row').remove();
                    }
                });
            }

            // Function to handle adding new medication rows
            function handleAddOtherMedicineRow() {
                const addMedicineBtn = document.querySelector('.add-other-medicine-btn');
                if (addMedicineBtn) {
                    addMedicineBtn.addEventListener('click', function() {
                        const otherMedicationRow = document.querySelector('.other-medication-row')
                            .cloneNode(true);

                        // Clear the values of input fields in the cloned row
                        const inputs = otherMedicationRow.querySelectorAll('input');
                        const errorMessages = otherMedicationRow.querySelectorAll(
                            '.other-medication-error');
                        inputs.forEach((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
                        });
                        // selects.forEach((select) => {
                        //     select.selectedIndex = 0; // Reset selection
                        // });

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

                            addButton.addEventListener('click', function() {
                                otherMedicationRow.remove();
                            });
                        }

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

                        // Initialize event listeners for new rows
                        initializeOtherMedicationRows();
                    });
                }
            }

            // Initialize event listeners for existing rows and adding new rows
            initializeOtherMedicationRows();
            handleAddOtherMedicineRow();
        });
    </script>




@endsection