@extends('layouts.website.website')
@section('content')

    <!--main content start-->

    <section id="main-content">
        <section class="wrapper site-min-height">
            <!-- page start-->
            <section class="col-md-12">
                <header class="panel-heading">
                    Add Prescription
                </header>
                <div class="panel col-md-12">
                    <div class="adv-table editable-table">
                        <div class="clearfix">
                            <form role="form" action="{{ route('store_prescription') }}" class="clearfix" method="post" enctype="multipart/form-data">
                                @csrf
                                <div class="">
                                    <div class="form-group col-md-4">
                                        <label for="exampleInputEmail1"> Date</label>
                                        <input type="date" class="form-control" name="date" id="exampleInputEmail1" value="" placeholder="" />
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label for="exampleInputEmail1"> Patient</label>
                                        <select class="form-control m-bot15" id="patientchoose" name="patient" value="">
                                            @foreach (App\User::where('role_id',8)->orderBy('name','ASC')->get() as $item)
                                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label for="exampleInputEmail1"> Doctor</label>
                                        <select class="form-control m-bot15" id="doctorchoose1" name="doctor" value="">
                                            <option value="{{ Auth::user()->id }}" selected="selected"> {{ Auth::user()->name }}</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-6" >
                                        <label class="control-label">History</label>
                                        <textarea class="form-control description" id="editor1" name="symptom" value="" rows="50" cols="20"></textarea>
                                    </div>

                                    <div class="form-group col-md-6" >
                                        <label class="control-label">Note</label>
                                        <textarea class="form-control description" id="editor3" name="note" value="" rows="30" cols="20"></textarea>
                                    </div>

                                    <div class="form-group col-md-12 medicine_block">
                                        <label class="control-label col-md-3"> Medicine</label>
                                        <div class="col-md-9">
                                            <select class="form-control m-bot15 medicinee" id="my_select1_disabled" name="category" value="">
                                                @foreach (App\MadicneList::OrderBy('name','ASC')->get() as $item)
                                                    <option value="{{ $item->id }}*{{ $item->name }}" selected>{{ $item->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group col-md-12 panel-body medicine_block">
                                        <label class="control-label col-md-3">Medicine</label>
                                        <div class="col-md-9 medicine pull-right"></div>
                                    </div>

                                    <div class="form-group col-md-12" >
                                        <label class="control-label">Advice</label>
                                        <textarea class="form-control description" id="editor3" name="advice" value="" rows="30" cols="20"> </textarea>
                                    </div>

                                    <input type="hidden" name="admin" value="admin" />

                                    <input type="hidden" name="id" value="" />

                                    <div class="form-group">
                                        <button type="submit" name="submit" class="btn btn-info pull-right">Submit</button>
                                    </div>
                                </div>

                                <div class="col-md-5"></div>
                            </form>
                        </div>
                    </div>
                </div>
            </section>
            <!-- page end-->
        </section>
    </section>
    <!--main content end-->

    <script type="text/javascript">
        $(document).ready(function () {
            //   $(".medicine").html("");
            var selected = $("#my_select1_disabled").find("option:selected");
            var unselected = $("#my_select1_disabled").find("option:not(:selected)");
            selected.attr("data-selected", "1");
            $.each(unselected, function (index, value1) {
                if ($(this).attr("data-selected") == "1") {
                    var value = $(this).val();
                    var res = value.split("*");
                    // var unit_price = res[1];
                    var id = res[0];
                    $("#med_selected_section-" + id).remove();
                    // $('#removediv' + $(this).val() + '').remove();
                    //this option was selected before
                }
            });

            /* $("select").on("select2:unselect", function (e) {
             var value = e.params.val();

             var res = value.split("*");
             // var unit_price = res[1];
             var id = res[0];
             $('#med_selected_section-' + id).remove();
             });
             */

            var count = 0;
            $.each($("select.medicinee option:selected"), function () {
                var value = $(this).val();
                var res = value.split("*");
                // var unit_price = res[1];
                var id = res[0];
                // var id = $(this).data('id');
                var med_id = res[0];
                var med_name = res[1];
                var dosage = $(this).data("dosage");
                var frequency = $(this).data("frequency");
                var days = $(this).data("days");
                var instruction = $(this).data("instruction");
                if ($("#med_id-" + id).length) {
                } else {
                    $(".medicine").append(
                        '<section id="med_selected_section-' + med_id + '" class="med_selected row">\n\
                            <div class = "form-group medicine_sect col-md-2"><div class=col-md-12>\n\
                                <label> Medicine </label>\n\
                            </div>\n\
                            \n\
                            <div class=col-md-12>\n\
                                <input class = "medi_div" name = "med_id[]" value = "' + med_name + '" placeholder="" required>\n\
                                <input type="hidden" id="med_id-' + id + '" class = "medi_div" name = "medicine[]" value = "' + med_id + '" placeholder="" required>\n\
                            </div>\n\
                            </div>\n\
                            \n\
                            <div class = "form-group medicine_sect col-md-2" ><div class=col-md-12>\n\
                                <label>Dosage </label>\n\
                            </div>\n\
                            <div class=col-md-12><input class = "state medi_div" name="dosage[]" value = "" placeholder="100 mg" required>\n\</div>\n\
                            </div>\n\
                            \n\
                            <div class = "form-group medicine_sect col-md-2"><div class=col-md-12>\n\
                                <label>Frequency </label>\n\
                            </div>\n\
                            <div class=col-md-12> <input class = "potency medi_div sale" id="salee' + count + '" name = "frequency[]" value = "" placeholder="1 + 0 + 1" required>\n\
                            </div>\n\
                            </div>\n\
                            \n\
                            <div class = "form-group medicine_sect col-md-2"><div class=col-md-12>\n\
                                <label>\n\
                                    Days \n\
                                </label>\n\
                            </div>\n\
                            <div class=col-md-12><input class = "potency medi_div quantity" id="quantity' +
                                count +
                                '" name = "days[]" value = "" placeholder="7 days" required>\n\
                            </div>\n\
                            </div>\n\
                            \n\
                            \n\<div class = "form-group medicine_sect col-md-2"><div class=col-md-12>\n\
                                <label>\n\
                                Instruction \n\
                                </label>\n\
                            </div>\n\
                            <div class=col-md-12><input class = "potency medi_div quantity" id="quantity' +
                                count +
                                '" name = "instruction[]" value = "" placeholder="After Food" required>\n\
                                </div>\n\
                            </div>\n\
                            \n\
                            \n\
                            <div class="del col-md-1"></div>\n\
                        </section>'
                    );
                }
            });
        });
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".medicinee").change(function () {
                //   $(".medicine").html("");
                var count = 0;

                var selected = $("#my_select1_disabled").find("option:selected");
                var unselected = $("#my_select1_disabled").find("option:not(:selected)");
                selected.attr("data-selected", "1");
                $.each(unselected, function (index, value1) {
                    if ($(this).attr("data-selected") == "1") {
                        var value = $(this).val();
                        var res = value.split("*");
                        // var unit_price = res[1];
                        var id = res[0];
                        $("#med_selected_section-" + id).remove();
                        // $('#removediv' + $(this).val() + '').remove();
                        //this option was selected before
                    }
                });

                $.each($("select.medicinee option:selected"), function () {
                    var value = $(this).val();
                    var res = value.split("*");
                    // var unit_price = res[1];
                    var id = res[0];
                    // var id = $(this).data('id');
                    var med_id = res[0];
                    var med_name = res[1];

                    if ($("#med_id-" + id).length) {
                    } else {
                        $(".medicine").append(
                            '<section class="med_selected row" id="med_selected_section-' + med_id + '">\n\
                                <div class = "form-group medicine_sect col-md-2"><div class=col-md-12>\n\ <label> Medicine </label>\n\ </div>\n\
                                    <div class=col-md-12>\n\
                                        <input class = "medi_div" name = "med_id[]" value = "' + med_name + '" placeholder="" required>\n\
                                        <input type="hidden" class = "medi_div" id="med_id-' + id + '" name = "medicine[]" value = "' + med_id + '" placeholder="" required>\n\
                                    </div>\n\
                                </div>\n\ \n\
                                <div class = "form-group medicine_sect col-md-2" ><div class=col-md-12>\n\
                                    <label>Dosage </label>\n\
                                </div>\n\
                                <div class=col-md-12><input class = "state medi_div" name = "dosage[]" value = "" placeholder="100 mg" required>\n\</div>\n\ </div>\n\ \n\
                                    <div class = "form-group medicine_sect col-md-2"><div class=col-md-12>\n\
                                        <label>Frequency </label>\n\
                                    </div>\n\
                                <div class=col-md-12><input class = "potency medi_div sale" id="salee' + count + '" name = "frequency[]" value = "" placeholder="1 + 0 + 1" required>\n\
                                </div>\n\</div>\n\ \n\
                                <div class = "form-group medicine_sect col-md-2"><div class=col-md-12>\n\<label>\n\Days \n\</label>\n\</div>\n\<div class=col-md-12><input class = "potency medi_div quantity" id="quantity' +
                                count + '" name = "days[]" value = "" placeholder="7 days" required>\n\
                                </div>\n\ </div>\n\ \n\ \n\
                                    <div class = "form-group medicine_sect col-md-2"><div class=col-md-12>\n\<label>\n\Instruction \n\
                                        </label>\n\
                                    </div>\n\
                                <div class=col-md-12><input class = "potency medi_div quantity" id="quantity' + count + '" name = "instruction[]" value = "" placeholder="After Food" required>\n\
                            </div>\n\
                            </div>\n\
                            \n\
                            \n\
                            <div class="del col-md-1"></div>\n\
                        </section>'
                        );
                    }
                });
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            $("#patientchoose").select2({
                placeholder: "Search Patient Name / ID",
                allowClear: true,
                // ajax: {
                //     url: "patient/getPatientinfo",
                //     type: "post",
                //     dataType: "json",
                //     delay: 250,
                //     data: function (params) {
                //         return {
                //             searchTerm: params.term, // search term
                //         };
                //     },
                //     processResults: function (response) {
                //         return {
                //             results: response,
                //         };
                //     },
                //     cache: true,
                // },
            });
            $("#doctorchoose").select2({
                placeholder: "Search Doctor Name / ID",
                allowClear: true,
                // ajax: {
                //     url: "doctor/getDoctorinfo",
                //     type: "post",
                //     dataType: "json",
                //     delay: 250,
                //     data: function (params) {
                //         return {
                //             searchTerm: params.term, // search term
                //         };
                //     },
                //     processResults: function (response) {
                //         return {
                //             results: response,
                //         };
                //     },
                //     cache: true,
                // },
            });
            $("#doctorchoose1").select2({
                placeholder: "Search Doctor Name / ID",
                allowClear: true,
                // ajax: {
                //     url: "doctor/getDoctorInfo",
                //     type: "post",
                //     dataType: "json",
                //     delay: 250,
                //     data: function (params) {
                //         return {
                //             searchTerm: params.term, // search term
                //         };
                //     },
                //     processResults: function (response) {
                //         return {
                //             results: response,
                //         };
                //     },
                //     cache: true,
                // },
            });
        });
    </script>

    <script>
        $(document).ready(function () {
            // $(".flashmessage").delay(3000).fadeOut(100);
            // $("#my_select10").select2();
            $("#my_select1").select2({
                multiple: true,
                placeholder: "Medicine",
                allowClear: true,
                closeOnSelect: true,
                // ajax: {
                //     url: "medicine/getMedicinenamelist",
                //     dataType: "json",
                //     type: "post",
                //     delay: 250,
                //     data: function (params) {
                //         return {
                //             searchTerm: params.term, // search term
                //             page: params.page,
                //         };
                //     },
                //     processResults: function (data, params) {
                //         // parse the results into the format expected by Select2
                //         // since we are using custom formatting functions we do not need to
                //         // alter the remote JSON data, except to indicate that infinite
                //         // scrolling can be used
                //         params.page = params.page || 1;

                //         return {
                //             results: data,
                //             newTag: true,
                //             pagination: {
                //                 more: params.page * 1 < data.total_count,
                //             },
                //         };
                //     },
                //     cache: true,
                // },
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            $("#my_select1_disabled").select2({
                placeholder: "Medicine",
                multiple: true,
                allowClear: true,
                // ajax: {
                //     url: "medicine/getMedicineListForSelect2",
                //     type: "post",
                //     dataType: "json",
                //     delay: 250,
                //     data: function (params) {
                //         return {
                //             searchTerm: params.term, // search term
                //         };
                //     },
                //     processResults: function (response) {
                //         return {
                //             results: response,
                //         };
                //     },
                //     cache: true,
                // },
            });
        });
    </script>


@endsection