@extends('layouts.master')
@section('title', $title)


@section('content')

    <div class="row">

        @include('patient_mangement.appointment.profile.profile')

        <div class="col-12 order-0 order-md-1">
            @include('patient_mangement.appointment.profile.menu')
            <div class="card mb-4">
                <div class="card-header">
                    <div class="d-flex justify-content-between">
                        <h5>{{ $title }}</h5>
                        @can($access . '-create')
                            @include($view . '.modal')
                            <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal">
                                <i class="fas fa-plus mx-2"></i>
                                {{ $title }}</a>
                        @endcan
                    </div>
                </div>

                <div class="card-body">
                    <div class="table-responsive">
                        <table id="table" class="display table nowrap table-striped table-hover" style="width:100%">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Date</th>
                                    <th>Total</th>
                                    <th>{{ __('messages.action') }}</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>


            </div>


        </div>

    </div>
    </div>
@endsection



@section('page_js')
    <script>
        var triggeredElement = null;

        $(function() {


            $("#form").on("submit", async function(e) {
                e.preventDefault()
                data = objectifyForm($(this).serializeArray())
                btn = $(this).find("button[type='submit']")
                console.log(btn)
                btn.prop("disabled", true)
                $("#spinners").removeClass("d-none")
                let res = await client($(this), '{{ route($route . '.create') }}', 'post', data)
                $("#spinners").addClass("d-none")
                btn.prop("disabled", false)
                if (res && res.status == 200) {
                    $("#table").DataTable().ajax.reload()
                    Swal.fire({
                        text: res.data,
                        icon: "success",
                        buttonsStyling: !1,
                        confirmButtonText: "Ok, got it!",
                        customClass: {
                            confirmButton: "btn btn-primary",
                        },
                    });
                    $("#modal").modal("toggle")

                    // setTimeout(() => {
                    //     location.reload()
                    // }, 500);
                }
            })

            $("#drug_form").on("submit", async function(e) {
                e.preventDefault()
                data = objectifyForm($(this).serializeArray())
                btn = $(this).find("button[type='submit']")
                console.log(btn)
                btn.prop("disabled", true)
                $("#spinners").removeClass("d-none")
                let res = await client($(this), '{{ route($route . '.new_drug') }}', 'post', data)
                $("#spinners").addClass("d-none")
                btn.prop("disabled", false)
                if (res && res.status == 200) {
                    $(triggeredElement).append(`<option value='${res.data.id}' selected>${res.data.name}</option>`)
                    $("#new_drug").modal("toggle")
                }
            })


            var table = $("#table").DataTable({
                ajax: {
                    method: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        "id": "{{ $appointment?->id }}"
                    },
                    url: '{{ route($route . '.data') }}',
                    dataSrc: ""
                },
            });

            async function format(id) {
                let table = `
                    <table id='table-request_info' class="table display" style='width: 90%; margin: 5px 51px 5px 34px;'>
                        <thead>
                            <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0 fw-bold text-muted bg-light ">
                                <th class="rounded-start">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#</th>
                                <th>Drug</th>
                                <th>Quantity</th>
                                <th>Frequency</th>
                                <th>Dose</th>
                                <th>Route/Instruction</th>
                            </tr>
                        </thead>
                        <tbody>`
                // console.log(d)
                await $.post("{{ route($route . '.prescription_details') }}", {
                        "id": id,
                        "_token": "{{ csrf_token() }}"
                    })
                    .done((data) => {
                        let counter = 1
                        data.forEach((el) => {
                            table += "<tr>"
                            table +=
                                `<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${counter} </td>`
                            table += `<td> ${el.drug} </td>`
                            table += `<td> ${el.quantity} </td>`
                            table += `<td> ${el.frequency} </td>`
                            table += `<td> ${el.dose} </td>`
                            table += `<td> ${el.dosage_form} </td>`
                            table += "</tr>"
                            counter++;
                        })
                        table += "</tbody>"
                        table += "</table>"
                    })
                    .fail((error) => {
                        console.error(error)
                    })
                return table
            }


            $('#table tbody').on('click', 'span.details-control', async function() {
                var tr = $(this).parents('tr');
                var row = table.row(tr);
                let id = $(this).data("id")
                if (id) {
                    if (row.child.isShown()) {
                        row.child.hide();
                        tr.removeClass('shown');
                    } else {
                        d = await format(id)
                        row.child(d).show();
                        tr.addClass('shown');
                    }
                }
            });
        })

        const add = (drug = '', quantity = '', frequency = '', dose = '', dosage_format = '') => {
            // console.log(label)
            // let counter = parseInt(tr.closest("tr").find(".counter").text()) + 1
            counter = $(".counter").length + 1
            let elements = $("#elements")

            drugs = @json($drugs);

            $("select.drug").each((i, obj) => {
                drugs.forEach((el) => {
                    if (el.id == $(obj).val()) {
                        delete drugs[drugs.indexOf(el)]
                    }
                })
            })

            // let idsToRemove = 2;
            // drugs = drugs.filter(obj => obj.id !== idToRemove);

            drugselect =
                `<select name="drug[]" class="form-control modalselect2 drug input"> <option value=""> -- Select -- </option>`
            drugselect += `
             <option value="New"> Add new drug </option>
            `
            drugs.forEach(element => {
                drugselect +=
                    ` <option value="${element.id}" ${element.id == drug ? "selected" : ""}> ${element.description} </option>`
            });

            dosages = @json($dosages);
            dosageselect =
                `<select name="frequency[]" class="form-control modalselect2 frequency input"> <option value=""> -- Select -- </option>`
            dosages.forEach(element => {
                dosageselect +=
                    ` <option value="${element.id}" ${element.id == frequency ? "selected" : ""}> ${element.name} </option>`
            });

            dosage_formats = @json($dosage_format);
            dosage_formatselect =
                `<select name="dosage_form[]" class="form-control modalselect2 dosage_form input"> <option value=""> -- Select -- </option>`
            dosage_formats.forEach(element => {
                dosage_formatselect +=
                    ` <option value="${element.id}" ${element.id == dosage_format ? "selected" : ""}> ${element.name} </option>`
            });


            let nw = `<tr class='dynamic_trs'>
                        <td class="counter">${counter}</td>
                        <td>
                                        <div class="form-group">
                                           ${drugselect}
                                            <small class="text-danger errors"></small>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <input type="text" class="form-control quantity input"
                                                name="quantity[]" placeholder="Quantity" value="${quantity}">
                                            <small class="text-danger errors"></small>
                                        </div>
                                    </td>
                                    <td scope="row">
                                        <div class="form-group">
                                            ${dosageselect}
                                            <small class="text-danger errors"></small>
                                        </div>
                                    </td>

                                    <td scope="row">
                                        <div class="form-group">
                                            <input type="text" class="form-control dose" name="dose[]" placeholder="Dose" value="${dose}">
                                            <small class="text-danger errors"></small>
                                        </div>
                                    </td>

                                    <td scope="row">
                                        <div class="form-group">
                                            ${dosage_formatselect}
                                            <small class="text-danger errors"></small>
                                        </div>
                                    </td>
                        <td> <button type="button" name="" id=""
                                class="btn btn-sm btn-success btn-lg btn-block" onclick='add(this)'>+</button><button
                                type="button" name="" id=""
                                class="btn btn-sm btn-danger btn-lg btn-block" onclick='remove(this)'>x</button> </td>
                    </tr>`
            elements.append(nw)
            let select2 = $('.modalselect2')
            if (select2.length) {
                select2.each(function() {
                    var $this = $(this);
                    $this.wrap('<section class="position-relative"></section>').select2({
                        placeholder: 'Select value',
                        dropdownParent: $this.parent()
                    });
                });
            }

        }

        const remove = (element) => {
            $(element).parent().parent().remove()
            $(".counter").each((i, obj) => {
                $(obj).text((i + 1))
            })
        }

        const Repeater = (data) => {
            console.log(data)
            data.forEach((data, index) => {
                console.log(data)
                if (index == 0) {
                    $(".drug").val(data.drug).trigger("change")
                    $(".dose").val(data.dose).trigger("change")
                    $(".frequency").val(data.frequency).trigger("change")
                    $(".dosage_form").val(data.dosage_form).trigger("change")
                    $(".quantity").val(data.quantity)
                } else {
                    add(data.drug, data.quantity, data.frequency, data.dose, data.dosage_form)
                }

            })
        }

        const print = (url) => {
            PopupWin(url, "Print prescription", 1000, 600);
        }

        $("#modal").on("hide.bs.modal", function() {
            $(".dynamic_trs").remove()
        })

        $(document).on("change", ".drug", function() {
            if ($(this).val() == "New") {
                triggeredElement = $(this)
                $("#new_drug").modal("toggle")
                $(this).val('').trigger("change")
            }
        })
    </script>
@endsection