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


@section('content')

@include($view . '.modal')
    <div class="row">

               @include('patients.appointments.profile.profile')

                <div class="col-sm-12">
                          @include('patients.appointments.profile.menu')
                    <div class="card">
 <div class="card-header">
                            <div class="d-flex justify-content-between">
                                <h5>{{ $title }} {{ __('list') }}</h5>
                                @if(!$medical_report)
                                @can($access . '-create')
                                    <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
                                @endif
                            </div>
                        </div>

                        <div class="card-body">
                            <!-- [ Data table ] start -->
                            <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>Diagnosis</th>
                                            <th>Treatment</th>
                                            <th>Recommendation</th>
                                            <th>Created by</th>
                                            <th>{{ __('messages.action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                            <!-- [ Data table ] end -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- [ Main Content ] end -->
        </div>
    </div>
    <!-- End Content-->

@endsection


@section('page_js')


    <script>

document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll(".category-checkbox").forEach(function (categoryCheckbox) {
            categoryCheckbox.addEventListener("change", function () {
                const categoryId = this.dataset.category;
                const itemCheckboxes = document.querySelectorAll('.item-checkbox[data-category="' + categoryId + '"]');
                itemCheckboxes.forEach(cb => cb.checked = this.checked);
            });
        });
    });


document.addEventListener('DOMContentLoaded', function () {
    const prescriptionBody = document.getElementById('prescription-body');
    const addRowBtn = document.getElementById('addPrescriptionRow');

function initSelect2() {
    $('.modalselect2').select2({
        width: '100%',
        dropdownAutoWidth: true,
        dropdownParent: $('#modal .modal-content')
    });
}

    function createRow() {
        const row = document.createElement('tr');

        row.innerHTML = `
            <td>
                <select name="medicine[]" class="form-control modalselect2">
                    <option value=""> -- Select -- </option>
                    @foreach ($prescriptions as $item)
                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                    @endforeach
                </select>
            </td>

            <td>
                <input type="number" name="quantity[]" class="form-control" placeholder="Qty">
            </td>

            <td>
                <select name="frequency[]" class="form-control modalselect2">
                    <option value=""> -- Select -- </option>
                    @foreach ($frequencies as $item)
                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                    @endforeach
                </select>
            </td>

            <td>
                <input type="number" name="days[]" class="form-control" min="1" placeholder="Days">
            </td>

            <td class="text-center">
                <button type="button" class="btn btn-danger btn-sm remove-row">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
        `;

        prescriptionBody.appendChild(row);
        initSelect2();
    }

    addRowBtn.addEventListener('click', createRow);

    document.addEventListener('click', function(e) {
        if (e.target.closest('.remove-row')) {
            e.target.closest('tr').remove();
        }
    });

    initSelect2(); // for pre-loaded rows
});

        const dt = (data) => {
            $("#table").DataTable({
                ajax: {
                    method: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        ...data
                    },
                    url: '{{ route($route . '.data', $id) }}',
                    dataSrc: ""
                },
                destroy: true
            });
        }
        dt()



        $("#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")
            }
        })



        const customfn = (data) => {
            console.log(data)
            if (data?.patient) {
                $("#patient_id").html(
                    `<option value='${data.patient.id}'>${data.patient.name}</option>`)
            }
        }
    </script>
@endsection