@extends('layouts/layoutMaster')

@section('title', 'Create Operational Note')

<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/operational-notes-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 = ['opr_findings', 'opr_orders', 'instruction'];

        // 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-notes"> </i>
                        <b>Create Operational Note</b>
                    </h5>
                </div>
            </div>
        </div>
        <form id="opr-note-form" class="card-body" action="{{ route('operational-note.store') }}" method="POST">
            @csrf
            <h6>BASIC INFORMATION</h6>
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label" for="patient_id">Patient's Name</label>
                    @php
                        $selectedPatientID = isset($patientID) ? $patientID : null;
                        $selectedipdID = isset($ipdID) ? $ipdID : null;
                    @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 }}"
                                {{ $patient->id == $selectedPatientID ? 'selected' : '' }}>
                                {{ $patient->name }}
                            </option>
                        @endforeach
                    </select>
                    <span id="patient-error" style="color: red; display: none;">Please select a patient.</span>
                </div>
                <!-- IPD Case Selection -->
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="form-label" for="ipd_case">IPD Case</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 selected="" value="" disabled>
                                {{ __('Select IPD Case') }}
                            </option>
                            <!-- Options will be populated dynamically -->
                        </select>
                        <span id="ipd-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" id="name" name="name" class="form-control" placeholder="Muhammad Ali"
                        readonly />
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="procedure">Procedure's Name</label>
                    <input type="text" id="procedure" name="procedure" class="form-control" placeholder="Surgery" />
                    <span id="procedure-error" style="color: red; display: none;">Field required.</span>
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="surgeon_id">Select Surgeon</label>
                    <select class="select2 form-select text-capitalize" id="surgeon_id" name="surgeon_id">
                        <option selected="" value="" disabled>
                            {{ __('Surgeon Name') }}
                        </option>
                        @foreach ($doctors as $doctor)
                            <option value="{{ $doctor->id }}">
                                {{ $doctor->id }}{{ ' - ' }}{{ $doctor->name }}
                            </option>
                        @endforeach
                    </select>
                    <span id="surgeon-error" style="color: red; display: none;">Please select a surgeon.</span>
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="assistant_id">Select Assistant</label>
                    <select class="select2 form-select text-capitalize" id="assistant_id" name="assistant_id">
                        <option selected="" value="" disabled>
                            {{ __('Assistant Name') }}
                        </option>
                        @foreach ($assistants as $assistant)
                            <option value="{{ $assistant->id }}">
                                {{ $assistant->id }}{{ ' - ' }}{{ $assistant->name }}
                            </option>
                        @endforeach
                    </select>
                    <span id="assistant-error" style="color: red; display: none;">Please select a assistant.</span>
                </div>
                <div class="col-md-8">
                    <label class="form-label" for="surgery">Indication for Surgery</label>
                    <input type="text" id="surgery" name="surgery" class="form-control" placeholder="Leg surgery" />
                    <span id="surgery-error" style="color: red; display: none;">Field required.</span>
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="opr_findings">Operative Findings</label>
                    <textarea id="opr_findings" name="opr_findings" class="form-control" placeholder="There is a crack in the bone"
                        style="height: 110px; resize: none;"></textarea>
                    <span id="opr-findings-error" style="color: red; display: none;">Field required.</span>
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="opr_orders">Post Operation Orders</label>
                    <textarea id="opr_orders" name="opr_orders" class="form-control" placeholder="What's the condition after Operation"
                        style="height: 110px; resize: none;"></textarea>
                    <span id="opr-orders-error" style="color: red; display: none;">Field required.</span>
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="instruction">Special Instruction</label>
                    <textarea id="instruction" name="instruction" class="form-control" placeholder="Instructions here"
                        style="height: 110px; resize: none;"></textarea>
                    <span id="instruction-error" style="color: red; display: none;">Field required.</span>
                </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('operational-note.index') }}'"
                    class="btn btn-label-secondary">Cancel</button>
            </div>
        </form>
    </div>

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

            const patientsSelect = $('#patient_id');
            const ipdCasesSelect = $('#ipd_case');
            const preSelectedPatientId = $('#pre-selected-patient-id')
                .val(); // Hidden input for pre-selected patient ID
            const preSelectedIpdCaseId = $('#pre-selected-ipd-case-id')
                .val(); // Hidden input for pre-selected IPD Case ID

            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 fetchIpdCases(patientId) {
                ipdCasesSelect.innerHTML =
                    '<option value="" selected="" disabled>{{ __('Select IPD Case') }}</option>';
                if (patientId) {
                    fetch(`/ipd-cases/${patientId}`)
                        .then(response => response.json())
                        .then(data => {
                            let optionsHTML =
                                `<option value="none">{{ __('None') }}</option>
                                <option value="" selected="" disabled>{{ __('Select IPD Case') }}</option>`;
                            data.forEach(ipdCase => {
                                optionsHTML += `<option value="${ipdCase.id}" ${ipdCase.id == preSelectedIpdCaseId ? 'selected' : ''}>
                            Appointment Date: ${ipdCase.appointment_date}
                        </option>`;
                            });
                            // ipdCasesSelect.innerHTML = optionsHTML;
                            ipdCasesSelect.html(optionsHTML);
                            // Set the selected IPD case if it exists
                            if (preSelectedIpdCaseId) {
                                // ipdCasesSelect.value = preSelectedIpdCaseId;
                                ipdCasesSelect.val(preSelectedIpdCaseId).trigger('change');
                            }
                        })
                        .catch(error => {
                            console.error('Error fetching IPD cases:', error);
                            // alert('Could not fetch IPD cases. Please check the console for details.');
                        });
                }
            }

            // If there's a pre-selected patient ID, fetch the IPD cases on page load
            if (preSelectedPatientId) {
                fetchIpdCases(preSelectedPatientId);
                // Set the selected patient in the Select2 box
                patientsSelect.val(preSelectedPatientId).trigger('change');
                // Set the patient name from the selected option
                const selectedOption = patientsSelect.find('option:selected');
                const name = selectedOption.data('name');
                $('#name').val(name || '');
                // Trigger a change event to populate IPD cases
                patientsSelect.trigger('change');
            }

            // Use the standard change event in case select2:select doesn't trigger properly
            patientsSelect.on('change', function(e) {
                const selectedOption = $(this).find('option:selected');
                const name = selectedOption.data('name');
                $('#name').val(name || '');
                const patientId = selectedOption.val();
                fetchIpdCases(patientId); // Fetch IPD cases based on selected patient
                validateSelection(this, document.getElementById('patient-error'));
            });

            // 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;
                }
            }

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

            $('#ipd_case').on('select2:select', function(e) {
                validateSelection(this, document.getElementById('ipd-error'));
            });

            $('#surgeon_id').on('select2:select', function(e) {
                validateSelection(this, document.getElementById('surgeon-error'));
            });

            $('#assistant_id').on('select2:select', function(e) {
                validateSelection(this, document.getElementById('assistant-error'));
            });

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

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

            document.getElementById('opr_findings').addEventListener('input', function() {
                validateSelection(this, document.getElementById('opr-findings-error'));
            });

            document.getElementById('opr_orders').addEventListener('input', function() {
                validateSelection(this, document.getElementById('opr-orders-error'));
            });

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

            // Add form validation on submit
            document.getElementById('opr-note-form').addEventListener('submit', function(event) {
                const isPatientSelected = validateSelection(document.getElementById('patient_id'),
                    document.getElementById('patient-error'));
                const isIpdSelected = validateSelection(document.getElementById('ipd_case'),
                    document.getElementById('ipd-error'));
                const isSurgeonSelected = validateSelection(document.getElementById('surgeon_id'),
                    document.getElementById('surgeon-error'));
                const isAssistantSelected = validateSelection(document.getElementById('assistant_id'),
                    document.getElementById('assistant-error'));
                const isProcdureValid = validateSelection(document.getElementById('procedure'),
                    document.getElementById('procedure-error'));
                const isSurgeryValid = validateSelection(document.getElementById('surgery'),
                    document.getElementById('surgery-error'));
                const isOprFindingValid = validateSelection(document.getElementById('opr_findings'),
                    document.getElementById('opr-findings-error'));
                const isOprOrderValid = validateSelection(document.getElementById('opr_orders'),
                    document.getElementById('opr-orders-error'));
                const isInstructionValid = validateSelection(document.getElementById('instruction'),
                    document.getElementById('instruction-error'));
                const areMedicationsValid = validateMedicationRows();
                const areOtherMedicationsValid = validateOtherMedicationRows();

                if (!isPatientSelected || !isIpdSelected || !isSurgeonSelected || !isAssistantSelected || !
                    isProcdureValid || !isSurgeryValid || !isOprFindingValid || !isOprOrderValid || !
                    isInstructionValid || !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 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