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

@section('content')
    <div class="row">
        @include('patients.appointments.profile.profile')

        <div class="col-xl-12 col-lg-12 col-md-12 order-0 order-md-1">
            @include('patients.appointments.profile.menu')

            <div id="his_dom" class="row g-5">
                <div
                    style="display: flex;
            align-items: center;
            justify-content: center;
            height: calc(100vh - 531px);">
                    <div class="card">

                        <div class="card-header">

                            First vist 
                        </div>

                    </div>
                </div>



            </div>
        </div>
        <!--/ User Content -->
    </div>
@endsection


@section('page_js')
    <script>
$(function () {

    const get_data = async () => {
        let res = await _client("{{ route($route . '.profile_history') }}", "post", {
            id: "{{ $id }}"
        });

        if (res && res.status == 200) {

            let html = "";

            if (res.data.Appointment) {
                const dt = res.data.Appointment;

                dt.forEach((el, index) => {

                    const date = new Date(el.date_time);
                    const options = { day: 'numeric', month: 'short', year: 'numeric' };
                    const formattedDate = new Intl.DateTimeFormat('en-US', options).format(date);

                    const report = el.medical_report ?? null;

                    // -------------------------------
                    // CASE QUESTIONS (FIXED HERE)
                    // -------------------------------
                    let questionsHTML = "";
                    if (report?.questions?.length) {
                        questionsHTML = report.questions.map(q => {
                            const questionName = q.casequestions?.[0]?.name ?? "Unknown Question";
                            const categoryName = q.casequestions?.[0]?.cat?.name ?? "";
                            return `
                                <li class="mb-1">
                                    <b>${questionName}</b>
                                    <span class="text-muted small d-block">${categoryName}</span>
                                </li>
                            `;
                        }).join("");
                    } else {
                        questionsHTML = "<li>No questions recorded</li>";
                    }

                    // -------------------------------
                    // PRESCRIPTIONS
                    // -------------------------------
                    let prescriptionHTML = "";
                    if (report?.prescriptions?.length) {
                        prescriptionHTML = report.prescriptions.map(p => `
                            <tr>
                                <td>${p.prescription.name}</td>
                                <td>${p.quantity}</td>
                                <td>${p.freq.name}</td>
                                <td>${p.days}</td>
                            </tr>
                        `).join("");
                    } else {
                        prescriptionHTML = `
                            <tr><td colspan="3" class="text-center">No prescriptions</td></tr>
                        `;
                    }

                    // -------------------------------
                    // BUILD CARD HTML
                    // -------------------------------
                    html += `
                    <div class="col-xl-12">

                        <div class="card shadow-sm mb-4">
                            <div class="card-header bg-primary text-white d-flex justify-content-between">
                                <span class="h6 mb-0">Visit #${dt.length - index}</span>
                                <span>${formattedDate}</span>
                            </div>

                            <div class="card-body">

                                <h5 class="mb-3 text-primary">Appointment Summary</h5>
                                <div class="row mb-4">
                                    <div class="col-md-4"><b>Doctor:</b> ${el.usr?.name ?? 'N/A'}</div>
                                    <div class="col-md-4"><b>Comment:</b> ${el.comment ?? 'N/A'}</div>
                                    <div class="col-md-4"><b>Status:</b> ${el.status}</div>
                                </div>

                                <h5 class="mb-3 text-primary">Medical Report</h5>
                                ${
                                    report ? `
                                        <p><b>Diagnosis:</b> ${report.diagnosis ?? 'N/A'}</p>
                                        <p><b>Treatment:</b> ${report.treatment ?? 'N/A'}</p>
                                        <p><b>Recommendation:</b> ${report.recommendation ?? 'N/A'}</p>
                                    ` : `<p class="text-muted">No medical report for this visit.</p>`
                                }

                                <h6 class="mt-4 text-primary">Case Questions</h6>
                                <ul>${questionsHTML}</ul>

                                <h6 class="mt-4 text-primary">Prescriptions</h6>
                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Medicine</th>
                                                <th>Quantity</th>
                                                <th>Frequence</th>
                                                <th>Days</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            ${prescriptionHTML}
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                        </div>

                    </div>`;
                });

                if (html !== "") {
                    $("#his_dom").html(html);
                }
            }
        }
    };

    get_data();
});

    </script>
@endsection