@using Resources
@model PTS41.Models.Content.PatientAppointmentContent
@{
    ViewBag.Title = Doctor.PATIENT_APPOINTMENT;
    ViewBag.PageTitle = Doctor.PATIENT_APPOINTMENT;
}

<script>
    function createTxtBox(description) {
        var input = document.createElement("input");
        input.type = "hidden";
        input.id = "input" + globalIndex;
        input.name = "input" + globalIndex;

        if (description == null) {
            input.value = "";

        } else {
            input.value = description;
        }
        document.getElementById("prescriptionContainer").appendChild(input);

        document.getElementById("PrescriptionDescription").value = "";
        globalIndex += 1;
    }
</script>

<div class="container">
    <div class="row">
        <div class="col-12">
            <!-- Temporary-->
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">@Doctor.PATIENT_APPOINTMENT</h4>
                    <h6 class="card-subtitle"></h6>
                    <div>
                        <div class="form-group">
                            <label for="usr">@Global.NAME:</label>
                            <input type="text" class="form-control" id="name" value="@(Model.User.name + " " + Model.User.lastname)" disabled>
                        </div>
                        <div class="form-group">
                            <label for="birthday">@Global.BIRTH_DATE:</label>
                            <input type="text" class="form-control" id="birthday" value="@Model.User.birthdate.ToShortDateString()" disabled>
                        </div>
                        <br/>
                        <div class="form-group">
                            <label for="reason">@Doctor.VISIT_REASON:</label>
                            <input type="text" class="form-control" id="reason" value="@Model.CurrentAppointment.reason" disabled>
                        </div>
                        <div class="form-group">
                            <label for="description">@Doctor.DESCRIPTION:</label>
                            <input type="text" class="form-control" id="description" value="@Model.CurrentAppointment.description" disabled>
                        </div>
                        @using (Html.BeginForm("SaveAppointment", "Doctor", FormMethod.Post))
                        {
                            <input type="hidden" value="@Model.CurrentAppointment.id" name="AppointmentId"/>
                            <input type="hidden" value="@Model.CurrentAppointment.patient_id" name="PatientId"/>
                            <div class="form-group">
                                <!-- Button trigger modal -->
                                <!-- Modal -->
                                <div class="modal fade" id="drugModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog" style="width: 2250px;" role="document">
                                        <div class="modal-content">
                                            <div class="container">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="exampleModalLabel">@Doctor.MEDICINE</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <!-- Alle medicijnen -->
                                                <label for="exampleFormControlSelect2">@Doctor.ALL_MEDICINE:</label>
                                                <select multiple class="form-control" id="lstBox1">
                                                    @{
                                                        foreach (var drug in Model.AllDrugs)
                                                        {
                                                            <option id="@drug.id" value="@drug.id">@(drug.name + " - " + drug.description)</option>
                                                        }
                                                    }
                                                </select>
                                                <br/>
                                                <div class="subject-info-arrows text-center">
                                                    <input type="button" id="btnDown" onclick="btnDownClick()" value="▼" class="btn btn-default"/>
                                                    &nbsp;&nbsp;&nbsp;
                                                    <input type="button" id="btnUp" onclick="btnUpClick()" value="▲" class="btn btn-default"/>
                                                </div>
                                                <!--Huidig gebruikende medicijnen-->
                                                <label for="exampleFormControlSelect2">@Doctor.CURRENT_USING_MEDICINE:</label>
                                                <select multiple class="form-control" id="lstBox2" onchange="selectedIndexChanged()">
                                                    @{
                                                        foreach (var drug in Model.CurrentUsingDrugs)
                                                        {
                                                            <option value="@drug.id">@(drug.name + " - " + drug.description)</option>
                                                        }
                                                    }
                                                </select>
                                                <br/>
                                                Gebruiksbeschrijving<br/>
                                                <textarea class="form-control" id="PrescriptionDescription" rows="6" onkeyup="setPrescriptionVariable()"></textarea>
                                            </div>
                                            <div class="modal-footer" id="prescriptionContainer">
                                                <script type="text/javascript">
                                                    var globalIndex = 0;
                                                </script>

                                                @foreach (var drug in Model.PrescriptionAndDrug)
                                                {
                                                    <script type="text/javascript">
                                                        createTxtBox('@drug.Key.description');
                                                    </script>
                                                }
                                                <input type="hidden" name="globalIndex" id="txtGlobalIndex"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--End modal-->
                                <input type="hidden" value="@Model.AllCurrentUsingDrugsString" name="AllCurrentUsingDrugsString" id="AllCurrentUsingDrugsString"/>
                                <label for="exampleFormControlSelect2">@Doctor.CURRENT_USING_MEDICINE:</label>
                                <select multiple class="form-control" id="lstBox3" name="testListItems">
                                    @{
                                        foreach (var drug in Model.CurrentUsingDrugs)
                                        {
                                            <option value="@drug.id">@(drug.name + " - " + drug.description)</option>
                                        }
                                    }
                                </select>
                                <button style="margin: 35px 0000" type="button" class="btn btn-info" data-toggle="modal" data-target="#drugModal">
                                    @Doctor.LINK_MEDICINE
                                </button>
                                <br/>
                            </div>
                            <div class="form-group">
                                <label for="exampleFormControlTextarea1">@Doctor.APPOINTMENT_INFO:</label>
                                <textarea class="form-control" id="conversationText" name="appointmentComments" rows="6">@Model.CurrentAppointment.comments</textarea>
                            </div>

                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-info"> <input type="radio" name="presence" value="present"/> Aanwezig</label>
                                <label class="btn btn-info"> <input type="radio" name="presence" value="absent"/> Afwezig</label>
                            </div>
                            <input class="btn btn-primary" type="submit" value="@Global.SAVE">
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function selectedIndexChanged() {
        console.log("selected index changed");

        const selectedIndex = document.getElementById("lstBox2").selectedIndex;

        const myElem = document.getElementById(`input${selectedIndex}`);

        if (myElem === null) {
            createTxtBox("");
        } else {
            document.getElementById("PrescriptionDescription").value =
                document.getElementById(`input${selectedIndex}`).value;
        }

        document.getElementById("txtGlobalIndex").value = globalIndex;
    }

    function setPrescriptionVariable() {
        const selectedIndex = document.getElementById("lstBox2").selectedIndex;

        if (document.getElementById("PrescriptionDescription").value != null) {
            document.getElementById(`input${selectedIndex}`).value =
                document.getElementById("PrescriptionDescription").value;
        }
    }

    function btnDownClick() {
        const selectedOpts = $('#lstBox1 option:selected');

        $('#lstBox2').append($(selectedOpts).clone());
        $('#lstBox3').append($(selectedOpts).clone());
        $(selectedOpts).remove();

        // Id's toevoegen aan txtbox.
        var ids = new Array();
        $('#lstBox2').children().each(function() {
            ids.push($(this).val());
        });
        document.getElementById("AllCurrentUsingDrugsString").value = ids;
    }

    function btnUpClick() {
        const index = document.getElementById("lstBox2").selectedIndex;
        document.getElementById("lstBox3").remove(index);

        const selectedOpts = $('#lstBox2 option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
        }
        $('#lstBox1').append($(selectedOpts).clone());
        $(selectedOpts).remove();

        // id's verwijderen uit textbox
        var ids = new Array();
        $('#lstBox2').children().each(function() {
            ids.push($(this).val());
        });
        document.getElementById("AllCurrentUsingDrugsString").value = ids;

        // Alle textboxen boven de verwijderde index hernoemen.
        document.getElementById(`input${index}`).remove();

        for (let i = index + 1; i < globalIndex; i++) {
            const input = document.getElementById(`input${i}`);
            console.log(`input id = ${input.id}`);
            console.log(`Index = ${index}`);
            input.id = `input${i - 1}`;
            console.log(`input id = ${input.id}`);
        }
        globalIndex -= 1;

        document.getElementById("PrescriptionDescription").value = "";
    }
</script>