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


@section('content')
    <div class="row">
        <div class="col-12 order-0 order-md-1">
            <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-info" data-bs-toggle="modal" data-bs-target="#filter_modal">
                            <i class="fas fa-filter mx-2"></i>
                            Filter</a>
                        {{-- <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>Patient</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() {
            var table;
            const dt = (data) => {
                table = $("#table").DataTable({
                    ajax: {
                        method: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            ...data
                        },
                        url: '{{ route($route . '.data') }}',
                        dataSrc: ""
                    },
                    destroy: true
                });
            }

            dt({})



            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>Days</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.days} </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 print = (url) => {
            PopupWin(url, "Print prescription", 1000, 600);
        }
    </script>
@endsection