{% extends "hbase.html" %}
{% block content %}
<div class="container my-5 py-4 px-4 rounded shadow" style="background-color:rgb(202, 252, 202)">
    <div class="row">
        <div class="col-12 text-center mb-4">
            <h2 class="fw-bold text-primary">
                {% if prescription %}
                    {{ appointment.patient.name }} এর প্রেসক্রিপশন সম্পাদনা | বয়স: {{ appointment.patient.age }} | লিঙ্গ: {{appointment.patient.gender}}
                {% else %}
                    {{ appointment.patient.name }} এর জন্য প্রেসক্রিপশন | বয়স: {{ appointment.patient.age }} বছর | লিঙ্গ: {{appointment.patient.gender}}
                {% endif %}
            </h2>
        </div>
    </div>

    <form method="POST" action="">
        {% csrf_token %}

        <div class="row">
            <div class="col-md-6 my-2">
                <label for="symptoms">C/C</label>
                <textarea class="form-control" rows="4" name="symptoms" id="symptoms">{{ prescription.symptoms|default:'' }}</textarea>
                <label for="symptoms">O/E</label>
                <textarea class="form-control" rows="4" name="on_examination" id="on_examination">{{ prescription.on_examination|default:'' }}</textarea>
            </div>
            <div class="col-md-6 my-2">
                <div class="row">
                    <label for="weight">ওজন</label>
                    <input type="text" class="form-control mb-2" name="weight" value="{{ prescription.weight|default:'' }}">
                    <label for="temperature">শরীরের তাপমাত্রা</label>
                    <input type="text" class="form-control mb-2" name="temperature" value="{{ prescription.temperature|default:'' }}">
                    <label for="blood_pressure">রক্তচাপ</label>
                    <input type="text" class="form-control" name="blood_pressure" value="{{ prescription.blood_pressure|default:'' }}">
                </div>
            </div>
        </div>

        {% if request.user.vendor_doctor.eye_specialist %}
        <div class="row">
            <div class="col-md-12">
                <div class="section-title"><strong>Right Eye</strong></div>
                <div class="table-responsive">
                    <table class="table table-bordered align-middle text-center">
                        <thead>
                            <tr>
                                <th>Type</th>
                                <th>Sph</th>
                                <th>Cyl</th>
                                <th>Axis</th>
                                <th>Corrected Acuity</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Distance</td>
                                <td><input type="text" name="right_sph_distance" value="{{prescription.right_sph_distance|default:''}}" class="form-control"></td>
                                <td><input type="text" name="right_cyl_distance" value="{{prescription.right_cyl_distance|default:''}}" class="form-control"></td>
                                <td><input type="text" name="right_axis_distance" value="{{prescription.right_axis_distance|default:''}}" class="form-control"></td>
                                <td><input type="text" name="right_corrected_distance" value="{{prescription.right_corrected_distance|default:''}}" class="form-control"></td>
                            </tr>
                            <tr>
                                <td>Near</td>
                                <td><input type="text" name="right_sph_near" value="{{prescription.right_sph_near|default:''}}" class="form-control"></td>
                                <td><input type="text" name="right_cyl_near" value="{{prescription.right_cyl_near|default:''}}" class="form-control"></td>
                                <td><input type="text" name="right_axis_near" value="{{prescription.right_axis_near|default:''}}" class="form-control"></td>
                                <td><input type="text" name="right_corrected_near" value="{{prescription.right_corrected_near|default:''}}" class="form-control"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="section-title"><strong>Left Eye</strong></div>
                <div class="table-responsive">
                    <table class="table table-bordered align-middle text-center">
                        <thead>
                            <tr>
                                <th>Type</th>
                                <th>Sph</th>
                                <th>Cyl</th>
                                <th>Axis</th>
                                <th>Corrected Acuity</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Distance</td>
                                <td><input type="text" name="left_sph_distance" value="{{prescription.left_sph_distance|default:''}}" class="form-control"></td>
                                <td><input type="text" name="left_cyl_distance" value="{{prescription.left_cyl_distance|default:''}}" class="form-control"></td>
                                <td><input type="text" name="left_axis_distance" value="{{prescription.left_axis_distance|default:''}}" class="form-control"></td>
                                <td><input type="text" name="left_corrected_distance" value="{{prescription.left_corrected_distance|default:''}}" class="form-control"></td>
                            </tr>
                            <tr>
                                <td>Near</td>
                                <td><input type="text" name="left_sph_near" value="{{prescription.left_sph_near|default:''}}" class="form-control"></td>
                                <td><input type="text" name="left_cyl_near" value="{{prescription.left_cyl_near|default:''}}" class="form-control"></td>
                                <td><input type="text" name="left_axis_near" value="{{prescription.left_axis_near|default:''}}" class="form-control"></td>
                                <td><input type="text" name="left_corrected_near" value="{{prescription.left_corrected_near|default:''}}" class="form-control"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="section-title"><strong>Instructions</strong></div>
                <div class="instructions mb-3 d-flex flex-wrap">
                    <label class="me-3"><input type="checkbox" {% if prescription.unifocal %}checked{% endif %} name="unifocal"> Unifocal</label>
                    <label class="me-3"><input type="checkbox" {% if prescription.bifocal %}checked{% endif %} name="bifocal"> Bifocal</label>
                    <label class="me-3"><input type="checkbox" {% if prescription.cr_39 %}checked{% endif %} name="cr_39"> CR-39</label>
                    <label class="me-3"><input type="checkbox" {% if prescription.h_index %}checked{% endif %} name="h_index"> H-Index</label>
                    <label class="me-3"><input type="checkbox" {% if prescription.odd_rt_lt %}checked{% endif %} name="odd_rt_lt"> Odd-Rt./Lt.</label>
                    <label class="me-3"><input type="checkbox" {% if prescription.kb %}checked{% endif %} name="kb"> KB</label>
                    <label class="me-3"><input type="checkbox" {% if prescription.valius %}checked{% endif %} name="valius"> Valius</label>
                    <label class="me-3"><input type="checkbox" {% if prescription.dee %}checked{% endif %} name="dee"> Dee</label>
                    <label class="me-3"><input type="checkbox" {% if prescription.execution %}checked{% endif %} name="execution"> Execution</label>
                    <label class="me-3"><input type="checkbox" {% if prescription.arc %}checked{% endif %} name="arc"> ARC</label>
                    <label class="me-3"><input type="checkbox" {% if prescription.bluecut %}checked{% endif %} name="bluecut"> Bluecut</label>
                </div>
            </div>
        </div>
        {% endif %}

        <hr>
        <h4 class="text-success mt-4">ঔষধের তালিকা</h4>
        <div id="medicine-fields">
            {% for med in prescription.medicines.all %}
            <div class="medicine-field border rounded p-3 my-3">
                <div class="row">
                    <div class="col-md-6 my-2">
                        <label>ঔষধের নাম</label>
                        <input type="text" class="medicine_name form-control" name="med_name" value="{{ med.name }}">
                    </div>
                    <div class="col-md-6 my-2">
                        <label>Generic</label>
                        <input type="text" class="generic form-control" name="generic" value="{{ med.generic }}">
                    </div>
                    <div class="col-md-6 my-2">
                        <label>Strength</label>
                        <input type="text" class="strength form-control" name="strength" value="{{ med.strength }}">
                    </div>
                    <div class="col-md-6 my-2">
                        <label>Dosage Form</label>
                        <input type="text" class="dosage_form form-control" name="dosage_form" value="{{ med.dosage_form }}">
                    </div>
                    <div class="col-md-6 my-2">
                        <label>সময়</label>
                        <select name="med_time" class="form-control">
                            <option value="">---------</option>
                            <option value="১+১+১" {% if med.time == '১+১+১' %}selected{% endif %}>১+১+১</option>
                            <option value="১+0+১" {% if med.time == '১+0+১' %}selected{% endif %}>১+0+১</option>
                            <option value="১+১+0" {% if med.time == '১+১+0' %}selected{% endif %}>১+১+0</option>
                            <option value="0+১+১" {% if med.time == '0+১+১' %}selected{% endif %}>0+১+১</option>
                            <option value="0+0+১" {% if med.time == '0+0+১' %}selected{% endif %}>0+0+১</option>
                            <option value="0+১+0" {% if med.time == '0+১+0' %}selected{% endif %}>0+১+0</option>
                            <option value="১+0+0" {% if med.time == '১+0+0' %}selected{% endif %}>১+0+0</option>
                        </select>
                    </div>
                    <div class="col-md-6 my-2">
                        <label>খাওয়ার সময়</label>
                        <select name="meal_time" class="form-control">
                            <option value="">---------</option>
                            <option value="খাবারের আগে" {% if med.meal_time == 'খাবারের আগে' %}selected{% endif %}>খাবারের আগে</option>
                            <option value="খাবারের পরে" {% if med.meal_time == 'খাবারের পরে' %}selected{% endif %}>খাবারের পরে</option>
                            <option value="যেকোন সময়" {% if med.meal_time == 'যেকোন সময়' %}selected{% endif %}>যেকোন সময়</option>
                        </select>
                    </div>
                    <div class="col-md-6 my-2">
                        <label>নির্দেশনা</label>
                        <input type="text" name="duration" class="form-control" value="{{ med.duration }}">
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <button type="button" id="add-medicine" class="btn btn-outline-secondary my-2">+ নতুন ঔষধ</button>

        <div class="row mt-4">
            <div class="col-md-12">
                <label for="instructions">পরামর্শ</label>
                <textarea class="form-control" rows="3" name="instructions" id="instructions">{{ prescription.instructions|default:'' }}</textarea>
            </div>
        </div>

        <hr>
        <h4 class="text-info mt-4">পরীক্ষার তালিকা (ঐচ্ছিক)</h4>
        <div id="test-fields">
            {% for test in tests %}
            <div class="test-field border rounded p-3 my-3">
                <div class="row">
                    <div class="col-md-6 my-2">
                        <label>পরীক্ষার নাম</label>
                        <input type="text" class="form-control" name="test_name" value="{{ test.test_name }}">
                    </div>
                    <div class="col-md-6 my-2">
                        <label>পরীক্ষার নির্দেশনা</label>
                        <input type="text" class="form-control" name="test_instructions" value="{{ test.instructions }}">
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        <button type="button" id="add-test" class="btn btn-outline-secondary my-2">+ নতুন টেস্ট</button>

        <div class="text-center mt-4">
            <button type="submit" class="btn btn-primary px-4">
                {% if prescription %} প্রেসক্রিপশন আপডেট {% else %} প্রেসক্রিপশন তৈরি করুন {% endif %}
            </button>
        </div>
    </form>
