@extends('layouts/layoutMaster')

@section('title', 'Edit 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/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>Edit Operational Note</b>
                    </h5>
                </div>
            </div>
        </div>
        <form id="opr-note-form" class="card-body" action="{{ route('operational-note.update', $note->id) }}" method="POST">
            @csrf
            @method('PUT')
            <h6>BASIC INFORMATION</h6>
            <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"
                        value="{{ $note->patient->name }}" 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"
                        value="{{ $note->procedure_name }}" />
                    <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 value="" disabled>Surgeon Name</option>
                        @foreach ($doctors as $doctor)
                            <option value="{{ $doctor->id }}" {{ $note->surgeon_id == $doctor->id ? 'selected' : '' }}>
                                {{ $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 value="" disabled>Assistant Name</option>
                        @foreach ($assistants as $assistant)
                            <option value="{{ $assistant->id }}"
                                {{ $note->assistant_id == $assistant->id ? 'selected' : '' }}>
                                {{ $assistant->id }}{{ ' - ' }}{{ $assistant->name }}
                            </option>
                        @endforeach
                    </select>
                    <span id="assistant-error" style="color: red; display: none;">Please select an 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"
                        value="{{ $note->indication_of_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;">{{ $note->operative_findings }}</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;">{{ $note->post_operation_orders }}</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;">{{ $note->special_instruction }}</textarea>
                    <span id="instruction-error" style="color: red; display: none;">Field required.</span>
                </div>
            </div>

            <hr />
            <h6>MEDICATION</h6>
            <div id="medication-container">
                @foreach ($note->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 ($note->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="pt-4">
                <button type="submit" class="btn btn-primary me-sm-3 me-1">Update</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() {

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

            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
            }

            // Event listener for patient selection change
            document.getElementById('surgeon_id').addEventListener('change', function() {
                validateSelection(this, document.getElementById('surgeon-error'));
            });

            // Event listener for patient selection change
            document.getElementById('assistant_id').addEventListener('change', function() {
                validateSelection(this, document.getElementById('assistant-error'));
            });

            // Event listener for patient selection change
            document.getElementById('procedure').addEventListener('input', function() {
                validateSelection(this, document.getElementById('procedure-error'));
            });

            // Event listener for patient selection change
            document.getElementById('surgery').addEventListener('input', function() {
                validateSelection(this, document.getElementById('surgery-error'));
            });

            // Event listener for patient selection change
            document.getElementById('opr_findings').addEventListener('input', function() {
                validateSelection(this, document.getElementById('opr-findings-error'));
            });

            // Event listener for patient selection change
            document.getElementById('opr_orders').addEventListener('input', function() {
                validateSelection(this, document.getElementById('opr-orders-error'));
            });

            // Event listener for patient selection change
            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 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 (!isSurgeonSelected || !isSurgeonSelected || !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 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 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