</div>

<!-- JS and CSS for jQuery UI Autocomplete -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

<script>
function initAutocomplete($element) {
    $element.autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "{% url 'medicine_search' %}",
                data: { q: request.term },
                success: function(data) {
                    response($.map(data, function(item) {
                        return {
                            label: item.name + " (" + item.generic + ", " + item.strength + ", " + item.dosage_form + ")",
                            value: item.name,
                            generic: item.generic,
                            strength: item.strength,
                            dosage_form: item.dosage_form
                        };
                    }));
                }
            });
        },
        minLength: 1,
        select: function(event, ui) {
            let $row = $(this).closest('.medicine-field');
            $row.find('.generic').val(ui.item.generic);
            $row.find('.strength').val(ui.item.strength);
            $row.find('.dosage_form').val(ui.item.dosage_form);
        }
    });
}

function initDurationAutocomplete($element) {
    $element.autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "{% url 'duration_suggestions' %}",
                data: { q: request.term },
                success: function(data) {
                    response(data);
                }
            });
        },
        minLength: 1 // চাইলে input ফোকাস দিলেই দেখাবে
    });
}

$(function() {
    // Existing medicine autocomplete
    initAutocomplete($(".medicine_name"));

    // Duration autocomplete for existing inputs
    initDurationAutocomplete($("input[name='duration']"));

    // Add new medicine row
    $("#add-medicine").on('click', function () {
        const newMedicineHtml = `
        <div class="medicine-field border rounded p-3 my-3">
            <div class="row">
                <div class="col-md-6 my-2">
                    <label>ঔষধের নাম</label>
                    <input type="text" class="medicine_name form-control" name="med_name">
                </div>
                <div class="col-md-6 my-2">
                    <label>Generic</label>
                    <input type="text" class="generic form-control" name="generic">
                </div>
                <div class="col-md-6 my-2">
                    <label>Strength</label>
                    <input type="text" class="strength form-control" name="strength">
                </div>
                <div class="col-md-6 my-2">
                    <label>Dosage Form</label>
                    <input type="text" class="dosage_form form-control" name="dosage_form">
                </div>
                <div class="col-md-6 my-2">
                    <label>সময়</label>
                    <select name="med_time" class="form-control">
                        <option value="">---------</option>
                        <option value="১+১+১">১+১+১</option>
                        <option value="১+0+১">১+0+১</option>
                        <option value="১+১+0">১+১+0</option>
                        <option value="0+১+১">0+১+১</option>
                        <option value="0+0+১">0+0+১</option>
                        <option value="0+১+0">0+১+0</option>
                        <option value="১+0+0">১+0+0</option>
                    </select>
                </div>
                <div class="col-md-6 my-2">
                    <label>খাওয়ার সময়</label>
                    <select name="meal_time" class="form-control">
                        <option value="">---------</option>
                        <option value="খাওয়ার আগে">খাওয়ার আগে</option>
                        <option value="খাওয়ার পর">খাওয়ার পর</option>
                        <option value="যেকোনো সময়">যেকোনো সময়</option>
                    </select>
                </div>
                <div class="col-md-6 my-2">
                    <label>নির্দেশনা</label>
                    <input type="text" name="duration" class="form-control">
                </div>
            </div>
        </div>
        `;
        let $field = $(newMedicineHtml);
        $("#medicine-fields").append($field);

        // Init autocomplete again
        initAutocomplete($field.find(".medicine_name"));
        initDurationAutocomplete($field.find("input[name='duration']"));
    });
});

function initTestAutocomplete($elem) {
    $elem.autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "{% url 'autocomplete_tests' %}",
                data: { q: request.term },
                success: function(data) {
                    response(data);
                }
            });
        },
        minLength: 1,
    });
}
function initInstructionAutocomplete($elem) {
    $elem.autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "{% url 'autocomplete_instructions' %}",
                data: { q: request.term },
                success: function(data) {
                    response(data);
                }
            });
        },
        minLength: 1,
    });
}

// Initialize for existing tests
initTestAutocomplete($(".test_name"));
initInstructionAutocomplete($(".test_instructions"));

// When adding a new test field dynamically, initialize autocomplete
$("#add-test").on('click', function() {
    // your existing add test code
    // then call initTestAutocomplete for new inputs
    // example assuming you create a new input with class 'test_name'
    const container = $("#test-fields");
    const newTestField = $(`
        <div class="test-field border rounded p-3 my-3">
            <div class="row">
                <div class="col-md-6 my-2">
                    <label>পরীক্ষার নাম</label>
                    <input type="text" class="form-control test_name" name="test_name">
                </div>
                <div class="col-md-6 my-2">
                    <label>পরীক্ষার নির্দেশনা</label>
                    <input type="text" class="form-control test_instructions" name="test_instructions">
                </div>
            </div>
        </div>
    `);
    container.append(newTestField);
    initTestAutocomplete(newTestField.find(".test_name"));
    initInstructionAutocomplete(newTestField.find(".test_instructions"));
});

$(function() {
    function enableTextareaAutocomplete(selector, url) {
        $(selector).on("keydown", function(event) {
            if (event.keyCode === $.ui.keyCode.TAB &&
                $(this).autocomplete("instance").menu.active) {
                event.preventDefault();
            }
        }).autocomplete({
            source: function(request, response) {
                // Get the last line the doctor is typing
                let lines = request.term.split("\n");
                let currentLine = lines[lines.length - 1].trim();

                if (currentLine.length === 0) {
                    response([]); // no suggestion if empty
                    return;
                }

                $.ajax({
                    url: url,
                    data: { q: currentLine },
                    success: function(data) {
                        response(data.map(item => item.name));
                    }
                });
            },
            focus: function() {
                return false; // prevent value insertion on focus
            },
            select: function(event, ui) {
                let lines = this.value.split("\n");
                lines[lines.length - 1] = ui.item.value; // replace last line
                this.value = lines.join("\n");
                return false;
            },
            minLength: 1
        });
    }

    // Enable autocomplete for symptoms and instructions
    enableTextareaAutocomplete("#symptoms", "{% url 'symptom_suggestions' %}");
    enableTextareaAutocomplete("#instructions", "{% url 'instruction_suggestions' %}");
    enableTextareaAutocomplete("#on_examination", "{% url 'on_examination_suggestions' %}");
});
</script>
{% endblock content %}